/*
    ELIMINAR SCROLL BAR
**/
::-webkit-scrollbar {
    display: none;
    
}

.body{
    background-color: lightgray;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

body, html {
    background-color: lightgray;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

/* 
    Diseño del header menu
    Establecemos el tamaño del contenedor
    Utilizaremos una grid para acomodar cada componente de acuerdo a los espacios
    Recordar siempre utilizar unidades de medida en porcentajes
**/

.header{
    position: relative;
    display: grid;
    grid-template-columns: 28% 42% 30%;
    grid-template-rows: 154px 1fr;
    background-image: url(../assets/Fondo_GLP1.jpg);
    background-size: auto;
    background-position-y: 73%;
    background-position-x: 1px;
    position: relative;

}

.direction-logo{

    display: flex;
    justify-content: start;
    align-items: center;

}


.degrade{
    background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(0, 153, 255, 0.4));
    z-index: 10;
    position: absolute !important;
    top: 0;
    width: -webkit-fill-available;
    height: 100%;
}

.cont{
    position: relative;
    object-fit: cover;
}

/* 
    Logo superior izquierdo DESAFÍO GLP-1
**/

.container2_father{
    display: flex;
    margin: 0;
    padding: 0;
    max-width: 100%;
    background: #337dc9;
}

.row_father{
    width: 100%;
    margin: 0;
}

.container_father_logos{
    display: flex;
    gap: 7%;
    padding-top: 6%;
    padding-bottom: 6%;
    padding-left: 6%;
    align-items: center;
}

.container_father_info_user{
    display: flex;
    flex-direction: column;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-right: 7%;
    gap: 22px;
}

.container_info_user{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.container_welcome_user{
    text-align: end;
}

.welcome_text_home{
    color: white;
    font-size: 0.8em;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.container_description_progress{
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.container_welcome_text_user{
    display: flex;
}

.style_logo_glp1{
    width: 140px;
}

.style_logo_impulsando{
    width: 177px;
}

.style_logo_sciennce{
    width: 167px;
}

.text_welcome{
    font-size: 0.73em;
    margin: 0;
    color: white;
    font-weight: 100;
}

.container_progress_bar{
    display: flex;
}

.img-logo-glp-1{
    width: 31%;
    margin-left: 5%;
    margin-top: 3%;
}

.container-general{
    display: grid;
    width: 100%;
    grid-template-rows: 100%;
}

.icons-progres-bar{
    display: grid;
    grid-template-rows: 77%;
    z-index: 100;

}

.icons{
    display: grid;
    grid-template-columns: 90% 10%;
    /* gap: 2.5em; */
    margin-right: 4%;
    grid-template-rows: 99%;
    align-content: center;
    justify-items: center;
    margin-top: 7px;

}

#div_user{
    display: grid;
    /* gap: 38px; */
    color: white;
    /* margin-top: 7px; */
    align-items: baseline;
    width: 100%;
    grid-template-columns: 100%;
    justify-items: center;
    

}

#cont_user{
    display: grid;
    width: 166px;
    grid-template-columns: 109% 22% 38%;
    align-items: baseline;
    justify-items: center;
}

#nam_user{
    color: white;
    font-size: 0.8em;
    font-weight: 300;
    margin: 0;
    letter-spacing: 0.5px;
}

.progres-bar-container{
    display: grid;
    grid-template-columns: 74%;
    justify-content: end;
    margin-right: 5%;

}

.logo-container{
    display: grid;
    grid-template-columns: 100%;
    z-index: 100;
}

.logo{
    display: grid;
    grid-template-columns: 100%;
    align-content: baseline;
}

.container-img-logo{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: min-content;
    margin-left: 4%;
    margin-top: 4%;
}

.imgIcons{
    height: 23px;
}

.options-menu{
    /* display: grid;
    grid-template-rows: 62%;
    z-index: 100; */
    display: flex;
    padding-right: 35px;
}

.header-links{
    color: white;
    text-decoration: none;
    font-size: 0.7rem;
    border: none;
    background-color: unset;
}

.header-links-menu{
    color: white;
    text-decoration: none;
    font-size: 0.7rem;
    display: inline-block;
    position: relative;
    display: flex;
    width: 66px;
}

.menu-overlay_2{
    display: none;
}

.opt-modul{
    display: none;
    position: absolute;
    width: 100%;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgb(0, 0, 0, 0.2);
}

.header-links-menu:hover .opt-modul{
    display: block;
    background-color: rgb(10, 71, 163);
}

.opt-modul a {
    display: block;
    color: lightgrey;
    padding: 5px;
    text-decoration: none;
}

.opt-modul a:hover {
    color: lightgrey;
    background-color: rgb(6, 169, 17);
}

.text-menu{
    /* display: grid;
    grid-template-columns: 10% 14% 11% 14% 16%;
    align-items: end;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, rgb(4, 78, 128), lightblue);
    border-image-slice: 1;
    width:100%;
    border-width: 1px; */
    display: flex;
    gap: 19px;
}

.name{
    display: grid;
    grid-template-columns: 43% 58%;
    align-items: end;

}

#name{
    font-size: 1.4rem;
    color: white;
}

.options-name{
    display: grid;
    grid-template-columns: 12% 21%;
    grid-template-rows: 93%;
    align-items: baseline;
    justify-content: center;
    margin-top: -31%;
    height: 5vh;
    margin-left: -2.5%;
}

.your-progres{
    font-size: 1rem;
    color: white;
    font-weight: 400;
}

.progress {
    border-radius: 0%;
    height: 77%;
    width: 233px;
}

.progress-bar_1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: #1100d3;
    transition: var(--bs-progress-bar-transition);
    width: 25%;
  }

  .progress-bar_2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: #1100d3;
    transition: var(--bs-progress-bar-transition);
    width: 50%;
  }

  .progress-bar_3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: #1100d3;
    transition: var(--bs-progress-bar-transition);
    width: 75%;
  }

  .progress-bar_4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: #1100d3;
    transition: var(--bs-progress-bar-transition);
    width: 100%;
  }

/*
    Titulo modulos
**/

.about{
    text-align: center;
}

.name_module{
    display: grid;
    width: 70%;
    margin: 1.1% auto;
    gap: 1em;
    overflow: hidden;
}

.titles{
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 0.5%;
    text-align: center;

}

h2{
    font-size: 0.7rem;
    color: gray;
    font-weight: bold;
}

.container-module{
    width: 100%;
}

.color{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: -1%;
    text-align: center;

}

#col_bar{
    font-size: 0.5rem;
    color: rgba(4, 207, 17, 0.509);
    font-weight: bold;
    background: linear-gradient(to right, rgba(4, 207, 17, 0.509), rgb(9, 176, 214));
}

#color_bar_1{
    font-size: 0.5rem;
    color: lightgray;
    font-weight: bold;
    background: lightgray;
}

#color_bar_2{
    font-size: 0.5rem;
    color: rgba(4, 207, 17, 0.509);
    font-weight: bold;
    background: linear-gradient(to right, rgba(4, 207, 17, 0.509), rgb(9, 176, 214));
}

#color_bar_2_1{
    font-size: 0.5rem;
    color: lightgray;
    font-weight: bold;
    background: lightgray;
}

#color_bar_3{
    font-size: 0.5rem;
    color: rgba(4, 207, 17, 0.509);
    font-weight: bold;
    background: linear-gradient(to right, rgba(4, 207, 17, 0.509), rgb(9, 176, 214));
}

#color_bar_3_2{
    font-size: 0.5rem;
    color: lightgray;
    font-weight: bold;
    background: lightgray;
}

