#fontSizeWrapper { font-size: 16px; }

#fontSize {
  font-size: 1em;
  }

/* ————————————————————–
  Tree core styles
*/
.tree { margin: 1em; }
.tree_left { margin-left: -20px;font-size: 13px }


.tree input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  }

.tree_left input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  }

.tree input ~ ul { display: none; }
.tree_left input ~ ul { display: none; }

.tree input:checked ~ ul { display: block; }
.tree_left input:checked ~ ul { display: block;margin-left: -30px; }

/* ————————————————————–
  Tree rows
*/
.tree li {
  line-height: 1.2;
  position: relative;
  padding: 0 0 1em 1em;
  list-style-type: none;
  }
.tree_left li {
  line-height: 1.2;
  position: relative;
  padding: 0 0 1em 1em;
  list-style-type: none;
  }

.tree ul li { padding: 1em 0 0 1em; }
.tree_left ul li { padding: 1em 0 0 1em; }

.tree > li:last-child { padding-bottom: 0; }
.tree_left > li:last-child { padding-bottom: 0; }

/* ————————————————————–
  Tree labels
*/
.tree_label {
  position: relative;
  display: inline-block;
  font-size: 13pt;
  }
.tree_label_left {
  position: relative;
  display: inline-block;
  font-size: 12pt;
  }
.tree_label_carb_menu {
  position: relative;
  display: inline-block;
  font-size: 13pt;
  }
  .tree_label_carb_left {
  position: relative;
  display: inline-block;
  font-size: 13pt;
  }

label.tree_label { cursor: pointer;font-size: 12pt }
label.tree_label_left { cursor: pointer; }
label.tree_label_carb_menu { cursor: pointer; }
label.tree_label_carb_left { cursor: pointer; }


label.tree_label:hover { color: #666; }
label.tree_label_left:hover { color: #666; }
label.tree_label_carb_menu:hover { color: #666; }
label.tree_label_carb_left:hover { color: #666; }

/* ————————————————————–
  Tree expanded icon
*/
label.tree_label:before {
  background: #ccc;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 0em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  content: '+';
  text-align: center;
  line-height: .9em;

  }

label.tree_label_carb_menu:before {
  background: #ccc;
  color: #fff;
  position: relative;
  z-index: 1;
  float: right;
  margin: 0 -1.5em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  content: '+';
  text-align: center;
  line-height: .9em;

  }
  label.tree_label_carb_left:before {
  background: #ccc;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 0em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  content: '+';
  text-align: center;
  line-height: .9em;

  }
label.tree_label_left:before {
  background: #ccc;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 0em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  content: '+';
  text-align: center;
  line-height: .9em;

  }

:checked ~ label.tree_label:before { content: '-'; }
:checked ~ label.tree_label_left:before { content: '-'; }
:checked ~ label.tree_label_carb_menu:before { content: '-'; }
:checked ~ label.tree_label_carb_left:before { content: '-'; }

/* ————————————————————–
  Tree branches
*/
.tree li:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.65em;
  display: block;
  width: 0;
  border-left: 0px solid #777;
  content: "";
  direction: rtl;

  }


.tree_left li:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.65em;
  display: non;
  width: 0;
  /*border-left: 0px solid #777;*/
  content: "";
  direction: rtl;

  }

.tree_label:after {
  position: absolute;
  top: 0;
  left: -1.5em;
  display: none;
  height: 0.5em;
  width: 1em;
  border-bottom: 1px solid #777;
  border-left: 1px solid #777;
  border-radius: 0 0 0 .3em;
  content: '';
  }

.tree_label_carb_menu:after {
  position: absolute;
  top: 0;
  left: -1.5em;
  display: none;
  height: 0.5em;
  width: 1em;
  border-bottom: 1px solid #777;
  border-left: 1px solid #777;
  border-radius: 0 0 0 .3em;
  content: '';
  }
  .tree_label_carb_left:after {
  position: absolute;
  top: 0;
  left: -1.5em;
  display: none;
  height: 0.5em;
  width: 1em;
  border-bottom: 1px solid #777;
  border-left: 1px solid #777;
  border-radius: 0 0 0 .3em;
  content: '';
  }



.tree_label_left:after {
  position: absolute;
  top: 0;
  left: -3em;
  display: none;
  height: 0.5em;
  width: 1em;
  /*border-bottom: 1px solid #777;
  border-left: 1px solid #777;
  border-radius: 0 0 0 .3em;*/
  content: '';
  }

label.tree_label:after { border-bottom: 0; }
label.tree_label_left:after { border-bottom: 0; }
label.tree_label_carb_menu:after { border-bottom: 0; }
label.tree_label_carb_left:after { border-bottom: 0; }

:checked ~ label.tree_label:after {
  border-radius: 0 .3em 0 0;
  border-top: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 0;
  border-left: 0;
  bottom: 0;
  top: 0.5em;
  height: auto;
  }

:checked ~ label.tree_label_left:after {
  border-radius: 0 .3em 0 0;
  border-top: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 0;
  border-left: 0;
  bottom: 0;
  top: 0.5em;
  height: auto;
  display: none;
  }

:checked ~ label.tree_label_carb_menu:after {
  border-radius: 0 .3em 0 0;
  border-top: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 0;
  border-left: 0;
  bottom: 0;
  top: 0.5em;
  height: auto;
  display: none;
  }
  :checked ~ label.tree_label_carb_left:after {
  border-radius: 0 .3em 0 0;
  border-top: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 0;
  border-left: 0;
  bottom: 0;
  top: 0.5em;
  height: auto;
  display: none;
  }

.tree li:last-child:before {
  height: 1em;
  bottom: auto;
  }
.tree_left li:last-child:before {
  height: 1em;
  bottom: auto;
  }


.tree > li:last-child:before { display: none; }
.tree_left > li:last-child:before { display: none; }

.tree_custom {
  display: block;
  background: #eee;
  padding: 1em;
  border-radius: 0.3em;
}