:root {
  --agglo-green-dark: #01472C;
  --agglo-green-mid: #2D653C;
  --agglo-green-light: #D1DF92;
  --agglo-text: #00491E;
  --agglo-page-bg: #F2F3F3;
  --agglo-white: #FFFFFF;
}

body {
  background-color: var(--agglo-page-bg) !important;
  padding-top: 0 !important;
}

.navbar.navbar-default.navbar-fixed-top {
  background-color: var(--agglo-green-dark) !important;
  border-color: var(--agglo-green-dark) !important;
  position: relative;
  height: 96px;
  min-height: 96px;
}

.navbar-header {
  height: 96px;
  display: flex;
  align-items: center;
}

.navbar-brand {
  height: 96px;
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo-container > img {
  max-height: 84px;
  height: auto !important;
  width: auto;
}

.navbar-default .navbar-brand,
.navbar-brand,
.navbar-default .navbar-text {
  color: var(--agglo-white) !important;
}

.navbar.navbar-default.navbar-fixed-top::after {
  content: "Les 10 ans de l'Agglomération de Saint-Dié-des-Vosges";
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--agglo-green-light);
  white-space: nowrap;
  z-index: 10;
}

@media (max-width: 767px) {
  .navbar-brand .hidden-xs,
  .logo-container.hidden-xs,
  .logo-container {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .navbar.navbar-default.navbar-fixed-top,
  .navbar-header,
  .navbar-brand {
    height: 64px;
    min-height: 64px;
  }

  .logo-container > img {
    max-height: 48px;
  }
}

@media (max-width: 900px) {
  .navbar.navbar-default.navbar-fixed-top::after {
    font-size: 1rem;
    right: 12px;
  }
}

@media (max-width: 600px) {
  .navbar.navbar-default.navbar-fixed-top::after {
    font-size: 0.7rem;
    right: 8px;
    max-width: 45%;
    white-space: normal;
    text-align: right;
    line-height: 1.2;
  }
}

.top-container {
  background-color: var(--agglo-page-bg);
}

.top-container .progress,
.progress {
  display: flex !important;
  align-items: center;
  background-color: var(--agglo-green-dark) !important;
  background-image: none !important;
}

.top-container .progress .progress-bar,
.progress .progress-bar,
.progress-bar,
html body .progress-bar,
html body .progress .progress-bar,
.progress-bar-success,
.progress-bar-info,
.progress-bar-warning,
.progress-bar-danger {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: normal !important;
  background-color: var(--agglo-green-light) !important;
  background-image: none !important;
  color: var(--agglo-text) !important;
  font-weight: 700 !important;
}

.progress-bar:before,
.progress-bar::before,
.progress-bar:after,
.progress-bar::after,
.progress-bar:last-child:before,
.progress-bar:last-child::before {
  background: var(--agglo-green-dark) !important;
  background-color: var(--agglo-green-dark) !important;
  background-image: none !important;
}

.panel-heading,
.panel-default > .panel-heading,
.group-title-container,
.question-title-container {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  color: var(--agglo-text) !important;
  padding-left: 0 !important;
}

.question-container,
.question-container.bg-primary,
.question-container[class*="bg-"] {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
}

.answer-container,
.question-help-container {
  border: none !important;
}

.question-valid-container.bg-primary {
  background-color: var(--agglo-green-mid) !important;
  color: var(--agglo-white) !important;
  display: none !important;
}

.question-valid-container.bg-primary .ls-em-success,
.question-valid-container.bg-primary .ls-question-message {
  color: var(--agglo-white) !important;
}

.group-name,
.question-text,
h1, h2, h3, h4 {
  color: var(--agglo-text);
}

.btn-primary,
.btn-lg.ls-move,
.ls-move,
.ls-button-submit,
#ls-button-submit {
  background-color: var(--agglo-green-mid) !important;
  border-color: var(--agglo-green-mid) !important;
  color: var(--agglo-white) !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-lg.ls-move:hover,
.ls-move:hover,
.ls-button-submit:hover {
  background-color: var(--agglo-green-dark) !important;
  border-color: var(--agglo-green-dark) !important;
  color: var(--agglo-white) !important;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  accent-color: var(--agglo-green-mid);
}

.form-control {
  border: none !important;
  border-bottom: 2px solid #ccc !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  border-bottom-color: var(--agglo-green-mid) !important;
  box-shadow: none !important;
  outline: none;
}

.form-control::placeholder {
  color: #999;
}

select.form-control {
  background-image: none;
}

textarea.form-control {
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 8px !important;
}

textarea.form-control:focus {
  border-color: var(--agglo-green-mid) !important;
}

a {
  color: var(--agglo-green-mid);
}
a:hover {
  color: var(--agglo-green-dark);
}

#surveyListFooter,
.footer {
  background-color: var(--agglo-green-dark);
  color: var(--agglo-green-light);
}

#surveyListFooter a {
  color: var(--agglo-green-light);
}

.privacy-header {
  color: var(--agglo-text);
}

.horizontal-divider.top {
  border-top-color: var(--agglo-green-mid);
}