styles.scss

@use "sass:math";

// Bootstrap colors
$white: #fff;
$body-color: #111;
$dark: #333;
$primary: #000091;
$secondary: #313178;
$success: #18753c;
$warning: #fcc63a;
$danger: #c9191e;
$info: #0063cb;
$input-border-color: #969696;
$navbar-dark-color: rgba($white, 0.8);
$text-dark: rgb(58, 58, 58);
$text-darker: rgb(22, 22, 22);
$text-muted: rgb(104, 104, 104);

// Responsive texts
$enable-responsive-font-sizes: true;

// Badges
$badge-border-radius: .25em;
$badge-padding-y: 0px;

// Borders
$border-radius: 0;
$border-radius-sm: 0;
$border-radius-lg: 0;

// Buttons
$btn-hover-bg-shade-amount: 15%;

// Headings
$headings-font-weight: 700;

// Inputs
$input-bg: #eee;

// Range
$form-range-track-border-radius: 0;

// Viewports
$viewport-xs: 320px;
$viewport-sm: 576px;
$viewport-md: 768px;
$viewport-lg: 992px;
$viewport-xl: 1200px;
$viewport-xxl: 1320px;

$enable-cssgrid: true;

$score-letter-A: #018241;
$score-letter-B: #86bc30;
$score-letter-C: #ffcc01;
$score-letter-D: #f08000;
$score-letter-E: #e63f12;

// Fonts
@font-face {
  font-display: optional;
  font-family: Marianne;
  font-weight: normal;
  font-style: normal;
  src: url("./public/fonts/Marianne-Regular.woff2") format('woff2'),
       url("./public/fonts/Marianne-Regular.woff") format('woff');
}
@font-face {
  font-display: optional;
  font-family: Marianne;
  font-style: normal;
  font-weight: 700;
  src: url("./public/fonts/Marianne-Bold.woff2") format("woff2"),
       url("./public/fonts/Marianne-Bold.woff") format("woff")
}
$font-family-sans-serif: Marianne, Arial, sans-serif !default;

@import "./node_modules/bootstrap/scss/bootstrap.scss";

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  // Note: This is for header and footer to fit the whole width of the
  // available viewport. Main content area is white background.
  min-width: 320px;

  @media screen and (width < $viewport-sm) {
    font-size: 14px !important;
    select,
    input,
    button,
    .form-control,
    .btn {
      font-size: 14px !important;
    }
  }
}

// Browser Hacks

_::-webkit-full-page-media,
_:future,
:root select {
  // https://browserstrangeness.bitbucket.io/css_hacks.html#safari
  -webkit-appearance: none;
  background-image: url("./public/img/chevron-down.png") !important;
  background-position: right 8px center;
  background-repeat: no-repeat;
  padding-right: 26px;
}

// Fixes a glitch in Chrome with input[number] making the arrows hardly
// actionnable when float numbers are rounded
input[type="number"].no-arrows {
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  appearance: initial;
  -moz-appearance: textfield;
}

// Force-show number <input/> inc-dec arrows to the left of the field
.incdec-arrows-left {
  display: flex;

  &[type="number"]::-webkit-inner-spin-button,
  &[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    margin-left: 4px;
  }
}

// Bootstrap component/helper overrides, to match DSFR design guidelines
.badge {
  background-color: #fafafa;
  letter-spacing: 1px;
  line-height: 1.5;
  padding-bottom: calc($badge-padding-y + 1px);
  text-transform: uppercase;
  &-success {
    background-color: #b8fec9;
    color: $success;
  }
  &-danger {
    background-color: #ffe9e9;
    color: $danger;
  }
  &-info {
    background-color: #e8edff;
    color: $info;
  }
  &-warning {
    background-color: #feebd0;
    color: $warning;
  }
}

.btn {
  font-weight: 500 !important;
}

.card {
  img {
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }
}

.feedback {
  &-valid {
    border-color: $success;
  }

  &-invalid {
    border-color: $danger;
  }
}

