/* ===== Base ===== */
body {
  background: linear-gradient(to left, #299eb3, #7fd5e5);
  min-height: 100vh;
}

.background-base-color {
  background-color: #556fb5;
}

.pointer { cursor: pointer; }
.cursor-disabled { cursor: no-drop; }

/* ===== Cards / Boxes ===== */
.app-box-shadow {
  border: #ec6941 solid 2px;
}
.app-box-shadow:hover {
  opacity: 0.5;
}

/* ===== Colors ===== */
.highlight-content          { color: #ec6941; }
.highlight-negative-content { color: #299eb3; }
.relo-primary-color         { color: #556fb5; }

.bg-relo-highlight     { background-color: #ec6941; }
.bg-relo-sub-highlight { background-color: #47a9ff; }
.bg-relo              { background: linear-gradient(to left, #299eb3, #7fd5e5); }

/* ===== Forms ===== */
.relo-input-form {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid 1px #47a9ff;
  width: 300px;
  background: transparent;
  outline: none;
  padding: 4px 4px;
}

.relo-primary-color hr {
  border: 1px #556fb5 solid;
}

/* ===== Borders / Boxes ===== */
.relo-box-border {
  border: 1px #556fb5 solid;
}

.graph-box {
  border: 1px solid #e5e5e5;
}

/* ===== Links ===== */
.relo-link,
.relo-link:hover {
  color: white;
  text-decoration: none;
}

/* ===== Recommendation box ===== */
.relo-recommendation {
  line-height: 1.8;
  color: #299eb3;
  border: 1px solid #299eb3;
  display: inline-block;
  width: 100%;
}

/* ===== Landing / Hero ===== */
.relo_header {
  padding: 80px 20px;
  text-align: center;
  background: transparent;
}

.main_phrase {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

.jump_bottom {
  color: white;
  border: 2px solid white;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
  margin-top: 10px;
}
.jump_bottom:hover {
  color: white;
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.email-input {
  border: none;
  border-bottom: 2px solid #47a9ff;
  background: transparent;
  padding: 8px;
  font-size: 1rem;
  margin-bottom: 16px;
  width: 300px;
  outline: none;
  color: white;
}
.email-input::placeholder { color: rgba(255, 255, 255, 0.7); }

.submit-btn {
  background-color: #ec6941;
  color: white;
  border: none;
  padding: 12px 40px;
  font-size: 1.1rem;
  border-radius: 4px;
  cursor: pointer;
}
.submit-btn:hover { opacity: 0.8; }

.relo-image {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===== Menu boxes on new.html ===== */
.menu-box {
  background: #f8f9fa;
  padding: 2rem;
  margin: 0 1rem;
  border: #ec6941 solid 2px;
  text-align: center;
  cursor: pointer;
}
.menu-box:hover { opacity: 0.5; }

.resize_icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.app-name { font-size: 1rem; margin: 0; }
.hidden_underline { text-decoration: none; }

/* ===== Benchmark result header ===== */
.result-title {
  background-color: #ec6941;
  color: white;
  padding: 12px 24px;
  text-align: center;
  display: inline-block;
  margin: 2rem auto;
}

/* ===== Tables ===== */
.table thead th { color: #556fb5; }