/* 📌 Ajuste del espacio en blanco entre contenido y acordeón */
.accordion-content-wrapper {
  
    margin-top: 0px !important;
    padding-top: 10px;
padding-right: 10px; /* Espacio extra a la derecha para mejorar diseño */
}







.btn-danger {
    box-shadow: 0 3px 6px 0 rgba(201, 1, 1, 0.29);
    background-color: #b20000 !important;
    border: none !important;
}
.btn-danger:hover {
    background-color: #620000 !important;
    color: white !important;
    transform: scale(1.05);
}


































.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(0 0 0 / 38%);
}



/* CONTENEDOR DE FILTROS EN BUSQUEDA DE CURSOS*/










/* ✅ Fondo general con un efecto sutil */
body {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.8)),
                url('/store/1/Logos%20Motion%20education/IMAGEN%20FONDO%20MOTION%20BYN.webp') center center / cover no-repeat fixed !important;                
    background-color: #272727;
    color: #ffffff;
}


/*============TERMINO HOME PAGE ========*/

/* Fondo de toda la sección de testimonios */


/* Títulos */




/* Tarjetas */


/* Hover */


/* Avatar */


/* Nombre */


/* Cargo */


/* Estrellas */
.stars-card svg {
    stroke: #b20000 !important;
    fill: #b20000 !important;
    width: 22px !important;
    height: 22px !important;
}

/* Comentario */


/* Paginación */






.no-result .no-result-logo {
        width: 175px;
        height: nonce;
        display: none;
    }



@media (max-width: 768px) {
    .no-result.default-no-result {
        height: 50vh; /* Altura del contenedor (puedes ajustar) */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* 🔥 Centra verticalmente */
        text-align: center;
    }
}


.webinar-card, 
.webinar-card.webinar-list {
    box-shadow: 10px 10px 15px rgba(255, 255, 255, 0.31) !important;
    margin: 20px !important;
}

















/* Forzamos el color blanco del ícono cuando cualquier subítem está activo */






































.btn.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

.btn.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}









































.user-avatar {

 /* display: none !important; */
background-color: #00000000 !important;
transform: scale(0.8); /* 80% del tamaño original */
  filter: saturate(50%); /* reduce saturación al 50% */

}

.rounded-circle {

/* display: none !important; */
transform: scale(0.8);


}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #fff !important;
    box-shadow: none !important;
    background-color: green !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
    border-color: #fff !important;
  
}





















/* Estilo base para la cruz */








/* Estilo del ícono SVG (la cruz) */


/* Hover: cambia la cruz a gris claro */




/*=====cambio color hover en panel usuario=====*/

:root {

    --panel-bg: #55555552 !important;

}

/*===============editando cart-row =========*/

/* Estética Glassmorphism para cada fila del carrito */


/* Imagen del producto */


/* Título del producto */


/* Link del curso */



/* Texto gris */


/* Precio en blanco */




/* Responsive mobile (alineación horizontal) */











/* 🔴 Ocultar sidebar por defecto en móviles */





html {
    background-color: black;
}







/* Estilos para que el menú lateral se oculte y se deslice en móviles */




/*=========================================================*/

/* ✅ Oculta la imagen específica dentro de .no-result-logo */
.no-result-logo img {
    display: none !important;
}



/* ✅ Convertir iconos de blanco con bordes azules a negro con bordes blancos */


/* ✅ Cuando el icono está activo (por ejemplo, seleccionado) */


/* ✅ Efecto al pasar el cursor */



/* ================================
   🎨 Estilos Modernos con Glassmorphism
   ================================ */




/* ✅ Contenedor principal con efecto Glass */
.main-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
}

/* ✅ Tarjetas de contenido con Glassmorphism */
.card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border-width: var(--theme-card-border-width);
    border-radius: var(--theme-card-radius);
    box-shadow: var(--theme-card-shadow);
    padding: 15px;
    transition: all 0.3s ease-in-out;
}


