/* PERCENTAGE GAUGE */
.pie {position: relative;display: inline-block;background-image: conic-gradient(rgba(0,0,0,0) calc(3.6deg * var(--percent)),rgba(0,0,0,1) calc(3.6deg * var(--percent)));background-blend-mode: overlay;background-position: 50% 50%;background-size: 150%;width: 3.75em;height: 3.75em;border-radius: 50%;}

/* show the percentage (thanks to Ana Tudor for the counter() trick) */
.pie--value::after {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);counter-reset: percent var(--percent);content: counter(percent) "%";color: #fff;text-shadow: 1px 1px 1px #000;}
.pie--disc::before {content: '';position: absolute;top: .5em;left: .5em;right: .5em;bottom: .5em;border-radius: 50%;background: #fff;}
.pie--disc::after {color: #000;text-shadow: none;}

/* demo styles
----------------------------------------------------- */
@supports (background: conic-gradient(red, blue)) {body::before {content: '';}}
body {font: 90%/1.5 Arial;background: #f1f1f2;}
.pie {border: .15em solid #fff;box-shadow: 0 .075em .2em .05em rgba(0,0,0,.25);margin: .75rem;}
.pie:nth-child(1) {background-color: #d44;}
.pie:nth-child(2) {background-color: #fc3;}
.pie:nth-child(3) {background-color: #ac0;}
.pie:nth-child(4) {background-color: #0ac;}
.pie:nth-child(5) {background-color: #d6b;}
.big {font-size: 200%;}
.med {font-size: 150%;}
.sml {font-size: 100%;}



/* NAVIGATION */
#course-title{font-size: 14px;line-height:20px;font-weight:bold;}
#module-title{font-size:35px;line-height:45px;color:#b6d328;font-weight:400;}
#navigation-left .accordion-item{border-bottom:1px solid #3c4043;}
#navigation-left .list-group-item{padding-inline-start:1.2rem;cursor:pointer;color:#3c4043;border:none;opacity:1;padding:20px 1.25rem;font-size:14px;line-height:19px;border-bottom:1px solid #000;}
#navigation-left .list-group-item.active{font-weight:800;background:none;color:#b6d328;}
#navigation-left .list-group-item.disabled{opacity:0.3;}
#navigation-left .accordion-body { padding: 0;}
#navigation-left .accordion-body h6{font-size:12px;line-height:17px;font-weight:bold;margin: 10px 0 0 0 ;padding:10px 0;color:#581845;}
#navigation-left .accordion-button{font-size:16px;line-height:21px;}
#navigation-left .accordion-button span{display:block;margin-right:10px;}
.title-container{position:relative;}
#navigation-left .list-group-item i{margin-right:18px;}
main{position:relative;}


.checked i{color:#34a853;}
.accordion-button:focus{border:none;box-shadow:none;}
.accordion-button:not(.collapsed){color:#3c4043; background: rgba(0,92,185,0.1); }
.accordion-button:not(.collapsed)::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");}
.accordion-button::after{width:1.5rem;}
.accordion-button.completed::after{font-family:'Font Awesome 6 Free';content:"\f058";color:#34a853;font-weight:900;background:none;transform:none;font-size:24px;width:24px;height:24px;  }
.accordion-button:focus{border:inherit;}

/* CONTENT */
.main-container{background-color:#f2f7fb;position:relative;padding:0;}
.main-container::before{content:'';top:0;left:0;opacity:1;position:absolute;height:7px;width:100%;background: rgb(90,24,70);
background: #fff;;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5A1846",endColorstr="#FFC301",GradientType=1);}
#content_data{font-size:18px;line-height:25px;padding:0px 50px 20px 50px;max-width:1340px;margin:auto;}
#progress_bar{content:'';top:0;left:0;position:absolute;height:7px;width:0%;opacity:1;background: #b6d328;-webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;}
#continueLesson{padding:30px 30px 0 30px;color:#a80d40;opacity:0;font-weight:bold;cursor:pointer;max-width:1300px;min-height:80px;margin:auto;}
#continueLesson.disabled{pointer-events:none;}
#VideoTranscription{margin-top:40px;}
#lesson-title h3{margin-bottom:15px;font-size:35px;line-height:40px;font-weight:800;margin-bottom:30px;}

/* TESTS */
#answer-list .list-group-item{cursor:pointer;}
.test-header{border-bottom:1px solid #ccc;}
.test-item{ display:none;}
.test-item:first-child{display:block;}

/* Carousel */
.carousel-control-next, .carousel-control-prev{
    color: #b6d328 ;
    width:5%;
    align-items: baseline;
    top: 15px;
    display: grid;
}
.carousel-control-next-icon{
    background-image: url(../img/flecha-derecha.png);
}
.carousel-control-prev-icon{
    background-image: url(../img/flecha-izquierda.png);
}

/* LOGO CABECERA */
.title-container{
    display: inline-block;
    width: auto !important;
    max-width: 75%;
}
#module-image{
    text-align: right;
}
#course-title{
    text-align: justify !important;
}
@media only screen and (max-width: 770px){
    .title-container{max-width: 100%;}
}