#color_bar_4{
    font-size: 0.5rem;
    color: rgba(4, 207, 17, 0.509);
    font-weight: bold;
    background: linear-gradient(to right, rgba(4, 207, 17, 0.509), rgb(9, 176, 214));
}

/*
    PRIMERA COLUMNA ------- Contenido del modulo
**/

.full-container{
    margin-top: -2.7%;
    background: linear-gradient(to bottom right, rgb(73, 121, 198), rgb(0, 27, 64));
}

.content-module{
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    
}

#percentage{
    font-size: 1.2rem;
    color: white;
    margin-top: 14%;
    margin-left: 6%;
    text-align: initial;
    
}

.color2{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 3%;
    text-align: center;
    width: 197%;
    margin-left: 6%;


}

#line{
    font-size: 0.7rem;
    color: rgb(10, 71, 163);
    font-weight: bold;
    background: rgb(10, 71, 163);
}

#percentage-number{
    font-size: 3rem;
    color: white;
    margin-top: -2%;
    margin-left: 6%;
    text-align: initial;
    
}

/*
    SEGUNDA COLUMNA ----- DONA
**/

.grafic{
    width: 150px;
    
}

#grafica{
    display: block;
    width: 134px;
    height: 145px;

    
}

#donut{
    width: 300px;
    height: 300px;
}

/*
    TERCERA COLUMNA --- DESCRIPCIÓN MODULO
**/

#description{
    font-size: 1rem;
    color: white;
    margin-top: 14%;
    margin-left: 6%;
    text-align: initial;
    display: table-row;

    
}

#description-text{
    font-size: 1rem;
    color: white;
    text-align: left;
    display: grid;
    width: 86%;
    
}

.third-column{
    margin-top: 13%;

    
}

.button-continue-module{
    border: none;
    color: white;
    background-color: blue;
    padding: 1.5% 20%;
    margin-top: 6%;
    margin-left: 0.1%;
    display: grid;
    width: 92%;
}

/*
    CATEGORIAS MODULO
**/

.categories-module{ 
    display: grid;
    gap: 0.5em;
    grid-template-columns: 15% 15% 15% 15%;
    margin-top: 16px;
    text-align: center;
    margin-bottom: 18px;
    justify-content: center;

}

.chapters{
    width: 98%;
    grid-row: span 2;
    height: 23vh;
    margin-left: 6%;
    background: linear-gradient(#f96d09, #be2546);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.images-sections{
    width: 29%;
    margin-top: 6%;
    margin-bottom: 5%;
}

.images-sections2{
    width: 29%;
    margin-top: 6%;
    margin-bottom: 5%;
}

.images-sections3{
    width: 18%;
    margin-top: 6%;
}

#amount{
    font-size: 2rem;
    color: white;
    font-weight: 400;
}

#name-type{
    font-size: 0.6rem;
    color: white;
    font-weight: 600;
    margin: 0;
}

#action{
    font-size: 0.6rem;
    color: white;
    font-weight: 500;
    display: none;
}

.podcast{
    width: 98%;
    grid-row: span 2;
    height: 23vh;
    margin-left: 6%;
    background: #a53b45;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.caso-clinico{
    width: 98%;
    grid-row: span 2;
    margin-left: 6%;
    height: 23vh;
    background: linear-gradient(#071a6d, #050c4a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quiz{
    width: 98%;
    grid-row: span 2;
    margin-left: 6%;
    height: 23vh;
    background: linear-gradient(#43b2d0, #4479cb);
    display: grid;
    align-items: baseline;
    justify-items: center;
}

.satisfaction{
    width: 226%;
    height: 82%;
    margin-left: 6%;
    margin-top: 20%;
    background: linear-gradient(rgb(244, 229, 229), rgb(104, 103, 103));
    display: grid;
    align-items: baseline;
    justify-items: center;
    grid-template-rows: 34%;
}

.satisfaction-container{
    display: grid;
    grid-template-columns: 63%;
    justify-content: center;
    justify-items: center;
    margin-top: -3%;
}

#satisfaction-text{
    font-size: 0.9rem;
    color: white;
    margin-bottom: auto;
    justify-items: center;
}

#action2{
    font-size: 1rem;
    color: white;
    font-weight: bold;
}

#redirection{
    text-decoration: none;
}

/*
    INFORMACIÓN DEL MODULO
**/

.information{
    width: 100%;
    background: linear-gradient(to right, rgb(0, 153, 255), lightblue);
}

.info-body{
    display: grid;
    width: 82%;
    margin: 1.1% auto;
    grid-template-rows: auto 1fr;
}

#title{
    color: white;
    font-size: 1.4rem;
    text-align: initial;

}

#text-information-module{
    color: white;
    font-size: 0.8rem;
    text-align: justify;
}

.infoG{
    display: grid;
    grid-template-rows: 93%;
    margin-top: 7%;
}

.text{
    display: grid;
    grid-template-columns: 85%;
    grid-template-rows: 14%;
    margin-top: 5%;

}

.info-module{
    margin-top: 5%;
    background: linear-gradient(to right, #5074bf, #4d9ecb);
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    max-height: 100%;
    

}

.info-module-home{
    margin-top: 3%;
    background: linear-gradient(to right, #5074bf, #4d9ecb);
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    max-height: 100%;
}

.pictures-container{
    display: grid;
    grid-template-columns: 32% 32% 32%;
    margin-top: 2%;
    padding: 2%;
    gap: 1.1em;
    text-align: left;

}

#doctor{
    width: 103%;

}

.line{
    color: white;
    background-color: white;
    height: 7px;
    margin: 1rem 0;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 1;
    width: 117.7%;

}

.expositors{
    background-color: darkgrey;
    display: grid;
    height: 50vh;
    overflow: auto;
}

#title-images-expositors{
    font-size: 1.5rem;
}

.images-expositors{
    margin-left: 2%;
    margin-top: 2%;
}

.target{
    display: grid;
    background-color: white;
    grid-template-columns: 52% 48%;
    justify-content: space-evenly;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
    border-image-slice: 1;
    width:100%;
    border-width: 8px;
    text-align: left;

}

.info-target{
    display: grid;
    justify-items: start;
    grid-template-rows: min-content;
    margin-top: 10%;


}

#title-target{
    font-size: 1rem;
    color: black;
    font-weight: bold;

}

#description-doctor{
    font-size: 0.6rem;

}

.img-target{
    display: grid;
    align-items: end;
    justify-items: center;
}



#line2{
    color: white;
    background-color: white;
    height: 7px;
    margin: 1rem 0;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 1;
    width: 117.7%;
}

/*
    FOOTER
**/

.footer{
    margin-top: 3%;
    background-color: black;
    display: grid;
    height: 13vh;
  

}

.footer-container{
    display: grid;
    align-content: center;
    grid-template-columns: 26% 32% 12% 30%;
    text-align: inherit;
    gap: 3.5em;

}

.logo-footer{
    display: grid;
    grid-template-columns: 100%;

}

.img-logo-footer{
    width: 31%;
    margin-left: 24%;
    margin-top: 3%;


}

#legal{
    font-size: 0.5rem;
    margin-top: 2%;
    color: white;

}

#code-legal{
    text-align: inherit;
    margin-top: 12%;
    color: white;
    font-weight: 300;

}

.logo-novo-nordisk{
    width: 36%;

}

.logo-novo{
    display: grid;
    grid-template-columns: auto;
    width: 51%;


}

/*
    LIVES
**/

.tittle-live{
    display: grid;
    margin-top: 1%;
    background: linear-gradient(to right, rgb(0, 153, 255), rgb(121, 202, 228));
    height: 47px;
    margin-left: 1%;
    margin-right: 1%;
}

