@font-face {
    font-family: 'hostgrotesk';
    src: url('/fonts/HostGrotesk-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'hostgrotesk-italic';
    src: url('/fonts/HostGrotesk-Italic-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'rajd-light';
    src: url('/fonts/Rajdhani-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'rajd-regular';
    src: url('/fonts/Rajdhani-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'rajd-medium';
    src: url('/fonts/Rajdhani-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'rajd-semi';
    src: url('/fonts/Rajdhani-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'rajd-bold';
    src: url('/fonts/Rajdhani-Bold.ttf') format('truetype');
}

:root {

    --bannerfont: 'hostgrotesk', sans-serif;
    --titlefont: 'rajd-regular', sans-serif;
    --titlefontlight: 'rajd-light', sans-serif;
    --titlefontmedium: 'rajd-medium', sans-serif;
    --titlefontsemi: 'rajd-semi', sans-serif;
    --titlefontbold: 'rajd-bold', sans-serif;

    --accentColor: #bb997d;
    --snackbarColor: #4c3828;

    --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
    --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
    --bulma-primary-rgb: 255, 253, 231;
    --bulma-primary-h: 55deg;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 95%;

    --bulma-primary-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
    --bulma-primary-invert-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
    --bulma-primary-rgb: 109, 76, 65;
    --bulma-primary-invert-h: 15deg;
    --bulma-primary-invert-s: 25%;
    --bulma-primary-invert-l: 34%;

    --bannerbackground: #fffde7;
    --fontcolor: #6d4c41;
    --fontcolorinvert: #fffde7;
    --bannerbackgroundinvert: #6d4c41;
    --boxShadowModern: 0px 1px 2px;
}

@media (prefers-color-scheme: dark) {
    :root {
      --bulma-box-background-color: #ffffff !important;
      --bulma-scheme-main: #ffffff !important;
      
      
    }
    .input, .select select, .textarea{
        background-color: #ffffff;
        color: var(--bannerbackgroundinvert);
    }
    .input::placeholder, .select select::placeholder, .textarea::placeholder{
        color: lightgrey;
    }
  }
  



html {
    margin: 0;
    padding: 0;
    color-scheme: light;
}



/* ICONS */
.material-symbols-sharp {
    font-variation-settings:
        'FILL' 0,
        'wght' 0,
        'GRAD' 0,
        'opsz' 24
}

/* FONTS */
p,
span,
a,
h1,
h2,
h3,
h4,
h5,
h6,
li,
button,
input,
label, 
small,
strong {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--fontcolor) !important;
}

h1,
h2 {
    font-family: var(--titlefont);
}

.taon {
    font-family: 'caveat', sans-serif;
}

.bannerfont {
    font-family: var(--bannerfont);
}

.titlefont {
    font-family: var(--titlefont);
}

/* COLORS */
.card-content{
    background-color: var(--bannerbackgroundinvert);
}
.card-content p{
    color: var(--bannerbackground) !important;
}
.card-content-light{
    background-color: transparent;
}
.card-content-light p{
    color: var(--bannerbackgroundinvert) !important;
}
.has-text-red{
    color: red !important;
}
.has-text-lightred{
    color: rgb(194, 92, 92) !important;
}
.card:hover .card-content p{
    color: var(--accentColor) !important;
    text-decoration: none !important;
}
.no-card-hover:hover .card-content p{
    color: var(--bannerbackground) !important;
}
.cookiemodalbackground{
    background-color: var(--accentColor);
}
.message-header{
    background-color: var(--accentColor);
}
.message-body{
   background-color:  var(--bulma-scheme-main);
}

#sidemenu {
    background-color: var(--fontcolorinvert);
    z-index: 999;
}

#sidemenu a {
    background-color: var(--fontcolorinvert);

}

body {
    background-color: #fefefe;
}

.is-bg-transparent {
    background-color: transparent;
}

.is-bg-transparent-on-hover:hover {
    background-color: transparent;
}

.is-bg-accent {
    background-color: var(--accentColor);
}

.bannerbackground {
    background-color: var(--bannerbackground);
}

.fontcolor {
    color: var(--fontcolor) !important;
}
.accentcolor {
    color: var(--accentColor) !important;
}

.fontcolor-invert {
    color: var(--fontcolorinvert) !important;
}

a {
    color: var(--fontcolor);
    text-decoration: none !important;
}

a:hover {
    color: var(--accentColor) !important;
}

.is-red-on-hover:hover {
    color: red !important;
}
.is-fontcolor-on-hover:hover {
    color: var(--bannerbackgroundinvert) !important;
}

.input:focus {
    border-color: var(--accentColor);
    box-shadow: none;
}

.textarea:focus {
    border-color: var(--accentColor);
    box-shadow: none;
}

.control.has-icons-left .input:focus~.icon,
.control.has-icons-left .select:focus~.icon,
.control.has-icons-right .input:focus~.icon,
.control.has-icons-right .select:focus~.icon {
    color: var(--accentColor);
}

.is-btncolor-invert {
    background-color: var(--accentColor);
    color: var(--fontcolorinvert) !important;
}

.button.is-btncolor-invert:hover {
    opacity: 85%;
    box-shadow: none;
    outline: 1px solid var(--fontcolor);
}

.is-btncolor-dark {
    background-color: var(--bannerbackgroundinvert);
    color: var(--fontcolorinvert) !important;
}

.button.is-btncolor-dark:hover {
    opacity: 85%;
    box-shadow: none;
    outline: 1px solid var(--fontcolor);
}

.is-hover-danger:hover{
    background-color: red;
    color: var(--fontcolor);
}

.button.is-btncolor-invert:focus {
    outline: 1px solid var(--fontcolor);
}

.is-btncolor {
    background-color: var(--fontcolorinvert);
    color: var(--fontcolor);
}

.pagination-link.is-current,
.pagination-link.is-selected {
    border: var(--fontcolor);
}

.input:focus,
.input:focus-within,
.is-focused.input,
.is-focused.textarea,
.select select.is-focused,
.select select:focus,
.select select:focus-within,
.textarea:focus,
.textarea:focus-within {
    border-color: var(--fontcolor);
    box-shadow: none;
}

.table thead td, .table thead th {
    color: var(--fontcolor);
}
.table, .table td, .table th {
    color: var(--fontcolor);
}
.table tfoot td, .table tfoot th {
    color: var(--fontcolor);
}

.navbar-link:not(.is-arrowless):after,
.select:not(.is-multiple):not(.is-loading):after {
    border: .125em solid var(--fontcolor);
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: .625em;
    margin-top: -.4375em;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    transform-origin: center;
    transition-duration: var(--bulma-duration);
    transition-property: border-color;
    width: .625em;
}

.button.is-btncolor:hover {
    opacity: 85%;
    /* box-shadow: var(--boxShadowModern) var(--fontcolor); */
    box-shadow: none;
    outline: 1px solid var(--fontcolorinvert);
}

.button.is-btncolor:focus {
    outline: 1px solid var(--fontcolorinvert);
}

/* SIZES */
.cookiemodalbackground{
    width: 22rem;
    height: auto;
    overflow: hidden;
    border:1px solid grey ;

    position: fixed;
  bottom: 50px;
  left: 20px;
  z-index: 1000;
  pointer-events: auto;
}
.cookiemodalbackground .modal-content {
    width: 22rem;
    height: auto;
}
.table{
    min-width: 800px;
    width: 100%; 
}
.half-width{
    width: 50%;
}
.kaartzone{
    min-height: 45vh;
}
.zoom-image {
    transition: transform 0.3s ease;
        background-color: var(--bannerbackground);
  }
.card:hover .zoom-image{
    transform: scale(1.1);
}
.card{
    width: 14rem;
    height: auto;
    border-radius: 0 !important;
}
.widecart{
    width: auto;
    height: auto;
}
.card-content{
    border-radius: 0 !important;
}
.card-image figure{
    width: auto;
    height: 14rem;
    overflow: hidden;
}
.large-image{
    width: auto;
    height: 20rem;
}
header {
    height: 18vh;
}

main {
    min-height: 75vh;
    margin: 1rem;
    margin-top: 5rem;
}

footer {

    width: 100%;
    min-height: 4vh;
    max-height: 22vh;
    height: auto;
    padding: 10px ;
    border-top: lightgrey 1px solid;
}

.bannerLogo {
    max-height: 5rem;
    max-width: 5rem;
    width: auto;
}

#banner {
    padding-left: 2rem;
    min-height: 18vh;
    width: 100%;
    box-sizing: border-box;
}

.medium-input-width {
    min-width: 20vw;
    max-width: 40vw;
}

.box {
    width: 90vw
}

#screenside {
    min-height: 60vh;
}

#sidemenu {
    min-height: 60vh;
}

