@import url("https://use.typekit.net/gdh5kvr.css");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* Colors */
  --theme-color-1: #091540;
  --theme-color-2: #FF8B00;
  --theme-color-3: #BD93D8;
  --theme-color-4: #25D0BC;
  --theme-color-5: #E5E7EB;
  --theme-color-6: #FFE8CC;
  --theme-color-7: #F2E9F7;
  --theme-color-8: #D3F6F2;

  --theme-color-1-opacity-05: rgba(9, 21, 64, 0.5);
  --theme-color-1-opacity-07: rgba(9, 21, 64, 0.7);
  --theme-color-1-opacity-03: rgba(9, 21, 64, 0.3);

  --white: #fff;
  --black: #000; 
  --grey: #707070;

  /* Error */
  --error: #FEE4E2;
  --error-text: #EF4034;

  /* Succes */
  --success: #D1FADF;
  --success-text: #12B76A;

  /* Warning */
  --warning: #FEF0C7;
  --warning-text: #F79009;

  --info: #CEDEFD;
  --info-text: #2369F6;

  /* Shadow */
  --shadow: 0px 0px 32px -12px rgba(0,0,0,0.75);

  /* Sizes */
  --site-width: 1400px;
  --gap:64px;

  /* Fonts */
  --heading_font: "owners-text", sans-serif;
  --body_font: "Open Sans", sans-serif;

  /* Border radius */
  --border-radius-small: 4px;
  --border-radius-regular: 24px;
}

/* General */
* {box-sizing: border-box;margin: 0;padding: 0;text-decoration: none;  outline:none;}
a {color:var(--theme-color-1); font-family: var(--body_font);}
body {overflow-x: hidden; overflow-y:scroll; font-family: var(--body_font); color:var(--theme-color-1); font-size:16px; font-weight: 400; line-height:1.5;}
.hidden {display: none !important;}
.overflow-hidden {overflow-y:hidden;}
.swiper {width:100%;}
img {max-width:100%; height:auto}
#main {width:100%; min-height: 100vh; overflow-x:hidden; color:var(--theme-color-1); font-size:16px; font-weight: 400; line-height:1.5;}
.admin-search-container {width:100%; padding:8px 24px; border-radius:4px; border:solid 1px var(--theme-color-1-opacity-05) ; color: var(--theme-color-1); font-weight:600; height:40px;}

.grid-border-right {position:relative;}
.grid-border-right:after {content:""; position:absolute; right:-24px; top:0; bottom:0; border-right:solid 1px var(--theme-color-1-opacity-03);}

/* Layout */
.section {display: flex; padding: 128px 16px 96px 16px;width: 100%;align-items: center;flex-direction: column;}
.container {display: flex;justify-content: center;width: 100%;max-width: var(--site-width) !important;overflow: visible;flex-direction: column; position:relative}
.row {display: flex; flex-wrap: wrap;margin: 0 -32px; align-items: flex-start;}
.col {padding: 0 calc(var(--gap) / 2); display:flex; flex-direction: column; margin-bottom:32px;}

.col-1 { flex: 0 0 calc((100% / 12) * 1); width: calc((100% / 12) * 1); }
.col-2 { flex: 0 0 calc((100% / 12) * 2); width: calc((100% / 12) * 2); }
.col-3 { flex: 0 0 calc((100% / 12) * 3); width: calc((100% / 12) * 3); }
.col-4 { flex: 0 0 calc((100% / 12) * 4); width: calc((100% / 12) * 4); }
.col-5 { flex: 0 0 calc((100% / 12) * 5); width: calc((100% / 12) * 5); }
.col-6 { flex: 0 0 calc((100% / 12) * 6); width: calc((100% / 12) * 6); }
.col-7 { flex: 0 0 calc((100% / 12) * 7); width: calc((100% / 12) * 7); }
.col-8 { flex: 0 0 calc((100% / 12) * 8); width: calc((100% / 12) * 8); }
.col-9 { flex: 0 0 calc((100% / 12) * 9); width: calc((100% / 12) * 9); }
.col-10 { flex: 0 0 calc((100% / 12) * 10); width: calc((100% / 12) * 10); }
.col-11 { flex: 0 0 calc((100% / 12) * 11); width: calc((100% / 12) * 11); }
.col-12 { flex: 0 0 calc((100% / 12) * 12); width: calc((100% / 12) * 12); }

/* Layout adjustments */
.section.h-100 {min-height: 100vh;}
.section.blue {background-color: var(--blue);}
.row.center {align-items: center;}
.col.p-32 {padding: 32px; border-radius: 16px;}
.col.center {align-items: center;}
.row.center {display: flex; align-items: center; justify-content: center;}
small { font-size: 12px; font-weight: 100} 

.section.intro {padding-top:calc(128px + 70px); background-image:var(--intro-background-image); background-position:bottom center; background-size:cover; background-repeat:no-repeat;}

