/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
#js-error,
#delete-success {
  display: none;
  margin-top: 15px;
  color: #fff;
  font-size: 14px;
}

#js-error:before {
  content: '\26A0';
  font-size: 20px;
  color: #fff;
  padding-right: 8px;
}

.flex_column #delete-success {
  color: green;
}

.action-success {
  display: block;
  margin-top: 15px;
  color: green;
}

.action-error {
  display: block;
  margin-top: 15px;
  color: red;
}

.action-error:before {
  content: '\26A0';
  font-size: 20px;
  color: red;
  padding-right: 8px;
}

#delete-success:before,
.action-success:before {
  content: '\2714';
  font-size: 20px;
  color: green;
  padding-right: 8px;
}

#top #smsletter-form {
  margin: 0;
}

#smsletter-form #first-button .first-check {
  border: 1px solid #fff;
  margin: 0;
  background-color: var(--bleu-marine);
  padding: 10px 12px;
}

#smsletter-form #first-button #unique-button {
  font-size: 20px;
  padding: 6px 10px;
  border: 1px solid #fff;
  background-color: #fff;
  color: var(--bleu-marine);
  margin-top: 20px;
}

#smsletter-form #first-button #unique-button:hover {
  cursor: pointer;
  outline: none;
}

#lightbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
}

.confirm-popup {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60%;
  height: 80%;
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  z-index: 10;
}

.confirm-popup .quit {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  z-index: 10;
}

.confirm-popup .quit::before {
  content: 'x';
  color: red;
  font-size: 18px;
  font-weight: bold;
}

#top .confirm-popup form {
  margin-bottom: 0;
  width: 60%;
  color: var(--bleu-marine);
}

.confirm-popup .title {
  margin-bottom: 30px;
  font-size: 25px;
  font-weight: bold;
}

.confirm-popup small {
  display: block;
  margin-top: 25px;
  font-size: 12px;
}

#top #main .confirm-popup form input {
  background-color: #fff;
  color: var(--bleu-marine);
  border-color: var(--bleu-ciel);
}

.confirm-popup #special-message {
  margin-bottom: 15px;
}

.confirm-popup #buttons {
  display: flex;
  margin-top: 30px;
}

#top #main .confirm-popup #buttons input[type='submit'] {
  background-color: var(--bleu-marine);
  color: #fff;
  border: none;
}

.confirm-popup #delete-button {
  padding: 8px 16px;
  margin-left: 30px;
  background-color: #fff;
  transition: all ease 300ms;
  border: 1px solid var(--bleu-marine);
  cursor: pointer;
}