@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  padding: 50px 0;
}

.sliderWrapper [contenteditable]{color:blue;}
	
body,html{font-family: 'Roboto', sans-serif;}
	

.but {
padding: 5px;
margin-right: 5px;
background: #AC8FFD !important;
-webkit-border-radius: 5px;
color: black;
text-transform: uppercase;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
}
	
.delete
{
position:relative;
top:-18px;
right:-25px;
cursor:pointer;
float:right;
color:red;
height:1em;
}
	
.add
{
display:none;
}
	
.explanation, .title
{
overflow: scroll;
border-radius:0.5em;
padding:0.5em;
position:absolute;
	bottom:30%;
	right:2em;
	background:cornsilk;
border:1px black solid;
width:30%;height:50%;
font-size:1.2em;
}
.title
{
bottom:85%;
height:2.4em;
}

.sliderHolder {
  width: 20%;
  float: left;
padding-top:2.5em;
}

.wheelCat {
  width: 100px;
  float: left;
  padding-top: 0px;
  text-align: right;
  padding-right: 10px;
  font-family: "Lato", san-serif;
  font-size: 13px;
}

.sliderAll {
  height: 100px;
  width: 60%;
  padding-top: 0px;
  float: left;
}

.sliderCitizenship .rangeslider__fill {
  background-color: #00A3CE;
}

.sliderPeople .rangeslider__fill {
  background-color: #22CBED;
}

.sliderGrowth .rangeslider__fill {
  background-color: #EB67A2;
}

.sliderManagement .rangeslider__fill {
  background-color: #FDA9ED;
}

.sliderRelationships .rangeslider__fill {
  background-color: #EC5B23;
}

.sliderHealth .rangeslider__fill {
  background-color: #F78F21;
}

.sliderWealth .rangeslider__fill {
  background-color: #148F1E;
}

.sliderJoy .rangeslider__fill {
  background-color: #1EC428;
}

.rangeslider__value-bubble {
  display: none;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.rangeslider__value-bubble {
  border: 1px solid #ccc;
  display: block;
  padding: 5px;
  position: absolute;
  bottom: 100%;
  margin-bottom: 25px;
  width: 100px;
  margin-left: -50px;
  text-align: center;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "Lato", san-serif;
  font-size: 13px;
}
.rangeslider__value-bubble:before, .rangeslider__value-bubble:after {
  border-width: 11px;
  border-style: solid;
  border-color: transparent;
  content: "";
  display: block;
  margin: auto;
  width: 10px;
  position: absolute;
  left: 0;
  right: 0;
}
.rangeslider__value-bubble:before {
  border-top-color: #ccc;
  border-bottom-width: 0;
  bottom: -11px;
}
.rangeslider__value-bubble:after {
  border-top-color: #fff;
  border-bottom-width: 0;
  bottom: -10px;
}