.section.grey-bg {background-image:url('../images/grey-bg.svg'); background-position:top center; background-size:cover; background-repeat:no-repeat;}

.container.container-full {max-width:100% !important}

/* spacing */
.p-top-0 {padding-top: 0;}
.p-bottom-0 {padding-bottom: 0;}

.m-top-0 {margin-top:0px;}
.m-top-32 {margin-top:32px;}
.m-top-64 {margin-top:64px;}

.m-bottom-0 {margin-bottom:0px;}
.m-bottom-32 {margin-bottom:32px;}
.m-bottom-64 {margin-bottom:64px;}

.p-small {padding: 16px}
.p-regular {padding: 32px}

/* Border radius */
.border-radius-small {border-radius: var(--border-radius-small);}
.border-radius-regular {border-radius: var(--border-radius-regular);}

/* Headings */
h1, h2, h3, h4, h5, h6 {font-family: var(--heading_font); font-weight: 700;font-style: normal; margin-bottom:16px; line-height:1.2}

/* Heading sizes */
h1 {font-size: 90px;}
h2 {font-size: 60px;}
h3 {font-size: 30px; font-weight:500}
h4, h5, h6 {font-size: 20px; font-weight:500}

.font-size-45 {font-size:45px}

/* Text */
p {margin-bottom:24px}
.text-align-center {text-align: center;}

/* text colors */
.text-color-white {color: var(--white);}

/* background colors */
.bg-color-1 {background-color: var(--theme-color-1);}
.bg-color-2 {background-color: var(--theme-color-2);}
.bg-color-3 {background-color: var(--theme-color-3);}
.bg-color-4 {background-color: var(--theme-color-4);}
.bg-color-5 {background-color: var(--theme-color-5);}
.bg-color-6 {background-color: var(--theme-color-6);}
.bg-color-7 {background-color: var(--theme-color-7);}
.bg-color-8 {background-color: var(--theme-color-8);}

/* Buttons */
button .fa-spinner-third { animation: infinite 0.5s loader;}

/* Login */
body.not-logged-in .login-section{ background-image: url(/assets/images/Login-bg.png); background-repeat: no-repeat; background-size: cover; min-height:100vh;}

body.not-logged-in .wrapper,
body.not-logged-in .wrapper #main {min-height:100vh;}

/* Header */
.header {display: flex; z-index: 99999999; padding:0 16px; width: 100%; display: flex; align-items: center;justify-content: center; background-color: transparent; position: fixed; top: 0; left:0; right:0; transition: 0.3s; height:70px; }
.scrolled .header {background:var(--theme-color-1)}
.header .header-container {max-width: var(--site-width); width: 100%; align-items: center;justify-content: space-between; display: flex ; position:relative; height:100%;}
.header .logo-wrapper {position:absolute; left:0; top:20px;}
.header .logo-wrapper img {max-width: 140px;}

