@font-face{
  font-family: "Fira Sans";
  src: url("/fonts/Fira_Sans/FiraSans-Regular.ttf") format("ttf");
  font-style: normal;
}
@font-face{
  font-family: "Fira Sans";
  src: url("/fonts/Fira_Sans/FiraSans-Bold.ttf") format("ttf");
  font-weight: bold;
}
@font-face{
  font-family: "Fira Sans";
  src: url("/fonts/Fira_Sans/FiraSans-Light.ttf") format("ttf");
  font-weight: 300;
}
@font-face{
  font-family: "Fira Sans";
  src: url("/fonts/Fira_Sans/FiraSans-Italic.ttf") format("ttf");
  font-style: italic;
}
.pink { color: #E81B46; }
.bg-pink { background-color: #E81B46; }
.h-100 { min-height: 100%; }
.sidemenu { height: 100%;  }
.sidemenu li.highlighted { background-color: #eb0d55; }
.sidemenu li.highlighted a { color: #fff; }
.highlighted a { color: #fff; }
.course { text-align: center; } 
.course div.wr-img { max-width: 300px; border-radius: 20px; overflow: hidden; }
.course-box { padding: 1em; }
.box-videos { background-color: #E81B46; padding: 1em; }
.box-videos h3, .box-videos ul li { color: #fff; }

/* home*/
.bg-home { background: url('../img/bgs/home.jpg')no-repeat; background-size: cover; }
.box-home { min-height: 400px; }
footer { margin-bottom: 50px; margin-top: 100px; }
table.table { border-radius: 10px; box-shadow: 1px 1px 3px #ddd; background-color: #FFF; }
table.table tr.cancelled { color: silver; }
.breadcrumb { background-color: transparent; text-decoration: underline; }

.box-welcome { padding-top: 50px; padding-bottom: 50px; }
.box-welcome a.ready > *{  color: gray; }
.box-welcome a.d1 > *{  color: #00a163 !important; }

/*m dashboard */
.short_name { text-transform: uppercase; background-color: #F8BF2D; color: #fff; text-align: center; height: 30px; display: inline-block; width: 30px; font-size: 1.3em; font-weight: bold;  border-radius: 15px;}

.box-head { min-height: 200px; }
.box-head h1 { padding-top: 75px;  }
.menu-user li a { font-weight: bold; }
.aviso { border: solid 1px silver; padding: 1em; }
.st-up { background-color: rgb(0 212 130 / 13%); color: #068051; } .st-up a { color: #068051; }
.st-reg { background-color: rgb(253 126 20 / 21%); color: #ae5104; } .st-reg a { color: #ae5104; }
.st-down { background-color: rgb(193 0 18 / 13%); color: #C10012 ; } .st-down a { color: #C10012 ; }
.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
    background: #297eff;
    color: #fff;
}
table .list-inline { margin: 0; }
.box-content li { background-color: #FBFCF7; }

/* rating */
:root {
  --star-size: 25px;
  --star-color: #fff;
  --star-background: #fc0;
}
.stars {
  --percent: calc(var(--rating) / 4 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;  
}
.stars::before {
  content: "★★★★";
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

.rating input[type="radio"]:not(:nth-of-type(0)) {
    /* hide visually */    
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.rating [type="radio"]:not(:nth-of-type(0)) + label {
    display: none;
}

label[for]:hover {
    cursor: pointer;
}

.rating .stars label:before {
    content: "★";
}

.stars label {
    color: lightgray;
}

.stars label:hover {
    text-shadow: 0 0 1px #000;
}

.rating [type="radio"]:nth-of-type(1):checked ~ .stars label:nth-of-type(-n+1),
.rating [type="radio"]:nth-of-type(2):checked ~ .stars label:nth-of-type(-n+2),
.rating [type="radio"]:nth-of-type(3):checked ~ .stars label:nth-of-type(-n+3),
.rating [type="radio"]:nth-of-type(4):checked ~ .stars label:nth-of-type(-n+4),
.rating [type="radio"]:nth-of-type(5):checked ~ .stars label:nth-of-type(-n+5) {
    color: orange;
}

.rating [type="radio"]:nth-of-type(1):focus ~ .stars label:nth-of-type(1),
.rating [type="radio"]:nth-of-type(2):focus ~ .stars label:nth-of-type(2),
.rating [type="radio"]:nth-of-type(3):focus ~ .stars label:nth-of-type(3),
.rating [type="radio"]:nth-of-type(4):focus ~ .stars label:nth-of-type(4),
.rating [type="radio"]:nth-of-type(5):focus ~ .stars label:nth-of-type(5) {
    color: darkorange;
}

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart .circle {  
  stroke-linecap: square;
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

.row_wh {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    -webkit-box-pack: center; /* wkhtmltopdf uses this one */
    justify-content: center;
}

.row_wh > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.row_wh > div:last-child {
    margin-right: 0;
}


.row_cwh {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    -webkit-box-pack: center; /* wkhtmltopdf uses this one */
    justify-content: center;
}

.row_cwh > div {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
}

.row_cwh > div:last-child {
    margin-right: 0;
}




/* new version */
.slider {
  margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: 1; /*.2*/
}

.slick-active {
  opacity: 1; /*.5*/
}

.slick-current {
  opacity: 1;
}
.slick-arrow:before { 
  color: #000 !important;
  font-size: 4rem !important;
}
.bg-yellow-200 { 
  background-color: rgb(254 240 138);
}
.bg-green-200 { 
  background-color: rgb(187 247 208);
}
.bg-red-200 {
  background-color: rgb(254 202 202);
}
.bg-cyan-200 {
  background-color: rgb(165 243 252);
}



/*survey*/
.stepper-form{
  border-radius: 1.5rem;
  padding: .8rem;
  counter-reset: step-counter;
  box-sizing: content-box;
}

.stepper-form__counter--submited{
  background-color: var(--green-primary);
  animation-duration: 3s;
  animation-name: form-submited;
}

.stepper-form__step{  
  height: 0px;
  visibility: hidden;
  opacity: 0;
  --duration: .3s;
  transition: height var(--duration) ease,
  opacity var(--duration) ease,
  visibility 0s var(--duration);
  position: relative;
}

.stepper-form__step > :not(:first-child){
  
}

.stepper-form__step > * {
  width: 100%;
}

.stepper-form__step > input{
  padding: .3em .4rem;
  border-radius: 0;
  border: solid 2px var(--gray-primary);
  border-radius: 5px;
}
.stepper-form__step > input:invalid{
  box-shadow: none;
  outline: none;
}

.stepper-form__step > input:valid{
  border: solid 2px var(--green-primary);
}

.stepper-form__step--current{
  height: auto;
  visibility: visible;
  opacity: 1;
  transition: height var(--duration) ease,
  opacity var(--duration) ease;
}

.stepper-form__step::before{
  /*counter-increment: step-counter;
  content: counter(step-counter);
  position: absolute;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  background-color: var(--blue-primary);
  color: white;
  top: 50%;
  left: 0;
  transform: translate(-200%, -50%);
  --duration: .5s;
  transition: all var(--duration) ease;*/
}

.stepper-form--submited > .stepper-form__step::before{
  content: '\2713';
  background-color: var(--green-primary);
}

.step-button{
  padding: .5em 1em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
}

.step-button--bg-white{
  background-color: white;
  color: black;
}