@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sono:wght,MONO@200,0.8;300,0.8;400,0.8;500,0.8;600,0.8;700,0.8;800,0.8&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

:root {
  --light-primary: #368fe7;
  --text-gray: #C3C3C3;
  --primary: #1976d2;
  --dark-primary: #135ca4;
  --home-bkg: #041a14;
  --dark_green: #06180e;
  --green: #2ad0a4;
  --light-gray: #292929;
  --gray: #1e1e1e;
  --dark-gray: #191919;
  --hover: #333333;
  --background: #141518;
  --imgur-gray: #2c2f34;
  --summary-table-header: #272727;
  --soft-green: #4caf50;
  --softer-green: #71c174;
  --soft-red: #f55e5d;
  --softer-red: #f67979;
  --soft-blue: #35baca;
  --score-red: #e13d45;
  --score-yellow: #ffab1a;
  --score-green: #33994d;
  --score-bright: #66cc80;
  --yellow-green: #8DA136;
}

#app {
  /*uncomment when ready to add color */
  /* background-image: 
  linear-gradient(to bottom,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 1)),
      url('/assets/lion.png') !important;
  background-size: cover; */
}

.rainbow-border {
  margin-bottom: 0px;
  border-style: solid;
  border-width: 3px;
  border-right-style: hidden;
  border-top-style: hidden;
  border-left-style: hidden;
  border-bottom-style: solid;
  border-image: linear-gradient(
      to right,
      var(--score-red),
      var(--score-yellow),
      var(--score-green),
      var(--score-bright)
    )
    1;
}

.rainbow-border-thin {
  margin-bottom: 0px;
  border-style: solid;
  border-width: 1.5px;
  border-right-style: hidden;
  border-top-style: hidden;
  border-left-style: hidden;
  border-bottom-style: solid;
  border-image: linear-gradient(to right,
      var(--score-red),
      var(--score-yellow),
      var(--score-green),
      var(--score-bright)) 1;
}

.rainbow-border-one {
  margin-bottom: 0px;
  border-style: solid;
  border-width: 3px;
  border-right-style: hidden;
  border-top-style: hidden;
  border-left-style: hidden;
  border-bottom-style: solid;
  border-image: linear-gradient(to right,
      var(--score-red),
      var(--score-yellow),
      var(--yellow-green)) 1;
}
.rainbow-border-two {
  margin-bottom: 0px;
  border-style: solid;
  border-width: 3px;
  border-right-style: hidden;
  border-top-style: hidden;
  border-left-style: hidden;
  border-bottom-style: solid;
  border-image: linear-gradient(to right,
      var(--yellow-green),
        var(--score-green),
        var(--score-bright)) 1;
}

.toolbar {
  /* put whatever you like here */
  /* background-color: var(--score-bright) !important;  */
}

.v-data-table-header {
  /* put whatever you like here */
  /* background-color: var(--score-bright) !important; */
}
.table {
  background-color: var(--gray) !important;
}

.theme--dark.v-tabs {
  color: white;
}
.v-toolbar__content {
  padding-top:0px;
  padding-bottom: 0px;
}

.action-gradient {
  background-image: linear-gradient(30deg, #f7971e 0%, #ffd200 150%);
}
.bartransition .v-btn__content {
  z-index: 2000;
}
.v-tabs.home-tabs {
  z-index: 1000;
  position: fixed;
  top: 0;
  width: 100%;
}
.main {
  padding-top: 10px;
}
.nav-item {
  color: rgba(255, 255, 255, 0.7) !important;
}
.v-tab {
  font-size: 18px;
  text-transform: none;
  font-weight: 300;
}

.v-tab--active {
  font-weight: 500 !important;
}

html {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}
.v-application {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}
.v-menu + .v-btn {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  text-decoration-color: hsla(0, 0%, 100%, 1) !important;
}
.v-btn {
  text-transform: none !important;
  border-radius: 2px !important;
  font-weight: 300;

  /* padding-top: 8px !important;
  padding-bottom: 8px !important; */
  /* height: 40px !important; */
}
.all-font {
  font-size: 9px;
}
.recurly-element-card {
  height: 38px;
  margin-top: 0px;
}

@media (max-width: 600px) {
  .all-font {
    font-size: 9px;
  }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .all-font {
    font-size: 14px;
  }
}
@media (min-width: 1000px) {
  .all-font {
    font-size: 16px;
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--gray) inset !important;
  -webkit-text-fill-color: white !important;
}

/* Result Stuff */

.result .body {
  padding-top: 15px;
  padding-bottom: 0px;
  /* background-color: var(--gray); */
}

/* Quiz Stuff */
.required {
  color: hsl(0, 100%, 50%);
  cursor: default;
}

::v-deep .v-card-title {
  word-break: normal !important;
}
::v-deep .v-card-subtitle {
  word-break: normal !important;
}