/*
* Koejke v.2 (Biscottini)
* https://koekje-js.de
*
* Copyright 2019 Christian Holmok
* Contribution by Jan-Erik Andersen
* Released under the MIT license
*/

#koekjeBackground {
  pointer-events: none
}

.koekjeOff,
.koekjeOff10 {
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 5px, rgba(0, 0, 0, .2) 10px, rgba(0, 0, 0, .2) 5px);
  opacity: .5;
}

#koekjeWidget > article label,
button.koekje {
  cursor: pointer
}

#koekjeWidget #koekjeLogo {
  width: 30%;
  height: auto;
  margin-bottom: 10px;
}

#koekjeWidget > article label {
  margin-right: 5px
}

#koekjeWidget *,
button.koekje {
  text-align: center
}

#koekjeWidget * {
  color: #bbb;
}

.koekjeOff10 {
  height: 10px !important
}

#koekjeBackground.pointer {
  pointer-events: all;
}

#koekjeBackground.lines.dark {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4) 5px, rgba(0, 0, 0, .6) 10px, rgba(0, 0, 0, .6) 5px);
  z-index: 100000000
}

#koekjeBackground.lines.light {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4) 5px, rgba(255, 255, 255, .6) 10px, rgba(255, 255, 255, .6) 5px);
  z-index: 100000000
}

#koekjeBackground.dots.light {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, .5) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAABKADAAQAAAABAAAABAAAAADFbP4CAAAAEklEQVQIHWNgYGD4D8TEAewqAVXuAf+yw+rnAAAAAElFTkSuQmCC) repeat;
  z-index: 100000000
}

#koekjeBackground.dots.dark {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAABKADAAQAAAABAAAABAAAAADFbP4CAAAAEklEQVQIHWNgYGD4D8TEAewqAVXuAf+yw+rnAAAAAElFTkSuQmCC) repeat;
  z-index: 100000000
}

#koekjeBackground.plain.light {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 1);
  z-index: 100000000
}

#koekjeWidget button,
#koekjeWidget h1.koekjeHeadline,
#koekjeWidget h2.koekjeHeadline {
  font-family: 'PT Sans Narrow';
  font-weight: 700;
  text-transform: uppercase;
  line-height: 110%
}

#koekjeBackground.plain.dark {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 1);
  z-index: 100000000
}

#koekjeWidget {
  position: fixed;
  width: 100vw;
  z-index: 1000000000;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-family: 'PT Sans Narrow';
  font-weight: 400;
  pointer-events: none
}

#koekjeWidget.customfont *,
#koekjeWidget.customfont {
  font-family: inherit !important;
  font-weight: inherit !important
}

#koekjeWidget.customfont button,
#koekjeWidget.customfont h1.koekjeHeadline,
#koekjeWidget.customfont h2.koekjeHeadline {
  font-family: inherit;
  font-weight: 900;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}

#koekjeWidget.small {
  padding: calc(100vw - 600px)/2;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
}

#koekjeWidget small.koekjesmallinfo {
  font-size: 12px;
  margin-top: 10px;
  display: block
}

#koekjeWidget small.koekjeVersion {
  margin-top: 15px;
  opacity: .8;
  transition: .2s;
  font-size: 11px;
  line-height: 1.5;
  display: block;
}



#koekjeWidget small.koekjeVersion:hover {
  opacity: .8
}

#koekjeWidget.top {
  top: 0;
  left: 0;
  -webkit-animation: swing-in-top-fwd .5s cubic-bezier(.175, .885, .32, 1.275) 1s both;
  animation: swing-in-top-fwd .5s cubic-bezier(.175, .885, .32, 1.275) 1s both
}

#koekjeWidget.bottom {
  bottom: 0;
  left: 0;
  -webkit-animation: swing-in-bottom-fwd .5s cubic-bezier(.175, .885, .32, 1.275) 1s both;
  animation: swing-in-bottom-fwd .5s cubic-bezier(.175, .885, .32, 1.275) 1s both
}

#koekjeWidget.center {
  bottom: 0;
  left: 0;
  height: 100vh;
  justify-content: center;
  -webkit-animation: swing-in-bottom-fwd .5s cubic-bezier(.175, .885, .32, 1.275) .5s both;
  animation: swing-in-bottom-fwd .5s cubic-bezier(.175, .885, .32, 1.275) .5s both
}

#koekjeWidget .tempChoice {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 20px
}

#koekjeWidget .tempChoice button {
  max-width: 40%
}

#koekjeWidget input#donotasktemp {
  margin-right: 10px
}

#koekjeWidget button#koekjeConfirm {
  color: #333;
  font-weight: 300 !important;
  background: #e2e2e2;
  border: none !important
}


