:root {
  --color-purple: #603c66;
  --color-purple-30: #432a47;
  --color-purple-50: #b09eb3;

  --color-green: #608a7b;
  --color-green-10: #567c6f; /* Contrast over 4.5 on white */
  --color-green-20: #4d6e62;
  --color-green-30: #3c574e;
  --color-green-light: #b3ccb2;
  --color-green-light-40-lighten: #d1e0d1;
  --color-green-light-50-lighten: #d9e6d9;

  --color-pink: #f98ba2;
  --color-pink-40: #ae6171;
  --color-pink-text: #955361;

  --color-beige: #efe0dc;
  --color-beige-10: #d7cac6;
  --color-beige-20: #bfb3b0;
  --color-beige-30: #a79d9a;
  --color-beige-40: #8f8684;
  --color-beige-50: #78706e;
  --color-beige-50-lighten: #f7f0ee;
  --color-beige-80-lighten: #fcf9f8;

  --color-gray: #d9d9d9;

  /* reset */
  --bs-link-color: var(--color-green-10);
  --bs-link-hover-color: var(--color-green-30);
  --bs-btn-color: var(--color-purple);
  --bs-btn-bg: var(--color-purple);
  --bs-danger-rgb: 248, 139, 162;
  --bs-success-rgb: 96, 138, 123;

  --bs-btn-focus-box-shadow: none;

  --component-sidebar-color: var(--color-beige);

  /* --component-sidebar-color-text: var(--color-white); */
  --component-sidebar-border-color: var(--color-beige-10);
  --component-sidebar-mobile-bar-color: var(--color-green);

  --component-ui-widget-color-active: var(--color-green-light);
  --component-ui-widget-color-text-active: var(--color-black);

  --component-progress-color: var(--color-beige);
  --component-progress-border-color: var(--color-white);
  --component-progress-active-color: var(--color-green);
  --component-progress-complete-color: var(--color-green);

  --component-bg-light-color: var(--color-beige-80-lighten);
}

th,
strong,
b {
  font-family: rounabold;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: rounamedium, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
}

/** RESET **/
body {
  font-family: rounaregular, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  font-size: 1rem;
}

a {
  text-decoration: underline;
}

/* Theme specific */

.active > .page-link,
.page-link.active {
  color: var(--color-purple);
  background-color: var(--color-beige);
  border-color: transparent;
}

/* BS Specific */

.btn-success {
  --bs-btn-color: var(--color-black);
  --bs-btn-active-color: var(--color-black);
  --bs-btn-disabled-color: var(--color-black);
  --bs-btn-hover-color: var(--color-black);

  --bs-btn-bg: var(--color-green-light);
  --bs-btn-hover-bg: var(--color-green-light);
  --bs-btn-active-bg: var(--color-green-light);

  --bs-btn-border-color: var(--color-green);
  --bs-btn-hover-border-color: var(--color-green);
  --bs-btn-active-border-color: var(--color-green);
  --bs-btn-disabled-border-color: var(--color-green);

  --bs-btn-disabled-bg: var(--color-beige-50);

  --bs-btn-focus-shadow-rgb: 96, 138, 123;
  /* border: 0 !important; */
}

.btn-primary {
  --bs-btn-color: var(--color-purple);
  --bs-btn-active-color: var(--color-purple);
  --bs-btn-disabled-color: var(--color-purple);
  --bs-btn-hover-color: var(--color-purple);

  --bs-btn-bg: var(--color-beige);

  --bs-btn-hover-bg: var(--color-beige-10);
  --bs-btn-focus-shadow-rgb: 95, 60, 102;
  --bs-btn-active-bg: var(--color-beige-10);
  --bs-btn-disabled-bg: var(--color-beige-50);

  --bs-btn-border-color: var(--color-beige-20);
  --bs-btn-hover-border-color: var(--color-beige-20);
  --bs-btn-active-border-color: var(--color-beige-20);
  --bs-btn-disabled-border-color: var(--color-beige-20);
  /* border: 0 !important; */
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-pink-40);
  --bs-btn-border-color: var(--color-pink-40);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-pink);
  --bs-btn-hover-border-color: var(--color-pink-40);
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-pink-40);
  --bs-btn-active-border-color: var(--color-pink-40);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color-pink-40);
  --bs-btn-disabled-border-color: var(--color-pink-40);
}

.table {
  --bs-table-border-color: #ececec !important;
}

.btn-link {
  --bs-btn-focus-box-shadow: none;
}

.alert-info,
.alert-success {
  --bs-alert-color: var(--color-black);
  --bs-alert-bg: var(--color-green-light);
  --bs-alert-border-color: var(--color-green);
}

.alert-year-in-review {
  color: var(--color-beige-80-lighten);
  background: var(--color-purple);
  border-color: var(--color-purple-30);
  background-image: url("../img/banner-bg-wave.6cfee6a6356a.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  border-radius: var(--bs-border-radius);
}

.alert-survey-invitation-banner {
  color: var(--color-purple-30);
  background: var(--color-green-light);
  border-color: var(--color-purple-30);
  background-image: url("../img/banner-bg-wave.6cfee6a6356a.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  border-radius: var(--bs-border-radius);
}

.alert-survey-invitation-banner {
  color: var(--color-purple-30);
  background: var(--color-green-light);
  border-color: var(--color-purple-30);
  background-image: url("../img/banner-bg-wave.6cfee6a6356a.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  border-radius: var(--bs-border-radius);
}

.alert-survey-sharing-banner {
  color: var(--color-purple-30);
  background: var(--color-green-light);
  border-color: var(--color-purple-30);
  border-radius: var(--bs-border-radius);
}

.list-group-item.active {
  background-color: var(--color-purple) !important;
  border-color: var(--color-purple-30) !important;
}

.form-control,
.input-group-text,
.select2-container--bootstrap-5 .select2-selection {
  border-color: var(--color-purple-50);
}

.badge {
  background-color: var(--color-purple);
}

.url-highlight {
  background-color: var(--melvio-beige-light);
  font-size: 1.5rem;
  font-style: italic;
  text-decoration: underline;
  color: var(--color-purple-30);
  word-wrap: break-word;
}

.survey-answer-count {
  font-size: 1.5rem;
}

.special-nav-item {
  background-color: var(--color-green-light);
}

.small-icon {
  font-size: 1rem;
}

.survey {
  background-color: var(--color-green);
  z-index: 1;
  position: relative;
}

.survey-background {
  background-color: var(--color-green);
  background: url("../img/stripes.68cf5554b5e8.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
}

.survey-foundation-logo {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}

.survey-container {
  background: white;
  width: 560px;
  max-width: 95%;
  min-height: 100vh;
  border-radius: 3px;
}

.survey-content {
  padding-top: 5rem;
  min-height: calc(99vh - 32px);
}
.survey-details {
  margin-top: auto;
}

.survey-subtitle {
  font-size: 1rem;
  font-weight: bold;
}

.survey-button {
  font-size: 1.5rem;
  padding: 1rem 4rem;
  border-radius: 40px;
  background-color: var(--color-green-light);
}

.survey-button:hover {
  background-color: var(--color-green-light);
}

@media (max-width: 767px) {
  .survey-content {
    padding-top: 2rem;
  }
  .survey .container {
    --bs-gutter-x: 1.5rem;
  }
  .survey-container {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .survey-button-container {
    margin-bottom: 2rem !important;
  }
}