:root {
    --oranje: #ea5b0c;
    --blauw: #0e97dc;
    --oranjedark: #913808;
    --blauwdark: #096390;
}


* {
  user-select: none;
}

.introjs-helperLayer{
    top:0 !important;
    left:0 !important;
    width:0 !important;
    height:0 !important;
}

.introjs-tooltip{
    color:black;
}

.introjs-overlay {
  background-color: black !important;
}

.introjs-helperLayer{
    box-shadow: rgb(0 0 0 / 80%) 0px 0px 1px 2px, rgb(0 0 0 / 80%) 0px 0px 0px 5000px !important;
}

.introjs-donebutton{
    display:none;
}

.introjs-disabled{
    display:none;
}

.introjs-bullets{
    display:none;
}

.introjs-tooltipbuttons {
    border-top: none;
}

.introjs-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0px;
}

.introjs-button:hover {
    background:black;
}

.btn:active:focus {
  outline: none;
  box-shadow: none;
}

.introjs-disabled{
    opacity:0.5;
}

.introjs-donebutton{
    display:none;
}

.arrow{
    height: 16px;
    background:black;
}

.introjs-button{
    background:black;
    border:none;
}

.introjs-button:focus{
    background:black;
    border:none;
    outline:0;
}

.introjs-skipbutton{
    color:black;
}

#modaal-close{
    /*zoom:90%;*/
    background: #ea5b0c;
    border-radius:9px;
    box-shadow: 0px 5px 0px 0px var(--oranjedark);
    transition: 0.1s ease-out;
}

#modaal-close:active{
    box-shadow: 0px 0px 0px 0px var(--oranjedark);
    transform: translate(0px, 5px);
}

.animation{
    display: inline-block
}

.noshadow{
    box-shadow: 0px 0px 0px 0px var(--oranjedark) !important;
}

.noshadow:active{
    box-shadow: 0px 0px 0px 0px var(--oranjedark) !important;
    transform: translate(0px, 0px) !important;
}

.oranjeknop{
    border-radius: 9px;
    box-shadow: 0px 5px 0px 0px var(--oranjedark);
    border: 0px !important;
    transition: 0.1s ease-out;
}

.oranjeknop:active{
    box-shadow: 0px 0px 0px 0px var(--oranjedark);
    transform: translate(0px, 7px);
}

.blauweknop{
    border-radius: 9px;
    box-shadow: 0px 5px 0px 0px var(--blauwdark);
    border: 0px !important;
    transition: 0.1s ease-out;
}

.blauweknop:active{
    box-shadow: 0px 0px 0px 0px var(--blauwdark);
    transform: translate(0px, 7px);
}


#barborder{
border-radius:5px;
box-shadow: 0px 3px 0px 0px var(--oranjedark);
border-right: 0px !important;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
}

.bar{
border-radius:5px;
box-shadow: 0px 3px 0px 0px var(--blauwdark);
}

.down{
border-radius:5px;
box-shadow: 0px 3px 0px 0px var(--blauwdark);
transition: 0.1s ease-out;
}

.down:active{
box-shadow: 0px 0px 0px 0px var(--blauwdark);
transform: translate(0px, 3px)
}

.up{
border-radius:5px;
box-shadow: 0px 3px 0px 0px var(--oranjedark);
transition: 0.1s ease-out;
}

.up:active{
box-shadow: 0px 0px 0px 0px var(--oranjedark);
transform: translate(0px, 3px)
}

.noclickblauw{
}

.noclickoranje{
}

.blauw::selection {
  color: white;
  background: var(--blauw);
}

.oranje::selection {
  color: white;
  background: var(--oranje);
}

.noclickblauw:active{
    box-shadow: 0px 5px 0px 0px var(--blauwdark) !important;
    transform: translate(0px, 0px) !important;
}

.noclickoranje:active{
    box-shadow: 0px 5px 0px 0px var(--oranjedark) !important;
    transform: translate(0px, 0px) !important;
}

.noclickup{
}

.noclickdown{
}

.noclickup:active{
    box-shadow: 0px 3px 0px 0px var(--oranjedark) !important;
    transform: translate(0px, 0px) !important;
}

.noclickdown:active{
    box-shadow: 0px 3px 0px 0px var(--blauwdark) !important;
    transform: translate(0px, 0px) !important;
}

.modaal-container{
    border-radius: 9px;
}

.blauwlarge{
    border-radius: 9px;
    box-shadow: 0px 7px 0px 0px var(--blauwdark);
    margin-top: 10px;
    transition: 0.1s ease-out;
}

.blauwlarge:active{
    box-shadow: 0px 0px 0px 0px var(--blauwdark);
    transform: translate(0px, 7px);
}

.oranjelarge{
    border-radius: 9px;
    box-shadow: 0px 7px 0px 0px #a9430a;
    margin-top: 10px;
    transition: 0.1s ease-out;
}

.oranjelarge:active{
    box-shadow: 0px 0px 0px 0px #a9430a;
    transform: translate(0px, 7px);
}

.groeneknop{
    border-radius: 9px;
    box-shadow: 0px 5px 0px 0px #389b33 !important;
    border: 0px !important;
    transition: 0.1s ease-out;
}

.groeneknop:active{
    box-shadow: 0px 0px 0px 0px #037c50 !important;
    transform: translate(0px, 7px);
}

*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.blauw{
    /*padding: 6px 13px;*/
    border-radius: 9px;
    box-shadow: 0px 5px 0px 0px var(--blauwdark);
    transition: 0.1s;
}

.blauw:active{
    transform: translate(0px, 5px);
    box-shadow: 0px 0px 0px 0px var(--blauwdark);
}

.oranje{
    /*padding: 6px 13px;*/
    border-radius: 9px;
    box-shadow: 0px 5px 0px 0px var(--oranjedark);
    transition: 0.1s;
}

.oranje:active{
    transform: translate(0px, 5px);
    box-shadow: 0px 0px 0px 0px var(--oranjedark);
}

#filter{
    box-shadow: 0px 0px 0px 0px #ffffff;
}

#filter:active{
    transform: translate(0px, 0px);
}

.letop{
    zoom:85%;
}

.werking:active{
    box-shadow: 0px 5px 0px 0px var(--blauwdark);
    transform: translate(0px, 0px);
}

.letop:active{
    box-shadow: 0px 5px 0px 0px var(--oranjedark);
    transform: translate(0px, 0px);
}

#terugknop{
    border:none !important;
}