@import url(styles/courses.css);
@import url(styles/detail_course.css);
@import url(styles/menu.css);
@import url(styles/login.css);
@import url(styles/alianzas.css);
@import url(styles/profile.css);
@import url(styles/form_contador.css);
@import url(styles/shopping.css);
@import url(styles/admin.css);
@import url(styles/notification.css);
@import url(styles/livestream.css);

.espacio-superior {
    margin-top: 75px;
}

button:focus {
    outline: none;
}


.user-menu {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 5px;
}

a.menu-item1 {
    display: block;
    padding: 10px 10px 0px 10px;
    font-size: 14px;
}

p.menu-item1 {
    display: block;
    padding: 10px 10px 0px 10px;
    font-size: 14px;
}

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

.user-details {
    text-align: left;
}

.user-name {
    font-size: 14px;
    font-weight: bold;
    color: #000;
}

.user-role {
    font-size: 12px;
    color: #6c757d;
}

.user-actions {
    display: flex;
    align-items: center;
    padding-top: 15px;
}

.cart-icon, .notifications-icon {
    position: relative;
    margin-right: 20px;
    font-size: 20px !important;
    color: #007bff;
}

.cart-icon .fa-shopping-cart {
	color: #0071ce;
}

.precio-icon .fa-shopping-cart:hover {
	color: #ffffff !important;
}

.fa-link{
	color: #007bff !important;
}

.cart-icon a, .notifications-icon a {
    font-size: 20px !important;
}

.badge {
    position: absolute;
    top: -20px;
    right: -10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    width: 18px;
}

.balance {
    font-size: 14px;
    font-weight: bold;
    color: #007bff;
}


.dropdown-menu1 {
    display: none;
    position: absolute;
    right: 0;
    top: 60px; /* Ajusta según la altura de tu barra de menú */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 150px; /* Tamaño pequeño */
}

/* @media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.2rem !important;
        padding-left: 0.2rem !important;
    }
} */

.dropdown-menu {
    margin: 0px !important;
}


.loader-dos {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0072ce; /* Color azul de fondo */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Contenedor circular de la imagen */
.loader-image-container {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden; /* Ocultar la animación fuera del círculo */
  border: 5px solid #fff; /* Borde blanco alrededor del círculo */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Imagen dentro del círculo */
.loader-image img {
    width: 100%;
    height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

/* Efecto de llenado de agua */
.water-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7); /* Color de agua */
  animation: fillWater 3s ease-in-out infinite;
  overflow: hidden;
}

/* Ondas en la parte superior del agua */
.wave {
  position: absolute;
  top: -20px;
  left: 0;
  width: 200%;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 40%;
  animation: wave-animation 4s infinite linear;
  opacity: 0.6;
}

/* Animación del llenado */
@keyframes fillWater {
  0% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}

/* Animación de las ondas */
@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}



.menu-movil {
            position: fixed;
            top: 0;
            right: -100%; /* Oculto fuera de la vista en el lado derecho */
            width: 100%;
            height: 100vh;
            background-color: #f8f9fa;
            transition: right 0.4s ease-in-out; /* Transición suave */
            z-index: 1050;
            flex-direction: column;
            justify-content: space-between;
            overflow: auto;
        }

        .menu-movil.show {
            right: 0; /* Se muestra al ocupar toda la pantalla */
        }

        .menu-header-movil {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
        }

        .menu-body-movil {
            flex-grow: 1;
            overflow-y: auto;
        }


@media (min-width: 1310px) {
  #openMenu {
    display: none; /* Oculta el elemento */
  }
  .navbar {
    display: block;
  }

}

/* Estilos para pantallas menores a 1300px */
@media (max-width: 1309px) {
  #openMenu {
    display: block; /* Muestra el elemento */
  }
  .navbar {
    display: none;
  }
}


.btn-hamburger {
    background-color: transparent; /* Sin color de fondo */
    border: none; /* Sin bordes */
    padding: 10px; /* Padding de 10px */
    cursor: pointer; /* Manito para indicar clic */
    margin-left: 5px;
}

.hamburger-icon {
    display: inline-block;
    width: 25px;
    height: 3px;
    background-color: #333; /* Color de las barras del icono */
    position: relative;
    transition: all 0.3s ease-in-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    position: absolute;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.hamburger-icon::before {
    top: -8px; /* Barra superior */
}

.hamburger-icon::after {
    top: 8px; /* Barra inferior */
}



#primary-button {
  border: 1px solid #ccc;
}

#secondary-button {
  background-color: #0072ce;
  border: 0px;
  color: #fff;
}

#primary-button:hover {
  border: 1px solid rgba(204, 204, 204, 0.603);
}

#secondary-button:hover {
  background-color: #0071cea9;
  border: 0px;
  color: #fff;
}

@media (max-width: 980px) {
    .et_header_style_left #logo {
        max-width: 100% !important;
    }  
}

.btn-primary {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}



submenu-container {
	display: grid;
    grid-template-columns: repeat(4, 1fr);

}



		.ChatLog{
			border-left: solid 1px #87704F;
			border-bottom: solid 1px #87704F;
			border-right: solid 1px #87704F;
			min-height:300px;
			max-height:300px;
			overflow:auto;
			max-width:350px !important;
			min-width:350px !important;
			background:#FFF;
		}
		#app div {
			background:#FFF;
		}
		.ChatInput{
			width:100% !important;
			border-radius:0px !important;
			background:#FFF;
			border-top:1px solid #CCC !important;
			height:30px !important;
		}
		/* .btn{
			background:#000 !important;
			color:#FFF;
			cursor:pointer;
		} */