/* VARIA */
#adminmelding{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bannerbackgroundinvert);
    height: auto;
    min-height: 3rem;
}
#adminmelding h3{
    color: var(--bannerbackground) !important;

}
.aanmeldBannerBtn{
    position: absolute;
    top: 10px;
    right: 10px;
    margin-right: 0px;
    border-color: var(--accentColor);
}
.aanmeldBannerBtn span{
    color: var(--accentColor) !important;
}
.aanmeldBannerBtn span:hover{
    color: var(--fontcolor) !important;
}
.afmeldBannerBtn{
    position: absolute;
    top: 10px;
    right: 10px;
    margin-right: 0px;
    border-color: var(--accentColor);
}
.afmeldBannerBtn span{
    color: var(--accentColor) !important;
}
.afmeldBannerBtn span:hover{
    color: var(--fontcolor) !important;
}
#abonnementsInfoIcon{
    position: relative;
    display: inline-block;
    cursor: pointer;
}
#abonnementsInfoIcon .tooltip-text{
    visibility: hidden;
    width: auto;
    max-width: 30%;
    height: auto;
    text-align: center;
    padding: 5px;
    font-size: 1.2rem;
    overflow: hidden;
    position: fixed;


    top: 10px;
    right: 10px;
    padding: 15px;
    border-radius: 0px;
    z-index: 1;
    background-color: var(--accentColor);
    color: var(--fontcolorinvert);
    
    opacity: 0;
    transition: opacity 0.3s;

    word-wrap: break-word;  /* Zorgt ervoor dat tekst naar de volgende regel breekt indien nodig */
    white-space: normal;  /* Standaardregel om lange tekst te splitsen */
}
#abonnementsInfoIcon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
#showpwd{
    pointer-events: all;
    cursor: pointer;
}
#showpwd:hover{
    color: var(--bannerbackgroundinvert);
}
.diagonal-strikethrough {
    position: relative;
}