.sessions{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}

.tittle-name{
    display: grid;
    margin-left: 1%;
}

#QA{
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.icon-live{
    display: grid;
    justify-items: end;
    margin-right: 2%;
}

#icon-live{
    width: 4%;
}

/*
    CONTAINER-VIDEO-STREAM-CHAT
**/

.container-stream{
    display: grid;
    margin-top: 2%;
    margin-left: 1%;
    margin-right: 1%;
}

.cont-stream{
    display: grid;
    grid-template-columns: 60% 37%;
    gap: 2.5em;
}

.video-stream{
    display: grid;
}

#img-stream{
    width: 100%;
}

.chat-stream{
    display: grid;
    grid-template-rows: min-content;
}

.tittle-chat{
    display: grid;
    background: linear-gradient(to right, rgb(0, 153, 255), rgb(121, 202, 228));;
}

#tittle-chat{
    font-size: 1rem;
    color: white;
    font-weight: 400;
    margin-left: 2%;
    margin-top: 1%;
}

.chat-white{
    background-color: white;
}

#text-chat{
    font-size: 0.7rem;
    margin-top: 4%;
    margin-left: 2%;
    color: darkgray;
}

/*
    Ventana de Contactanos
**/

.body header main{
	padding: 0 20px;
	margin-bottom: 20px;
	height: 40px;
	line-height: 40px;
	border: none;
	color: #fff;
	background: #5E7DE3;
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	cursor: pointer;
	transition: .3s ease all;
	cursor: pointer;
}

#tittle-contact{
    color: white;
    text-align: initial;
    font-size: 1rem;
}

#btn-abrir-popup{
    display: none;
}

.body header main #btn-abrir-popup:hover {
	background: rgba(94,125,227, .9);
}

.overlay {
	background: rgba(0,0,0,.3);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	display: flex;
	visibility: hidden;
}

.overlay.active {
	visibility: visible;
}

.contenedor-inputs{
    text-align: justify;
}

.popup {
	background: #1f64b3;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    padding: 20px;
    text-align: center;
    height: 66%;
    width: 31%;
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
}

.popup .btn-cerrar-popup {
	font-size: 16px;
	line-height: 16px;
	display: block;
	text-align: right;
	transition: .3s ease all;
	color: #BBBBBB;
}

.popup .btn-cerrar-popup:hover {
	color: #000;
}

.popup h3 {
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 10px;
	opacity: 0;
}

.popup h4 {
	font-size: 0.7rem;
    font-weight: 300;
    opacity: 0;
    color: white;
}

#name-box-text{
    margin-top: 4%;
}

#message-input{
    height: 103px;
}

.popup form .contenedor-inputs {
	opacity: 0;
}

.popup form .contenedor-inputs input {
	width: 100%;
    margin-bottom: 4px;
    height: 31px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
    border: 1px solid #BBBBBB;
}

.popup form .btn-submit {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #03279b;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    transition: .5s ease all;
    margin-top: 9%;
    width: 100%;
    font-weight: bold;
}

.popup form .btn-submit:hover {
	background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active {	transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
.popup.active .btn-submit { animation: entradaInputs .8s ease .5s forwards; }

@keyframes entradaTitulo {
	from {
		opacity: 0;
		transform: translateY(-25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaSubtitulo {
	from {
		opacity: 0;
		transform: translateY(25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaInputs {
	from { opacity: 0; }
	to { opacity: 1; }
}

/*
    MASTER CLASS
**/

.master{
    display: grid;
    border-top: 2px solid transparent;
    border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
    border-image-slice: 1;
    border-width: 10px;
}

.container-master{
    display: grid;
    margin-left: 1%;
    margin-right: 1%;
}

.options-module{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 1%;
    gap: 0.4em;


}

#icons-module{
    width: 23px;
}

.master-option{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 7px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
    border-image-slice: 1;
    border-width: 7px;

}

.icon-box-module{
    display: grid;
    align-items: end;
    justify-items: end;
}

#name-option-module{
    margin-top: revert;
    margin-bottom: revert;
    font-weight: 500;
    color: black;
}

.tittle-master{
    margin-top: 12px;
    display: grid;
    background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(0, 153, 255, 0.4));
    height: 200%;

}

.tittle-module-master{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    margin-left: 1%;
    margin-right: 1%;
    gap: 14.5em;

}

#n-master{
    color: white;

}

#n-master-no{
    display: none;
}

.help{
    text-align: center;
}

.video-box{
    display: grid;
    margin-top: 5%;
    /* grid-template-rows: 65vh; */
    margin-left: 1%;
    margin-right: 1%;
  

}

.content-video{
    display: grid;
    grid-template-columns: 66% 32.7%;
    gap: 1em;

}

.video{
    display: grid;
    grid-template-rows: 0%;
}

#video{
    width: 100%;
}

.content{
    display: grid;
    grid-template-rows: min-content;
    background-color: white;
}

.c1{
    display: grid;
    grid-template-columns: 12% 86%;
    align-items: center;
    gap: 11px;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 5%;

}

#icons-module-video{
    width: 100%;

}

#img-content-of-curse{
    display: grid;
    align-items: end;


}

#content{
    margin-bottom: revert;
    margin-top: revert;
    font-weight: 800;
    font-size: 0.8em;
    color: black;
}

#play{
    width: 18px;
}

#point{
    width: 24px;
}

#name-video-section{
    display: grid;
    grid-template-columns: 8% 18% 64% 10%;
    background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(7, 98, 159, 0.943));
    height: 26px;
}

#play{
    width: 18px;
}

#point{
    width: 24px;
}

.videos-section{
    display: grid;
    margin-top: 3%;
    margin-left: 2%;
    margin-right: 2%;
}

body::-webkit-scrollbar{
   width: 10px;
}

body::-webkit-scrollbar-thumb{
   height: 80px;
   background: #375666;
   border: 8px solid transparent;
   border-radius: 12px;
}

body::-webkit-scrollbar-thumb:active{
    background: #003349;
}

body{
    font-family: sans-serif;
    background: #002333;
}

li{
    list-style: none;
}

.title{
    font-size: 0px;
}

.playlistBx{
    position: relative;
    height: 100%;
}

.playlist{
    /* position: absolute; */
    width: 100%;
    /* height: calc(100% - 40px); */
    overflow-y: scroll;
    height: auto;
}

.playlist::-webkit-scrollbar{
   width: 0px;
}

.playlistBx .row .AllLessons{
   display: block;
   text-align: left;
   color: #dcdee1;
   font-size: 15px;
   font-weight: 700;
   margin-left: 40px;
   line-height: 40px;
}

.playlist li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    color: #dcdee1;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 3%;
    background-color: #dbe3fa;
}

.playlist li:hover{
    border: 0.5px solid #375666;
}

.playlist li .row span{
    font-size: 12px;
    font-weight: 400;
    color: gray;
    text-decoration: none;
    display: inline-block;
    text-align: left;
}

.playlist li .row span::before{
    content: '\f01d';
    font-family: FontAwesome;
    color: gray;
    margin-right: 15px;
    font-size: 20px;
}

ul li.playing .row span::before{
    content: '\f28c';
    font-family: FontAwesome;
    color: #fff;
    margin-right: 15px;
    font-size: 20px;
}

.playlist li.playing .row span{
   color: #fff;
}

.playlist li span.duration{
    font-size: 15px;
    font-weight: 400;
    display: inline-block;
    color: #dcdee1;
    text-align: right;
}

.playlist li.playing{
    pointer-events: none;
    background: #255cd6;
}

ul{
    padding-left: 0;
}

