@font-face {
	font-family: 'FilsonProRegular';
	src: url(‘/font/FilsonProRegular-Regular.woff2’) format(‘woff2’),
		url(‘/font/FilsonProRegular-Regular.ttf’) format(‘truetype’)
}


body{    
    background-color:#f6f6f0;
}

.main-header{
   background-color:white;
   font-size: 25px;
   font-family: 'FilsonProRegular';
   text-align:center;
   padding:7px 0px;
   font-weight:bold;
}

.cite_uni{
    color:#009099;
}

.cite_uni_quest{
    color:#ff4b00;
}

.container_box{
    background-color:white;
    min-height: 375px;
    border-radius:10px;
}

.container_box_shadow{
    box-shadow: .75rem .75rem 0 red;
    border-radius: .75rem;
}

.container_box_shadow_resp{
    box-shadow: .20rem .20rem 0 #ff886a;
    border-radius: .75rem;
}

.container_box_create_question{
    background-color:white;
    padding:10px;
    height: 450px;
    border-radius:10px;
    margin:20px 0px;
    display:none;
}

.container_add_question{
    background-color:white;
    padding:10px;
    height: 50px;
    border-radius:10px;
    margin:20px 0px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    color: #009099;
    text-align:center;
}

.container_box_sort_answer{
    background-color:white;
    padding:10px;
    min-height: 350px;
    border-radius:10px;
    margin:20px 0px;
}

.container_parameter{
    background-color:white;
    padding:10px;
    min-height: 350px;
    border-radius:10px;
    margin:20px 0px;
}

.label_quest{
  font-weight: bold;
  font-size: 18px;
  color: #009099;
}

.div_quest{
    
}

#traduction{
    border: 1px solid black;
    border-radius:10px;
    width:300px;
    padding:8px 8px 8px 20px;
    margin:10px 0px;
    cursor: pointer;
    text-align:center;
    float:right;
}


.version_en{
    display:none;
}

.section_title{
   font-size: 20px;
   font-family: 'FilsonProRegular';
   padding:10px;
   font-weight:bold;
   color:#009099;
}

.create_question_title{
   font-size: 20px;
   font-family: 'FilsonProRegular';
   padding:10px;
   font-weight:bold;
   color:#ff4b00;
}

:root {
  --success: #fee479;
  --progress: #fee479;
}

.progressbar-wrapper {
  background-color: white;
  color: white;
  border-radius: 15px;
  width: 100%;
  margin:35px 0px;
}

.progressbar {
  background-color: var(--progress);
  color: white;
  padding: 10px;
  text-align: right;
  border-radius: 15px;  
}

.progressbar[title="downloading"] {
   background-color: var(--progress);
}

.progressbar[title="downloaded"] {
   background-color: var(--success);
}
  
.compteur {
  width: 10%;
}

.remarque{
    margin:30px auto 10px auto;
    width:500px;
    background-color:#cfe2ff;
    border-radius:25px;
    color:#0847b3;
    padding: 8px 0px 8px 10px;
}

.intro{
    font-weight:normal;
    font-size:14px;
}

.question{
    margin:20px auto;
    width:500px;
    font-weight:bold;
    font-size:18px;
}

.reponse{
    margin:0px auto;
    width:500px;
}

.resp_box_radio{
    border: 1px solid black;
    border-radius:10px;
    width:300px;
    padding:8px 8px 8px 20px;
    margin:10px 0px;
    cursor: pointer;
}

.groupe_box{
    width:500px;
    text-decoration:underline;
    font-weight:bold;
    padding:10px 0;
}

.star_rating_text{
    width:300px;
    float:left;
}

.rate {
    float: left;
    height: 40px;
    padding: 0 10px;
}

.rate:not(:checked) > label {
    float:right;
    width:25px;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★';
}
.rate > input:checked ~ label,
.rate > label.star_checked{
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label{
    color: #c59b08;
}

.star-cb-group {
  /* remove inline-block whitespace */
  font-size: 0;
  /* flip the order so we can use the + and ~ combinators */
  unicode-bidi: bidi-override;
  direction: rtl;
  /* the hidden clearer */
  width:150px;
  float:left;
  margin-top: -12px;
}

.star-cb-group * {
  font-size: 1rem;
}
.star-cb-group .rate > input {
  display: none;
}
.star-cb-group > input + label {
  /* only enough room for the star */
  display: inline-block;
  overflow: hidden;
  text-indent: 9999px;
  width: 1em;
  white-space: nowrap;
  cursor: pointer;
  font-size:40px;
}
.star-cb-group > input + label:before {
  display: inline-block;
  text-indent: -9999px;
  content: "☆";
  color: #888;
}
.star-cb-group > input:checked ~ label:before, .star-cb-group > input + label:hover ~ label:before, .star-cb-group > input + label:hover:before {
  content: "★";
  color: #e52;
  text-shadow: 0 0 1px #333;
}
.star-cb-group > .star-cb-clear + label {
  text-indent: -9999px;
  width: .5em;
  margin-left: -.5em;
}
.star-cb-group > .star-cb-clear + label:before {
  width: .5em;
}
.star-cb-group:hover > input + label:before {
  content: "☆";
  color: #888;
  text-shadow: none;
}
.star-cb-group:hover > input + label:hover ~ label:before, .star-cb-group:hover > input + label:hover:before {
  content: "★";
  color: #e52;
  text-shadow: 0 0 1px #333;
}

.submit{
    margin:10px auto;
    width:500px;
}

.submit_begin{
    margin-top:30px;    
}

.submit_begin_btn .btn button{
    width:300px;
}

.radio_btn{
    display:none;
}

.btn{
    padding:0;
}

.btn button, .btn_previous{
    border: 1px solid #0b57d0;
    border-radius: 10px;
    width: 100px;
    padding: 8px;
    margin: 10px 0px;
    background-color:#0b57d0;
    color:white;
    text-align:center;
} 

.btn_submit_create_quest button{
    width: 200px;
}

.main-footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: black;
  text-align: right;
  padding:7px 0px;
  font-weight:bold;
  font-size: 15px;
  font-family: 'FilsonProRegular';
  color:#27514d;
  background-color:#009099;
}