.diagonal-strikethrough::after {
    content: '';
    position: absolute;
    top: 48%;
    left: 23%;
    width: 82%;
    height: 4px;
    background: orangered;
    transform: rotate(-20deg); /* Kies de hoek van de streep */
    transform-origin: center;
}
.searchresultUser {
    flex-direction: column;
    align-items: flex-start;
}
.searchresultUser:hover {
    background-color: lightgray !important;
}
.searchresultAbo {
    flex-direction: column;
    align-items: flex-start;
}
.searchresultCodes {
    flex-direction: column;
    align-items: flex-start;
}

#banner {
    border-bottom: lightgrey 1px solid;
}

hr {
    width: 40vw;
    color: var(--bannerbackgroundinvert);
    border: solid 0.5px var(--accentColor);
    height: 0px;
}

#footerbottom {
    /* border-top: lightgrey 1px solid; */
}


input,
button,
textarea,
select,
.button,
.box,
#cp-screen,
#sidemenu,
#screenside {
    border-radius: 0 !important;
}

.sidemenu-absolute {
    width: 50vw !important;
    position: absolute;
    left: 0;
}

.has-grey-border {
    border: lightgray 1px solid;
    border-radius: 0;
    padding: 0.5rem;
}


#snackbar {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 15px;
    border-radius: 0px;
    z-index: 1;
    background-color: var(--snackbarColor);
    color: var(--fontcolorinvert);
}

/*SWITCH*/

.switch[type=checkbox].is-outlined:checked+label::before, .switch[type=checkbox].is-outlined:checked+label:before {
    background-color: var(--bannerbackground);
    border-color: var(--accentColor);
}

.switch[type=checkbox]:checked+label::before, .switch[type=checkbox]:checked+label:before {
    background: var(--accentColor);
}
.switch[type=checkbox].is-outlined:checked+label::after, .switch[type=checkbox].is-outlined:checked+label:after {
    background: var(--accentColor);
}