/* ✅ Botones mejorados */
.btn-primary {
   background-color: #b20000;
    border: none;
    color: white;
   padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;

}

.btn-primary:hover {
    background-color: #620000 !important;
    color: white !important; 
    transform: scale(1.05);
}

/* ✅ Mejoras en los iconos del sidebar */




/* ✅ Ajuste de categorías en navbar */









/*=============================*/







/* ✅ Pequeñas mejoras en la tipografía */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    font-weight: bold;
}

p {
    color: rgba(255, 255, 255, 0.8);
}

/* ✅ Estilos mejorados para el header */





/*===============================================*/





/* ✅ Estilos de los items del menú lateral */


/* ✅ Efecto cuando el usuario pasa el cursor por encima */


/* ✅ Efecto en los submenús */




/* Mantiene el color blanco en los subítems activos del menú lateral */


/* También aseguramos que no se vea afectado por estados hover */



/* ✅ Modo escritorio (pantallas grandes) */


/* ✅ Modo móvil (pantallas pequeñas) */



/* Estilos generales del dropmenul */







.webinar-card-body .btn-primary {
    background-color: #bd2424; 
    border: none;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.webinar-card-body .btn-primary:hover {
    background-color: #6f1616 !important; 
    color: #ffffff !important;
}





/* ==========INICIO CAMBIANDO EFECTOHOVER==============    */




/* ==========FIN CAMBIANDO EFECTOHOVER==============    */

.badge-circle-gray300 {
   
 background-color: #00000000; 
}



.font-weight-bold {
    font-weight: 500 !important;
}

a, a:hover {
    color: #d74646;
}

.shadow-sm.rounded-lg.bg-white.px-15.px-md-25.py-20.mt-30 {

    background-color: #000 !important;
}


/* acordiones en creacion de contenido en admin de cursos*/

.accordion-row.bg-white.rounded-sm.mt-20.py-15.py-lg-30.px-10.px-lg-20 {

background-color: #1b1b1b !important;

}



.webinar-card.webinar-list .stat-value {

color: #000;

}




.user-inline-avatar .user-name {
    font-weight: 800;
    color: #000000;
}

/* eliminio numero de suscripciones de tarjeta en homepage*/

.subscribe-plan .plan-feature li {

    display: none;

}

/* Color del selector de menu lateral en el admin*/







/*Texto encabezado menus del admin*/



/*Texto drop menu de notificacion del admin*/



/* Marcando metodo de pago*/



/* Contenedores del chat en el admin de soporte de cursos*/









/* Contenedores de suscripciones en homepage */

.mt-20.font-30.text-secondary {

    color: #000 !important;
}

.font-36.text-primary.line-height-1 {

color: #b20000 !important;

}




/*Fondo de nuevo mensaje y todos los mensajes a soporte*/






.text-dark {

    color: #fff;

}

.text-dark-blue {

  color: #fff !important;

}




.note-editor .note-editing-area .note-editable {

height: 500px !important;


}



.card-stats-title, .card-stats-item {

background-color: #000 !important;

}

.daterangepicker .calendar-table td, .daterangepicker .calendar-table th {

color: #000;

}


.card-body {
    font-size: 20px;
    color: #fff !important;
}

.select2-results__option, .select2-search__field {

color: #000;

}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable  {
    background-color: #838383;
    color: black;
}

.table.table-bordered td, .table.table-bordered th {
    border-color: #fff;
    background-color: #000;
}

.notification-title, .modal-title {

color: #fff !important;

}









.font-16.font-weight-bold.text-dark {

color: #fff !important;

}











/*Este texto debe estar blanco en el panel de control de usuario 
y negro no se donde chucha....como los diferencio?*/


.font-16.font-weight-bold.text-dark-blue {

    color: #000; /* Cambia este valor al color deseado para el texto */
}


.rounded-sm.shadow.mt-20.py-25.px-10.px-md-30, 
.rounded-sm.shadow.mt-20.py-25.px-20,
.rounded-sm.shadow.mt-20.pb-20.px-20

 {

background-color: #000;

}

 




.d-block.mt-4.text-dark {

color: #fff !important;
}


.d-block.font-14.mt-10 {
    color: #000; /* Cambia este valor al color deseado para el primer elemento */
}

.d-block {
    color: #fff; /* Cambia este valor al color deseado para el segundo elemento */
}



.rounded-sm.p-20.p-lg-45.d-flex.flex-column.align-items-center.justify-content-center {
    
box-shadow: none;

}

.d-block.mt-1.mb-3.text-dark {

color: #fff !important;

}


.stars-card {
    min-height: 20px;
    display: none !important;
}



.btn-border-white {


background-color: #00000000;
border-color: gray;

}









.modal-content {

  background-color: #000;
}









ul#tabs-tab {
    background-color: #121212;
}



