/** ===============================================
  Responsive
  ===============================================**/
/** ===============================================
  Layout
  ===============================================**/
/** ===============================================
  Flexbox
  ===============================================**/
/** ===============================================
  Position
  ===============================================**/
/** ===============================================
  Effects
  ===============================================**/
/** ===============================================
  Buttons
  ===============================================**/
/** ===============================================
  Components
  ===============================================**/
.messages {
  margin: auto;
  background: #f3f3ef;
  border: 2px solid var(--primary-color);
  position: fixed;
  top: 13rem;
  left: 0;
  right: 0;
  z-index: 9; }
  @media (min-width: 48rem) {
    .messages {
      max-width: 82rem; } }

.message {
  font-family: hurme_bold, sans-serif;
  display: inline-block;
  padding: 0.55rem 2.5rem;
  text-align: center;
  background-color: transparent;
  border-width: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s linear;
  position: relative;
  margin-bottom: 0.5rem;
  width: 100%;
  text-align: left; }
  .message:hover, .message:active, .message:focus, .message.is-active {
    text-decoration: underline; }
    .message:hover > *, .message:active > *, .message:focus > *, .message.is-active > * {
      text-decoration: underline; }

.message--error {
  font-family: hurme_bold, sans-serif;
  display: inline-block;
  padding: 0.55rem 2.5rem;
  text-align: center;
  background-color: transparent;
  border-width: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s linear;
  border-color: #ffffff;
  background-color: #ef0022;
  color: #ffffff;
  text-align: left; }
  .message--error:hover, .message--error:active, .message--error:focus, .message--error.is-active {
    text-decoration: underline; }
    .message--error:hover > *, .message--error:active > *, .message--error:focus > *, .message--error.is-active > * {
      text-decoration: underline; }
  .message--error:hover, .message--error:active, .message--error:focus, .message--error.is-active {
    border-style: dashed;
    background-color: #ffffff;
    border-color: #ef0022;
    color: #ef0022; }
  .message--error a {
    color: #ffffff;
    text-decoration: underline; }
  .message--error:hover a, .message--error:active a, .message--error:focus a, .message--error.is-active a {
    color: #ef0022;
    font-weight: bold;
    text-decoration: none; }

.discard {
  position: absolute;
  display: block;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0.5rem;
  right: 0.5rem;
  left: auto; }