/* === BUTTONS BAR ========================================================= */

.buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-end;
  align-items: center;

  width: 100%;
  padding: 20px 0 0 0;
  margin: 0 auto;
}

form .buttons {
  justify-content: center;
}

/* === BUTTON COMMON ======================================================= */
button,
.button,
.button1,
.button-blue,
.button2,
.button-yellow,
.button3,
.button-gray,
.button4,
.button-green,
.button5,
.button-red {
  font-family: var(--font-family-button) !important;
  font-size: var(--font-size-button) !important;

  user-select: none;
  cursor: pointer;

  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  text-align: center;
  text-decoration: none !important;
  text-overflow: ellipsis;

  width: auto;
  min-width: 100px;
  min-height: 30px;
  margin: 0;

  border: none;

  transition: all 0.25s ease-in-out;
}

button:active,
.button:active,
.button1:active,
.button-blue:active,
.button2:active,
.button-yellow:active,
.button3:active,
.button-gray:active,
.button4:active,
.button-red:active,
.button5:active,
.button-green:active {
  outline: none;
}

/* === BUTTON 1 ============================================================ */
.button,
.button1,
.button-blue {
  color: white !important;
  border-radius: 3px;
  padding: 10px 20px;
  background-color: var(--blue-800);
  box-shadow: inset 0 0 2px white, 0 0 2px 1px var(--blue-900), var(--box-shadow-M);
  font-weight: 700 !important;
  outline: none;
  user-select: none !important;
}

button:hover,
button:active,
.button:hover,
.button:active,
.button1:hover,
.button1:active,
.button-blue:hover,
.button-blue:active {
  color: white !important;
  background-color: var(--blue-600) !important;
  box-shadow: inset 0 0 2px white,0 0 2px 1px var(--blue-900), var(--box-shadow-S);
}

/* === BUTTON 2 ============================================================ */
.button2,
.button-yellow {
  color: rgba(0, 0, 0, 0.70) !important;
  border-radius: 3px;
  padding: 10px 20px;
  background-color: var(--yellow-400);
  box-shadow: inset 0 0 2px white, 0 0 2px 1px var(--orange-400), var(--box-shadow-M);
  font-weight: 700 !important;
}

.button2:hover,
.button2:active,
.button-yellow:hover,
.button-yellow:active {
  color: rgba(0, 0, 0, 0.90) !important;
  background-color: var(--yellow-300) !important;
  box-shadow: inset 0 0 2px white, 0 0 2px 1px var(--orange-600), var(--box-shadow-S);
}

/* === BUTTON 3 ============================================================ */
.button3,
.button-gray {
  color: rgba(0, 0, 0, 0.70) !important;
  background-color: var(--neutral-100) !important;
  border: none;
  border-radius: 2px;
  padding: 10px 20px 10px 15px;
  box-shadow: inset 0 0 1px white, 0 0 1px black, var(--box-shadow-XS);
  font-weight: 400 !important;
  width: fit-content !important;

  text-transform: none;
}

.button3::before {
  content: "▷ ";
  margin-top: -2px;
}

.button3:hover,
.button3:active,
.button-gray:hover,
.button-gray:active {
  color: rgba(0, 0, 0, 0.90) !important;
  background-color: white !important;
  box-shadow: inset 0 0 1px white, 0 0 1px black, var(--box-shadow-XS);
}

/* === BUTTON 4 ============================================================ */
.button4,
.button-red {
  color: white !important;
  border-radius: 3px;
  padding: 10px 20px;
  background-color: var(--red-800);
  box-shadow: inset 0 0 2px white, 0 0 2px 1px var(--red-900), var(--box-shadow-M);
  font-weight: 700 !important;
}

.button4:hover,
.button4:active,
.button-red:hover,
.button-red:active {
  color: white !important;
  background-color: var(--red-600) !important;
  box-shadow: inset 0 0 2px white, 0 0 2px 1px var(--red-900), var(--box-shadow-S);
}

/* === BUTTON 5 ============================================================ */
.button5,
.button-green {
  color: white !important;
  border-radius: 3px;
  padding: 10px 20px;
  background-color: var(--green-800);
  box-shadow: inset 0 0 2px white, 0 0 2px 1px var(--green-900), var(--box-shadow-M);
  font-weight: 700 !important;
}

.button5:hover,
.button5:active,
.button-green:hover,
.button-green:active {
  color: white !important;
  background-color: var(--green-600) !important;
  box-shadow: inset 0 0 2px white, 0 0 2px 1px var(--green-900), var(--box-shadow-S);
}