body {
  position: relative;
  margin: 0
}

* {
  box-sizing: border-box
}

.cookie-banner,
.cookie-dialog {
  position: fixed;
  font-size: 14px;
  font-weight: 100;
  color: white
}

.cookie-banner {
  z-index: 200;
  background-color: #008ABB;
  width: 100vw;
  top: 100%;
  left: 0;
  transform: translateY(-100%);
  display: flex;
  flex-direction: column
}

.cookie-banner.hidden {
  display: none
}

.cookie-banner .cookie-banner--close-button {
  position: absolute;
  right: 4px;
  top: 2px;
  cursor: pointer
}

.cookie-banner .cookie-banner--content {
  width: 100%;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-self: center;
  position: relative
}

.cookie-banner .cookie-banner--description {
  text-align: center
}

.cookie-banner .cookie-banner--choices-button {
  display: flex;
  flex-direction: row;
  justify-content: center
}

.cookie-banner .cookie-banner--choices-button button {
  color: #337ab7 !important;
  background-color: white;
  font-size: 12px;
  border: none;
  padding: 6px 10px;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 16px
}

.cookie-banner .cookie-banner--choices-button button:last-of-type {
  margin: 0
}

.cookie-banner .cookie-banner--choices-button button:hover {
  border: lightgray
}

.cookie-dialog {
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(238, 238, 238, 0.6)
}

.cookie-dialog.hidden {
  display: none
}

.cookie-dialog .cookie-dialog--container {
  background-color: #008ABB;
  width: 50%;
  padding: 24px 16px;
  border-radius: 2px;
  position: relative
}

.cookie-dialog .cookie-dialog--container .cookie-dialog--close-button {
  position: absolute;
  right: 4px;
  top: 2px;
  cursor: pointer
}

.cookie-dialog .cookie-dialog--container .top-content {
  display: flex;
  flex-direction: column;
  align-items: center
}

.cookie-dialog .cookie-dialog--container .content--dialog {
  color: white
}

.cookie-dialog .cookie-dialog--container .content--dialog .section--nesting {
  max-height: 40vh;
  overflow-y: scroll
}

.cookie-dialog .cookie-dialog--container .content--dialog .section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-left: 2%
}

.cookie-dialog .cookie-dialog--container .content--dialog .section .cookie-type-buttons {
  margin-right: 8%
}

.cookie-dialog .cookie-dialog--container .content--dialog .section .cookie-type-buttons button {
  color: #337ab7 !important;
  background-color: white;
  font-size: 12px;
  border: none;
  padding: 6px 10px;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 16px
}

.cookie-dialog .cookie-dialog--container .content--dialog .section .cookie-type-buttons button:hover {
  background-color: #e6e6e6
}

.cookie-dialog .cookie-dialog--container .content--dialog .section .cookie-type-buttons button.cookie-type-buttons--reject.active {
  color: white !important;
  background-color: #d9534f
}

.cookie-dialog .cookie-dialog--container .content--dialog .section .cookie-type-buttons button.cookie-type-buttons--reject.active:hover {
  background-color: #c9302c
}

.cookie-dialog .cookie-dialog--container .content--dialog .section .cookie-type-buttons button.cookie-type-buttons--accept.active {
  color: white !important;
  background-color: #5cb85c
}

.cookie-dialog .cookie-dialog--container .content--dialog .section .cookie-type-buttons button.cookie-type-buttons--accept.active:hover {
  background-color: #449d44
}

@media screen and (max-width: 768px) {
  .cookie-banner .cookie-banner--choices-button {
    justify-content: space-around
  }

  .cookie-dialog .cookie-dialog--container {
    width: 100%;
    height: 100%
  }

  .cookie-dialog .cookie-dialog--container .content .section--nesting {
    max-height: 70vh
  }
}