@font-face {
    font-family: bb-bold;
    src: url('../fonts/BalooBhai2-Bold.ttf');
}
@font-face {
    font-family: bb-semibold;
    src: url('../fonts/BalooBhai2-SemiBold.ttf');
}
@font-face {
    font-family: bb-extrabold;
    src: url('../fonts/BalooBhai2-ExtraBold.ttf');
}
@font-face {
    font-family: bb-variable;
    src: url('../fonts/BalooBhai2-VariableFont_wght.ttf');
}
@font-face {
    font-family: bb-medium;
    src: url('../fonts/BalooBhai2-Medium.ttf');
}
@font-face {
    font-family: bb-regular;
    src: url('../fonts/BalooBhai2-Regular.ttf');
}
@font-face {
    font-family: cocon-regular;
    src: url('../fonts/Cocon-Regular-Font.otf');
}

.montserrat-300 {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }

body {
    /*background-color:#F2F6FE;*/
    background-color: white;
    font-family: "bb-regular", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
#topBar {
    height:62px;
    margin-top: 12px;
    margin-bottom: 25px;
    border-radius:100px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow:rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;

}

#topLogo {
    margin:10px;
}

.progresses{
    display: flex;
    align-items: center;
    justify-content: center;
}

.progressText {
    color:rgb(0, 85, 233);
    font-weight: 500;
    font-size: 18px;
    margin-top: 75px;
}

.line{
    width: 15%;
    height: 1px;
    background: black;
}


.steps{
    display: flex;
    background-color: rgb(0, 85, 233);
    color: #fff;
    font-size: 12px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.active {
    background-color: rgb(0, 0, 0);
}

#bottomBar {
    background-color: rgb(0, 85, 233);
    color:white;
}

#bottomBar a {
    color:white;
}

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
}

.navbarCenter {
    margin: auto;
}

#questions {
    text-align: center;
    height:65vh;
}

.stepElem {
    align-content: center;
    height: 100%;
}

.answersBlock {
    margin-top: 50px;
}

.answersBlock-sm {
    margin-top: 20px;
}

.answer {
    border: 2px solid rgb(0, 85, 233);
    border-radius: 5px;
    padding: 4px;
    height: 100px;
    align-self: center;
    box-shadow:rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
    /*background-color: #F0F1F1;*/
    background-color: white;
    cursor: pointer;
    font-size: 1em;
}

.alm {
    height: 120px;
    align-content: center;
}
.alg {
    height: 150px;
    align-content: center;
}

.activeAnswer {
    border: 4px solid rgb(0, 85, 233);
    background-color: white;
}

/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 40rem;
 }
 
 /* Removes default focus */
 input[type="range"]:focus {
   outline: none;
 }
 
 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: #053a5f;
    border-radius: 0.5rem;
    height: 0.5rem;  
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -12px; /* Centers thumb on the track */
 
    /*custom styles*/
    background-color: rgb(0, 85, 233);;
    height: 2rem;
    width: 2rem;
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {   
   border: 1px solid #053a5f;
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: #053a5f;
    border-radius: 0.5rem;
    height: 0.5rem;
 }
 
 /* slider thumb */
 input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
 
    /*custom styles*/
    background-color: rgb(0, 85, 233);
    height: 2rem;
    width: 1rem;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
   border: 1px solid #053a5f;
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }

 select {
    height:30px;
 }

 h3 {
    margin-top: 40px;
    font-family: cocon-regular;
 }

 button {
    margin-bottom: 80px;
 }

#cadreScore {
    /*background-color: #F6F9FF;*/
    font-family: cocon-regular;
    background-position: left top, right bottom;
    background-size: 12%;
    background-repeat: no-repeat, no-repeat;
}
#cadreScore h3 {
    margin-left: 10%;
    margin-right: 10%;
    font-size: 2.4em;
    margin-bottom: 40px;
}
#cadreMensu {
    background-color: #EAF6F7;
    border-radius: 10px;
    border: 1px solid #B7EBE0;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 20px;
    font-family: bb-semibold;
    font-size: 1.3em;
}
#mensu {
    font-size: 2.5em;
}

#cadreParle {
    
}
#encartCalendly {
    width: 80%;
    height: 455px;
    padding:5px;
    border-radius: 10px;
    border: 1px solid #0055E9;
}
#cadreContact {
    background-color: white;
    border-top-right-radius: 25px;
    padding-bottom: 20px;
}
#cadreContact a {
    color: white;
    text-decoration: none;
}
#cadreContact h3 {
    
}
#cadreContact h4 {
    color: #0055E9;
    font-weight: 800;
    font-size: 1em;
}
#cadreMensuMax {
    background-color: white;
    border-radius: 10px;
    border: 1px solid #0055E9;
    margin-right: 20%;
    margin-left: 20%;
}
#cadreMensuMax h3 {
    font-size: 1.7em;
    font-weight: 200;
}
#cadreEnveloppe {
    background-color: white;
    border-radius: 10px;
    border: 1px solid #0055E9;
    margin-right: 15%;
    margin-left: 15%;
}
#cadreEnveloppe h3 {
    font-size: 1.7em;
    font-weight: 200;
}
#enveloppeTexte {
    font-size: 3.2em;
    font-weight: 800;
    color:#0055E9;
}
#mensuMaxTexte {
    font-size: 2.8em;
    font-weight: 800;
    color:#0055E9;
}
#cadreBas {
    background-color: #80A4F2;
    margin-bottom: 80px;
    padding-top: 30px;
    border-radius: 15px;
}
#boutonParle, #boutonDossier {
    border-radius: 30px;
    background-color: #0055E9;
    color: white;
    width: 200px;
    font-family: bb-regular;
    padding:10px;
    text-align: center;
}
#boutonParle:hover, #boutonDossier:hover {
    background-color: #3074e8;
    
}
#kali {
    width:150px;
}
#lucas {
    width:150px;
}
#cloe {
    width:150px;
}

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

.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
    box-shadow: 120px 80px 40px 20px #0ff;
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}
.percentage {
    fill: #666;
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
}