:root {
  --theme-color: #F6FFF8;
  --discontinued-color: #EAF4F4;
  --border-color: #CCE3DE;
  --clickable-color : #A4C3B2;
  --nav-color: #6B9080;
  --last-clicked-color:#04f1f1;

  --current-color: var(--nav-color);

  --muted-text: #46564F;

  /* The tints the site used before the redesign -- Bootstrap's subtle
     success/warning, applied to whole rows. The solid bg-success and
     bg-warning that replaced them were far harsher. */
  --release-bg: #D1E7DD;
  --release-text: #0A3622;
  --hotfix-bg: #FFF3CD;
  --hotfix-text: #664D03;
}

.navbar {
  background-color: var(--nav-color)
}

/* Show it is fixed to the top */
body {
  min-height: 75rem;
  padding-top: 4.5rem;
}


@keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}

.blink {
  text-decoration: blink;
  animation-name: blinker;
  animation-duration: 0.6s;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  animation-direction: alternate;
}

:root {
  --bs-body-bg: var(--theme-color)
}

.product {
  font-size: calc(.75rem + 1.5vw); 
  font-weight: 400;
  line-height: 1.2;
}

.expandable-boxes {
  position: relative;

}

.expandable-box {
  width: 30%;
  min-height: calc(4rem + 1.5vw); 
  float: left;
  margin: 0 3% .3em 0;
  border: .3em solid var(--border-color);
  border-radius: 1em;
  padding: .5em;
  box-sizing: border-box;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.current-firmware {
  background-color: var(--current-color)
}

.discontinued-firmware {
  background-color: var(--discontinued-color)
}

.hidden {
    display: none;
}

.open {
    width: 96%;
    margin: 0;
}
  
.out {
    display: none;
}


.spinner {
  width: calc(8rem + 1.5vw);
  height: calc(8rem + 1.5vw);
  display: none;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: 50%;
  right: 50%; /* or: left: 50%; */
  margin-top: calc(8rem * -0.5); 
  margin-right: calc(8rem * -0.5); 
}

.clickable {
  background-color: var(--clickable-color);
  border-radius: 12px;
  cursor: pointer;
}

.readme {
  min-width: 100%;
  display: none;
  background-color: var(--theme-color);
}

.readme-button {
  cursor: pointer;
}


.alert_container {
  width: max-content;
  margin-top: 2vw;
  margin-bottom: 2vw;
  min-height: 4vw;
  /*text-align: center;*/
}

.alert-box {
  margin: auto;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  min-width: 50vw;
  height: 4vw;
  font-size: 2.5vw;
}
.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    display: none;
}

.failure {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    display: none;
}

.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    display: none;
}

.danger {
  color: #df2f17;
  background-color: #fcf8e3;
  border-color: #faebcc;
  display: none;
}

.tj {
  border-radius: 5vw;
}

.tj_nod {
  animation: nod 2s linear;
}

/* Keyframes */
@keyframes nod {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(25deg);
  }
  50% {
    transform: rotateZ(25deg);
  }
  60%, 100% {
    transform: rotateZ(0);
  }
}

.last-clicked {

  border-color: var(--last-clicked-color);
}

.timeline-section {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--nav-color);
  border-top: 2px solid var(--border-color);
  padding-top: .4rem;
  margin-top: .8rem;
}

.readme-text {
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  background-color: var(--theme-color);
  padding: .5rem;
  border-radius: .3rem;
}

/* Two-tone card, as the site had before the redesign: a darker container with
   a lighter name plate inside it. The flat single-fill version read as heavier
   despite carrying less. No min-height -- the old one reserved space for the
   expand-in-place content that no longer exists. */
.product-card {
  border: .2em solid var(--border-color);
  border-radius: 1em;
  color: inherit;
  padding: .4rem;
  transition: border-color .2s ease-in-out;
}

.product-card:hover {
  border-color: var(--nav-color);
}

.product-plate {
  background-color: var(--clickable-color);
  border-radius: 12px;
  padding: .45rem .3rem;
  text-align: center;
  font-size: clamp(1rem, .6rem + .9vw, 1.6rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}


/* Whole-row tints, as the site had before the redesign: mint for release,
   cream for hotfix. The type is readable at a glance without parsing a badge
   or a heading, and both tints sit further from the pale page colour than
   plain white did, so rows have a real edge. */
.row-release,
.firmware-rail .list-group-item.row-release,
#firmware-timeline .list-group-item.row-release {
  background-color: var(--release-bg);
  color: var(--release-text);
  border-color: #A9CFBD;
}

.row-hotfix,
.firmware-rail .list-group-item.row-hotfix,
#firmware-timeline .list-group-item.row-hotfix {
  background-color: var(--hotfix-bg);
  color: var(--hotfix-text);
  border-color: #E4CE8A;
}

/* Selection is an accent bar and weight, never a repaint. Recolouring a
   selected hotfix row green would state the wrong type. */
.firmware-rail .list-group-item.active {
  border-left: .35rem solid var(--nav-color);
  font-weight: 600;
}

.rail-heading {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--nav-color);
  font-weight: 700;
  margin: .2rem 0 .4rem;
}

.page-meta {
  color: var(--muted-text);
}

/* On a tinted row, secondary text follows the row's own colour rather than a
   fixed grey that would fight both tints. */
.rail-meta,
.seen-date,
#firmware-timeline .text-muted {
  color: inherit;
  opacity: .82;
}

/* "Current" sits where a date would and must stay legible on either tint, so
   it is white with a green edge rather than a third coloured fill. */
.badge-current {
  background-color: #FFFFFF;
  color: #1E5B38;
  border: 1px solid #5C9B78;
  border-radius: 10px;
  padding: .02rem .45rem;
  font-weight: 600;
  white-space: nowrap;
}

/* The navbar is fixed, so a scroll that brings the timeline pane to the top of
   the viewport would tuck its heading underneath. Keep the navbar's height
   clear. */
#firmware-timeline {
  scroll-margin-top: 5rem;
}