.switch[type=checkbox]+label::before, .switch[type=checkbox]+label:before {
    border: .1rem solid var(--accentColor);
    border-radius: 3px;
    background: var(--accentColor);
}
.switch[type=checkbox].is-outlined+label::before, .switch[type=checkbox].is-outlined+label:before {
    background-color: var(--bannerbackground);
    border-color: var(--accentColor);
}
.switch[type=checkbox].is-outlined+label::after, .switch[type=checkbox].is-outlined+label:after {
    background: var(--accentColor);
}
/*PENN*/

  
  .load-wrapp:last-child {
    margin-right: 0;
  }
  .letter-holder {
    padding: 16px;
  }
  
  .letter {
    float: left;
    color: var(--fontcolorinvert) !important;
    font-size: 1.5rem;
    font-family: var(--titlefont);
  }

  .load-6 .letter {
    animation-name: loadingF;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: linear;
  }
  
  .l-1 {
    animation-delay: 0.48s;
  }
  .l-2 {
    animation-delay: 0.6s;
  }
  .l-3 {
    animation-delay: 0.72s;
  }
  .l-4 {
    animation-delay: 0.84s;
  }
  .l-5 {
    animation-delay: 0.96s;
  }
  .l-6 {
    animation-delay: 1.08s;
  }
  .l-7 {
    animation-delay: 1.2s;
  }
  .l-8 {
    animation-delay: 1.32s;
  }
  .l-9 {
    animation-delay: 1.44s;
  }
  .l-10 {
    animation-delay: 1.56s;
  }
  .l-11 {
    animation-delay: 1.68s;
  }
  .l-12 {
    animation-delay: 1.8s;
  }
  .l-13 {
    animation-delay: 1.92s;
  }
  .l-14 {
    animation-delay: 2.04s;
  }
  .l-15 {
    animation-delay: 2.16s;
  }

  @keyframes loadingF {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

/* MEDIA QUERIES */
@media (max-width:1016px){
    .large-image{
        width: auto;
        height: 16rem;
    }
            .cookiemodalbackground{
  bottom: 80px;
}
}
@media only screen and (max-width: 768px) {
            .cookiemodalbackground{
  bottom: 20px;
}

    .large-image{
        width: auto;
        height: 20rem;
    }
    #adminmelding h3{
        font-size: smaller;

    }
    #abonnementsInfoIcon .tooltip-text{
        max-width: 60%;
    }
    hr {
        width: 80vw;
    }
    .cookiemodalbackground{
        width: 22rem;
        max-width: 90vw;
        height: auto;
        overflow: hidden;
        border:1px solid grey ;
    }
    .cookiemodalbackground .modal-content {
        max-width: 80vw;
        width: 22rem;
        height: auto;
    }
    .large-image{
        width: auto;
        height: 24rem;
    }
    .half-width{
        width: 65%;
    }
    header {
        height: 20vh;
    }

    main {
        min-height: 0rem;
        height: auto;
        margin-top: 3rem;
    }
    .kaartzone{
        min-height: 0rem;
        height: auto;
    }

    footer {
        min-height: 4vh;
        max-height: 26vh;
        height: auto;
        
    }

    .medium-input-width {
        min-width: 50vw;
        width: 100%;
        max-width: 100%;
    }
}




/* KEY FRAMES */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        /* Begin buiten het scherm links */
        opacity: 0;
        /* Optioneel: maak het transparant */
    }

    to {
        transform: translateX(0);
        /* Eindig op de originele plek */
        opacity: 1;
        /* Maak het volledig zichtbaar */
    }
}

@keyframes elegantSlideIn {
    from {
        transform: translateX(-80%) scale(0.8) rotate(-90deg);
        opacity: 0;
    }

    60% {
        transform: translateX(10%) scale(1.05) rotate(15deg);
        opacity: 0.9;
    }

    to {
        transform: translateX(0) scale(1) rotate(0);
        opacity: 1;
    }
}

@keyframes elegantSlideOut {
    from {
      transform: translateX(0) scale(1) rotate(0); /* Start in de huidige positie */
      opacity: 1;
    }
  
    40% {
      transform: translateX(-10%) scale(1.05) rotate(15deg); /* Kleine overshoot */
      opacity: 1;
    }
  
    to {
      transform: translateX(-100%) scale(0.8) rotate(-90deg); /* Buiten beeld en kleiner */
      opacity: 0; /* Verdwijnt volledig */
    }
  }

/* .animate-show {
    animation: elegantSlideIn 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}  */
.animate-show {
    animation: elegantSlideIn 0.8s ease-in-out;
} 
.animate-hide {
    animation: elegantSlideOut 0.8s ease-in-out;
}