body {
  text-align: center;
  /*   transition: all .4s ease-in-out; */ }

html {
  margin: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute; }

.caps {
  text-transform: uppercase; }

h1 {
  font-size: 2.5em; }

h2 {
  font-size: 2em; }

.red-button {
  transition: all .5s ease-in-out;
  border-radius: 10px;
  background-color: #FF6666;
  color: #FEFEE5;
  box-shadow: 0.5px 1px 2px 1px rgba(0, 0, 0, 0.3);
  margin: 0px 20px 10px 20px; }

.temp {
  /*   border: 2px dashed green; */ }

.red-button:hover {
  cursor: pointer;
  background-color: #DD5858;
  font-size: 1.87em;
  transform: scale(1.1); }

.light {
  font-weight: lighter; }

.inactive-button {
  font-size: 1.7em;
  border-radius: 10px;
  background-color: #F48788;
  color: #DD5858; }

.twenty-vh-spacer {
  width: 100%;
  position: relative;
  height: 20vh; }

.anxiety-flex {
  display: flex; }

.flex > container {
  justify-content: center;
  flex: 2;
  margin: 00px 100px; }

.output {
  border: 1px grey;
  margin: 10px; }

.typeRange {
  width: 100%;
  opacity: 0; }

.anxiety-flex-side {
  position: relative;
  flex: 1;
  display: inline-block; }

.needleC {
  transition: all .3s ease-in alternate;
  transform: translateZ(50deg);
  transform-origin: bottom left;
  /*background-color: black;*/
  width: 5px;
  height: 130px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  border-radius: 3px;
  /*animation: shake .1s alternate infinite;*/ }

#needleCinner {
  transition: all .3s ease-in alternate;
  transform-origin: bottom left;
  background-color: black;
  width: 100%;
  height: 130px;
  position: relative;
  border-radius: 3px; }

#needleBoxFill {
  transition: all .3s ease-in;
  transform-origin: 0% 70%;
  background-color: #FF6666;
  width: 400px;
  height: 400px; }

.gage-holder {
  position: relative;
  height: 130px;
  width: 240px;
  overflow: hidden; }

.gage-holder > .image-holder-anx {
  position: absolute;
  width: 100%;
  height: 130px; }

.insider {
  line-height: 35px;
  width: 30px;
  height: 20px;
  background-color: black;
  border-radius: 60px 60px 0 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  text-align: center; }

.initialValue {
  border: none;
  color: black;
  display: block;
  width: 3em;
  background-color: transparent;
  margin: 1em auto;
  outline: none;
  font-size: 16px;
  text-align: center; }

/*SVG*/
svg {
  margin: 0px;
  padding: 0; }

#gage-png, #gage-png-mask {
  position: absolute;
  height: 100%;
  left: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  top: 0px; }

.outline {
  fill: #FF6767; }

.fill {
  fill: #D6CCA7; }

.needle {
  fill: black; }

.scale, .scaleB {
  stroke: black; }

text {
  text-anchor: middle;
  dominant-baseline: alphabetic;
  font: 12px helvetica, sans-serif;
  fill: black; }

.needleB {
  transition: all .5s ease-in; }

.slider-holder {
  position: relative;
  float: right; }

.anxiety-input-section {
  top: 5%;
  position: relative;
  left: 60%;
  transform: translateX(-50%);
  color: #00FBD0;
  text-align: left; }

.anxiety-button {
  border: 1px solid grey;
  width: 50px;
  height: 50px;
  background: #00FBD0;
  position: relative;
  float: left;
  left: 5%;
  display: block;
  margin: 5px; }

.anxiety-title {
  margin: 20px;
  font-weight: bold;
  font-size: 1.2em; }

#presidency-sm {
  font-size: .7em;
  color: grey;
  font-weight: normal; }

#slider-down:hover {
  background: grey; }

#slider-up:hover {
  background: #DD5858; }

/*# sourceMappingURL=anxiety.css.map */