@import url('https://diana-ecommerce.online/wp-content/uploads/elementor/css/post-6.css?ver=1722128007');

@font-face{ font-display:block;
            font-family:bootstrap-icons;
            src:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") 
            format("woff2"),
            url("https: //cdn .jsdelivr .net/npm/bootstrap icons @1 0.11em 0.3em /font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") 
            format("woff")
}

.elementor-kit-6 {
   
    --la-font-size-card-body : var(--elementor-font-size, 17px);
    --la-color-text-white : var(--e-global-color-6674a1e, #FFF);
    --la-color-bg-white   : var(--e-global-color-6674a1e, #FFF);
    --la-color-black      : var(#333);
    --la-color-bg-primary : var(--e-global-color-5d4f6e3, #007bff);
    --la-color-text-red   : var(--e-global-color-5d4f6e3, #007bff);
    --la-color-bg-red     : var(--e-global-color-5d4f6e3, red);
    --la-color-bg-blue    : var(--e-global-color-primary, #007bff);
    --la-color-text-gray  : var(--e-global-color-5d4f6e3, #646464);

    --la-btn-color-text-primary : var(--e-global-color-6674a1e, #FFF5);
    --la-btn-color-bg-primary   : var(--e-global-color-5d4f6e3, #007bff);
    --la-btn-color-text-warning : var(--e-global-color-text, rgb(0, 38, 206));
    --la-btn-color-bg-warning   : var(--e-global-color-5b9162c, #ffc107);
    --la-btn-color-bg-danger    : var(--e-global-color-1c9b076, red);
    --la-btn-color-text-success : var(--e-global-color-6674a1e, #FFF);
    --la-btn-color-bg-success   : var(--e-global-color-primary, rgb(78, 143, 5));
    --la-title-color-text       : var(--e-global-color-d850089, #000000)


}

:root {
    --la-font-size-card-body : var(--elementor-font-size, 17px);
    --la-color-text-white : var(--e-global-color-6674a1e, #FFF);
    --la-color-bg-white   : var(--e-global-color-6674a1e, #FFF);
    --la-color-black      : #333;
    --la-color-bg-primary : var(--e-global-color-5d4f6e3, #007bff);
    --la-color-text-red   : var(--e-global-color-5d4f6e3, #007bff);
    --la-color-bg-red     : var(--e-global-color-5d4f6e3, red);
    --la-color-bg-blue    : var(--e-global-color-primary, #007bff);
    --la-color-text-gray  : var(--e-global-color-5d4f6e3, #4e4e4e);

    --la-btn-color-text-primary : var(--e-global-color-6674a1e, #FFF);
    --la-btn-color-bg-primary   : var(--e-global-color-5d4f6e3, #007bff);
    --la-btn-color-text-warning : var(--e-global-color-text, rgb(0, 38, 206));
    --la-btn-color-bg-warning   : var(--e-global-color-5b9162c, #ffc107);
    --la-btn-color-bg-danger    : var(--e-global-color-1c9b076, red);
    --la-btn-color-text-success : var(--e-global-color-6674a1e, #FFF);
    --la-btn-color-bg-success   : var(--e-global-color-primary, rgb(78, 143, 5));
    --la-title-color-text       : var(--e-global-color-d850089, #4e4e4e)
}

.banner-class {
    display: none !important;
}

#toplevel_page_learning-activities-menu .wp-menu-image:before {
    content: "\F270"; /* Código del icono de Bootstrap Icons */
    font-family: 'bootstrap-icons'; /* Familia de fuentes de Bootstrap Icons */
    font-size: 20px; /* Tamaño del icono */
    color: #ffffff; /* Color del icono */
}

/*****
Sobre escribir algunas clases de bootstrap
*****/
.form-floating>label{
    left: auto !important;
    color:#666
}
.nav-pills {
    background-color: var(--la-color-bg-white);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    color: var(--la-color-text-white) !important;
    background-color: var(--la-btn-color-bg-primary) !important;
}

.btn-primary{
    background-color: var(--la-btn-color-bg-primary) !important;
    border-color: var(--la-btn-color-text-primary) !important;
}

.btn-warning{
    background-color : var(--la-btn-color-bg-warning ) !important;
    border-color : var(--la-btn-color-bg-warning ) !important;
    color : var(--la-btn-color-text-warning) !important;
    font-weight: bold;
}

.list-group a{
    color: var(--la-color-text-gray)!important;
}

.list-group-item-action:active{
    background-color: var(--la-btn-color-bg-primary) !important;
    color : var(--la-btn-color-text-primary) !important;
}

.list-group-item:hover{
    background-color: var(--la-btn-color-bg-primary) !important;
    color : var(--la-btn-color-text-primary) !important;
}

.list-group a:hover{
    color : var(--la-btn-color-text-primary) !important;
}

.list-group-item.active {
    color: var(--la-btn-color-text-primary) !important;
    background-color: var(--la-btn-color-bg-primary)!important;
    border-color: var(--la-btn-color-bg-primary)!important;
}

.card-text{
    font-size : var(--la-font-size-card-body) !important;
    color : var(--la-color-black) !important
}

a.btn.btn-primary {
    color: var(--la-btn-color-text-primary) !important;
}

.wp-block-post-content a:not() {
    color: initial !important; 
}

input:not([type="checkbox"]):required, select:required, textarea:required {
    border-left: 4px solid var(--la-color-bg-red);
}

input:not([type="checkbox"]):required:valid, select:required:valid, textarea:required:valid {
    border-left: 4px solid var(--e-global-color-primary, rgb(0, 38, 206));
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important; 
    margin-left: auto !important;
    margin-right: auto !important;
}

.section_title{
    color : var(--la-title-color-text);
}

.text-head-activity{
    font-size: 17px;
    color:var(--la-color-text-gray)
}

body {
    margin: 0;
    --wp--style--global--content-size: 90%;
    --wp--style--global--wide-size: 1200px;
}

.price{
    color: var(--la-btn-color-text-primary);
    font-weight: bold;
    text-align: center;
    width: 100%;
    display: block;
    padding : 10px;
    background-color: var(--la-btn-color-bg-primary);
}
/************************
*title actividades
*************************/
.title-primary{
    color : var(--la-color-bg-primary)
}
/************************
*Tabs de actividades
*************************/

.btn-arrow-firt {
    clip-path: polygon(10% -10%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, -10% 0%);
    z-index: 101010;
}

.btn-arrow-completed {
    clip-path: polygon(10% -10%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, -10% 0%);
}

.btn-arrow{
    background-color: var(--la-btn-color-bg-primary);
}

.btn-arrow a{
    color: var(--la-btn-color-text-primary) !important;
}



[name=tabsActivities]{
    border: 1px  solid var(--la-btn-color-bg-primary);
}
/****************************
*Actividad respuesta multiple
*****************************/
[name="multiple_response"] .section_question>.region_answer:hover {
    background-color: var(--la-btn-color-bg-primary);
    color: var(--la-btn-color-text-primary);
}

[name="multiple_response"] .selected {
    background-color: var(--la-btn-color-bg-primary);
    color: var(--la-btn-color-text-primary);
}

/************************
Audio
*************************/
.custom-controls {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    background-color: var(--la-btn-color-bg-primary);
    width: 100px;
    flex-direction: column;
    border-radius: 5px ;
}

.custom-controls button {
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 10px;

}
.custom-controls .play{
    content: "\F610"; /* Código del icono de Bootstrap Icons */
    font-family: 'bootstrap-icons'; /* Familia de fuentes de Bootstrap Icons */
    font-size: 40px; /* Tamaño del icono */
    color: var(--la-btn-color-text-primary); /* Color del icono */
}

.custom-controls input[type="range"] {
    flex: 1;
    margin-right: 10px;
}

.custom-controls .progress-bar {
    width: 50px;
    height: 5px;
    background: var(--la-btn-color-text-primary);;
    border-radius: 3px;
    position: relative;
}

.custom-controls .progress-bar .fill {
    height: 100%;
    background: #000;
    width: 0;
    border-radius: 3px;
    position: absolute;
}