body {
  background-color: #fff;
}

.table th[scope="row"] {
    background-color: rgba(0, 112, 175, .8) !important;
    font-weight: 600;
    white-space: nowrap;
}

/** Blue background */

.blue-bg {
  background: linear-gradient(to bottom, #fff, #e6f3ff 200px, #e6f3ff calc(100% - 200px), #fff);
  padding: 200px 0 !important;
}

.shorter-blue-bg {
  background: linear-gradient(to bottom, #fff, #e6f3ff 100px, #e6f3ff calc(100% - 200px), #fff);
  padding: 100px 0 200px !important;
}

.bottom-blue-bg {
  background: linear-gradient(to bottom, #fff, #e6f3ff 200px);
  padding: 50px 0 80px !important;
}

#next .list-group {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/** Jumbotron */

#comparison-jumbotron {
  background: radial-gradient(at top left, rgba(38, 56, 70, 0.62), rgba(38, 56, 70, 1));
  min-height: 300px;
  padding: 100px 0 20px;
  margin-bottom: 70px;
  text-align: center;
}

#comparison-jumbotron h1 {
  color: #fff;
  font-size: 2.4rem;
}

#comparison-jumbotron h2 {
  color: #fff;
  font-size: 2rem;
}

#comparison-jumbotron img {
  max-height: 300px;
  max-width: 100%;
  margin: -20px 0 -70px;
}

/** Body */

.container h3 {
  font-size: 1.6rem;
  padding: 1rem 0;
  margin-top: 1rem;
  text-align: left;
}

.container p, .container li {
  font-size: 1rem;
}

.comparison-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
  background: none;
}

.comparison-table a {
  color: #fff;
  display: inline-block;
  text-decoration: none;
}

.comparison-table a:hover {
  color: yellow;
  text-decoration: underline;
}

.comparison-table svg {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.comparison-table td {
  text-align: center;
}

.comparison-table thead th {
  text-align: center;
  vertical-align: middle;
}

.comparison-table th[scope="row"], .comparison-table th {
  background: rgba(38, 56, 70, .8) !important;
}

th.group-col {
  background: rgba(38, 56, 70, 1) !important;
  width: 1%;
  min-width: 40px;
}

th.no-bg {
  background: none !important;
  border: none !important;
}

th.right-bordered, td.right-bordered  {
  border-right: 1px solid rgba(38, 56, 70, .8) !important;
}

th.left-bordered, td.left-bordered {
  border-left: 1px solid rgba(38, 56, 70, .8) !important;
}

td.bottom-bordered {
  border-bottom: 1px solid rgba(38, 56, 70, .8) !important;
}

th.bottom-bordered {
  border-bottom: 2px solid white !important;
}

th.dark-bottom-bordered {
  border-bottom: 1px solid rgba(38, 56, 70, .8) !important;
}

svg.nudged {
  margin-left: -28px;
  position: relative;
  left: 26px;
}

.tier-spacer, th.tier-spacer, .table-group-divider {
  width: 8px;
  min-width: 8px;
  background: none !important;
  border: none !important;
}

.cost-grouping {
  border-bottom-right-radius: 12px;
}

.practical-details-grouping {
  border-top-right-radius: 12px;
}

th.tier-header {
  background: rgba(38, 56, 70, 1) !important;
  border-radius: 12px 12px 0 0;
  font-weight: 700;
  font-size: 1.2rem;
}

th.tier-header small {
  font-size: .9rem;
}

td.bottom-right-radius {
  border-bottom-right-radius: 12px;
}

.table-hover > tbody > tr:hover > td.tier-spacer,
.table-hover > tbody > tr:hover > th.tier-spacer {
  --bs-table-bg-state: none;
  background: none !important;
}

.vertical-header {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid white;
  font-weight: 600;
}

.comparison-table td.text-success {
  font-size: 1.4rem;
}

.comparison-table td.text-danger {
  font-size: 1.2rem;
  font-weight: 800;
}

@media only screen and (min-width: 576px) {
  .comparison-cards .card-footer {
    min-height: 7rem;
  }
}

@media only screen and (min-width: 992px) {
  .comparison-table {
    font-size: 1rem;
  }

  .tier-spacer, th.tier-spacer, .table-group-divider {
    width: 12px;
    min-width: 12px;
  }

}

@media print {
  .navbar {
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
  }
}