.form-select {
  &:disabled {
    opacity: 0.65;
  }
}

.form-select, .form-control, .input-group-text {
  line-height: initial;
  border: 0 !important;
  box-shadow: inset 0 -2px 0 0 #3a3a3a;
}

input {
  &[type=checkbox].form-check-input {
    &:not(:checked) { background-color: $white }
    border-radius: 0.15em !important;
  }
  &[type=radio].form-check-input {
    &:not(:checked) { background-color: $white }
  }
}

.opacity {
  &-50 {
    opacity: 0.5;
  }
}

.sticky {
  &-sm-top,
  &-md-top,
  &-lg-top,
  &-xl-top {
    position: -webkit-sticky;
  }
}

// Highcharts overriden styles
.highcharts-data-table {
  table {
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
    min-width: 100%;
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 0.8em;

    caption {
      display: none;
    }

    td,
    th {
      border: 1px solid silver;
      padding: 0.5em;
      max-width: 140px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    thead {
      tr {
        cursor: pointer;
      }
    }

    tbody {
      td {
        max-width: 100px;
        text-align: right;
      }
    }

    tr:nth-child(even), thead tr {
      background: #f8f8f8;
    }

    tr {
      &:hover {
        background: #ececfc;
      }
    }
  }

  .highcharts-sort-ascending::after {
    content: " ↓";
  }

  .highcharts-sort-descending::after {
    content: " ↑";
  }
}

// Specifics for the comparator modal, when displaying the "total" impacts, we want
// the stroke to be black instead of white by default.
.total-impacts rect.highcharts-point {
  stroke: #333;
}

// Rapidoc overriden styles
// @see https://rapidocweb.com/css-parts.html
rapi-doc::part(section-endpoint-head-path) {
  font-size: 14px;
}

// Utility classes

.bg {
  &-info {
    &-dark {
      background-color: $info;
    }
  }
}

q {
  quotes: "“" "”" "‘" "’";
  &::before {
    content: open-quote;
  }
  &::after {
    content: close-quote;
  }
}


.border {
  &-top-sm-0 {
    @media screen and (min-width: $viewport-sm) {
      border-top: 0 !important;
    }
  }
  &-start-sm {
    @media screen and (min-width: $viewport-sm) {
      border-left: 1px solid $border-color !important;
    }
  }
}


.bottomed-paragraphs {
  p:last-child {
    margin-bottom: 0;
  }
}

.bg-primary-gradient {
  background: $primary;
  background: linear-gradient(15deg, #054a80, $primary);
}

.cursor {
  &-help {
    cursor: help;
  }

  &-pointer {
    cursor: pointer;
  }
}

.icon {
  position: relative;
}

.icon-snow {
  left: -5px;
  font-size: 8px;
  position: absolute;
  top: -2px;
}

.inline-paragraphs {
  p {
    display: inline;
  }
}

.fs {
  &-7 {
    font-size: 0.875rem;
  }

  &-8 {
    font-size: 0.85rem;
  }

  &-9 {
    font-size: 0.75rem;
  }

  &-unit {
    font-size: min(0.7em, 24px);
  }

  &-80p {
    font-size: 80%;
  }
}

.fw {
  &-500 {
    font-weight: 500;
  }
}

.height-auto {
  // This class is to be used to circumvent a bug with Rapidoc where it sets the height of
  // the component parent element to `height: 100vh` for no reason.
  height: auto !important;
}

.invert {
  filter: invert(1);
}

.link {
  &-external:not(.link-external-muted) {
    &::after {
      font-family: "icomoon" !important;
      content: "\e908";
      display: inline-block;
      text-indent: 2px;
      font-size: 0.9em;
      color: currentColor;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      vertical-align: text-top;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }

  &-email {
    &::before {
      font-family: "icomoon" !important;
      content: "\f0e0";
      display: inline-block;
      text-indent: 2px;
      font-size: 0.9em;
      color: currentColor;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      vertical-align: baseline;
      line-height: 1;
      margin-right: 3px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
}

.no {
  &-outline {
    &:focus, &:active {
      outline: none;
      box-shadow: none;
    }
  }

  &-scroll-chaining {
    // Avoid y-scroll chaining
    // @see https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/
    overscroll-behavior-y: contain;
    overflow-y: auto;
  }
}

.overflow {
  &-x-hidden {
    overflow-x: hidden;
  }

  &-y-scroll {
    overflow-y: scroll;
  }
}

.overlappedImage {
  img {
    width: 650;
    height: 437;
    aspect-ratio: auto 650 / 437;
  }
  > div {
    background-color: $white;
    left: 25%;
    margin-top: -200px;
    padding: $spacer * 3;
    position: relative;
    width: 75%;
  }

  @media screen and (width <= $viewport-md) {
    img {
      width: 100%;
      height: auto;
    }
    > div {
      left: 0;
      margin-top: 0;
      padding: $spacer 0 0;
      width: 100%;
    }
  }
}

.prevent-scrolling {
  overflow: hidden;
  padding-right: 0px;
}

.stacked-card {
  > * {
    border-bottom: 0;
    border-radius: 0;
    margin-bottom: 0;
  }

  > :first-child {
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }

  > :last-child {
    border-bottom: 1px solid $border-color;
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }
}

.text-light-all {
  color: $white;
  a {
    color: $white;
  }
}

.w {
  &-33 {
    width: 33.333333%;
  }
}

// Components
// please keep these ordered alphabetically

.Abbr {
  // FIXME: this should be a utility class, not a component
  font-weight: normal;
  cursor: help;
  border-bottom: 1px dashed $primary;
}

.AccordionButton {
  min-height: 70px;
}

.AddElementFormWrapper {
  border-bottom: $list-group-border-width solid $list-group-border-color;
  display: grid;
  grid-gap: 5px 10px;
  grid-template-columns: 100px 1fr 1fr auto 120px 31px;
  grid-template-areas:
    "sharesTotal addElementButton addElementButton addElementButton addElementButton addElementButton";
  align-items: center;

  @media screen and (max-width: $viewport-md) {
    grid-gap: 5px;
    grid-template-columns: 90px 1fr 60px 31px;
    grid-template-areas:
    "sharesTotal addElementButton addElementButton addElementButton";
  }

  &:last-child {
    border-bottom: 0;
  }
  .SharesTotal {
    grid-area: sharesTotal;
  }
  .AddElementButton {
    grid-area: addElementButton;
  }
}

.Autocomplete {
  height: 368px;
  &Choice {
    &.selected,
    &:hover {
      color: #fff !important;
      span {
        color: #fff !important;
      }
    }
  }
}

.CardList {
  .list-group-item {
    padding-top: 1.1em;
  }
}

.CardTabs {
  border: 1px solid #ddd;
}

.ComparatorChart {
  &Legends {
    left: unset !important;
    top: unset !important;
    margin: 0px 10% -15px 10% !important;
    position: unset !important;
    transform: unset !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  &Legend {
    margin: 2px 3px !important;
    color: $text-dark;
  }

  /* Horrible hack to make the ComparatorChart EoL stage segments black.
   * @see src/Views/Comparator.elm#chart
   * @see https://github.com/terezka/elm-charts/issues/101
   */
  .elm-charts__bar[fill="#FF8400"] {
    filter: brightness(0);
  }
}

.ComplementsDetails {
  grid-area: complements;

  .ElementComplement {
    display: grid;
    margin-top: 4px;
    grid-gap: 0 14px;
    grid-template-columns: 1fr 7fr 1fr 1fr;
    grid-template-areas:
      "ComplementName ComplementRange ComplementValue ComplementImpact";

    @media screen and (max-width: $viewport-md) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-areas:
        "ComplementName  ComplementName  ComplementImpact ComplementImpact"
        "ComplementRange ComplementRange ComplementRange  ComplementValue";
    }

    .ComplementName {
      grid-area: ComplementName;
      min-width: 120px;
      padding-left: 12px;
    }
    .ComplementRange {
      grid-area: ComplementRange;
    }
    .ComplementValue {
      grid-area: ComplementValue;
      min-width: 50px;
    }
    .ComplementImpact {
      grid-area: ComplementImpact;
      min-width: 120px;
    }
  }
}

.ComplementsTable {
  margin-top: -1.5em;
  text-indent: 11px;
}

.DatasetTable {
  .table {
    &.view-list {
      tbody {
        td {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 242px;
          vertical-align: middle;
        }
      }
    }

    th,
    td {
      font-size: 0.9rem;
    }

    th {
      overflow: hidden;
      padding-bottom: 0.5em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.DownArrow {
  border-right: 1px solid  $list-group-border-color;
  min-height: 2rem;
  position: relative;

  &::after, &::before {
    border-bottom: 1px solid $list-group-border-color;
    bottom: 2px;
    content: "";
    display: inline-block;
    position: absolute;
    vertical-align: bottom;
    width: 10px;
  }
  &::after{
    right: -8px;
    transform: rotate(-45deg);
  }
  &::before {
    right: -3px;
    transform: rotate(45deg);
  }
}

.ElementFormWrapper {
  border-bottom: $list-group-border-width solid $list-group-border-color;
  display: grid;
  grid-gap: 5px 10px;
  grid-template-columns: 100px 1fr 1fr auto 120px 31px;
  grid-template-areas:
    "quantityInputWrapper  elementSelector  countrySelector     countrySelector     impactDisplay    baseElementDelete"
    ".                     complements      complements         complements         complements      .                "
    ".                     .                transportDistances  transportDistances  transportImpact  .                ";
  align-items: center;

  @media screen and (max-width: $viewport-md) {
    grid-gap: 5px;
    grid-template-columns: 90px 1fr 60px 31px;
    grid-template-areas:
      "quantityInputWrapper  elementSelector     impactDisplay    impactDisplay    "
      "countrySelector       countrySelector     countrySelector  baseElementDelete"
      "complements           complements         complements      complements      "
      "transportDistances    transportDistances  transportImpact  transportImpact  ";
  }

  &:last-child {
    border-bottom: 0;
  }
  .BioCheckbox {
    grid-area: bioCheckbox;
    input {
      margin-right: 5px;
    }
  }
  .CountrySelector {
    grid-area: countrySelector;
  }
  .ElementDelete {
    grid-area: baseElementDelete;
  }
  .ElementSelector {
    grid-area: elementSelector;
  }
  .ElementTransportDistances {
    grid-area: transportDistances;
  }
  .ElementTransportImpact {
    grid-area: transportImpact;
  }
  .ImpactDisplay {
    grid-area: impactDisplay;
  }
  .QuantityInputWrapper {
    grid-area: quantityInputWrapper;
    min-width: 90px;
    max-width: 100px;
    .form-control {
      padding-right: 0;
    }
    .input-group-text {
      padding-left: 4px;
    }
  }
}
.ElementDelete {
  margin-left: auto;
  width: 31px;
}
.ElementSelector {
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
  span {
    display: block;
    overflow: hidden;
  }
}

.Footer {
  border-top: 3px solid $primary;
  &InstitutionLink {
    color: $text-dark;
    font-size: 0.875em;
    font-weight: 700;
    text-decoration: none;
    &:hover {
      color: $text-dark;
      text-decoration: underline;
    }
  }
  &Brand {
    margin-top: 1.5em;
  }
  &Legal {
    a {
      font-size: 12px;
      color: $text-dark;
    }
  }
  &Logo {
    width: 160px;
  }
  &Navigation {
    background-color: #f6f6f6;
    padding: 1.5em 0;
    li {
      margin: .5em 0;
      a {
        font-size: 12px;
        color: $text-dark;
        &:hover {
          text-decoration: underline !important;
        }
      }
    }
  }
}

.GitbookContent {
  font-size: 0.9rem;

  h1 {
    font-size: 1.8em;
  }
  h2 {
    font-size: 1.65em;
  }
  h3 {
    font-size: 1.5em;
  }
  h4 {
    font-size: 1.25em;
  }
  img {
    max-width: 100%;
  }
  .mark {
    padding: 0;
    p {
      display: inline;
    }
  }

  table {
    width: 100%;
    margin-bottom: 1.5em;
    border-radius: 4px;
    border-collapse: collapse;
    overflow: hidden;

    thead {
      background-color: $dark;
      color: $white;

      th {
        padding: 0.5em 0.5em;
      }
    }

    tbody {
      tr {
        border-bottom: 1px solid #ddd;

        &:nth-child(even) {
          background-color: #f0f0f0;
        }

        td {
          padding: 0.5em 0.5em;
          p {
            margin: 0;
            a {
              p {
                // Note: This is because of two bugs:
                // - Gitbook markdown exposes raw HTML within cells (paragraphs)
                // - elm-markdown transforms all link node children as paragraphs
                display: inline;
              }
            }
          }
        }
      }
    }
  }
}

.Header {
  &AuthLink {
    font-size: 0.975em;
    text-decoration: none;
  }

  &Brand {
    padding: .25em 0;
    margin: .5em 0;

    &:hover {
      background-color: #f6f6f6;
    }
  }

  &Logo {
    width: 100px;
    height: 90px;
    aspect-ratio: auto 166 / 150;
    margin-left: 5px;
  }

  &Navigation {
    @media screen and (width < $viewport-sm) {
      width: 100%;
    }
    a.nav-link {
      font-size: 14px;
      padding: 1rem;
      cursor: pointer;
      &:hover {
        background-color: #f6f6f6;
      }
      &.active {
        box-shadow: inset 0 -2px 0 0 $primary;
      }
    }
  }

  &SubLogo {
    width: 24px;
    aspect-ratio: auto 1;
    margin-right: 5px;
  }

  &Title {
    color: $text-dark;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 4px;
    a {
      color: $dark;
      text-decoration: none;
    }
  }
}

.HorizontalBarChart {
  text-indent: -30%;
  .ext {
    position:relative;
    left: -50%;
    width: 75%;
    padding: 2px 0;
    .bar {
      height: 13px;
    }
    &.pos {
      margin-left: 75%;
      .bar {
        background-color: green;
      }
    }
    &.neg {
      .bar {
        float: right;
        margin-bottom: 4px;
        background-color: red;
      }
    }
  }
}

.ImpactDefinition {
  border-left: .25em solid #6a6af4;
  padding-left: 2em;
  p {
    line-height: 24px;
    &:not(:last-child) {
      margin-bottom: 5px;
    }
  }
}

.ImpactSelector {
  @media screen and (width < $viewport-sm) {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1044; // a notch behind mobile navigation overlay

    select,
    button {
      border-radius: 0;
    }
  }
}

.IngredientPlaneOrBoatSelector {
  input[type=radio] {
    display: none;
  }
  label > i {
    border: 1px solid var(--bs-primary);
    border-radius: 4px;
    color: var(--bs-primary);
    cursor: pointer;
    padding: 4px 7px;
    transition: background-color 0.5s, color 0.5s;

    .icon-snow {
      left: 2px;
      top: 2px;
    }
  }

  input[type=radio] ~ i {
    background-color: var(--bs-white);
    color: var(--bs-primary);
  }

  input[type=radio]:checked ~ i {
    background-color: var(--bs-primary);
    color: var(--bs-white);
  }

  .PlaneSelector > i {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .BoatSelector > i {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.Launcher {
  &Link {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-shadow: 0 4px 0 0 $primary;
    width: 200px;
    min-width: 200px;
    height: 196px;
    min-height: 196px;
    &:hover {
      background-color: #f6f6f6;
    }
  }
}

.Markdown {
  h2 {
    border-top: 1px solid #ccc;
    font-size: 1.5em;
    padding: 1em 0 0.5em;
    margin-top: 1em;
  }

  h3 {
    font-size: 1.25em;
    padding: 1em 0 0.5em;
    margin-top: 0.85em;
  }

  blockquote {
    color: $text-dark;
    border-left: 5px solid #ccc;
    font-style: italic;
    padding-left: 0.5em;
  }

  pre {
    background-color: rgb(14, 14, 36);
    border-radius: 8px;
    color: #fff;
    padding: 1em;
  }

  ul, ol {
    margin-bottom: 1em;
  }
}

.Materials {
  .ShareInput {
    flex: 0.5 1 auto;
    max-width: 70px;

    @media screen and (width < $viewport-sm) {
      max-width: 62px;
    }
  }

  .SharesTotal {
    width: 125px;
    min-width: 125px;
    max-width: 125px;

    @media screen and (width < $viewport-sm) {
      width: 102px;
      min-width: 102px;
      max-width: 102px;
    }
  }
}

.MobileMenuButton {
  position: absolute;
  top: 15px;
  right: 15px;
  text-align: right;
  button {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
  }
}

.NewVersionAlert {
  position: fixed;
  background-color: $success;
  color: $white;
  line-height: 5em;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  z-index: 1030;
  font-size: 90%;
  button {
    background-color: $white;
    font-size: 1em;
    margin-left: 1em;
    :hover {
      background-color: $primary;
    }
  }
}

.Simulator {
  @media screen and (width < $viewport-sm) {
    margin-top: 5px;
    > h1 {
      display: none;
    }
  }
}

.StagingAlert {
  position: fixed;
  background-color: orange;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1030;
  font-size: 90%;
  button {
    font-size: 1em;
  }
}

.Score {
  &Letter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1em;
    padding: 0.66em !important;
    font-weight: 700;

    &A { background-color: $score-letter-A !important }
    &B { background-color: $score-letter-B !important }
    &C { background-color: $score-letter-C !important }
    &D { background-color: $score-letter-D !important }
    &E { background-color: $score-letter-E !important }
    &Large {
      width: 1em;
      height: 1em;
      font-size: 66px;
    }
  }
  &ColoredText {
    &A { color: darken($score-letter-A, 2%) }
    &B { color: darken($score-letter-B, 10%) }
    &C { color: darken($score-letter-C, 10%) }
    &D { color: darken($score-letter-D, 10%) }
    &E { color: darken($score-letter-E, 10%) }
  }
}

.Step {
  &Body {
    &.disabled {
      opacity: 0.5;
    }
  }

  &Icon {
    display: grid;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    width: 22px;
    height: 22px;
  }

  &Header {
    min-height: 43px;
  }
}

.Subscores {
  line-height: 1.5em;
}

.Summary {
  &ProductImage {
    width: 4.35em;
    height: 4.35em;
  }

  @media screen and (width < $viewport-sm) {
    position: fixed;
    z-index: 1020;
    left: 0;
    right: 0;
    bottom: -3px;

    &ProductImage {
      width: 3.2em;
      height: 3.2em;
    }

    .card {
      border: 0;
      border-radius: 0;
      .card-header {
        border-radius: 0;
      }
      .card-body {
        padding: 10px;
      }
    }

    .card-header {
      color: red;
    }
  }

  &Score {
    &Funit {
      margin-top: -5px;
    }
  }
}

.Tabs {
  &Tab {
    border-top: 0 !important;
    box-shadow: 0 -2px 0 0 $primary;
    color: $text-darker;
    font-weight: 700;
    font-size: 0.975em;

    .nav-link {
      padding-left: 5px;
      padding-right: 5px;
    }

    &.active {
      color: $primary !important;
    }

    &:not(.active) {
      background-color: rgba($info, 0.1) !important;
      border-top: 1 solid #ddd;
      box-shadow: none;
      &:hover {
        background-color: rgba($info, 0.2) !important;
      }
    }
  }
}

.UpcycledCheck {
  padding-left: 1.8rem;
  padding-top: .4rem;
}

.VersionSelector {
  background-color: transparent;
  box-shadow: none;
}