#koekjeWidget #koekjeDetailChoice {
  font-size: 13px;
  cursor: pointer;
  opacity: .9;
  width: 100%;
  display: block;
  margin: 1vh 0;
  position: relative;
}


#koekjeWidget #koekjeDetailChoice:after {
  content: '';
  position: absolute;
  left: calc((100% / 2) - 10px);
  top: 100%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  opacity: .5;
  transition: all .3s;
  clear: both;
}

#koekjeWidget #koekjeDetailChoice:hover:after {
  opacity: 1;
}

#koekjeDetailChoice.KoekjeopenButton:after {
  transform: rotate(180deg);
}

#koekjeWidget #koekjeDetailChoice:hover {
  opacity: 1
}

#koekjeWidget .tempChoice button#koekjeConfirm {
  width: 40%;
  opacity: 1
}

#koekjeWidget p {
  line-height: 140%;
  margin-bottom: 10px;
  font-size: 14px
}

#koekjeWidget.full p {
  width: 100%;
  margin-bottom: 0
}

#koekjeWidget h1.koekjeHeadline {
  font-size: 25px;
  margin: 10px 10px;
}

#koekjeWidget.full h1.koekjeHeadline {
  margin-bottom: 5px;
}

#koekjeWidget h2.koekjeHeadline {
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e2e2;
  width: 100%
}

#koekjeServices {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  display: none;
  transition: all .5s;
}

#koekjeServices.KoekjeServicesOpen {
  display: inline-flex;
}

#koekjeWidget.full > article > section:last-of-type {
  min-width: 400px;
}

.full #koekjeServices {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  box-sizing: border-box;
}

#koekjeServices > div {
  margin: 5px 0;
  min-width: 30%;
  width: 100%;
  text-align: left;
  font-size: 14px;
}



#koekjeServices > div p {
  margin-top: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 5px;
  text-align: left;
  font-size: 13px
}

#koekjeWidget.full #koekjeServices > div p {
  border: none
}

.full #koekjeServices > div {
  max-width: 200px
}

#koekjeServices > div input {
  margin-right: 10px
}


.koekjeAlertWidget {
  -webkit-animation: jello-horizontal 0.9s both !important;
  animation: jello-horizontal 0.9s both !important;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-5-25 9:12:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


#koekjeWidget.shadow.small > article {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

#koekjeWidget.shadow.medium > article {
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

#koekjeWidget.shadow.large > article {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}

#koekjeWidget > article {
  background-color: #fff;
  margin: 0;
  padding: 1%;
  pointer-events: all;
  overflow-y: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  --scrollbar-width: thin
}

#koekjeWidget.small > article {
  width: 600px;
  padding: 20px 20px 10px 20px;
  border: 2px solid #e2e2e2;
  max-height: 90%;
  margin: 20px;
  border-radius: 10px;
}

#koekjeWidget.small.top > article {
  margin: 0 20px 20px 20px;
}

#koekjeWidget.small.bottom > article {
  margin: 20px 20px 0 20px;
}

#koekjeWidget.full > article {
  width: 100%;
  padding: 20px
}

#koekjeWidget.full > article > section:last-of-type {
  display: inline-flex;
  flex-direction: column;
}

#koekjeWidget.full > article > section#koekjeCategories {
  display: none
}

#koekjeWidget.dark > article {
  background-color: #363636;
  border-color: #343434
}

button.koekje {
  align-self: center;
  background-color: #fff;
  border: 2px solid #e2e2e2;
  padding: 5px 10px;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 900;
  display: block;
  margin-bottom: -25px;
  z-index: 18;
  margin: 0 auto;
  position: absolute;
  top: 0;
  width: 50%;
  left: 25%;
}

button.koekje.dark {
  background-color: #363636;
  border-color: #343434;
  color: #e2e2e2;
}

#koekjeWidget.small.top > article {
  border-radius: 0 0 10px 10px;
  border-top: none
}

#koekjeWidget.small.bottom > article {
  border-radius: 10px 10px 0 0;
  border-bottom: none
}

#koekjeWidget .switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  margin-right: 5px;
}

#koekjeWidget .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#koekjeWidget .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .2s;
  box-shadow: inset 0px 0px 36px -16px rgba(0, 0, 0, 0.75);
}

#koekjeWidget .slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .2s;
}

#koekjeWidget input:checked + .slider,
#koekjeWidget input[readonly="readonly"] + .slider {
  background-color: #5c940d;
  box-shadow: inset 0px 0px 36px -16px rgba(0, 0, 0, 0.75);
}

#koekjeWidget input:focus + .slider {
  box-shadow: 0 0 1px #5c940d;
}

#koekjeWidget input:checked + .slider:before,
#koekjeWidget input[readonly="readonly"] + .slider:before{
  transform: translateX(13px);
}

#koekjeWidget input[readonly="readonly"] + .slider {
  cursor: not-allowed;
}

