:root {
  --flash-message-background-color: #131313;
  --flash-message-font-color: #ffffff;
  --cookies-background-color: #ffffff;
  --cookies-font-color: #131313;
  --cookies-button-background-color: linear-gradient(to bottom, #36d1e3, #19aecd, #118cb3, #196a95, #1e4b75);
  --cookies-button-background-hover-color: linear-gradient(to bottom, #72b84d, #6cb448, #66b144, #60ad3f, #5aaa3a, #51a036, #499631, #418c2d, #357a28, #2a6823, #20571e, #174618);
  --cookies-button-font-color: #ffffff;
}

/*
 * COOKIES
 */
.cookie-consent-container {
  position: fixed;
  z-index: 999999;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
  background: var(--cookies-background-color);
  border-top: 2px solid #36d1e3 !important;
}
.cookie-consent-container .content-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cookie-consent-container .content-container p {
  font-size: 15px;
  margin: 0;
  padding: 0;
  color: var(--cookies-font-color);
}
.cookie-consent-container button {
  background: var(--cookies-button-background-color) !important;
  border: 2px solid var(--main-light-color) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  padding: 8px 20px !important;
  transition: 0.2s !important;
  margin-left: 10px !important;
}
.cookie-consent-container button:hover {
  background: var(--cookies-button-background-hover-color) !important;
  color: var(--cookies-button-font-color) !important;
  border-color: #8edf69 !important;
}

@media screen and (max-width: 800px) {
  .cookie-consent-container .content-container {
    flex-direction: column;
  }
  .cookie-consent-container .content-container button {
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
}
/**
 * FLASH MESSAGES
 */
.flash-message {
  position: fixed;
  padding: 10px 20px;
  border-radius: 3px;
  background: var(--flash-message-background-color);
  z-index: 3000;
  color: var(--flash-message-font-color) !important;
  top: 78px;
  right: 5px;
  overflow: hidden;
}

.slide-in {
  animation: slide-in 1s;
}

.slide-out {
  animation: slide-out 1s;
}

.hidden {
  display: none;
}

@keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}