.frame-container{
    display: grid;
    /* height: 18vh; */
}

#main-Video{
    display: grid;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
}

#play{
    display: grid;
    align-items: center;
    justify-items: center;
    margin-left: 16%;
}

#introduction{
    display: grid;
    align-items: center;
    justify-items: center;
}

#n-video{
    margin-bottom: initial;
}

#poin{
    display: grid;
    align-items: baseline;
    justify-items: end;
}

#point{
    width: 24px;
}

#vid{
    display: grid;
    align-items: center;
}

#n-video{
    color: white;
}

.expositors2{
    display: grid;
    background-color: rgb(11, 123, 215);
    margin-top: 3%;
    margin-left: 1%;
    margin-right: 1%;
}

#title-images-expositors2{
    font-size: 1.5rem;
    color: white;
}

.images-expositors2{
    margin-left: 2%;
    margin-top: 2%;
    margin-bottom: -3%;


}

.footer2{
    background-color: black;
    display: grid;
    height: 80px;
}

/*
------------------------------------------------------- PODCAST ------------------------------------------------------- 
**/

.podcast-box{
    display: grid;
    margin-top: 5%;
    margin-left: 1%;
    margin-right: 1%;
    height: 327px;


}

.podcast-box2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 100%;
    height: 299px;

}

.content-podcast{
    display: grid;
    grid-template-rows: inherit;
    background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(7, 98, 159, 0.943));


}

.info-general-podcast{
    display: grid;
    height: 97.2%;
    grid-template-rows: 21%;
    margin-top: 1.5%;
    margin-left: 1%;
    margin-right: 1%;

}

.tittle-podcast{
    display: grid;
    grid-template-columns: 62% 38%;
    height: 100%;
    grid-template-rows: 100%;


}

.box-tittlePodcast{
    display: grid;
    border-bottom: 2px solid transparent;
    border-color: white;
    border-image-slice: 1;
    border-width: 2px;
    grid-template-rows: inherit;


}

#tittlePodcast{
    font-size: 2.5em;
    font-weight: 500;
    color: white;


}

#box-log-podcast{
    display: grid;
    height: 100%;
    grid-template-rows: 100%;
    justify-items: end;

}

#log-podcast{
    height: 90%;


}

.body-podcast{
    display: grid;
    margin-top: 4.5%;


}

#text-body-podcast{
    font-size: 1.1em;
    color: white;

}

.expert-podcast{
    margin-left: inherit;
    background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(7, 98, 159, 0.943));
    display: grid;
    grid-template-columns: repeat(1, 1fr);


}

#tittle-expert-podcast{
    display: grid;
    align-items: end;
    margin-bottom: 2%;


}

#tit-expert{
    color: white;
    font-size: 1.2em;
    font-weight: 700;


}

.expert-podcast-container{
    display: grid;
    grid-template-rows: 24%;
    margin-left: 3%;
    margin-right: 3%;
    max-height: 39vh;
    margin-top: 1%;

}

.target2{
    display: grid;
    background-color: white;
    grid-template-columns: 36% 64%;
    justify-content: space-evenly;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
    border-image-slice: 1;
    border-width: 8px;
    text-align: left;
    width: fit-content;
    height: 194px;


}

.img-target{
    display: grid;
    align-items: end;
    justify-items: center;
    height: min-content;
}

.img-target2{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 99%;
    height: 29vh;
}

.box-doctor{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    align-items: end;
    height: 186px;
}

#doctor2{
    width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.info-target2{
    max-height: 194px;
    display: grid;
    justify-items: start;
    grid-template-rows: min-content;
    margin-top: -3px;
    overflow: auto;
    padding: 20px;
}

.podcast-mp3-box{
    display: grid;
    margin-top: 45px;
    background-color: aqua;
    margin-left: 1%;
    margin-right: 1%;
}

.content-podcast{
    display: grid;
}

.title__h2Text {
    max-width: 80%;
    display: none;
}

.content-podcast2{
    display: grid;
    background-color: white;
    grid-template-rows: 100%;
}

#play{
    width: 18px;
}

#point{
    width: 24px;
}

.videos-section2{
    display: grid;
}

body::-webkit-scrollbar{
   width: 10px;
}

body::-webkit-scrollbar-thumb{
   height: 80px;
   background: #375666;
   border: 8px solid transparent;
   border-radius: 12px;
}

body::-webkit-scrollbar-thumb:active{
    background: #003349;
}

body{
    font-family: sans-serif;
    background: #002333;
}

li{
    list-style: none;
}

.title{
    font-size: 0px;
}

.playlistBx{
    position: relative;
    height: 100%;
}

.playlist2{
    margin-bottom: 0;
}

.playlist::-webkit-scrollbar{
   width: 0px;
}

.playlistBx .row .AllLessons{
   display: block;
   text-align: left;
   color: #dcdee1;
   font-size: 15px;
   font-weight: 700;
   margin-left: 40px;
   line-height: 40px;
}

.playlist2 li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    color: #dcdee1;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 3%;
    background-color: #dbe3fa;
    margin-bottom: 0;
}

.playlist2 li:hover{
    border: 0.5px solid #375666;
}

.playlist2 li .row span{
    font-size: 12px;
    font-weight: 400;
    color: gray;
    text-decoration: none;
    display: inline-block;
    text-align: left;
}

.playlist2 li .row span::before{
    content: '\f01d';
    font-family: FontAwesome;
    color: gray;
    margin-right: 15px;
    font-size: 20px;
}

ul li.playing .row span::before{
    content: '\f28c';
    font-family: FontAwesome;
    color: #fff;
    margin-right: 15px;
    font-size: 20px;
}

.playlist2 li.playing .row span{
   color: #fff;
}

.playlist2 li span.duration{
    font-size: 15px;
    font-weight: 400;
    display: inline-block;
    color: #dcdee1;
    text-align: right;
}

.playlist2 li.playing{
    pointer-events: none;
    background: #252525;
    margin-bottom: 0;
}

ul{
    padding-left: 0;
}

.frame-container{
    display: grid;
    /* height: 18vh; */
}

#main-Video{
    display: grid;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
}

#play{
    display: grid;
    align-items: center;
    justify-items: center;
    margin-left: 16%;
}

#introduction{
    display: grid;
    align-items: center;
    justify-items: center;
}

#n-video{
    margin-bottom: initial;
}

/*
    CASOS CLÍNICOS
**/

.content-video-2{
    display: grid;
    grid-template-columns: 66% 32.7%;
    gap: 1em;
    margin-left: 1%;
    margin-right: 1%;
}

#name-video-section-2{
    display: grid;
    grid-template-columns: 8% 54% 28% 10%;
    background-color: lightskyblue;
    height: 26px;
}

.info-clinical{
    display: grid;
    grid-template-rows: 100%;
    background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(7, 98, 159, 0.943));
    margin-top: 1.5%;
    margin-left: 1%;
    margin-right: 1%;
    height: 80%;


}

.text-info-clinical{
    padding: 1.5%;
    display: grid;
}

#T-clinical{
    font-size: 1em;
    font-weight: 500;
    color: white;
}

#P-clinical{
    font-size: 0.7em;
    font-weight: 600;
    color: white;
}

.target_clinical{
    display: grid;
    background-color: white;
    grid-template-columns: 36% 64%;
    justify-content: space-evenly;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
    border-image-slice: 1;
    border-width: 8px;
    text-align: left;
    width: fit-content;
    height: 194px;
    margin-left: 2%;
    margin-right: 2%;
}

.container_target_next_podcast{
    display: flex;
    justify-content: center;
    padding-top: 33px;
}