.footer_text{
    margin-right:10px;
}

.main-footer a{
    color:#27514d;
    font-decoration:none;
}

@media (max-width: 500px) {
    .question,.reponse,.submit{
        margin:10px;
        width:350px;
    }
}

ion-icon {
  font-size: 64px;
}

.admin_box{
    background-color:white;
    min-height: 100px;
    border-radius:10px;
    width:130px;
    padding:10px;
    text-align:center;
}

.eye ion-icon,.eye .admin_box_text {
    color: #ffb494;
}

.eye_box_shadow{
    box-shadow: .75rem .75rem 0 #ffb494;
    border-radius: .75rem;
}

.parameter ion-icon,.parameter .admin_box_text {
    color: #ff4b00;
}

.parameter_box_shadow{
    box-shadow: .75rem .75rem 0 #ff4b00;
    border-radius: .75rem;
}

.document ion-icon,.document .admin_box_text {
    color: #ff886a;
}

.document_box_shadow{
    box-shadow: .75rem .75rem 0 #ff886a;
    border-radius: .75rem;
}

.download ion-icon,.download .admin_box_text {
    color: #fe5e46;
}

.download_box_shadow{
    box-shadow: .75rem .75rem 0 #fe5e46;
    border-radius: .75rem;
}

.download_graphic ion-icon,.download_graphic .admin_box_text {
    color: #e7700d;
}

.download_graphic_box_shadow{
    box-shadow: .75rem .75rem 0 #e7700d;
    border-radius: .75rem;
}

#see_survey,#manage_survey,#dowload_survey,#dowload_survey_graphic,#parameter{
    cursor:pointer;
}

.btn_section{
    border: 1px solid #0b57d0;
    border-radius: 10px;
    width: 400px;
    padding: 8px;
    background-color: #0b57d0;
    color: white;
    text-align: center;
    float:left;
    margin:16px;
    cursor:pointer;
}

.btn_section_selected{
    background-color: white;
    border: 1px solid white;
    color: black;
}

.container_box_section{
    margin:auto;
    height:250px;
}

select {
  // A reset of styles, including removing the default dropdown arrow
  appearance: none;
  // Additional resets for further consistency
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
}

select{
    border: 1px solid black;
    border-radius: 10px;
    width: 300px;
    padding: 8px;
    background-color: white;
    text-align: center;    
    margin:16px;
    cursor:pointer;
    float:right;
}

.sort_resp_box{
    border: 1px solid black;
    border-radius: 10px;
    width: 300px;
    padding: 8px;
    background-color: white;
    text-align: center;    
    margin:-10px 16px 26px 16px;
    cursor:pointer;
    float:right;
}

.sort_resp{
  border-radius: 10px;
  padding: 8px;
  background-color: white;
  margin: 16px;
  cursor: pointer;
}

.select_create_question,.select_session_academique{
    margin:0px;
    float:none;
}


.manage_box{
    min-height:200px;
    background-color:white;
}

.resp_box{
    margin:0px;
}

.resp_box_mask{
    margin:0px;
    opacity:50%;
}

.resp_box_label{
    font-weight:bold;
    padding:30px 15px;
    font-size:16px;
}

.select_section_change{
    float:right;
}

.title_section_title{
    font-weight: bold;
    font-size: 18px;
    padding:30px 15px;
}

.title_section_resp{
    font-size: 18px;
    padding:15px 30px;
    width:600px;
    margin-bottom:10px;
}

.star_box_resp{
    float:left;
}


.eye_off_outline{
    opacity:50%
}

.eye{
   cursor:pointer;
   float:right;
}

.container_msg_display{
    border:2px solid green;
    background-color:#7FFFD4;
    margin: 20px auto;
    height: 50px;
}

.container_msg_display_question{
    border:2px solid green;
    background-color:#7FFFD4;
    margin: 20px auto;
    height: 50px;
    display:none;
}

.msg{
    color:#994800;
    padding:10px 20px;
}

.td_title{
    color:#009099;
    padding:10px;
}

.td_title_td{
    color:#ff4b00;
    padding:20px;
    text-align:center;
}

.div_radio_create_quest_groupe,
.div_radio_create_quest_star{
    cursor: pointer;
}