body { font-family: Roboto; }

img.logo { max-height: 2rem; }

.button .fa { margin-right: 0.5rem; }

.is-rainbow {
  color: #ffffff;
  background-color: #333;
  background-image: linear-gradient( 135deg, #2ecc71 0%, #e4bA10 39%, #e4bA10 59%, #d35400 100% );
}

.navbar {
  display: flex !important;
}

.navbar-menu_rpgr {
  display: flex;
  align-items: stretch;
  flex-grow: 1;
  flex-shrink: 0;
}

.rating-result {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.rating-code {
  width: 100%;
  max-width: 400px;
  min-width: 0;
  margin: 0 auto;
}

/* --- RATING TABLE --- */

table.rating-table {
  margin: 0 auto;
  margin-bottom: 2rem;
  background: transparent;
}

table.rating-table tr,
table.rating-table thead th,
table.rating-table th,
table.rating-table td {
  color: inherit;
  border: 0;
  vertical-align: middle;
}

table.rating-table tr:hover {
  background: inherit;
}

table.rating-table td {
  color: #fff;
}

table.rating-table tbody tr:nth-of-type(1) td { background-color: #2ecc71; }
table.rating-table tbody tr:nth-of-type(2) td { background-color: #e4ba10; }
table.rating-table tbody tr:nth-of-type(3) td { background-color: #d35400; }
table.rating-table tbody tr:nth-of-type(4) td { background-color: #c0392b; }

table.rating-table tbody tr td[data-label="0"] { background-color: #2ecc71; }
table.rating-table tbody tr td[data-label="1"] { background-color: #e4ba10; }
table.rating-table tbody tr td[data-label="2"] { background-color: #d35400; }
table.rating-table tbody tr td[data-label="3"] { background-color: #c0392b; }

/* --- INTERATIVE RATING TABLE --- */

table.create-rating-table td {
  position: relative;
}

table.create-rating-table input[type=radio] {
  position: absolute;
  height: 100%; width: 100%;
  opacity: 0;
  cursor: pointer;
}

table.create-rating-table input[type=radio] ~ label {
  display: flex;
  align-items: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

table.create-rating-table input[type=radio]:focus ~ label {
  outline: 2px solid black;
}

table.create-rating-table input[type=radio] ~ label:before {
  content: '\f10c';
  font-family: 'FontAwesome';
  font-size: 1.5rem;
  padding-right: 12px;
}

table.create-rating-table input[type="radio"]:checked ~ label:before { 
  content: '\f058'; 
  padding-right: 10px;
  color: #ffffff;
}

@media (max-width: 780px) {

  .rating-table tr,
  .rating-table td {
    display: block;
  }

  .rating-table td:before {
    content: attr(data-label);
    display: inline-block;
    margin-right: 15px;
  }
}