.container_target_next_modulo{
    display: flex;
    justify-content: center;
}

.ctnp{
    display: flex;
    background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(0, 153, 255, 0.4));
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-radius: 20px;
    border: 3px white solid;
}

.ctnp_1{
    text-decoration: none;
}

.txt_ctnp_1{
    margin: 0;
    text-align: center;
    font-size: 1em;
    color: white;
}

.icon_ctnp{
    width: 44px;
}

/*
    QUIZ
**/

.quiz-container{
    display: grid;
    height: auto;
    margin-top: 47px;
    width: 100%;
}

.quiz-container2{
    display: grid;
    padding: 1%;
    grid-template-columns: 70% 28.6%;
    grid-template-rows: 64%;
    gap: 1em;

}

.quiz-module{
    display: grid;
    background: linear-gradient(90deg, #4d9eca, #5891d5);
    grid-template-rows: min-content;
    height: fit-content;

}

#time-questions-name{
    display: grid;
    background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(7, 98, 159, 0.943));
    grid-template-rows: max-content max-content;
    height: max-content;
}

.header-quiz-module{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: fit-content;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #81c195, #4d9eca);
    border-image-slice: 1;
    border-width: 5px;
    margin-left: 1%;
    margin-right: 1%;


}

.icon-quiz{
    display: grid;
    justify-items: end;
}

#log-quiz{
    width: 9%;
    margin-right: 5%;
    margin-top: 13%;
}

#tittle-quiz{
    font-size: 1.5em;
    color: white;
    margin-left: 3%;
    margin-top: 10%;
}

.tit-container{
    display: grid;
}

#p-quiz{
    font-size: 0.8em;
    color: white;
    margin-top: 15px;
    margin-bottom: 2%;
    margin-left: 3%;
}

.content-quiz-module{
    display: grid;


}

.q1{
    display: grid;


}

.q2{
    display: grid;
    grid-template-columns: 31% 23%;
    align-items: center;
    justify-items: center;


}

.q3{
    display: grid;
    justify-items: center;
    margin-bottom: 2.5%;
}

.subq1{
    display: grid;
    align-items: center;
    margin-top: 1%;
    margin-left: 2.5%;

}

#txtQuiz{
    font-size: 14px;
    font-weight: 500;
    color: white;
}

#result{
    font-size: 23px;
    font-weight: 500;
    color: white;
}

#number-result{
    font-size: 29px;
    font-weight: 400;
    color: white;
    text-transform: capitalize;
}

#iconq2{
    width: 30px;
}

.type-estadistics{
    display: grid;
    grid-template-columns: 44% 25% 63%;
    justify-items: end;
    align-items: baseline;
}

#number-estadistics{
    font-size: 45px;
    font-weight: 400;
    color: white;
}

#text-estadistics{
    font-size: 17px;
    color: white;
}

.button-quiz{
    border: none;
    color: white;
    background-color: #255cd6;
    padding: 1% 20%;
    margin-top: 2%;
    margin-left: 0.1%;
    display: grid;
    width: 92%;
}

.card-body{
    display: grid;
}

#question{
    font-size: 15px;
    color: white;
    display: grid;
}

#q-name{
    font-size: 0.7em;
    color: white;
    font-weight: 600;
}

#time{
    background-color: red;
    margin-top: 8%;
    display: grid;
    height: 51px;
    grid-template-columns: 80% 20%;
    justify-items: center;
    align-items: center;
}

#time2{
    background: linear-gradient(to right, #81c195, #4d9eca);
    margin-top: 8%;
    display: grid;
    height: 51px;
    grid-template-columns: 80% 20%;
    justify-items: center;
    align-items: center;

}

#text-time{
    font-size: 0.8em;
    color: white;
    font-weight: unset;
}

.questions-name{
    display: grid;
    grid-template-rows: inherit;
    padding: 11px;
}

.card-text div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    color: gray;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 3%;
    background-color: #cfe6f4;
    border-color: #4d9eca;
    border-width: 2px;
    font-size: 0.8em;
}

.playlist div.card-text {
    pointer-events: none;
    background: #255cd6;
}

#clock{
    width: 28px;
}

#time-clock{
    font-size: 0.8em;
    color: white;
    font-weight: bold;
}

#time-clock2{
    font-size: 0.8em;
    color: white;
    font-weight: bold;
}

/* TYPOGRAPHY */


/*
Apis Regular
*/
@font-face {
    font-family: 'Apis Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Apis-Regular'), url('../assets/fonts/Apis-Regular.ttf') format('truetype');
}

/*
Apis Light
*/
@font-face {
    font-family: 'Apis Light';
    font-style: normal;
    font-weight: normal;
    src: local('Apis-Light'), url('../assets/fonts/Apis-Light.ttf') format('truetype');
}

/*
Apis Medium
*/
@font-face {
    font-family: 'Apis Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Apis-Medium'), url('../assets/fonts/Apis-Medium.ttf') format('truetype');
}

/*
Apis Bold
*/
@font-face {
    font-family: 'Apis Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Apis-Bold'), url('../assets/fonts/Apis-Bold.ttf') format('truetype');
}

/*
Apis Black
*/
@font-face {
    font-family: 'Apis Black';
    src: url('../assets/fonts/Apis-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

/* END TYPOGRAPHY */

/*
    DESCARGABLES
**/

.border_title_download{
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, rgb(255, 255, 255), white);
    border-image-slice: 1;
    width: 60%;
    border-width: 1px;
}

.white{
    color: white;
}

.Subtitle_principal_download{
    font-family: 'Apis Regular';
    font-size: 1rem;
}

.ico-certificate_download{
    height: 15vh;
    object-fit: cover;
}

.container_download{
    background: #d9e4fb;
    border: 2px solid #d9e4fb;
}

.Subtitle-download{
    color: #255cd6;
    font-size: 1.2rem;
    font-family: 'Apis Bold';
}

.title-certificate{
    font-family: 'Apis Regular';
    color: #255cd6;
}

.btn_download_certificate{
    background:linear-gradient(to right, #81c195, #4d9eca);
    width: 50%;
    text-decoration: none;
    color: white;
    font-family: 'Apis Bold';
    text-align: center;
    padding: 0.3rem 0rem;
}

/*
    FINAL DESCARGABLES
**/

/*
    PREGUNTAS
**/

#questions-container{
    display: grid;


}

.que-1{
    display: grid;
    align-items: center;
}

.sub-que-1{
    display: grid;
    margin-left: 12px;
}

.card-question div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    color: gray;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 3%;
    background-color: #cfe6f4;
    border-color: #4d9eca;
    border-width: 2px;
    font-size: 0.8em;
}

#name-question{
    font-size: initial;
    color: white;
    display: grid;
}

/*
    PRUEBA DE DISEÑOS QUIZ
*/

#quizContainer{
    display: grid;
    background-color: white;
    max-height: 509px;
}

#Container-buttoms{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: min-content;
    margin-bottom: 19px;
}

#stat_result{
    font-size: 18px;
    color: white;
    text-transform: capitalize;
    
}

#btn-anterior{
    width: auto;
    height: auto;
    margin: auto;
    background: linear-gradient(90deg, #81c195, #4d9eca);
}

#InQuiz{
    border: none;
    color: white;
    background: linear-gradient(to right, #81c195, #4d9eca);
    padding: 1% 5%;
    margin-top: 2%;
    margin-left: 0.1%;
    display: flex;
    align-items: center;
    width: auto;
    height: 6vh;
}

#InQuiz::after {
    content: "";
    background-image: url('/media/glp1/assets/Recurso_2.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    margin-left: 5px; /* Aquí se agrega el margen izquierdo */
}

