:root {
  --btn-background-color: none;
}

.f-input {
  margin-bottom: 3rem;
  margin-top: 1rem;
  outline: none;
  border: none;
  background-color: transparent;
  border-bottom: solid 1px rgb(139, 139, 139);
  /* border-bottom-width: 2px; */
  padding-top: 1.8rem;
  color: whitesmoke;
  /* max-width: 380px; */
  text-align: center;
  font-family: 'Saira', sans-serif;
  /* font-weight: 200; */
  font-size: 2rem;
  text-transform: uppercase;
  /* caret-shape: block; */
  caret-color: #ccc;
}

@media(max-width:768px) {
  .f-input {
    width: 100%;
  }
}

::placeholder {
  color: #bbb;
  opacity: 0.4;
  /* Firefox */
  text-transform: initial;
  font-weight: 200;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #aaa;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #aaa;
}

.f-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  color: green;
  background-color: none;
  font-family: 'Saira', sans-serif;
  /* font-weight: 600; */
}

.f-button-start {
  width: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  color: green;
  background-color: none;
  font-family: 'Saira', sans-serif;
  font-weight: 300;
}

input[type=text] {
  background-color: none;
}

input:-webkit-autofill {
  /*background-color: #0000ff !important;*/
}


.report-meta {
  /* width:240px;
   display: inline-block;
   color: black;
   font-weight: 100;
   font-family: 'Saira', sans-serif;
   line-height: 0.7em; */

  /*font-size: 1.6em; font-family: Monospace; line-height: 0.7em;*/
}

/* .report-data { */
  /* color: black;
   font-family: 'Saira', sans-serif;
   font-width: 500;
   line-height: 0.7em; */
  /*style="font-size: 1.6em; font-family: Monospace; line-height: 0.7em;*/
/* } */

.btn {
  /* width: 380px; */
  background-color: var(--btn-background-color);
  font-size: 1.2rem;
  font-weight: 300;
  font-family: 'Saira', sans-serif;
  padding: .5em 1em;
  border: 1px solid #9797b2;
  outline: none;
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  --border-size: 3px;
  --accent-color: whitesmoke;
}

.btn.btn-border-underline::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--border-size);
  background-color: var(--accent-color);
  transition: transform 300ms ease-in-out;
  transform: scaleX(0);
}

.btn.btn-border-underline:hover::before,
.btn.btn-border-underline:focus::before {
  transform: scaleX(1);
}

button {
  width: 380px;
  /* width: 80%; */
}

.svg-logo {
  margin: 5% 5% 5% 5%;
}

.frid {
  /* color: red; */
}

.version {
  padding-top: 1.5rem;
  font-size: 0.8rem;
  color: #555;
  font-family: 'Saira', sans-serif;
  font-weight: 200;
  color: #999;
}

.font-art-01 {
  text-shadow: 0.02em 0.02em 0px #405060;
  padding: 1;
  font-weight: bold;

}

.font-art-02 {
  text-shadow: 0.02em 0.02em 0px #206020;
  padding: 1;
  font-size: 2em;
  font-weight: bold;
}

.key, .key1, .key2, .key3 {
  font-family: 'Exo';
  color: #ccc;
}

.key1 {
  font-size: 1.2rem;
}

.key2 {
  font-size: 1.0rem;
}

.key3 {
  font-size: 0.8rem;
  margin: initial;
}

.cap1 {
  color: #ccc;
  display: inline-block;
  min-width: 400px;
  text-align: left;
  border-bottom: dashed 1px #405060;
  font-family: 'Saira', sans-serif;
  font-weight: 200;
}

.val1 {
  color: whitesmoke;
  display: inline-block;
  min-width: 400px;
  text-align: right;
  border-bottom: dashed 1px #405060;
  font-family: 'Saira', sans-serif;
}

.pch-row-cap-val {
  display: flex;
}

.cap2 {
  color: #ccc;
  text-align: left;
  border-bottom: dashed 1px #405060;
  font-family: 'Saira', sans-serif;
  font-weight: 200;
}

.val2 {
  flex-grow: 1;
  text-align: right;
  border-bottom: dashed 1px #405060;
  font-family: 'Saira', sans-serif;
  color: whitesmoke;
}

@media only screen and (max-width: 600px) {

  .pch-row-cap-val {
    display: inline-block;
    width: 100%;
    padding: 0;
  }

  .cap2 {
    width: auto;
  }

  .val2 {
    text-align: left;
    text-align: right;
  }
}


@import url('https://fonts.googleapis.com/css?family=Exo:400,500,800');
@import url('https://fonts.googleapis.com/css?family=Exo:400,500,800');

@font-face {
  font-family: 'Exo';
}

.font-div {
  border: 0px solid #ff3333;
  width: 100%;
}

.svg-art {
  border-radius: 10px;
  border: 1px solid #33222b;
  margin: 10px;
}

.overpriced {
  color: #a23232;
}

.vspace2rem {
  padding-top: 2rem;
}