#koekjeWidget .slider.round {
  border-radius: 17px;
}

#koekjeWidget .slider.round:before {
  border-radius: 50%;
}

#koekjeCategories {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

#koekjeCategories > div {
  margin: 5px 0;
  width: auto;
  font-size: 14px;
  min-width: 24%;
  text-align: left;
}

.koekjeContainer {
  position: relative;
}

.koekjeContainer small.koekjesmallinfo {
  background: #fff;
  margin: 0 auto;
  padding: .5vh;
  width: 90%;
  color: #000;
  margin-top: 30px;
  display: block;
  border-radius: 5px;
  position: absolute;
  left: 5%;
  z-index: 22;
  font-size: 12px
}

#koekjeWidget button {
  margin-top: 10px;
  background-color: #333;
  color: #fff;
  padding: 1.5vh;
  cursor: pointer;
  transition: background .5s ease;
  outline: 0;
  font-size: 18px;
  border: none;
  width: 49%;
}

#koekjeWidget button.tempConfirm,
#koekjeWidget button.tempDeny {
  color: #333
}

#koekjeWidget.full button {
  width: 49%;
}

#koekjeWidget button#koekjeAccordeon {
  width: 250px;
  position: relative;
  bottom: 20px;
  -webkit-animation: heartbeat 5s ease-in-out 2s infinite both;
  animation: heartbeat 5s ease-in-out 2s infinite both
}

#koekjeReload.koekjeCornerButton {
  position: fixed !important;
  bottom: 10px !important;
  left: 10px !important;
  width: 20px !important;
  height: 20px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9999999999 !important;
}

#koekjeReload.koekjeCornerButton span {
  position: absolute;
  top: -20px;
  left: 5px;
  padding: 3px;
  background: #fff;
  color: #333;
  white-space: pre;
  font-size: 9px;
  display: none;
  border-radius: 2px;
}

#koekjeReload.koekjeCornerButton:hover span {
  display: block
}

.koekjeCornerButton svg {
  fill: #333;
}

#koekjeWidget.dark button {
  background-color: #5e5e5e
}

#koekjeWidget button {
  transition: all .5s;
  background: transparent;
}

#koekjeWidget button:hover {
  background: #e2e2e2;
  color: #fff;

}

#koekjeWidget.dark button:hover {
  background-color: #343434
}

@-webkit-keyframes swing-in-top-fwd {
  0% {
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    transform: rotateX(0);
    transform-origin: top;
  }
}

@keyframes swing-in-top-fwd {
  0% {
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    transform: rotateX(0);
    transform-origin: top;
  }
}

@-webkit-keyframes shadow-drop-center {
  0% {
    box-shadow: 0 0 0 0 transparent
  }

  100% {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .35)
  }
}

@keyframes shadow-drop-center {
  0% {
    box-shadow: 0 0 0 0 transparent
  }

  100% {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .35)
  }
}

@-webkit-keyframes swing-in-bottom-fwd {
  0% {
    transform: rotateX(100deg);
    transform-origin: bottom;

  }

  100% {
    transform: rotateX(0);
    transform-origin: bottom;

  }
}

@keyframes swing-in-bottom-fwd {
  0% {
    transform: rotateX(100deg);
    transform-origin: bottom;

  }

  100% {
    transform: rotateX(0);
    transform-origin: bottom;

  }
}

@-webkit-keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
  }

  10% {
    transform: scale(.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  17% {
    transform: scale(.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  33% {
    transform: scale(.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  45% {
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
  }

  10% {
    transform: scale(.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  17% {
    transform: scale(.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  33% {
    transform: scale(.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  45% {
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

#koekjeButtons {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
}

.koekjeVersion a {
  text-decoration: none;
}

.koekjeVersion a:hover {
  text-decoration: underline;
}

#koekjeConfirmAll:hover,
#koekjeConfirm:hover {
  filter: brightness(120%);
}

#koekjeCategories > div {
  margin: 5px;
  min-width: unset;
}

#koekjeWidget #koekjeLogo {
  width: 20%;
}

.koekjeCredits {
  display: inline;
  
}


/* MOBILE */

@media only screen and (max-width: 760px) {

  #koekjeWidget p {}

  #koekjeWidget h1.koekjeHeadline {
    font-size: 20px;
    margin-top: 20px;
  }

  #koekjeWidget button {
    font-size: 10px;
  }

  #koekjeCategories > div,
  #koekjeWidget small.koekjeVersion,
  #koekjeWidget #koekjeDetailChoice {}

  #koekjeCategories > div {
    width: 100%;
  }

  #koekjeWidget.center {
    height: 90vh;
  }

  #koekjeWidget button {
    width: 100%;
  }

  #koekjeButtons {
    flex-direction: column;
  }

}