:root {
    --blue: #6495ed;
    --white: #faf0e6;
    --esa-blue: #003247;
    --esa-dark-blue: #001923;
    --not-assessed: #faf0e6;
    --not-assessable: #dad9d9;
    --not-managed: #c76d6d;
    --basic: #8ab2c5;
    --good: #53a0e2;
    --excellent: #64c77d;
    --ideal: #00ed2d;
    --odd-row: #AED6F1;
    --even-row: #C3E0E5;

}

.bg-not-assessed {
    background-color: var(--not-assessed)!important;
}

.bg-not-assessable {
    background-color: var(--not-assessable)!important;
}

.bg-not-managed {
    background-color: var(--not-managed)!important;
}

.bg-basic {
    background-color: var(--basic)!important;
}

.bg-good {
    background-color: var(--good)!important;
}

.bg-excellent {
    background-color: var(--excellent)!important;
}

.bg-ideal {
    background-color: var(--ideal)!important;
}

body {
    background: white;
    min-height: 100vh
}

footer {
    background-color: var(--esa-blue);
    color: var(--white);
    font-size: 12px;
    position: sticky;
    top: 100%;
}

.bg-dark {
    background-color: var(--esa-blue)!important;
}

section.hero {
    position: relative;
    color: var(--white);
    width: 100%;
    height: 400px;
    background-image: url("../img/s5p.jpg");
    background-size: cover;
    background-position: center;
    padding-top: 100px;
  }

  .hero-text {
    margin: auto;
    width: 70%;
    background-color: #003247;
    opacity: 0.7;
  }

  .home-card {
    margin: 25px;
  }

  .home-card img {
    max-height: 150px;
  }

  .card-group {
    margin-bottom: 40px;
  }

  .response-info {
    list-style: none;
  }

  .maturity-matrix-table {
    margin-top: 20px;
  }

  .maturity-matrix-table th {
    background-color: var(--esa-blue);
    color: var(--white);
  }

  .matrix-cell {
    padding-left:0;  
  }

  .generic-header {
    font-size: 20px;
    font-weight: bold;
    margin: 15px 0px;
  }

  .table-mmt {
    margin-top: 30px;
  }

  .mmt-action-button {
    min-width: 10em;
  }

  #select-assessments {
    width: 200px;
    float: right;
    margin-bottom: 10px;
  }

  #matrix-actions{
    float: right;
    margin-right: 30px;
  }

   #select-verification {
    width: 200px;
    float: right;
    margin-bottom: 10px;
  }

  table.compare-assessments {
    background-color: transparent!important;
  }

  table tr.odd-group {
    background-color: var(--odd-row)!important;
  }

  .even-group {
     background-color: var(--even-row)!important;
  }

  th.verification-header {
    background-color: rgb(20, 158, 168);
  }

  td.verification-column {
    background-color: rgb(133, 198, 202);
  }