:root{
  --all_container-width: 85%;
  --clan_tag-container-font-size: 210%;
  --btn-icon-size: 20%;
  --rule_row-font_size: 100%;
  --remove_rule-padding: 5px;
  --title_container-font_size: 300%;*
  --rule_row_children-width: 5%;
  --generate_btn_container-font_size: 300%;
  --box-padding: 5px 15px;
}
.rule-row-btn-container {
  margin-left: 1%;
}

@media (max-width: 1800px) {
  :root{
    --all_container-width: 92%;
    --clan_tag-container-font-size: 200%;
    --btn-icon-size: 35%;
  }
}

@media (max-width: 768px) {
  :root{
    --all_container-width: 100%;
    --clan_tag-container-font-size: 0.9rem;
    --btn-icon-size: 50%;
    --remove_rule-padding: 5px;
    --title_container-font_size: 2rem;
    --rule_row_children-width: 8%;
    --generate_btn_container-font_size: 280%;
    --box-padding: 5px;
  }
  .btn_container, .rule-row{
    font-size: 0.8rem !important;
  }
  .rule-row-btn-container{
    margin-left: 1%;
    margin-bottom: 0.9rem !important;
  }
  .main_rules_container{
    margin-bottom: 5% !important;
  }
  h1 {
    margin-top: 0.1rem !important;
  }

  .generate_btn_container button{
    width: 70% !important;
  }


}


.body_container{
  display: flex;
  height: 100%;
  align-items: center;

  flex-direction: column;
}

.all_container{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: var(--all_container-width);
  border-radius: 8px;
  font-weight: bold;

}

.content_container, .rules_container{
  display: flex;
  flex-direction: column;
  width: 98%;
  padding: 1%;
}

.title_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1%;
  font-size: var(--title_container-font_size);
  color: black;
  font-weight: bold;
}

.green{
  display: flex;
  padding: 1%;
}

.clan_tag_container {
  display: flex;                 /* un conteneur flex */
  align-items: center;           /* centre verticalement */
  gap: 0.75rem;                  /* petit espace entre le texte et le champ */
  font-size: var(--clan_tag-container-font-size, 1rem);
}

.clan_tag_container label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.clan_tag_container label span {
  white-space: nowrap;
  font-weight: 600;
}

.clan_tag_container textarea {
  flex: 1;                       /* occupe tout l’espace restant */
  min-height: 3rem;
  resize: vertical;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: 1rem/1.4 system-ui, sans-serif;
  box-sizing: border-box;
  background: #fff;
  color: #333;
  display: table-cell;
  vertical-align: middle;
}




.rules_container{
  display: flex;
}

.main_rules_container, .exceptions_rules_container{
  display: flex;
  flex-direction: column;
}

.main_rules_container{
  margin-bottom: 1%;
}

.rule-row{
  display: flex;
  background: linear-gradient(to bottom, #c9c1ad 50%, #b4a981 50%);
  border-width: 1px;
  border-radius: 4px;
  border-color: black;
  border-style: solid;
  margin: 1%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 0.5%;
  padding-top: 0.5%;


  align-items: center;
  font-size: var(--rule_row-font_size);
}

.rule-row > *:first-child{
  margin-left: 0;
}
.rule-row > *{
  margin-left: 1%;
  margin-right: 1%;
}

.more > *:first-child{
  margin-left: 0;
}
.more > *{
  margin-left: 1%;
  margin-right: 1%;
}
.more{
  display: flex;
  align-items: center;
  margin-left:0.5%;
  font-weight: bold;
}
.more label{
  width: 50%;
}

/* box */
.remove-rule{
  margin-left: auto;
  padding: var(--remove_rule-padding);
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  font-size: 100%;
}

.result_box, .operator_box, .rule-row > *:first-child{
  width: var(--rule_row_children-width);
  display: flex;
  font-weight: bold;
}

.result_box select, .logical_operator, [name="stars[]"], [name="exceptions_stars[]"], [name="exceptions_townhalllevels_A[]"],[name="exceptions_townhalllevels_D[]"]{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: var(--box-padding);
  border-radius: 5px;
  cursor: pointer;

}

.comparison_operator{
  display: flex;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 9px;
  padding-left: 9px;
  border-radius: 5px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-align: center;
}

/*
.result_box select{
  background: linear-gradient(to bottom, #3f913f 50%, #276c27 50%);
  border: 2px solid #024f02;
}

 */
.operator_box{
  width: auto !important;
}

.logical_operator, .remove-rule, .comparison_operator, [name="exceptions_townhalllevels_A[]"], [name="exceptions_townhalllevels_D[]"]{
  background: linear-gradient(to bottom, #c74b1d 50%, #af4219 50%);
  border: 2px solid #792c10;
}
.star{
  font-size: 150%;
}
select{
  all: unset;
  box-sizing: border-box;

 }

.generate_btn_container{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--generate_btn_container-font_size);
  margin-top: 1%;
}
[name="stars[]"], [name="exceptions_stars[]"]{
  background: linear-gradient(to bottom, #70b422 50%, #5e9d15 50%);
  border: 2px solid #49652a !important;
}
#add-simple-rule, #add-exception-rule, button[type="submit"]{
  background: linear-gradient(to bottom, #70b422 50%, #5e9d15 50%);
  border: 2px solid #49652a !important;
  font-size: 100%;
  width: var(--btn-icon-size);
  border-radius: 5px;
  font-weight: bold;
  padding:4px;
  cursor: pointer;
}


.btn_value_none{
  background: linear-gradient(to bottom, #c74b1d 50%, #af4219 50%);
  border: 2px solid #792c10;
}

.btn_value_0{
  background: linear-gradient(to bottom, #bd4d4d 50%, #a44444 50%);
  border: 2px solid darkred;
}

.btn_value_1{
  background: linear-gradient(to bottom, #3f913f 50%, #276c27 50%);
  border: 2px solid #024f02;
}

.btn_value_-1{
  background: linear-gradient(to bottom, #bd4d4d 50%, #a44444 50%);
  border: 2px solid darkred;
}
.btn_value_11{
  background: linear-gradient(to bottom, #3f913f 50%, #276c27 50%);
  border: 2px solid #024f02;
}