html {
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 18px;
}

.custom-container-small {
    display: flow-root;
    box-sizing: content-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
@media all and (max-width:640px) {
    .uk-container {
        padding-left: 25px;
        padding-right: 25px;
    }
    .custom-container-small {
        padding-left: 30px!important;
        padding-right: 30px!important;
    }
}
@media all and (min-width:640px) and (max-width:960px) {
    .custom-container-small {         
        padding-left: 30px!important;
        padding-right: 30px!important;
    }
}



.text-transform-reset {
    text-transform: none!important;
}
.text-striked {
    text-decoration: line-through;
}
.font-1-5x {
    font-size: 1.25rem!important;
}
.font-3x {
    font-size: 2.5rem!important;
}   
 
  
.padding-large-top {
    padding-top: 50px
}

.padding-large-right {
    padding-right: 50px
}

.padding-large-bottom {
    padding-bottom: 50px
}

.padding-large-left {
    padding-left: 50px
}

.padding-large-vertical {
    padding-top: 50px;
    padding-bottom: 50px
}

.padding-medium-vertical {
    padding-top: 25px;
    padding-bottom: 25px
}

.padding-top {
    padding-top: 15px
}

.padding-right {
    padding-right: 15px
}

.padding-bottom {
    padding-bottom: 15px
}

.padding-left {
    padding-left: 15px
}

.reset-line-height {
    line-height: 1!important;
}

/* UTILS */
 
/* Better support for uikit multiline buttons */
.uk-button.multiline-button {
    min-height: 38px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.uk-button.multiline-button > span {
    line-height: 1.1;
}
.uk-button-small.multiline-button {
    min-height: 28px;
}
.uk-button-large.multiline-button {
    min-height: 53px;
}


/*Social colors*/
.facebook_color {
    background-color: #3A5795
}

.twitter_color {
    background-color: #55acee
}

.pinterest_color {
    background-color: #555555
}

.instagram_color {
    background-color: #125688
}

.whatsapp_color {
    background-color: #00e676
}

.whatsapp-contact-float-button {
    background-color: #00e676;
    color: #FFF;
    width: 66px;
    height: 66px;
    display: inline-block;
    text-align: center;
    line-height: 66px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px inset rgba(255,255,255,.4);
    transition: .2s
}
.whatsapp-contact-float-button:hover {
    box-shadow: 0 0 0 5px inset rgba(255,255,255,.8),0 0 0 1px rgba(255,255,255,.8);
    color: #FFF
}
.whatsapp-contact-float-button {
    position: fixed;
    right: 16px;
    bottom:16px
}


.facebook-style-button,
.facebook-style-button:visited {
    border: 1px solid #999;
    border-bottom-color: #888;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    border-color: #29447e #29447e #1a356e;
    color: #fff;
    background-color: #5B74A8;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
    background-image: -moz-linear-gradient(#637bad, #5872a7);
    background-image: -o-linear-gradient(#637bad, #5872a7);
    background-image: linear-gradient(#637bad, #5872a7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7');
    /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}

.facebook-style-button:hover {
    border-color: #1a356e;
    background: #29447e;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1)
}

.background-white {
    background: #FFF
}



/* Errors in view */
h2~.xdebug-var-dump::after {
    content: '+';
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    bottom: 10px;
    left: 10px;
    display: block;
    background: red;
    border: 2px solid #FFF;
    font-size: 35px;
    text-align: center;
    color: #FFF;
    line-height: 33px;
    font-weight: bold;
    transform: rotate(45deg);
}

#mp-cuotas-modal .uk-modal-dialog {
    height: 450px;
}



/* Material Icons */
.material-icons {
    vertical-align: middle
}

/* Rules for sizing the icon. */
.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
    color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

.material-icons.md-light.md-inactive {
    color: rgba(255, 255, 255, 0.3);
}

/* Utils */
.user-avatar-small {
    width: 22px;
    height: 22px;
    line-height: 22px;
}

.user-avatar-medium {
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.user-avatar-large {
    width: 42px;
    height: 42px;
    line-height: 42px;
}

.user-avatar-big {
    width: 80px;
    height: 80px;
    line-height: 80px
}



.rating-star {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}


/* html,
body,
#page-loading {
    background: #FFF
} */

.list-course-name {
    font-size: 17px;
    line-height: 1.2;
}


/* Navbar */

.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle,
.uk-logo, 
.uk-navbar-dropdown-nav > li > a ,
.uk-navbar-right a {
    font-size: 1rem;
    text-transform: none;
    letter-spacing: -.4px;
}

.main-navbar-sticky {z-index: 999;}


.store-logo {
	max-height: 50px;
	max-width: 180px;
}

.user-profile-nav .uk-icon {
    transition: .2s ease-in;
    transform-origin: center
}

.user-profile-nav .uk-open .uk-icon {
    transform: rotate(180deg)
}

.user-profile-nav {
    position: relative;
}


.user-profile-nav-avatar {
    width: 20px;
    height: 20px;
    background: #fff;
    display: inline-block;
    border-radius: 50px;
    margin-right: 5px
}

.user-profile-nav-avatar img {
    vertical-align: inherit;
}

.separator-nav > li {
    position: relative;
}

.separator-nav > li:not(:last-child) {
        margin-right: 15px;
 }
 .separator-nav > li:not(:last-child)::after {
	content: '';
	position: absolute;
	height: 26px;
	width: 1px;
	background: #eee;
	right: -10px;
	top: 50%;
	margin-top: -13px;
}

.cart-counter-badge {
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 23px;
	text-align: center;
	border-width: 2px;
	border-style: solid;
	font-weight: bold;
}

.hero-lead {
    font-size: 18px
}

/* Public course */
.course-fixed-bar-buy {
    z-index: 999;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition: all .1s;
    height: 0;
}

.course-fixed-bar-buy.uk-sticky-fixed {
    pointer-events: all;
    opacity: 1;
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.course-fixed-bar-buy-name {
    font-size: 16px;
    line-height: 1.1
}

.course-fixed-bar-buy .cta-section>*:not(.uk-button) {
    display: none !important
}





/* Course rate */
.rate-course .material-icons {
    font-size: 36px;
    color: #dada0a;
}

.rate-course .material-icons:hover {
    cursor: pointer;
}


.course-tabs-navbar-container .uk-navbar-nav>li>a {
    text-transform: none;
    color: #111;
    font-weight: 500
}

.course-tabs-navbar-container .uk-navbar-nav>li.uk-active>a {
    color: #1e87f0
}

.course-tabs-navbar-container .uk-tab>*>a {
    border-bottom-width: 4px
}

.course-sell-bar {
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.course-sell-bar .course-name {
    line-height: 1.2;
    display: block;
    font-weight: 500;
}

.lessons-list ul li {
    margin: 0 0 1px 0 !important
}

.lessons-list ul li:last-child {
    margin-bottom: 0 !important
}


.uk-card-body.lessons-list {
    padding: 0;
    background: transparent
}

.lessons-list li a {
    padding: 10px 16px;
    color: #333;
    background: #fff;
}


.lessons-list ul li:first-child a {
    border-radius: 5px 5px 0 0;
}

.lessons-list ul li:last-child a {
    border-radius: 0 0 5px 5px;
}

.lessons-list li a:hover {
    text-decoration: none;
    color: #000 !important;
}

.free-content-badge {
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    background: #5caf33;
    font-size: 12px;
}

.lesson-list-indicator {
    position: relative;
    z-index: 2;
    border-radius: 50px;
    width: 32px;
    height: 32px;
    background: #eee;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    box-shadow: 0 0 0px 3px inset;
    -moz-box-shadow: 0 0 0px 3px inset;
    -webkit-box-shadow: 0 0 0px 3px inset;
}

.lesson-list-viewed .lesson-list-indicator::after {
    content: '';
    display: block;
    width: 4px;
    position: absolute;
    height: 31px;
    left: 14px;
    z-index: 1;
    top: 31px;
}


.lessons-list ul li.lesson-list-viewed:last-child .lesson-list-indicator::after {
    display: none
}

li.lesson-list-viewed>a {
    color: #999;
}

.lesson-list-viewed .lesson-list-indicator {
    color: #FFF;
}

.custom-icon.custom-icon-small {
    display: inline-block;
    width: 22px;
}

/* Lesson */
.lesson-navbar {
    padding-top: 15px;
    padding-bottom: 15px;
}

.instructor-avatar {
    width: 30px;
    height: 30px;
    line-height:28px
}

.lesson-list-name {
    line-height: 1.2;
}

/* Listing product */

.discount-pin {
    width: 32px;
    height: 32px;
    display: flex;
    text-align: center;
    line-height: 1;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    padding: 5px;
    transform: rotate(-10deg);
    color: #fff !important;
    font-size: 13px;
    border: 2px solid #FFF;
    background-color: var(--brand-color);
    box-shadow: 0 0 8px -5px #000;
    margin-top: -10px;
}


.discount-pin > span::after {
    content: '% OFF';
}

.category-page .course-categories-badges {
    display: none;
}

.list-product-final-price {
    font-size: 20px
}

/*Discounted price badge*/
.discounted-price {
    font-size: 14px;
    position: relative;
    white-space: nowrap;
    display: table-cell;
}

.discounted-price::after {
    background: #222222;
    border-radius: 3px;
    box-shadow: 0 0 0 0.5px #fff;
    content: "";
    display: block;
    height: 1px;
    left: -2px;
    margin-top: -0.5px;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: rotate(-2deg);
}

.footer-logo {
    width: 160px;
}


/* Custom payments options icon list */
.available-payments-methods {
    font-size: 12px;
}


.img-fallback {
    position: relative;
}

.img-fallback::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 53.33333333%
}

.img-fallback > span {
    background: #FFF;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    opacity: .5;
}

.course-intro .img-fallback span {
    background-color: #fff;
}

canvas.storelogo-fallback {
    background-repeat: no-repeat;
    background-color: #AAA;
    background-position: center;
    background-size: 50%;
    background-blend-mode: luminosity;
    position: absolute;
}

.facebook-style-button,
.facebook-style-button:visited {
    border: 1px solid #999;
    border-bottom-color: #888;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    border-color: #29447e #29447e #1a356e;
    color: #fff;
    background-color: #5B74A8;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
    background-image: -moz-linear-gradient(#637bad, #5872a7);
    background-image: -o-linear-gradient(#637bad, #5872a7);
    background-image: linear-gradient(#637bad, #5872a7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7');
    /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}

.facebook-style-button:hover {
    border-color: #1a356e;
    background: #29447e;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1)
}

.list-product-name {
    line-height: 1.2;
    display: inline-block
}

.course-categories-badges {
    margin-right: -20px
}



.image-fixer {
    position: relative;
    display: block;
    overflow: hidden;
}

.image-fixer::before {
    content: '';
    display: block;
    width: 100%;
}

.ratio-16-9::before {
    padding-top: 56.25%;
}

.ratio-1-1::before {
    padding-top: 100%;
}

.ratio-3-2::before {
    padding-top: 66.66%;
}

.ratio-16-10::before {
    padding-top: 62.50%;
}

.image-fixer img,
.image-fixer-fallback {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    display: block;
}

.list-product-card__content--data.uk-card-small.uk-card-body {
    padding: 20px;
}

.category-badge {
    margin-right: 2px
}


.category-card {
    padding-bottom: 40px !important
}

.category-card::after {
    content: '';
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    display: block;
    position: absolute;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#00000000', GradientType=0);
    pointer-events: none;
    border-radius: 5px;
}

.category-card:hover::after {
    bottom: 4px;
    left: 4px;
    right: 4px;
    top: 4px;
}

.category-card:hover .show-products {
    opacity: 1;
}

.category-card .show-products {
    font-size: 12px;
    font-weight: normal;
    transition: ease-in .2s;
    opacity: 0;
    white-space: nowrap;
    background: rgba(255, 255, 255, .25) !important;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-weight: 700;
    border: 0 !important;
}

.category-card .category-card-name {
    background: -webkit-gradient(linear, right top, left top, from(#503307), to(#111));
    background: linear-gradient(to left, #503307, #111);
    background-clip: border-box;
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    font-size: 18px;
    line-height: 1.1;
}


.section-title {
    padding-bottom: 20px;
}

.section-title span {
    position: relative;
    display: inline-block
}

.section-title span::after {
    content: '';
    height: 4px;
    display: block;
    left: 0;
    right: 40px;
    background-color: #cccccc;
    position: absolute;
    bottom: -15px;
    border-radius: 5px;
}

.uk-text-center.section-title span::after {
    left: 40px;
    right: 40px;
}

.uk-text-right.section-title span::after {
    left: 40px;
    right: 0px;
}


.uk-border-circle>canvas {
    border-radius: 50%;
}

/* testimonials */
.testimonial-picture {
    width: 60px;
    height: 60px;
}

.mobile-nav-offcanvas {
    padding-top: 120px;
}




/* Responsive styles */

@media (max-width:480px) {
    /* body {padding-bottom: 60px;} */
    .bottom-mobile-navbar .uk-navbar-nav > li > a {
        min-height: 60px;
    }
    .bottom-mobile-navbar .nav-item-label {
        font-size: 12px;
    }
    /* .whatsapp-contact-float-button {
        bottom: 70px;
    } */
}
 

@media (max-width:640px) {
   

    .bottom-mobile-navbar .uk-navbar-nav > li > a .cart-counter-badge {
        position: absolute;
        top: 5px;
    }

    .lesson-content-wrapper {
        padding-top: 15px;        
    }
 
    .list-product-card .list-product-price {
        padding-top: 5px;
        padding-bottom: 5px
    }
}

@media all and (min-width:641px) {
    .lesson-content-wrapper {
        padding-top: 30px
    }
}
@media all and (max-width:960px) {

    .mobile-nav-offcanvas {
        width: 100vw;
    }
   
     

  
    .bottom-mobile-navbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 9999;
        border-top: 1px solid #eee;
    }
    .bottom-mobile-navbar .user-avatar {
        width: 24px;
        height: 24px;
    }
}

/* @media all and (min-width:481px) and (max-width:960px) {
    .whatsapp-contact-float-button {
        bottom: 90px;
    }
} */

@media all and (min-width:960px) {

    .main-navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .store-logo {
        max-height: 64px;
        max-width: 180px;
    }
    .course-sell-bar {
        background: #eee;
        border-bottom: 1px solid transparent;
    }

    .course-sell-bar.uk-active {
        border-bottom: 1px solid #dddddd;
    }
}

#store-modal .sfy-modal-dialog {
    border-radius: 10px;
    box-shadow: none;
}

 
/* Uikit */
.uk-tab > * > a {
    border-bottom-width: 2px
}

/**QUIZZES**/
.quiz-layout-wrapper {
    background-color: #FFF; 
    min-height: 300px   
    
}
.quiz-layout-container {
    position: relative;
    width: 100%;
    /* padding-top: 40px; */
    
}
.quiz-layout-question {    
    position: relative;
}
.quiz-question-answers li {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
}
.quiz-question-answers li label {
    display: inline-block;
    width: 100%;
}
.quiz-question-answers li.quiz-question-selected.quiz-correct-answer {
    border-color:#32d296;
}
.quiz-question-answers li.quiz-question-selected.quiz-incorrect-answer {
    border-color:#f0506e;
}
.quiz-results-wrapper .quiz-results-header {
    /* background: #208058; */
    /* color: #FFF; */
    z-index: 1;
    left: 0;
    top: 0;
    padding: 20px;
}
.quiz-results-wrapper .quiz-results-header-fail {
    
}
.quiz-results-wrapper .quiz-results-title {    
    line-height: 1.1em;
   
   
}
.quiz-results-wrapper .quiz-results-summary {
    
}
.quiz-results-wrapper .quiz-results-content {
    
}
.quiz-compact-container {
    margin: 0 auto;
    max-width: 840px;
}
.quiz-results-success-icon {
    margin: 0 auto 32px auto;
    background: #FFF;
    width: 56px;
    height: 56px;    
    border-radius: 50%;  
}
.quiz-results-success-icon:before,
.quiz-results-success-icon:after {
    content: '';
    display: block;
    position: absolute;
    width: 43%;
    border-bottom: 1px solid #FFF;
    top: 50%;
}
.quiz-results-success-icon:before {
    left: 0;
}
.quiz-results-success-icon:after {
    right: 0;
}
.quiz-layout-content,
.quiz-intro {    
    height: 100%;
}
.quiz-layout-header {
    border-bottom: 0 !important;
}
.quiz-question-header {
    border-bottom: 1px solid #dbdbe2;
    padding-bottom: 10px;
    
    margin-bottom: 10px;
}
.quiz-intro .quiz-name {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.quiz-intro .quiz-intro-buttons {
    
}
.uk-label.quiz-correct-answer {
    background-color: #32d296;
    color: #fff; 
}
.uk-label.quiz-incorrect-answer {
    background-color: #f0506e;
    color: #fff; 
}
/***END QUIZZES**/

/*** EVENTS ***/
#purchase-modal li.event-variant-item:not(.selected):hover .uk-card-body {
    box-shadow: 0 0 0px 2px inset;     
    cursor: pointer;
    border-radius: 5px;
}
#purchase-modal li.event-variant-item.selected button[data-event-pick-variant] {
    display: none;
}
#purchase-modal-variants.event-variant-selected .purchase-modal-title {
    display: none;
}
/*** END EVENTS ***/


/*== 01. General                    ==*/   
/*== 02. Text                       ==*/ 
/*== 03. Links                      ==*/
/*== 04. Buttons                    ==*/
/*== 05. Headings                   ==*/
/*== 06. Sections                   ==*/
/*== 07. Navbar                     ==*/
/*== 08. Cards                      ==*/
/*== 09. Modals                     ==*/
/*== 10. Close                      ==*/
/*== 11. Forms                      ==*/
/*== 12. Accordion                  ==*/
/*== 13. Slidenav                   ==*/
/*== 14. Badge                      ==*/
/*== 15. Overlay                    ==*/
/*== 16. Tabs                       ==*/
/*== 17. Alerts                     ==*/  
/*== 18. Label                      ==*/      
/*== 19. Tiendup Custom Elements    ==*/

    /*== 01. General    ==*/  
    html {
        background: var(--background-color); /* Habria que sacar el uk-section-default de las sections o bien llevar este color ahi*/
        color: var(--text-color);
    }
      
    /*== 02. Text           ==*/
      .uk-text-primary {
          color: var(--brand-color)!important
      }
      .uk-text-muted {
        color: var(--text-muted-color);
    }


    /*== 03. Links          ==*/
      .uk-link, a, .uk-link-toggle:focus .uk-link, .uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover {
          color: var(--brand-color)
      }
      .uk-link-heading a:hover, .uk-link-toggle:focus .uk-link-heading, .uk-link-toggle:hover .uk-link-heading, a.uk-link-heading:hover {
          color: var(--brand-color)
      }
       
      .uk-link-muted a:hover, .uk-link-toggle:focus .uk-link-muted, .uk-link-toggle:hover .uk-link-muted, a.uk-link-muted:hover {
        color: var(--text-muted-color);
    }

    /*== 04. Buttons        ==*/


    .uk-button-default {
        border-color: var(--border-color);
        color: var(--text-color);
    }
    .uk-button-default:focus, .uk-button-default:hover {
        border-color: var(--text-color);
        color: var(--text-color);
    }
    
    .uk-button-primary {
        --button-primary-background-color: var(--button-background-color);
        --button-primary-background-hover-color: hsl( var(--btn-bg-hue) var(--btn-bg-saturation) calc( var(--btn-bg-lightness) + 0%) );
        --button-primary-text-color: var(--button-text-color);
        
        background-color: var(--button-primary-background-color);
        color: var(--button-primary-text-color);
    }
    .uk-button-primary:focus, .uk-button-primary:hover {
        background-color: var(--button-primary-background-hover-color);
        color: var(--button-primary-text-color);
    }
    
    .uk-button-link {
        color: var(--brand-color);
    }
    .uk-button-link:focus, .uk-button-link:hover {
        color: var(--button-primary-background-hover-color);
    }
   
      
     /*== 05. Headings       ==*/
     .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
        color: var(--text-color);
    }
     
      
      /*== 06. Sections       ==*/
      .uk-section-default,
      .uk-background-default {
          background-color: var(--background-color);
          color: var(--text-color)
      }

      .uk-section-primary:not(.uk-preserve-color),
      .uk-background-primary {        
          background-color: var(--brand-color);
          color: var(--on-brand-color, #FFFFFF)
      }      
      .uk-section-primary:not(.uk-preserve-color) .uk-h1, .uk-section-primary:not(.uk-preserve-color) .uk-h2, .uk-section-primary:not(.uk-preserve-color) .uk-h3, .uk-section-primary:not(.uk-preserve-color) .uk-h4, .uk-section-primary:not(.uk-preserve-color) .uk-h5, .uk-section-primary:not(.uk-preserve-color) .uk-h6, .uk-section-primary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-section-primary:not(.uk-preserve-color) .uk-heading-large, .uk-section-primary:not(.uk-preserve-color) .uk-heading-medium, .uk-section-primary:not(.uk-preserve-color) .uk-heading-small, .uk-section-primary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-section-primary:not(.uk-preserve-color) h1, .uk-section-primary:not(.uk-preserve-color) h2, .uk-section-primary:not(.uk-preserve-color) h3, .uk-section-primary:not(.uk-preserve-color) h4, .uk-section-primary:not(.uk-preserve-color) h5, .uk-section-primary:not(.uk-preserve-color) h6 {
        color: var(--on-brand-color, #FFFFFF)
      }

      .uk-section-muted,
      .uk-background-muted {
          background: var(--background-muted-color);
          color: var(--text-color)
      }

      .uk-section-secondary:not(.uk-preserve-color),
      .uk-background-secondary {        
          background-color: var(--secondary-color, #222222);
          color: var(--on-secondary-color, #FFFFFF)
      }      
      .uk-section-secondary:not(.uk-preserve-color) .uk-h1, .uk-section-secondary:not(.uk-preserve-color) .uk-h2, .uk-section-secondary:not(.uk-preserve-color) .uk-h3, .uk-section-secondary:not(.uk-preserve-color) .uk-h4, .uk-section-secondary:not(.uk-preserve-color) .uk-h5, .uk-section-secondary:not(.uk-preserve-color) .uk-h6, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-large, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-medium, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-small, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-section-secondary:not(.uk-preserve-color) h1, .uk-section-secondary:not(.uk-preserve-color) h2, .uk-section-secondary:not(.uk-preserve-color) h3, .uk-section-secondary:not(.uk-preserve-color) h4, .uk-section-secondary:not(.uk-preserve-color) h5, .uk-section-secondary:not(.uk-preserve-color) h6 {
        color: var(--on-secondary-color, #FFFFFF)
      }
      .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary,
      .uk-background-secondary .uk-button-primary {        
          background-color: var(--brand-color, #FFFFFF);
          color: var(--on-brand-color, #222222)
      }  
      
      
      /*== 07. Navbar         ==*/ 
     
      .uk-navbar-nav > li > a,
      .uk-navbar-dropdown-nav > li > a,
      .uk-navbar-toggle {
          color: var(--text-color);
      }
      .uk-navbar-nav > li.uk-active > a,
      .uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover,
      .uk-navbar-toggle.uk-open, .uk-navbar-toggle:focus, .uk-navbar-toggle:hover {
          color: var(--brand-color);
      }
      .uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a[aria-expanded="true"] {
          color: var(--brand-color);
      }
      .uk-navbar-dropdown {
          background: var(--background-color);
          color: var(--text-color);
      }
      
      
      .uk-hr, hr, .uk-heading-line > ::after, .uk-heading-line > ::before,
      .uk-navbar-dropdown-nav .uk-nav-divider {
          border-color: var(--border-color);
      }
      
     
      
      
      
      
      
     /*== 08. Cards          ==*/
 
      .uk-card-default {
        --card-default-background-color: var(--background-color) ;
        --card-default-text-color: var(--text-color);   
        --card-default-border-color: hsla( var(--text-hue), var(--text-saturation), var(--text-lightness), .1);

        background-color: var(--card-default-background-color);
        color: var(--card-default-text-color);
        /* border: 1px solid var(--card-default-border-color); */
      }
      .uk-card-default .uk-card-header,
      .uk-card-default .uk-card-footer {    
          border-color: var(--card-default-border-color);
      }
      .uk-card-default .uk-card-title {
          color: var(--text-color);
      }
      
      
      /*== 09. Modals         ==*/
      .uk-modal-header {
          background-color: var(--background-muted-color);
          border-color: var(--border-color);
      }
      
      .uk-modal-dialog {
          background: var(--background-color); /* Habria que sacar el uk-section-default de las sections o bien llevar este color ahi*/
          color: var(--text-color);
      }
      .uk-modal-footer {
          background-color: var(--background-color);
          border-color: var(--border-color);
      }
      .uk-modal-close-full {
          background-color: var(--background-muted-color);
      }
      
      /*== 10. Close          ==*/
      .uk-close {
          color: var(--text-muted-color);
      }
      .uk-close:focus, .uk-close:hover {
          color: var(--text-color);
      }
      
     /*== 11. Forms          ==*/
      .uk-form-label {
          color: var(--text-color);
      }
      .uk-input, .uk-select, .uk-textarea, .uk-search-input {
          background-color: var(--background-color);
          border-color: var(--border-color);
          color: var(--text-color);
      }
      .uk-input:focus, .uk-select:focus, .uk-textarea:focus, .uk-search-input:focus {    
          background-color: var(--background-color);
          color: var(--text-color);
          border-color: var(--brand-color);
      }
     
      
     /*== 12. Accordion      ==*/
      .uk-accordion-title::before {
          background-color: var(--brand-color);
          border-radius: 50px;
      }
      .uk-accordion-title:focus, .uk-accordion-title:hover {
          color: var(--text-color);
      }
      
      /*== 13. Slidenav       ==*/
      .uk-slidenav, .uk-slidenav {
          color: var(--text-color);
      }
      .uk-slidenav:focus, .uk-slidenav:hover {
          color: var(--brand-color);
      }
      
     /*== 14. Badge          ==*/
      .uk-badge {
          background: var(--brand-color);
          color: var(--text-color);
      }
      
      /*== 15. Overlay        ==*/
      .uk-overlay-default {
          background: var(--overlay-default-background-color);
      }
      
      /*== 16. Tabs           ==*/
      .uk-tab > * > a {
          color: var(--text-color);
      }
      .uk-tab > .uk-active > a {
          color: var(--brand-color);
          border-color: var(--brand-color);
      }
      .uk-tab::before {
          border-color: var(--border-color);
      }
      .uk-tab > * > a:focus, .uk-tab > * > a:hover {
          color: var(--brand-color);
      }

      
      
     /*== 17. Alerts         ==*/
      .uk-alert {
          background-color: var(--background-muted-color);
          color: var(--text-color);
           
      }

       /*== 18. Label         ==*/
      .uk-label {
        background-color: var(--brand-color);
        color: var(--on-brand-color);
      }
      
      /*== 19. Tiendup Custom 
        Elements            ==*/
      /* TODO: borrar  el background de .lesson-list-indicator */
      .lessons-list li a {    
          color: var(--text-color);
          background-color: var(--card-default-background-color);
      }
      .lessons-list li a:hover {
          color: var(--brand-color);
      }
      
      .ck.ck-editor__main > .ck-editor__editable {
          background: var(--background-color)!important;
      }