:root {
    --cardWidth: 300px;
    --cardHeight: 200px;
    --cardMargin: 16px;
  }
  
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    width: 100%;
  }

  .main-section {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .card {
    width: var(--cardWidth);
    height: auto;
    margin: var(--cardMargin);
    border: 2px solid #8d8d8d7a;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition-duration: 300ms;
    /* transition-timing-function: ease-in; */
    transition-property:all;
  }
  .card-wide {
    width: 450px;
    height: var(--cardHeight);
    margin: var(--cardMargin);
    border: 2px solid #8d8d8d7a;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition-duration: 300ms;
    /* transition-timing-function: ease-in; */
    transition-property:all;
  }


  .card:hover
  {
    
    border: 2px solid #7bb7c9;
    transition-duration: 300ms;
    /* transition-timing-function: ease-in; */
    transition-property: all;
  }
  


  
.danger {
  animation: pulse-red 5s infinite;
  text-align: center;
}
.warning {
  background-color:yellow;
  text-align: center;
}

.airworthy {
  background-color:rgb(13, 254, 0);
  text-align: center;
}

.airworthy-with-notes {
  /* background-color:rgb(13, 254, 0); */
  text-align: center;
  animation: strobe-orange 3s linear 0s infinite normal none;
}

@keyframes strobe-orange{
  0% {
      background: orange;
  }
  40% {
      background: orange;
  }
  45% {
      background: none;
  }
  50% {
      background: orange;
  }
  55% {
      background: none;
  }
  60% {
      background: orange;
  }
  100% {
      background: orange;
  }
}


@keyframes pulse-red {
  0% {
    background-color: none;
    color:black;
  }
  50% {
    background-color: red;
    color:white;
  }
  100% {
    background-color: none;
    color:black;
  }
}

.ac-card-sub-header
{
  border-style:solid;
  border-width: 2px;
}

.ac-card-reg
{
  font-size:150%;
}

.ac-card-reg
{
  font-size:150%;
}

.category-title
{
    text-align:center;
    font-size:250%;
    border-style:solid;
    border-width:2px;
}

.row-ok
{
  text-align:right;
  background-color:rgb(13, 254, 0);
}

.row-wip
{
  text-align:right;
  background-color:grey
}


.reflection {
  width: 300px;
  height: 150px;
  position: relative;
  overflow: hidden;
  background-color: #666;
}
.reflection::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 10s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect 10s ease-in-out infinite;
}
@keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}