#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: 20%;
  height: auto;
  margin-bottom: 10px;
}

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

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

#koekjeWidget * {
  color: #bbb
}
/*
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: url(pt-sans-narrow-v8-latin-regular.eot);
  src: local('PT Sans Narrow'), local('PTSans-Narrow'), url(pt-sans-narrow-v8-latin-regular.eot?#iefix) #koekjeWidget at('embedded-opentype'), url(pt-sans-narrow-v8-latin-regular.woff2) #koekjeWidget at('woff2'), url(pt-sans-narrow-v8-latin-regular.woff) #koekjeWidget at('woff'), url(pt-sans-narrow-v8-latin-regular.ttf) #koekjeWidget at('truetype'), url(pt-sans-narrow-v8-latin-regular.svg#PTSansNarrow) #koekjeWidget at('svg')
}

@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 700;
  src: url(pt-sans-narrow-v8-latin-700.eot);
  src: local('PT Sans Narrow Bold'), local('PTSans-NarrowBold'), url(pt-sans-narrow-v8-latin-700.eot?#iefix) #koekjeWidget at('embedded-opentype'), url(pt-sans-narrow-v8-latin-700.woff2) #koekjeWidget at('woff2'), url(pt-sans-narrow-v8-latin-700.woff) #koekjeWidget at('woff'), url(pt-sans-narrow-v8-latin-700.ttf) #koekjeWidget at('truetype'), url(pt-sans-narrow-v8-latin-700.svg#PTSansNarrow) #koekjeWidget at('svg')
}
*/
.koekjeOff10 {
  height: 10px !important
}

#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: 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 {
  opacity: .2;
  transition: .2s;
  font-size: 11px
}

#koekjeWidget small.koekjeVersion a {
  /* text-decoration: none; */
}

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

#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) 1s both;
  animation: swing-in-bottom-fwd .5s cubic-bezier(.175, .885, .32, 1.275) 1s 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 {
  opacity: 0.3 !important;
  color: #333;
  font-weight: 100 !important;
  background: #e2e2e2;
  border: none !important
}

#koekjeWidget.full button#koekjeConfirm {
  opacity: .1 !important
}

#koekjeWidget button#koekjeConfirm:hover {
  opacity: .4
}

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

#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-bottom: 20px
}

#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 {
  display: inline-flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0 5%;
  display: none
}

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

#koekjeServices>div {
  margin: 5px 0;
  width: auto;
  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
}

#koekjeWidget>article {
  background-color: #fff;
  -webkit-animation: shadow-drop-center .4s cubic-bezier(.25, .46, .45, .94) both;
  animation: shadow-drop-center .4s cubic-bezier(.25, .46, .45, .94) both;
  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;
  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: 'PT Sans Narrow';
  font-family: inherit;
  font-weight: 900;
  display: block;
  margin-bottom: -25px;
  position: relative;
  z-index: 18;
  margin: 0 auto;
  position: absolute;
  top: 180px;
 
  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 {
  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 {
  transform: translateX(13px);
}

#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;
  height: 300px;
  background: #cecece;
}

.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;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 1.5vh;
  cursor: pointer;
  transition: background .5s ease;
  outline: 0;
  font-size: 18px
}

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

#koekjeWidget.full button {
  width: 100%
}

#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;
}

.koekjeCornerButton svg {
  fill: #333;
}

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

#koekjeWidget button:hover {
  background: #e2e2e2;
  color: #fff;
  transition: background .5s ease
}

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

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

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

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

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

@-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;
    -origin -origin opacity: 0opacity-originopacity-originopacity
  }

  100% {
    transform: rotateX(0);
    transform-origin: bottom;
    -origin -origin opacity: 1opacity-originopacity-originopacity
  }
}

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

  100% {
    transform: rotateX(0);
    transform-origin: bottom;
    -origin -origin opacity: 1opacity-originopacity-originopacity
  }
}

@-webkit-keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    -origin -origin -webkit-animation-timing-function: ease-out;-origin-webkit-animation-timing-function
    -origin-webkit-animation-timing-function -webkit-animation-timing-function -webkit-animation-timing-function: ease-out;-webkit-animation-timing-function-webkit-animation-timing-function
    -webkit-animation-timing-function -webkit-animation-timing-function animation-timing-function: ease-outanimation-timing-function-webkit-animation-timing-functionanimation-timing-function
  }

  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;
    -origin -origin -webkit-animation-timing-function: ease-out;-origin-webkit-animation-timing-function
    -origin-webkit-animation-timing-function -webkit-animation-timing-function -webkit-animation-timing-function: ease-out;-webkit-animation-timing-function-webkit-animation-timing-function
    -webkit-animation-timing-function -webkit-animation-timing-function animation-timing-function: ease-outanimation-timing-function-webkit-animation-timing-functionanimation-timing-function
  }

  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
  }
}