.header .nav-items-wrapper {display: flex; gap: 32px; margin-left:auto;}
.header .nav-items-wrapper a {color:#fff; font-weight:bold; display:flex; align-items: center; gap:8px;}
.header .nav-items-wrapper a i {color:#fff}

/* Default forms */
form {width:100%; display:flex; flex-direction: column;}
form .input-wrapper {display:flex; flex-direction: column; gap:8px;}
form .input-container {display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; width: 100%;}
form .input-container.input-row {width: 50%;}

form .input-container textarea,
form .input-container input {border:solid 1px var(--theme-color-1); padding:12px 20px;font-size: 16px; color: #11111140; border-radius: 20px;}
form .input-container label { display: flex ; flex-direction: column; align-items: start; gap: 16px;}
form .input-container label {flex-direction: row; align-items: center; justify-content: space-between;}
form .input-container label span {font-size: 20px; font-weight: bold;}

form .input-container.input-row label {display: grid; grid-template-columns: repeat(2,1fr);}

form .input-container.password-container {position:relative;}
form .input-container.password-container #show-password {position:absolute; z-index: 1; right:0; top:0; bottom:0; display: flex; align-items: center; cursor:pointer;}
form .input-container.password-container #show-password:hover {color:var(--theme-color-2)}

form input[disabled].red {background-color: var(--error); color: var(--error-text);}
form button[disabled] {opacity: 0.6; cursor: not-allowed;} 

form ::placeholder {opacity:0.5;}

/* Login */
.login-section {align-items:center; min-height:100vh;}
.login-section .login-wrapper {box-shadow: var(--shadow);  padding: 30px; border-radius: 16px; padding: 128px; display: flex;flex-direction: column;justify-content: space-between; background-color: #fff; text-align:center;}
.login-section .login-wrapper h1 {font-size:60px;}
.login-section .login-wrapper form input {border:none; border-bottom:solid 1px var(--black); padding:12px 0; border-radius: 0px; color:var(--theme-color-1)}
.login-section .login-wrapper form button[type="submit"] {width:100%; justify-content: center;}
.login-section .login-wrapper .login-footer {display:flex; flex-direction: column; margin-top:8px;}

/* Snackbar */
.snackbar-wrapper {display: flex; flex-direction: column; position: fixed; right: 16px; bottom: 16px; gap: 16px;overflow-x: hidden; max-width: 200px; width: 100%; z-index: 9999999999;}
.snackbar-wrapper .snackbar-container {max-width: 200px; width: 100%; padding: 12px; background-color: #2369F6; transition: transform 0.3s; border-radius: 8px;}
.snackbar-wrapper .snackbar-container.error {background-color: var(--error); color: var(--error-text);}
.snackbar-wrapper .snackbar-container.success {background-color: var(--success); color: var(--success-text);}
.snackbar-wrapper .snackbar-container:not(.active) {transform: translateX(calc(100% + 32px));}

/** Tooltip */
.tooltip-wrapper {display: none; width: 100%; flex-direction: column;}
.tooltip-wrapper.active {display: flex;}
.tooltip-wrapper .tooltip-container {display: flex; flex-direction: column;}
.tooltip-wrapper .tooltip-container .tooltip-inner {display: flex; flex-direction: column;}

/** Gallery */
.image-gallery {width:100%; user-select:none; border-radius:var(--border-radius-regular)}
.image-gallery .swiper-slide {height:500px; overflow:hidden; border-radius:var(--border-radius-regular)}
.image-gallery .swiper-slide img {width: 100%; height:100%; object-fit: cover;}

.gallery-navigation {width: 100%;height: 100%; margin-top:16px;  user-select:none;}
.gallery-navigation {text-align: center;font-size: 18px;background: #fff;display: flex;justify-content: center;align-items: center;}
.gallery-navigation .swiper-slide {width: 100%;height: 200px;margin-left: auto; cursor:pointer; margin-right: auto; border-radius:var(--border-radius-regular); overflow:hidden; background-size: cover;background-position: center;}
.gallery-navigation .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover; }

/* Review gallery */
.review-gallery {width:100%; user-select:none; overflow:visible !important}
.review-gallery .swiper-slide {overflow:hidden; border-radius:var(--border-radius-regular); position:relative;}
.review-gallery .swiper-slide .image-wrapper {padding-top:100%; width:100%; display:flex; position:relative;}
.review-gallery .swiper-slide .image-wrapper img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover;}

/* Taxonomy */
.tax-list {display:flex; flex-wrap:wrap; gap:8px}
.tax-list .tax-container {padding:10px; background:var(--theme-color-6); color:var(--theme-color-2); border-radius:var(--border-radius-small); font-size:14px; line-height: 1.5; font-weight:600}

/* Buttons */
.btn {display: inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:999px; background:var(--theme-color-7); line-height:1.5; border:none; color:var(--theme-color-3); font-weight:600 !important; cursor:pointer; transition:.3s; font-size:16px; font-family: var(--body_font);}
.btn:hover {background: var(--theme-color-3); color:var(--white)}

.btn.link {background:transparent; padding-left:0; padding-right:0; color:var(--theme-color-1-opacity-05)}
.btn.link:hover {color:var(--theme-color-1)}

.btn.btn-color-6 {background-color: var(--theme-color-6); color:var(--theme-color-2)}
.btn.btn-color-6:hover {background-color: var(--theme-color-2); color:var(--white)}

.btn.delete{color: var(--error-text);background: var(--error); }


/* Toggles */
.toggle-wrapper {width:100%; display:flex; align-items:flex-start; flex-direction: column; gap:16px;}
.toggle-wrapper .toggle-item {width:100%; border-bottom:solid 1px var(--black); }
.toggle-wrapper .toggle-item h3 {margin-bottom:0px; padding:12px 0; font-weight:500; cursor:pointer}
.toggle-wrapper .toggle-item h3:after {content: "\f107"; font-family: "Font Awesome 6 pro"; font-weight: 900; float:right; margin-top: 4px; transition:.3s}
.toggle-wrapper .toggle-item h3.open:after {transform:rotate(180deg);}
.toggle-wrapper .toggle-item .toggle-content {max-height: 0;overflow: hidden;opacity: 0; transition:.3s;}
.toggle-wrapper .toggle-item .toggle-content > span {margin-bottom:24px; margin-top:8px; width:100%; display:flex;}

/* Download list */
.download-wrapper {display:grid; grid-template-columns: repeat(2, 1fr); gap:32px; width:100%;}
.download-wrapper div h4 {margin-bottom:8px;}
.download-wrapper div button {text-decoration: underline; background:transparent; padding:0px; border:none;}

.button-wrapper {display:flex; gap:16px; flex-wrap:wrap;}

/* Footer */
.section#footer {padding:32px 16px; background:var(--theme-color-1); color:#fff;}
.section#footer .row {align-items: center;}
.section#footer .row .col {margin-bottom:0;}
.section#footer .row .col .copyright {color:#fff; opacity:0.7}
.section#footer .row .col .footer-nav {display:flex; justify-content: flex-end; flex-wrap:wrap; gap:8px;}
.section#footer .row .col .footer-nav a {color:#fff; font-weight:bold;}

/* Booking */
.booking-wrapper {display:flex; flex-direction: column; margin-top:40px;}
.booking-wrapper h3 {font-weight:500}

/* Lesson archive */
.section.lesson-titlebar {padding-bottom: calc(64px + 300px)}

.filter-search-bar {position:relative; display:flex; flex-direction: row; align-items: center; background:#fff; padding:12px 12px 12px 32px; border-radius:12px; width:100%; max-width:800px; margin:0 auto; gap:40px; position:relative;}
.filter-search-bar .filter-container .filterButton {border: solid var(--theme-color-1-opacity-05) 1px; border-top:none; transition:.3s; border-bottom:none; background:none; padding-left:12px; padding-right:12px; color:var(--theme-color-1-opacity-05); cursor:pointer; display:flex; align-items:center; gap:8px; font-size:16px;}
.filter-search-bar .filter-container .filterButton i {color:var(--theme-color-1-opacity-05); font-weight:600; transition:.3s;}
.filter-search-bar .filter-container .filterButton span {background:var(--theme-color-2); width:20px; height:20px; border-radius:50%; display:flex; align-items: center; justify-content: center; color:#fff; font-size:12px; font-weight:600; transition:.3s; opacity:0.3}
.filter-search-bar .filter-container .filterButton:hover,
.filter-search-bar .filter-container .filterButton:hover i {color:var(--theme-color-1)}
.filter-search-bar .filter-container .filterButton:hover span {opacity:1;}

.filter-search-bar .filter-container .filters {display:flex; flex-direction: column; gap:8px; align-items: flex-start; position: absolute; flex-direction: column; background-color: #fff; overflow: auto; width: 100%; left:0; top: calc(100% + 8px); z-index: 99; box-shadow: var(--shadow); border-radius:12px}
.filter-search-bar .filter-container .filters .filter-heading {padding:16px 24px 16px 24px; width:100%; border-bottom:solid var(--theme-color-5) 1px;}
.filter-search-bar .filter-container .filters .filter-heading h3 {margin:0px;}

/* Algemene styling voor de filter-sectie */
.filter-search-bar .filter-container .filters .filter-content {display: grid;grid-template-columns: repeat(2, 1fr);width: 100%;gap: 24px;padding: 16px 24px;}
.filter-search-bar .filter-container .filters .filter-content .filter-column {display: flex;flex-direction: column;gap: 4px;}
.filter-search-bar .filter-container .filters .filter-content .filter-column .filter-title {font-weight: bold;margin-bottom: 8px; font-size:20px}

.filter-search-bar .filter-container .filters .filter-content .filter-column .filter-values {display: flex;flex-wrap: wrap;gap: 8px;}
.filter-search-bar .filter-container .filters .filter-content .filter-column .filter-values {max-height: 150px; overflow-y: auto;}
.filter-search-bar .filter-container .filters .filter-content .filter-column .filter-values label {font-size:12px; cursor:pointer; background:var(--theme-color-5); user-select: none; transition:.3s; font-weight:500; padding:10px; border-radius:8px;}
.filter-search-bar .filter-container .filters .filter-content .filter-column .filter-values label:hover,
.filter-search-bar .filter-container .filters .filter-content .filter-column .filter-values label.active {background: var(--theme-color-2); color:#fff;}
.filter-search-bar .filter-container .filters .filter-content .filter-column .filter-values label input {display: none;}

.filter-search-bar .filter-container .filters .filter-content .filter-column .filter-range-slider {width:100%; display:flex; flex-direction: column;}

.filter-search-bar .filter-container .filters .filter-footer {padding:16px 24px; border-top:solid var(--theme-color-5) 1px; width:100%;}

.filter-search-bar .search-container {flex:1; position:relative}
.filter-search-bar .search-container input {width:100%; padding:8px 24px; border-radius:4px; border:solid 1px var(--theme-color-1-opacity-05) ; color: var(--theme-color-1); font-weight:600; height:40px;}
.filter-search-bar .search-container input::placeholder {color: #707070; font-weight:600}
.filter-search-bar .search-container button {width:40px; height:40px; position:absolute; right:0; top:0; background:transparent; border:none; cursor: pointer; z-index: 11;}

/* Lessons Display */
.section.lessons {padding-top:0px;}
.section.lessons .container {margin-top: -300px}

/* Lessons archive */
.lesson-wrapper {display: grid; grid-template-columns: repeat(3,1fr); gap: 32px}
.lesson-wrapper .lesson-item {background:#fff; border-radius:var(--border-radius-regular); overflow:hidden; transition:.3s; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.16));}
.lesson-wrapper .lesson-item .image {position:relative; padding-top:56.24%; overflow:hidden;}
.lesson-wrapper .lesson-item .image img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; transition:.3s;}
.lesson-wrapper .lesson-item:hover .image img{transform: scale(1.1);}
.lesson-wrapper .lesson-item .info {padding:24px; display:flex; flex-direction: column; align-items: flex-start;}
.lesson-wrapper .lesson-item .info h3 {font-weight:600}
.lesson-wrapper .lesson-item .info p {opacity:0.7}
.lesson-wrapper .lesson-item .tags-wrapper {margin-bottom:16px;}

/* Tags */
.tags-wrapper {display:flex; flex-direction: row; flex-wrap:wrap; gap:8px;}
.tags-wrapper .tag {padding:8px; background:var(--theme-color-5); border-radius:4px; font-size:14px; font-weight:600}

/* Rating  */
.rating-column {display:flex; flex-direction: row; align-items: center; justify-content: space-between; gap:16px; margin-top:128px;}
.rating-column form > div {display:flex; flex-direction: column; align-items: flex-start;}
.rating-column .rating-wrapper {background:#fff; max-width:960px; width:100%; padding:32px; border-radius:var(--border-radius-regular); filter:drop-shadow(0 3px 6px rgba(0,0,0,0.16));}
.rating-column .rating-wrapper form {display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;}
.rating-column .rating-wrapper textarea {height:150px; width:100%; border-radius:var(--border-radius-regular); border:solid 1px var(--theme-color-1-opacity-05); resize:none; padding:16px; font-family: var(--body_font);}
.rating-column .rating-wrapper textarea::placeholder {color:var(--theme-color-1-opacity-07); font-weight:600}
.rating-column .rating-wrapper .ratings {display: flex;gap:24px;}
.rating-column .rating-wrapper .ratings label {cursor: pointer;}
.rating-column .rating-wrapper .ratings input[type="radio"] {display: none;}
.rating-column .rating-wrapper .ratings input[type="radio"] + i {font-size: 70px;color:var(--theme-color-6); transition:.3s;}
.rating-column .rating-wrapper .ratings input[type="radio"]:hover + i,
.rating-column .rating-wrapper .ratings input[type="radio"]:checked + i {color: var(--theme-color-2);} 

.rating-column button {margin-left:auto; margin-top:24px; background:var(--theme-color-2); color:var(--white)}

/* Empty state */
.empty-state-wrapper {width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: bold; margin-top: 64px;}
.empty-state-wrapper .empty-state-image {width: 320px;}
#emptyState {width: 100%; text-align: center; padding: 16px; font-weight: bold;}

/* Modal */
.modal-wrapper {display: flex;justify-content: center;align-items: flex-start; padding:calc(128px + 70px) 32px 128px 32px; width: 100vw;min-height: 100vh;background: rgba(255, 255,255, 0.5);z-index: 10;top: 0;left: 0;position: fixed;z-index: 99999999; opacity: 0; transition: 0.3s opacity; pointer-events: none; overflow-y: scroll; height:100%}
.modal-wrapper.active {opacity: 1; pointer-events: all;}

.modal-wrapper .modal-body {width:100%;}
.modal-wrapper .modal-header h3 {font-size:40px;}
.modal-wrapper .modal-content { max-width: 500px; width: 100%; background-color: #fff; border-radius: 20px; box-shadow: var(--shadow); padding:32px; display:flex; flex-direction: column; align-items: flex-start; gap:16px;}
.modal-wrapper .modal-content.large { max-width: var(--site-width);}
.modal-wrapper .modal-content.m-large { max-width: 800px;}
.modal-wrapper .modal-content.x-large {max-width: 1920px;}
.modal-wrapper .modal-content {display:flex; flex-direction: column; align-items: flex-start;}

.modal-wrapper .modal-content .modal-row {display:flex; flex-direction: column; align-items: flex-start; gap:8px; flex-wrap:wrap; padding:24px 0; border-bottom: solid var(--theme-color-1-opacity-03) 1px; width:100%}
.modal-wrapper .modal-content .modal-row.no-gap {gap:0px;}
.modal-wrapper .modal-content .modal-row:first-child {padding-top:0px;}
.modal-wrapper .modal-content .modal-row:last-child {border-bottom:0px; padding-bottom:0px}
.modal-wrapper .modal-content .modal-row.has-columns {flex-direction: row; gap:24px;}

.modal-wrapper .modal-content .modal-row input[type="number"],
.modal-wrapper .modal-content .modal-row input[type="time"],
.modal-wrapper .modal-content .modal-row input[type="text"],
.modal-wrapper .modal-content .modal-row input#datePickerInput,
.modal-wrapper .modal-content .modal-row select {border-radius:999px; padding:12px 18px; height:50px; border:none; background:var(--theme-color-5); width:100%; max-width:200px; font-size:16px; color:var(--theme-color-1); font-family: var(--body_font);}
.modal-wrapper .modal-content .modal-row span.modal-label {font-weight:500; font-size:20px; font-family: var(--heading_font);}
.modal-wrapper .modal-content .modal-row input:disabled {background:transparent; padding:0; border:none;}
.modal-wrapper .modal-content .modal-row .modal-column {display:flex; flex-direction: column; gap:8px;}
.modal-wrapper .modal-content .modal-row .modal-column.full {width:100%;}
.modal-wrapper .modal-content .modal-row input[type="text"]:disabled {display:flex; align-items: center; height:50px;}

.modal-wrapper .modal-content .modal-row.column-layout {display:grid; width:100%; grid-template-columns: repeat(3, 1fr); gap:48px;}
.modal-wrapper .modal-content .modal-row.column-layout .modal-column-container {display:flex; flex-direction: column; height:100%}
.modal-wrapper .modal-content .modal-row.column-layout .modal-column-container .modal-column-content {padding-bottom:24px; margin-bottom:24px; border-bottom:solid var(--theme-color-1-opacity-03) 1px; display:flex; flex-direction: column;}
.modal-wrapper .modal-content .modal-row.column-layout .modal-column-container .modal-column-content:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}
.modal-wrapper .modal-content .modal-row.column-layout .modal-column-container .modal-column-content .modal-select-wrapper {display:grid; grid-template-columns: repeat(2, 1fr); gap:24px;}
.modal-wrapper .modal-content .modal-row.column-layout .modal-column-container .modal-column-content .modal-select-wrapper .modal-select-container {display:flex; flex-direction: column; gap:4px;}
.modal-wrapper .modal-content .modal-row.column-layout .modal-column-container .modal-column-content .modal-select-wrapper .modal-select-container select {background:none; border:solid var(--theme-color-1) 1px; appearance:none;}
.modal-wrapper .modal-content .modal-row.column-layout .modal-column-container .modal-column-content input {max-width:none; background:#fff; border:solid var(--theme-color-1) 1px}

.modal-wrapper .modal-content .modal-row .modal-input-wrapper {display:flex; flex-direction: column; gap:8px; margin-bottom:24px; width:100%}
.modal-wrapper .modal-content .modal-row .modal-input-wrapper:last-child {margin-bottom:0px;}

.modal-wrapper .modal-content textarea {min-height:120px; width:100%; resize:none; border-radius: var(--border-radius-regular); padding:12px 18px; font-size:16px; font-family: var(--body_font); }

.modal-wrapper .modal-content .time-wrapper { display:flex; flex-direction: column;}
.modal-wrapper .modal-content .time-content {display:flex; flex-wrap:wrap; gap:24px;  gap:24px; width:100%; grid-template-columns: repeat(5,1fr); display:grid;}
.modal-wrapper .modal-content #timeOutput {display:flex; flex-direction: column; gap:8px; margin-top:8px;} 

.time-buttons {display:flex; gap:4px; width:100%; flex-wrap:wrap;}
.time-button {background:var(--success); color:var(--success-text); display: inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:999px; line-height:1.5; border:none; font-weight:600 !important; cursor:pointer; transition:.3s; font-size:16px; font-family: var(--body_font); margin-top: 8px;}
.time-button.remove {background:var(--error); color: var(--error-text); margin-top: 0;   height: 50px; padding: initial; align-items: center; justify-content: center; }
#timeOutput .modal-label {display: none;}
.scroll-disabled {position: fixed;width: 100%;overflow-y: scroll;}

[data-get],[data-post] {cursor: pointer;}

.loader-wrapper {  opacity: 0; transition: opacity 0.3s; position: fixed; width: 100%; height: 100vh; z-index: 9999999999999; top: 0; left: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;  background:rgba(255,255,255, 0.5)}
.loader-wrapper.active {opacity: 1; pointer-events: all; cursor: progress;}
.loader-wrapper .loader-content {width: 120px;height: 120px;background: var(--white);border-radius: 20px;display: flex;align-items: center;justify-content: center;}
.loader-wrapper .loader-content i { font-size: 64px; animation: loader 1s infinite ease-in-out; color: var(--theme-color-1);}

/* QR upload */
.qr-intro-section {padding-bottom:calc(32px + 200px); padding-top:64px !important;}
.upload-complete-bg {background-image: url('../images/line-bg.svg');  min-height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 64px; padding-bottom: 64px;}
.upload-complete-bg h1 {color: var(--black);}
.upload-thanks-image {max-width: 650px; width: 100%; margin: 0 auto; display: block; }

.qr-upload-section .container {margin-top:-200px;}
.qr-upload-section .qr-upload-wrapper {display:flex; max-width:500px; width:100%; margin:0 auto; background:#fff; padding:32px; border-radius:var(--border-radius-regular); box-shadow: var(--shadow); gap:24px; align-items:center; justify-content:center; flex-direction:column;}

.qr-upload-section .qr-upload-wrapper form {display:flex; flex-direction: column; gap:24px;}
.qr-upload-section .qr-upload-wrapper form h3 {margin-bottom:0px;}

.qr-upload-section .qr-upload-wrapper .upload-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } 
.qr-upload-section .qr-upload-wrapper .upload-body .photo-box { aspect-ratio: 1/1; border: solid 1px var(--theme-color-1); border-radius: var(--border-radius-regular); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; } 
.qr-upload-section .qr-upload-wrapper .upload-body .photo-input { display: none; } 
.qr-upload-section .qr-upload-wrapper .upload-body .photo-preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-regular); background: #fff; font-size: 24px; color: var(--theme-color-3); } 
.qr-upload-section .qr-upload-wrapper .upload-body .photo-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } 
.qr-upload-section .qr-upload-wrapper .upload-body .plus-icon { font-size: 24px; color: var(--theme-color-3); position: absolute; } 
.qr-upload-section .qr-upload-wrapper .upload-body .remove-btn {background:red; border-radius:50%; position:absolute; right:8px; top:8px; border:none; width:24px; height:24px; display:none; align-items:center; justify-content:center; cursor:pointer; color:#fff; font-size:12px; transition:.3s;} 
.qr-upload-section .qr-upload-wrapper .upload-body .photo-box.has-image .remove-btn { display: flex; }

/* Multi select */
.multi-select {position: relative;width: auto;;cursor: pointer;user-select: none;}
.multi-select .selected-items {border-radius:999px; line-height:1.1; padding:8px 18px; height:50px; gap:8px; overflow:hidden; border:solid var(--theme-color-1) 1px; width:100%; max-width:200px; display:flex; align-items: center; justify-content: space-between;}
.multi-select .selected-items.full-width {max-width: 100%; width: 100%;}

.multi-select .selected-items > span {font-weight:bold; color:#fff; background:var(--theme-color-2); width:32px; height:32px; border-radius:50%; display:flex; align-items: center; justify-content: center; flex: 0 0 32px;}
.multi-select .options {display: none;position: absolute;width: 200px;background: #fff;border: 1px solid #ccc;max-height: 300px;overflow-y: auto; z-index: 1;}
.multi-select .options.full-width {width: 100%; max-width: 100%;}
.multi-select .options .option {padding: 8px;cursor: pointer;display: flex;align-items: center;gap: 8px;}
.multi-select .options .option.indented {padding-left: 24px;}
.multi-select .options .option:hover, 
.multi-select .options .option.checked {background: var(--theme-color-2);color: white;}
.multi-select .options .option.indented {opacity: 0.8;}
.multi-select .hidden-checkbox {display: none;}

/* Upload + preview */
.image-upload-wrapper, 
.modal-image-upload-wrapper {display:flex; flex-direction: column; gap:16px;}
.image-upload-wrapper .upload-box, 
.modal-image-upload-wrapper .upload-box {border: 2px dashed var(--theme-color-1-opacity-05); gap:16px; cursor: pointer;display: flex; padding:24px;align-items: center;justify-content: center;border-radius: var(--border-radius-regular);color: var(--theme-color-1-opacity-05);height:100px;}
.image-upload-wrapper .upload-box i,
.modal-image-upload-wrapper .upload-box i {font-size:40px; color:var(--theme-color-1)}
.image-upload-wrapper .upload-box.dragover, 
.modal-image-upload-wrapper .upload-box.dragover {background: var(--theme-color-5);}

.image-upload-wrapper .preview-container,
.modal-image-upload-wrapper .preview-container {display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;}
.image-upload-wrapper .preview,
.modal-image-upload-wrapper .preview {position: relative;padding-top:100%;border-radius: var(--border-radius-regular);border: 1px solid var(--theme-color-1);display: flex;align-items: center;justify-content: center;overflow: hidden;background: white;}
.image-upload-wrapper .preview img,
.modal-image-upload-wrapper .preview img {width: 100%;height: 100%;object-fit: cover;left:0; top:0; position:absolute}
.image-upload-wrapper .remove-btn,
.modal-image-upload-wrapper .remove-btn {background:red; border-radius:50%; position:absolute; right:8px; top:8px; border:none; width:24px; height:24px; align-items:center; justify-content:center; cursor:pointer; color:#fff; font-size:12px; transition:.3s;}/* Keyframes */

/* Video preview */
.video-preview-wrapper {display:flex; flex-direction: column;}
.video-preview-wrapper .preview-text {margin-top:16px; margin-bottom:4px;}
.video-preview-wrapper .video-container {padding-top:56.25%; border-radius: var(--border-radius-regular); width:100%; overflow:hidden; border: 1px solid var(--theme-color-1); position:relative;}
.video-preview-wrapper .video-container iframe {position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; border:none; pointer-events: none;}

/* File upload list */
.modal-file-upload label {border-radius: 999px;line-height: 1.1;padding: 8px 18px;width:100%;height: 50px;gap: 8px;overflow: hidden;border: solid var(--theme-color-1) 1px;width: 100%;display: flex;align-items: center;justify-content: space-between; cursor:pointer}
.modal-file-upload input[type="file"] {display: none;}
.modal-file-upload ul {list-style: none; margin-top: 16px;display: flex;flex-wrap: wrap;flex-direction: column; align-items: flex-start; gap:4px;}
.modal-file-upload ul li {position:relative; display:flex; gap:8px; justify-content: space-between; width: 100%; padding: 8px 16px; border-radius:24px; background:var(--theme-color-5);}
.modal-file-upload ul li:last-child {border-bottom:0px;}
.modal-file-upload ul li .remove-btn {color:var(--error-text); background-color:unset; border:none; border-radius: 0; font-size:16px; cursor:pointer}

/* Modal reservation */
.modal-reservation-wrapper {display:flex; flex-direction: column; gap:16px;}
.modal-reservation-wrapper .modal-reservation-container{display:flex; gap:16px;}
.modal-reservation-wrapper .modal-reservation-container select {width:auto !important}
.modal-reservation-wrapper .modal-reservation-container .form-group {flex:1; display:flex; position:relative}

.modal-reservation-wrapper .modal-reservation-container .form-group .gradient-list:empty {display:none;}
.modal-reservation-wrapper .modal-reservation-container .form-group .gradient-list {position: absolute; top:100%; left:0; right:0;background: #fff;border: 1px solid #ccc;max-height: 300px;overflow-y: auto;z-index: 100;}
.modal-reservation-wrapper .modal-reservation-container .form-group .gradient-list li {padding: 8px;cursor: pointer;display: flex;align-items: center;gap: 8px;}

.modal-reservation-wrapper .chosen-list {list-style: none; display: flex;flex-wrap: wrap;flex-direction: column; align-items: flex-start; gap:8px;}
.modal-reservation-wrapper .chosen-list > div {position:relative; display:flex; gap:8px; justify-content: space-between; width: 100%; padding: 8px 16px; border-radius:24px; background:var(--theme-color-5);}
.modal-reservation-wrapper .chosen-list > div:last-child {border-bottom:0px;}
.modal-reservation-wrapper .chosen-list > div > button {color:var(--error-text); background-color:unset; border:none; border-radius: 0; font-size:16px; cursor:pointer}
.modal-reservation-wrapper .chosen-list > div > .view-button {margin-left:auto; background-color:unset; border:none; border-radius: 0; font-size:16px; cursor:pointer}

/* Allow QR images */
.allow-image-wrapper {display:grid; grid-template-columns: repeat(3, 1fr); width:100%; gap:24px;}
.allow-image-wrapper label {display:flex;}
.allow-image-wrapper label .image-wrapper {display:flex; padding-top:100%; width:100%; position:relative; border-radius:var(--border-radius-regular); overflow:hidden; cursor:pointer;}
.allow-image-wrapper label .image-wrapper img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; user-select: none; }

/** Mis is dit beter */
.allow-image-wrapper label .image-wrapper::after{background-color: var(--success-text); opacity: 0.3; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left:0; transition:.3s}
.allow-image-wrapper label .image-wrapper::before{content: "\f058"; font-family: "Font Awesome 6 Pro"; position: absolute; top: 0; right: 0;  transform:translate(-50%, 50%); color: var(--success-text); transition:.3s;  z-index: 1; line-height: 1; font-size:24px; font-weight:600 }
.allow-image-wrapper label .image-wrapper.inactive::before,
.allow-image-wrapper label .image-wrapper.inactive::after{display: none;}



input.incorrect {border: 1px solid var(--error-text); background-color: var(--error); }

/* Keyframes */
@keyframes identifier {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

@keyframes loader {
  from {rotate: 0deg;}
  to {rotate: 360deg;}
}


/* Media queries */
@media screen and (max-width:800px){
  h1 {font-size:56px;}
}

.modal-input-disabled {position: relative;} 
.modal-input-disabled::after {content: ""; font-weight: bold; z-index: -1;display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.5); z-index: 1; pointer-events: all;}


.ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.user-status {width: 100%; border: 1px solid var(--black); border-radius: 16px; display: flex; align-items: center; padding: 8px 16px; font-weight: 600; font-size: 14px; color: var(--error-text); background: var(--error); cursor: pointer;}
.user-status.checked {background: var(--success); color: var(--success-text);}

.radio-wrapper {max-height: 150px; overflow-y: auto; gap: 8px; display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.radio-wrapper .radio-label {display: flex; width: 100%;align-items: center; gap: 8px; cursor: pointer; padding: 8px; border-radius: 8px; background: var(--theme-color-5);}
.radio-wrapper .no-school-found {display: none; align-items: center; justify-content: center; width: 100%; height: 100px; background: var(--theme-color-5); border-radius: 8px;}

[disabled] {cursor: not-allowed;}