.input-group-text {
    background-color: #272727 !important;
    border-color: #ffffff !important;
}





.form-control:focus {
    color: #fff;
    background-color: #272722;
    border-color: #43d477;
    outline: 0;
    box-shadow: 1.5rem;
}

.state-icon {
      filter: grayscale(50%);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: #000;
}







.subscribe-plan {
    position: relative;
    border: 3px solid transparent;
    transition: all .4s ease;
    top: 0;
    color: #000 !important;
}


.webinar-card .image-box .badge {
      color: #000;
}

.badge-outlined-warning {
    color: #fff;
    border: 1px solid #fff;
    background-color: #b20000;
}

.webinar-title {
color: black !important;
}

.webinar-price-box {
color: #b20000;
}

.section .section-title {
    font-size: 20px;
    color: #fff;

}











.mb-2, .my-2 {
    margin-bottom: 10px!important;
    background-color: black !important;
}





.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
}

.dropdown-menu {

background: rgb(20 20 20 / 35%) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 0.1px solid #575757;
}






.p-15 {
    padding: 15px !important;
    background-color: #00000000;
}

.bg-gray300 {
    background-color: #a7000085 !important;
}

.bg-white {
    background-color: #fff;
}

.border-gray200 {
    border-color: #878787!important;
}


.accordion-row .panel-collapse {
    border-top: 3px solid #88001b;
    margin-top: 15px;
    padding-top: 15px;
}

.p-10 {
    padding: 10px!important;
    background-color: black;
}









.py-30 {
    padding-bottom: 30px!important;
    display: grid;
    justify-content: center;
}





.chapter-icon.chapter-content-icon {
    background-color: #b45757;
}

.bg-info-light {
    background-color: #272727;
}

* {
    outline: none!important;
    color: #e1e1e1;
}


.note-editor .note-editing-area .note-editable {
    outline: none;
    background-color: #404040;
}

.font-16 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
 
}

.user-inline-avatar .avatar img {
    border-radius: 50%;
    background-color: #000;
}
.webinar-card .image-box img {
    border-radius: 15px 15px 0 0;
    BACKGROUND-COLOR: #000;
}


.text-dark-blue {
    color: #ffffff;
}
.section-title {
    color: #ffffff;
}
.text-dark, .text-dark-all *, .text-dark-all *:before, .text-dark-all *:after {
    color: #000;
}
.form-group .control-label, .form-group > label {
    color: #ffffff;
}
.border-gray300 {
    border-color: #ececec4d!important;
}
.btn-success, .btn-success.disabled {
    box-shadow: 0 2px 6px #ffffff;
    background-color: #b20000;
    border-color: #ffffff;
    color: #fff;
}
.card .card-header, .card .card-body, .card .card-footer {
    background-color: #404040;
}
.category-filter-title {
    position: relative;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.19;
    color: #ffffff;
}

:root {
    --secondary: #ffffff;
    --primary: #fffffff !important;
}

.bg-secondary {
    background-color: #000;
}


.btn {
     color: #ffffff;
     border-radius: var(--theme-button-radius);
}