#questionTitle{
    font-size: 23px;
    font-weight: bold;
}

#options{
    display: grid;
    grid-row-gap: 7px;
}

.questions-container{
    display: grid;
    grid-row-gap: 11px;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 17px;
}

.checkboxContainer{
    display: grid;
    grid-template-columns: 16px 682px;
    gap: 0.5em;
    margin-bottom: 1.5px;
    font-size: 14px;
    margin-left: 42px;
    align-items: center;
}

#preview{
    display: grid;
    justify-content: left;
}

#next{
    display: grid;
    justify-content: right;
}

/*
    RESULTADO QUIZ
*/

#quizResultsContainer{
    background: linear-gradient(90deg, #4d9eca, #5891d5);
    display: grid;
    justify-items: center;
    color: white;
    font-size: 22px;
    margin-top: -29px;
    height: 327px;
}

#certificate{
    margin-top: 20px;
}

#logo-resultado{
    width: 149px;
}

.css-button-shadow-border-sliding--sky {
    min-width: 130px;
    height: 40px;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    border-radius: 5px;
    border: none;
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
    background: linear-gradient(90deg, #81c195, #4d9eca);
   z-index: 1;
  }
  .css-button-shadow-border-sliding--sky:hover:after {
    width: 100%;
    left: 0;
  }
  .css-button-shadow-border-sliding--sky:after {
    border-radius: 5px;
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    z-index: -1;
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
    transition: all 0.3s ease;
    background-color: #3a86ff;
    right: 0;
  }
  .css-button-shadow-border-sliding--sky:active {
    top: 2px;
  }

#felicidades{
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px green, 0 0 24px green, 0 0 9px green, 0 0 10px green, 0 0 9px green;
    animation: neon-blink 1.5s ease-in-out infinite alternate;
}

#perdida{
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px red, 0 0 24px red, 0 0 9px red, 0 0 10px red, 0 0 9px red;
    animation: neon-blink 1.5s ease-in-out infinite alternate;
}

@keyframes neon-blink {
    from {
      opacity: 1.0;
    }
    to {
      opacity: 0.5;
    }
  }

/*
    BOTON ANTERIOR QUIZ
**/

.css-button-arrow--sky {
    min-width: auto;
    height: 40px;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    overflow: hidden;
    border-radius: 5px;
    border: none;
    background: linear-gradient(90deg, #81c195, #4d9eca);
}

.css-button-arrow--sky:hover {
    border-radius: 5px;
    padding-left: 24px;
    padding-right:8px;
}

.css-button-arrow--sky:hover:after {
    opacity: 1;
    left: -90px;
}

.css-button-arrow--sky:after {
    content: "\00AB";
    position: absolute;
    opacity: 0;
    font-size: 20px;
    top: 0;
    right: -20px;
    transition: 0.4s;
}

/*
    BOTON SIGUIENTE QUIZ
**/

.css-button2-arrow--sky {
    min-width: auto;
    height: auto;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    overflow: hidden;
    border-radius: 5px;
    border: none;
    background: linear-gradient(90deg, #81c195, #4d9eca);
}

.css-button2-arrow--sky:hover {
    border-radius: 5px;
    padding-right: 24px;
    padding-left:8px;
}

.css-button2-arrow--sky:hover:after {
    opacity: 1;
    right: 10px;
}

.css-button2-arrow--sky:after {
    content: "\00BB";
    position: absolute;
    opacity: 0;
    font-size: 20px;
    top: 0;
    right: -20px;
    transition: 0.4s;
}

#linkModule{
    text-decoration: none;
}

#dateNow{
    display: none;
}

/*
    MEDIA QUERIES
*/

