body {


min-width: 800px;
max-width: 1280px;

margin: 0 auto;

background-color: #fff;

font-family: Arial, Helvetica, sans-serif;

font-size: 1.2em;

line-height: 1.5

}



body,

html {

color: #59637c;

font-family: Open Sans, sans-serif

}


.wrapper-content {

width: 90%;

max-width: 960px;

margin-left: auto;

margin-right: auto

}



.dropdown,

h1,

h2,

h3 {

color: #17253c;

font-family: Raleway, sans-serif

}



h1 {

text-align: center;

color: #6159e6;

background-color: #f1f0ff;

padding: 1em 0

}



form {

margin: 0 auto

}



#chart {

text-align: center

}



#app {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale

}



#chart .layer-0 path,

#chart .layer-1 path {

fill: #fff

}



input {

margin-right: .5em;

padding-left: .5em

}



input[type=text] {

color: #444;

min-width: 200px;

line-height: 2

}



input[type=number] {

max-width: 50px

}



input.invalid {

border: 1px solid red

}



input:focus {

color: #000;

outline: none;

background: #fffcdf

}



input[type=color] {

border: none;

outline: none;

background: none;

margin-right: 0;

padding: 0;

cursor: pointer

}



input[type=color]:focus {

border: 2px solid #000

}



label:not(:focus):not(:active) {

clip: rect(0 0 0 0);

-webkit-clip-path: inset(50%);

clip-path: inset(50%);

height: 1px;

overflow: hidden;

position: absolute;

white-space: nowrap;

width: 1px

}



form {

margin-bottom: 2em;

text-align: center

}



fieldset {

padding: 0;

border: none;

text-align: left;

display: inline-flex;

margin: .2em 0;

align-items: center

}



.button {

margin: 2em auto;

padding: .8em 2em;

color: #fff;

background: #18b979;

text-decoration: none;

cursor: pointer;

border: none;

font-size: 1em;

display: flex;

border-radius: 25px;

box-shadow: 0 0 3px 0 #a6dfc6;

transition: background .3s ease-in;

text-transform: uppercase;

font-weight: 700

}



.icon {

display: inline-block;

width: 1em;

height: 1em;

stroke-width: 0;

stroke: #fff;

fill: #fff;

margin-left: .5em

}



.dropdown {

font-weight: 400;

background: none;

border: none;

display: flex;

align-items: center;

font-size: 1em;

cursor: pointer;

padding: 1em;

width: 100%

}



.highlight div {

padding: 0 1em 1em

}



.highlight.is-active {

background-color: rgba(24, 185, 121, .0784313725490196)

}



.dropdown .icon {

fill: #18b979;

margin-left: 0;

margin-right: .5em

}



.hidden {

display: none

}



.disclaimer {

margin: 5em 0 1em;

font-size: .75em;

border-top: 1px solid

}



.wrapper-tool {

background-color: rgba(24, 185, 121, .0784313725490196);

margin-top: 2em;

padding: 1em

}



@media (min-width:1280px) {

.wrapper-tool .flex {

display: flex;

align-items: center

}

.wrapper-tool form {

width: 35%

}

.wrapper-tool #chart {

width: 65%

}

form {

margin: 0 2em;

text-align: left

}

.button {

margin: 2em auto

}

}