body{
    background-color: white;
}
a{
    color: #5555F3;
    text-decoration: underline;
}
p, li{
    font-family: manrope;
    color: #666666;
    font-size: 1em;
    padding: 0%;
    margin-bottom: 0%;
}
h1{
    font-family: manrope;
    font-size: 2em;
    color: #AE88FB;
}
h2{
    font-family: manrope;
    font-size: 1.2em;
    color: #4C5FA1;
    font-weight: bold;
}
em {
  color: #666666;
  font-style: normal;
  font-weight: bold;
}
header{
    display: flex;
    flex-direction: column;
    font-family: manrope;
    margin-left: 25%;
    margin-right: 25%;  
    }

.milieu{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.RF2_item_format{
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 0px;
    margin-right: 0px;
}

.milieu_entete{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: manrope;
    font-size: 75%;
}
.milieu_entete img{
    width: 450px;
}
.logoRS{
    display: flex;
    flex-direction: column;
    align-items: end; 
}
footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: manrope;
    font-size: 80%;
    margin-top: 80px;
}
.milieu_footer img{
    margin-bottom: 5%;
    margin-top: 5%;
}
main{
    margin-left: 25%;
    margin-right: 25%;
}
.RF2_consigne{
    display: grid;
    grid-template-columns: 4fr 0.8fr;
    font-family: manrope;
}
.RF2_info1{
    background-color: #d2d2d2;
}
.RF2_info1 p{
    color: red;
    font-size: 70%;
    padding: 2px;

}
.RF2_info2 p{
    color: red;
    font-size: 75%;
    font-weight: bold;
    padding: 2px;
}
.RF2_alert_rouge{
    color: red;
    font-size: 125%;
    font-weight: bold;
    padding: 2px;
}
.RF2_text_item_orange{
    font-family: manrope;
    color: #D94C00;
    font-size: 100%;
}
.RF2_text_item_rouge{
    font-family: manrope;
    color: red;
    font-size: 100%;
}
.RF2_text_item_bleu{
    font-family: manrope;
    color: #4472C4;
    font-size: 100%;
}
.RF2_text_item_vert{
    font-family: manrope;
    color: #99CC00;
    font-size: 100%;
}
.RF2_text_item_violet{
    font-family: manrope;
    color: #7030A0;
    font-size: 100%;
}
.RF2_text_vert{
    color: #AAD430;
    font-size: 100%;
}
.RF2_text_gris_indice{
    font-family: manrope;
    color: #666666;
    font-size: 75%;
    padding: 0%;
    margin-bottom: 0%;
}
.RF2_text_blanc{
    font-family: manrope;
    color: #ffffff;
    font-size: 100%;
    font-weight: bold;
    alignment-baseline: central;
}
.RF2_text_pave_blanc{
    font-family: manrope;
    color: #ffffff;
    font-size: 1.2em;
    padding: auto;
    margin-bottom: auto;
}
.RF2_EPCR p{
    color: #666666;
    font-size: 50%;
    text-align: right;
    margin-right: 30%;
}
.button_1{ 
    border : 1px solid #8f8e8e; 
    font-family: manrope;
    padding-left: 5px;
    padding-right: 5px; 
    border-radius: 5px;
    background-color: #EFEFEF;
    margin-bottom: 25px;
}
.button_1:hover { background-color : rgb(183, 183, 183);}
.button_1:active { color : #cf51b0; }

.item_consigne_bleu{
    font-family: manrope;
    color: #318CE7;
    font-weight: bold;
}

.item_libelle_activite{
    font-family: manrope; 
}
.item_libelle{
    font-family: manrope;
    color: #666666;
    font-size: 85%;
    margin-top: 0%;
    margin-bottom: 0%;   
}
.RF2_item_milieu{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.Pave_information_repondant{
    border-color: #83CAFE;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    padding: 1px;
    margin: 1%
}
.Pave_pourallerplusloin_repondant{
    border-color: #AAD430;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    padding: 1px;
    margin: 1%;
}

.item_consigne_vert{
    font-family: manrope;
    color: #AAD430;
    font-weight: bold;
}
.item_likert_adapt{
font-family: manrope;

}
.Radar_RIASEC{
    margin-left: 1%;
    margin-right: 1%;
}
.conteneur{
    display: grid;
    grid-template-columns: 3fr 2.5fr 2fr 1.5fr 1fr 0.5fr;
    align-items: first baseline;
    align-content: center;
    font-family: manrope;
    font-size: 75%;
}
.tab_description_riasec{
    display: grid;
    grid-template-columns: 1fr 3fr 3fr;
    align-items: first baseline;
    font-family: manrope;
}
.tab_3button{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10%;
    margin-top: 5%;
}
.tab_2button{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    margin-top: 5%;
}
.slidecontainer {
  width: 100%;
}
.slider {
  width: 100%;
  color: #6BD3FC;
}
.slider input[type="range"] {
	width: 100%;
	height: 2px;
	} 
input[type=range] {
  width: 100%;
  margin: 10.75px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #0d0da9;
  border: 0.3px solid #7482c3;
  border-radius: 0.7px;
  width: 100%;
  height: 1.5px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -11.05px;
  width: 9px;
  height: 23px;
  background: #11ceff;
  border: 1px solid #000000;
  border-radius: 9px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #0e0eb7;
}
input[type=range]::-moz-range-track {
  background: #0d0da9;
  border: 0.3px solid #7482c3;
  border-radius: 0.7px;
  width: 100%;
  height: 1.5px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 9px;
  height: 23px;
  background: #11ceff;
  border: 1px solid #000000;
  border-radius: 9px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 11.75px 0;
  color: transparent;
  width: 100%;
  height: 1.5px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #0c0c9b;
  border: 0.3px solid #7482c3;
  border-radius: 1.4px;
}
input[type=range]::-ms-fill-upper {
  background: #0d0da9;
  border: 0.3px solid #7482c3;
  border-radius: 1.4px;
}
input[type=range]::-ms-thumb {
  width: 9px;
  height: 23px;
  background: #11ceff;
  border: 1px solid #000000;
  border-radius: 9px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: #0d0da9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #0e0eb7;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}

@media screen and (max-width: 1200px) {
/* Insérez vos propriétés CSS ici, avec vos sélecteurs*/
main{
    margin-left: 1%;
    margin-right: 1%
}
.Radar_RIASEC{
    margin-left: 10%;
    margin-right: 10%;
}
.milieu_entete img{
    width: 300px;
}
.milieu_footer img{
    width: 300px;
    margin-bottom: 5%;
    margin-top: 5%;
}
.logotest img{
    width: 150px;
}
.tab2colindex img{
    width: 80px;
}
header{
    margin-left: 1%;
    margin-right: 1%;
}
.item_likert_adapt{
    font-family: manrope;
    font-size: 75%;
}
.tab_description_riasec p{
    font-family: manrope;
    font-size: 75%;
}
.tab_score_riasec{
    font-family: manrope;
    font-size: 75%;
}
.button form{
    font-family: manrope;
    font-size: 75%;
}
.button input{
    font-family: manrope;
    font-size: 75%;
}
}