@media (min-width: 0px) and (max-width: 991.98px) {

    .menu-overlay_2 {
        display: none; 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #001965;
        z-index: 1000000000000;
        overflow: auto;
    }

    .container_opt_menu_responsive_modulos{
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 100%;
        align-items: center;
        justify-content: center;
        padding-top: 128px;
    }

    .container_father_logos_menu_responsive_modulos{
        display: flex;
        gap: 10px;
        padding-top: 6%;
        padding-bottom: 6%;
        padding-left: 15px;
        padding-right: 0;
        align-items: center;
    }

    .equis_menu_hamburguer_home{
        width: 23px;
    }

    .opt-modul{
        display: none !important;
    }

    .link_opt_menu_modulo_responsive{
        text-decoration: none;
    }

    .name_module_opt_responsive{
        font-size: 2em;
        color: white;
    }

    .container_father_logos {
        display: flex;
        gap: 6%;
        padding-top: 6%;
        padding-bottom: 6%;
        padding-left: 6%;
        padding-right: 6%;
        align-items: center;
    }

    .style_logo_glp1 {
        width: 82px;
    }

    .style_logo_impulsando {
        width: 118px;
    }

    .style_logo_sciennce {
        width: 91PX;
    }

    .container_father_info_user {
        display: flex;
        flex-direction: column;
        padding-top: 5%;
        padding-bottom: 5%;
        padding-right: 7%;
        gap: 21px;
        padding-left: 7%;
    }

    .container_info_user {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
    }

    .container_description_progress {
        display: flex;
        width: 100%;
        gap: 17px;
        flex-direction: column;
    }

    .text_welcome {
        font-size: 0.73em;
        margin: 0;
        color: white;
        font-weight: 100;
        letter-spacing: 0.5px;
        text-align: center;
    }

    .container_progress_bar {
        display: flex;
        width: 100%;
    }

    .progress {
        width: 100%;
        height: max-content;
    }

    .header{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: auto;
        background-position-y: 73%;
        background-position-x: 1px;
        position: relative;
        flex-direction: column;
    }

    .direction-logo{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .icons-progres-bar{
        position: relative;
        grid-template-rows: 77%;
        z-index: 11;
        display: flex;
        justify-content: center;
        flex-direction: column-reverse;
        width: 100%;
        margin-top: 0.5rem;
    }

    .icons{
        /* display: flex; */
        grid-template-columns: none;
        /* gap: none; */
        justify-content: center;
        margin-top: 4%;
        grid-template-rows: none;
        align-items: center;
        margin-bottom: 4%;
    }

    #div_user{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        
    .progres-bar-container{
        display: grid;
        grid-template-columns: 74%;
        justify-content: center;
        margin-right: 0%;
    }

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

    .options-menu{
        display: block;
        z-index: 100;
    }

    .text-menu{
        display: grid;
        grid-template-columns: 10% 10% 10%;
        align-items: center;
        border-bottom: 2px solid transparent;
        border-image-slice: 1;
        border-image: none;
        width: 100%;
        border-width: 1px;
        justify-content: space-evenly;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .name{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .progress{
        width: 100%;
        height: max-content;
    }

    .name_module{
        display: grid;
        width: 100%;
        margin: 1.1% auto;
        gap: 0em;
        overflow: hidden;
    }

    .titles{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 1.5%;
    }

    .color{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin-top: -1%;
        text-align: center;
        margin-bottom: 0.1rem;
    }

    .quiz-container2{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1em;
    }

    .quiz-module{
        display: grid;
        background: linear-gradient(90deg, #4d9eca, #5891d5);
        grid-template-rows: min-content;
        width: 100%;
    }

    .video-box{
        display: grid;
        /* margin-top: 5%; */
        /* grid-template-rows: 65vh; */
        margin-left: 1%;
        margin-right: 1%;
    }

    .header-quiz-module{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: fit-content;
        border-bottom: 2px solid transparent;
        border-image: linear-gradient(to right, #81c195, #4d9eca);
        border-image-slice: 1;
        border-width: 5px;
        margin-left: 1%;
        margin-right: 1%;
    }

    .content-quiz-module{
        display: grid;
    }

    .q1{
        display: grid;
    }

    .q2{
        display: grid;
        grid-template-columns: none;
        align-items: center;
        justify-content: center;
    }

    .subq1{
        display: grid;
        grid-template-columns: none;
        justify-items: center;
        align-items: center;
        margin-top: 4%;
    }

    #questions-container{
        display: grid;
    }

    .frame-container{
        display: grid;
        height: 18vh;
    }
}

@media (min-width: 0px) and (max-width: 767.98px) {

    .container_father_logos {
        display: flex;
        gap: 6%;
        padding-top: 6%;
        padding-bottom: 6%;
        padding-left: 6%;
        padding-right: 6%;
        align-items: center;
    }

    .style_logo_glp1 {
        width: 82px;
    }

    .style_logo_impulsando {
        width: 118px;
    }

    .style_logo_sciennce {
        width: 91PX;
    }

    .container_father_info_user {
        display: flex;
        flex-direction: column;
        padding-top: 5%;
        padding-bottom: 5%;
        padding-right: 7%;
        gap: 21px;
        padding-left: 7%;
    }

    .container_info_user {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
    }

    .container_description_progress {
        display: flex;
        width: 100%;
        gap: 17px;
        flex-direction: column;
    }

    .text_welcome {
        font-size: 0.73em;
        margin: 0;
        color: white;
        font-weight: 100;
        letter-spacing: 0.5px;
        text-align: center;
    }

    .container_progress_bar {
        display: flex;
        width: 100%;
    }

    .progress {
        width: 100%;
        height: max-content;
    }

    .imgIcons{
        height: auto;
        width: 13px;
    }

    .frame-container{
        display: grid;
        height: 25vh;
    }

    .video{
        display: grid;
        grid-template-rows: 0%;
        height: 25vh;
    }
    
    .content-module{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #percentage{
        font-size: 1.2rem;
        color: white;
        margin-top: 10%;
        margin-left: 6%;
        text-align: center;
    }

    .color2{
        display: none;
    }

    #percentage-number{
        font-size: 3rem;
        color: white;
        margin-top: -2%;
        margin-left: 6%;
        text-align: center;
    }

    .grafic{
        width: 100%;
    }

    #grafica{
        display: block;
        height: 130px !important;
        width: 100%;
        object-fit: contain;
    }

    #description{
        font-size: 1rem;
        color: white;
        margin-top: 1%;
        margin-left: 6%;
        text-align: initial;
        display: table-row;
    }

    #description-text{
        font-size: 1rem;
        color: white;
        text-align: center;
        display: grid;
        width: 90%;
    }

    .third-column{
        margin-top: 1%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .button-continue-module{
        border: none;
        color: white;
        background-color: blue;
        padding: 1.5% 20%;
        margin-top: 3%;
        margin-left: 0.1%;
        display: grid;
        width: 92%;
    }

    .categories-module{
        display: grid;
        gap: 0.3em;
        grid-template-columns: 22% 22% 22% 22%;
        margin-top: -1%;
        text-align: center;
        justify-content: center;
    }

    .chapters{
        width: 98%;
        height: 82%;
        margin-left: 0%;
        margin-top: 20%;
        background: linear-gradient(#f96d09, #be2546);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .podcast{
        width: 98%;
        height: 82%;
        margin-left: 0%;
        margin-top: 20%;
        background: #a53b45;
    }

    .caso-clinico{
        width: 98%;
        height: 82%;
        margin-left: 0%;
        margin-top: 20%;
        background: linear-gradient(#071a6d, #050c4a);
    }

    .quiz{
        width: 98%;
        height: 82%;
        margin-left: 0%;
        margin-top: 20%;
        background: linear-gradient(#43b2d0, #4479cb);
        display: grid;
        align-items: baseline;
        justify-items: center;
    }

    #redirection{
        width: 100%;
    }

    #title{
        color: white;
        font-size: 1.4rem;
        text-align: initial;
        margin-top: 5%;
    }

    .text{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 14%;
        margin-top: 5%;
    }

    .info-module{
        margin-top: 5%;
        background: linear-gradient(to right, #5074bf, #4d9ecb);
        height: 100%;
    }

    .info-module-home{
        margin-top: 5%;
        background: linear-gradient(to right, #5074bf, #4d9ecb);
        height: 100%;
    }

    .pictures-container{
        display: grid;
        grid-template-columns: none;
        margin-top: 2%;
        padding: 2%;
        gap: 1.1em;
        text-align: left;
    }

    #doctor{
        width: 40%;
    }

    .line{
        color: white;
        background-color: white;
        height: 7px;
        margin: 1rem 0;
        border: 0;
        border-top: var(--bs-border-width) solid;
        opacity: 1;
        width: 100%;
    }

    .target{
        display: grid;
        background-color: white;
        grid-template-columns: none;
        justify-content: space-evenly;
        border-bottom: 2px solid transparent;
        border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
        border-image-slice: 1;
        width: 100%;
        border-width: 8px;
        text-align: left;
    }

    .info-target{
        display: grid;
        justify-items: center;
        grid-template-rows: min-content;
        margin-top: 1%;
    }

    #title-target{
        text-align: center;
    }

    .footer{
        margin-top: 3%;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
    }

    .footer-container{
        display: grid;
        align-content: center;
        grid-template-columns: none;
        text-align: center;
        gap: 0em;
    }

    .logo-footer{
        display: grid;
        grid-template-columns: 100%;
    }

    .img-logo-footer{
        width: 31%;
        margin-left: 0%;
        margin-top: 3%;
    }

    #legal{
        font-size: 0.5rem;
        margin-top: 4%;
        color: white;
        margin-bottom: 0%;
    }

    #code-legal{
        text-align: inherit;
        margin-top: 2%;
        color: white;
        font-weight: 300;
    }

    .logo-novo-nordisk{
        width: 25%;
        object-fit: contain;
    }

    .logo-novo{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .options-module{
        display: flex;
        grid-template-columns: repeat(5, 1fr);
        margin-top: 1%;
        /* gap: 0.4em; */
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .master-option{
        display: flex;
        align-items: center;
        /* gap: 0px; */
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
        border-image-slice: 1;
        border-width: 3px;
        margin-left: 2%;
        margin-bottom: 4%;
    }

    .tittle-master{
        margin-top: 12px;
        display: grid;
        background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(0, 153, 255, 0.4));
        height: auto;
        margin-left: 1%;
        margin-right: 1%;
    }

    .tittle-module-master{
        display: grid;
        grid-template-columns: none;
        align-items: center;
        margin-left: 1%;
        margin-right: 1%;
        gap: 0em;
    }

    #n-master{
        color: white;
        margin-top: 1rem;
        text-align: center;
    }

    .video-box{
        display: grid;
        /* margin-top: 5%; */
        /* grid-template-rows: 65vh; */
        margin-left: 1%;
        margin-right: 1%;
    }

    .content-video{
        display: grid;
        grid-template-columns: none;
        gap: 1em;
    }

    .podcast-box{
        display: grid;
        margin-top: 5%;
        margin-left: 1%;
        margin-right: 1%;
        height: 100%;
    }

    .podcast-box2{
        display: grid;
        grid-template-columns: none;
        grid-template-rows: none;
        height: auto;
    }

    .content-podcast{
        display: grid;
        grid-template-rows: inherit;
        background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(7, 98, 159, 0.943));
    }

    .info-general-podcast{
        grid-template-rows: 21%;
        margin-top: 1.5%;
        margin-left: 1%;
        margin-right: 1%;
    }

    .tittle-podcast{
        display: grid;
        grid-template-columns: 62% 38%;
        height: auto;
        grid-template-rows: none;
    }

    .box-tittlePodcast{
        display: grid;
        border: none;
        grid-template-rows: inherit;
    }

    #tittlePodcast{
        font-size: 2.5em;
        font-weight: 500;
        color: white;
    }

    #box-log-podcast{
        display: block;
    }

    #log-podcast{
        height: 53px;
        width: 100%;
    }

    .body-podcast{
        display: grid;
        margin-top: 4.5%;
    }

    #text-body-podcast{
        font-size: 1.1em;
        color: white;
        margin-top: 1rem;
    }

    .expert-podcast{
        margin-left: inherit;
        background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(7, 98, 159, 0.943));
    }

    #tittle-expert-podcast{
        display: grid;
        align-items: center;
        margin-bottom: 0%;
    }

    #tit-expert{
        color: white;
        font-size: 1.2em;
        font-weight: 700;
    }

    .expert-podcast-container{
        display: grid;
        grid-template-rows: none;
        margin-left: 3%;
        margin-right: 3%;
        height: 100%;
        margin-top: 1%;
    }

    .target2{
        display: grid;
        background-color: white;
        grid-template-columns: 36% 64%;
        justify-content: space-evenly;
        border-bottom: 2px solid transparent;
        border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
        border-image-slice: 1;
        border-width: 8px;
        text-align: left;
        width: fit-content;
        height: 80%;
    }

    .info-clinical{
        display: grid;
        grid-template-rows: 100%;
        background: linear-gradient(90deg, rgba(0, 52, 156, 0.79), rgba(7, 98, 159, 0.943));
        margin-top: 1.5%;
        margin-left: 1%;
        margin-right: 1%;
        height: 100%;
    }

    #stat_result{
        font-size: 18px;
        color: white;
        text-transform: capitalize;
        max-width: 90%; /* Establece un ancho máximo para evitar el desbordamiento */
        overflow: hidden; /* Oculta cualquier contenido que se desborde del contenedor */
        text-overflow: ellipsis; /* Aplica puntos suspensivos al texto truncado */
        white-space: nowrap;
    }

    .images-sections2{
        width: 25px;
        margin-top: 6%;
        margin-bottom: 5%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .container_father_logos {
        display: flex;
        gap: 6%;
        padding-top: 6%;
        padding-bottom: 6%;
        padding-left: 6%;
        padding-right: 6%;
        align-items: center;
    }

    .style_logo_glp1 {
        width: 82px;
    }

    .style_logo_impulsando {
        width: 118px;
    }

    .style_logo_sciennce {
        width: 91PX;
    }

    .container_father_info_user {
        display: flex;
        flex-direction: column;
        padding-top: 5%;
        padding-bottom: 5%;
        padding-right: 7%;
        gap: 21px;
        padding-left: 7%;
    }

    .container_info_user {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
    }

    .container_description_progress {
        display: flex;
        width: 100%;
        gap: 17px;
        flex-direction: column;
    }

    .text_welcome {
        font-size: 0.73em;
        margin: 0;
        color: white;
        font-weight: 100;
        letter-spacing: 0.5px;
        text-align: center;
    }

    .container_progress_bar {
        display: flex;
        width: 100%;
    }

    .progress {
        width: 100%;
        height: max-content;
    }

    .imgIcons{
        height: auto;
        width: 13px;
    }

    .frame-container{
        display: grid;
        height: 54vh;
    }

    .name_module{
        display: grid;
        width: 100%;
        margin: 1.1% auto;
        gap: 1em;
        overflow: hidden;
    }

    .categories-module{
        display: grid;
        gap: 0.5em;
        grid-template-columns: 15% 15% 15% 15%;
        margin-top: 0.1%;
        text-align: center;
        justify-content: center;
    }

    .text{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 14%;
        margin-top: 5%;
    }

    .pictures-container{
        display: grid;
        grid-template-columns: 32% 31% 31.5%;
        margin-top: 0%;
        gap: 1.1em;
        /* text-align: left; */
        padding: 0.5rem;
    }

    #doctor{
        width: 52%;
    }

    .line{
        color: white;
        background-color: white;
        height: 7px;
        margin: 1rem 0;
        border: 0;
        border-top: var(--bs-border-width) solid;
        opacity: 1;
        width: auto;
    }

    .target{
        display: grid;
        background-color: white;
        grid-template-columns: none;
        justify-content: space-evenly;
        border-bottom: 2px solid transparent;
        border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
        border-image-slice: 1;
        width: 100%;
        border-width: 8px;
        text-align: left;
        height: fit-content;
    }

    .info-target{
        display: grid;
        justify-items: start;
        grid-template-rows: min-content;
        margin-top: 1%;
    }

    #description-doctor{
        font-size: 0.6rem;
        text-align: justify;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .footer-container{
        display: grid;
        align-content: center;
        grid-template-columns: 25% 40% 10% 30%;
        text-align: inherit;
        gap: 1em;
        align-items: center;
        justify-items: center;
    }

    .logo-novo{
        display: grid;
        grid-template-columns: auto;
        width: 76%;
    }

    .master-option{
        display: flex;
        grid-template-columns: none;
        align-items: center;
        gap: 0px;
        border-bottom: 2px solid transparent;
        border-image: linear-gradient(to right, rgb(0, 153, 255), lightblue);
        border-image-slice: 1;
        border-width: 7px;
        justify-content: space-evenly;
    }

    .tittle-module-master{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        margin-left: 1%;
        margin-right: 1%;
        gap: 1.5em;
    }

    #n-master{
        color: white;
        text-align: center;
    }

    .video-box{
        display: grid;
        /* margin-top: 5%; */
        /* grid-template-rows: 65vh; */
        margin-left: 1%;
        margin-right: 1%;
    }

    .content-video{
        display: grid;
        grid-template-columns: none;
        gap: 1em;
        margin-top: 5%;
    }

    .c1{
        display: grid;
        grid-template-columns: 12% 86%;
        align-items: center;
        gap: 5px;
        margin-left: 2%;
        margin-right: 2%;
        margin-top: 3%;
    }

    #icons-module-video{
        width: 50%;
    }

    #img-content-of-curse{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .images-expositors2{
        margin-left: 2%;
        margin-top: 2%;
        margin-bottom: 0.5%;
    }

    .podcast-box{
        display: grid;
        margin-top: 9%;
        margin-left: 1%;
        margin-right: 1%;
        height: 326px;
    }

    .podcast-box2{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 100%;
        height: 317px;
    }

    .chapters{
        width: 98%;
        height: 41vh;
        margin-left: 0%;
        margin-top: 20%;
        background: linear-gradient(#f96d09, #be2546);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .podcast{
        width: 98%;
        height: 41vh;
        margin-left: 0%;
        margin-top: 20%;
        background: #a53b45;
    }

    .caso-clinico{
        width: 98%;
        height: 41vh;
        margin-left: 0%;
        margin-top: 20%;
        background: linear-gradient(#071a6d, #050c4a);
    }

    .quiz{
        width: 98%;
        height: 41vh;
        margin-left: 0%;
        margin-top: 20%;
        background: linear-gradient(#43b2d0, #4479cb);
        display: grid;
        align-items: baseline;
        justify-items: center;
    }

    .images-sections2{
        width: 40px;
        margin-top: 6%;
        margin-bottom: 5%;
    }

    .footer{
        margin-top: 5%;
        background-color: black;
        display: grid;
        height: max-content;
    }

    .video{
        display: grid;
        grid-template-rows: 0%;
        height: 54vh;
    }
}