@charset "utf-8";


/*sander zijn stijling

body{background:#efefef; padding:24px;}
main{display:grid; grid-template-columns:200px auto; width:100%; gap:24px;}
main aside,
main header,
main nav,
main section,
main footer{background:#ffffff; border-radius:12px; box-shadow:0 0 10px rgba(0,0,0,.1); padding:24px;}

main aside{grid-row-end:span 4;}
main nav ul{list-style:none; padding:0;}
main nav ul li{float:left; margin-right:12px;}
main nav ul li a.disabled{pointer-events:none; color:#aaa;}
main section table *{text-align:left;}*/


/*template*/
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
form{display:inline;}

/*text*/
h1, h2, h3, h4, h5, h6{width:100%; font-family:'greycliff-cf', sans-serif; height:auto; font-weight:900;}
h1{font-size:2.4rem;}
h2{font-size:2.2rem;}
h3{font-size:1.8rem;}
h4{font-size:1.6rem;}
h5{font-size:1.4rem; font-weight:400;}
p{margin:0px 0px 24px 0px;}
p:last-of-type{margin:0px 0px 0px 0px;}
a, a{color:#444444; text-decoration:none;}
.txt-link{color:#f5bd1f;}
.txt-link:hover{color:#ffd93d;}
small{font-size:1.2rem;}
section{padding:60px 0 48px 0;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}
.full {width:100%;}
.title{font-family:'greycliff-cf', sans-serif; font-weight:900; font-size:2.0rem; margin-bottom:24px;}
.center{text-align:center;}
.thick{font-weight:700;}
.padding{padding:24px;}
.no-padding{padding:0 !important;}
.no-margin{margin:0 !important;}
.auto-margin{margin:auto 0 !important;}

/*floats*/
.left{float:left;}
.right{float:right;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; overflow-x:hidden; overflow-y:scroll; font-size:1.4rem; color:#352d25; font-family:'greycliff-cf',sans-serif;  line-height:1.628571; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;background: rgb(115,16,166); background: linear-gradient(90deg, rgba(115,16,166,1) 0%, rgba(140,20,201,1) 100%); background-attachment:fixed;}

/*Image & video reset*/
.image{width: 100%; }
.image img{width: 100%; height: 100%; object-fit:contain;}
video,
iframe{width: 100%; aspect-ratio:16/9; object-fit:contain;}


/*main-container*/
main{width:100%; max-width:1920px; height:100vh; margin:0px auto; display:grid; grid-template-columns:224px 1fr; gap:24px; padding:24px;}
.container{max-width:1622px; margin:0px auto; padding:0 32px; position:relative;}

/*Sidebar*/
.sidebar{display:grid; grid-template-rows:200px auto 24px; row-gap:24px;  width:224px; min-height:100vh; padding:24px 0; position:fixed; top:0;}
.sidebar .logo{width:200px; height: 70px; margin-top:36px; margin-bottom:124px;}
.sidebar .logo img{height: 100%;width: 100%; object-fit:contain;}
.sidebar nav{position: relative;}
.sidebar nav ul li{display:block; max-height:24px; margin:16px 0; line-height:24px;}
.sidebar nav ul li a{ opacity:80%; font-size:1.6rem;}
.sidebar nav ul li a.on,
.sidebar nav ul li:hover a{opacity:100%; color:white;}
.sidebar nav ul li:first{margin-top:unset;}
.sidebar nav ul li a,
.sidebar nav ul li i{color:white;}
.sidebar nav ul li i{margin: auto 24px auto 0; vertical-align:middle;font-size:2.0rem;}
.sidebar .mainmenu{position: relative;}
.sidebar .submenu{position:absolute; bottom:0;}
.sidebar .submenu li a{opacity:60%;}
.sidebar .version{color:white; opacity:50%; font-size:1.2rem;}
.sidebar nav ul li .material-symbols-outlined{width:24px !important; height:24px !important;}
.menu-toggle{display:none !important;}

/*Mainsection*/
section{display:grid; grid-template-rows:48px min-content auto; row-gap:24px; height:100%; background:#ffffff; border-radius:15px; grid-area:1/2/1/2; position:relative; overflow:hidden; padding: 32px;}
section .content{overflow-y:scroll; max-width:100%; overflow-x:hidden; padding-right:24px;}
section .ct-grid{display:grid; grid-template-columns:repeat(12, 1fr); grid-template-rows:repeat(12,1fr); gap:24px;}
section .locations{display:grid; grid-template-columns:repeat(12,1fr); gap:24px;}

/*button*/
/*button element reset*/
button{ display: inline-block; cursor: pointer; text-align: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; text-transform: none;}
.button{display:inline-block; height:fit-content; text-align:center; font-size:1.4rem; font-weight:700;  padding:8px 16px; border-radius:5px; cursor:pointer; line-height:unset;}
.button.small{padding:8px 12px; font-size:1.2rem; width:24px;  height:24px;}
.button.square{padding:8px;}
.button.square.small{padding: 4px; font-size:1.6rem;}
i{vertical-align:middle;}

.disabled{ cursor:no-drop; background:#dbdbdb !important; color:rgb(192,192,192) !important; pointer-events:none;}
.reference{cursor:default  !important; background:#F1F1F1 !important; color:rgb(192,192,192) !important;}
.shadow{box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);}
.drag-indicator{cursor:grab !important;}
/*Colors*/
.bg-green{background:#00d980;}
.bg-green:hover{background:#00ed8c;}
.ol-green{box-shadow: 0 0 0 2px#00d980 inset;}
.ol-green:hover:not(.bg-green){box-shadow: 0 0 0 2px #00d980 inset; color:#00d980;}
.bg-yellow{background:rgb(255,217,61);}
.bg-yellow:hover{background:rgb(255,232,99);}
.bg-lightyellow{background:rgba(255,232,99,0.1);}
.ol-yellow{box-shadow:0 0 0 2px rgb(255,217,61) inset;}
.ol-yellow:hover:not(.bg-yellow){box-shadow:0 0 0 2px rgb(255,232,99) inset; color:rgb(255,232,99)}
.txt-yellow{color:rgb(255,217,61);}
.txt-green{color:#00d980;}
.bg-white{background:white;}
.bg-white:hover:not(.disabled:hover){box-shadow: 0  3px 6px rgba(0,0,0,0.16);}
.ol-white{box-shadow: 0 0 0 2px white inset;}
.txt-white{color:white;}
.bg-purple{background:rgb(115,16,166);}
.bg-purple:hover{background:rgb(140,20,201);}
.bg-lightpurple{background:rgba(140,20,201,0.1);}
.ol-purple{box-shadow: 0 0 0 2px rgb(115,16,166) inset;}
.ol-purple:hover:not(.bg-purple){box-shadow: 0 0 0 2px rgb(140,20,201) inset; color:rgb(140,20,201);}
.txt-purple{color:rgb(115,16,166);}
.bg-blue{background:rgb(26,200,233);}
.bg-blue:hover{background:rgb(98, 173, 223);}
.bg-lightblue{background:rgba(98,173,233,0.1);}
.ol-blue{box-shadow:0 0 0 2px rgb(26,200,233) inset;}
.ol-blue:hover:not(.bg-blue){box-shadow:0 0 0 2px rgb(98, 173, 223) inset; color:rgb(98,173,223);}
.txt-blue{color:rgb(26,200,233);}
.bg-red{background:rgb(233,26,96);}
.bg-red:hover{background:rgb(220,82,96);}
.bg-lightred{background:rgba(220,82,96,0.1);}
.ol-red{box-shadow:0 0 0 2px rgb(233,26,96) inset;}
.ol-red:hover:not(.bg-red){box-shadow:0 0 0 2px rgb(220,82,96) inset; color:rgb(220,82,96);}
.txt-red{color:rgb(233,26,96);}
.bg-grey{background:#dbdbdb}
.bg-grey:hover{background:rgb(192,192,192);}
.bg-lightgrey{background:rgba(177,177,177,0.1);}
.ol-grey{box-shadow: 0 0 0 2px solid rgb(177,177,177) inset;}
.ol-grey:hover{box-shadow: 0 0 0 2px solid rgb(192,192,192) inset;}
.txt-grey{color:rgb(177,177,177);}
.txt-darkgrey{color:#707070;}
.spacer-left{margin-left:12px;}

/*stickers*/
.sticker{width:fit-content;  padding: 6px 12px; font-family:inherit; text-transform:uppercase; font-size:1.4rem; border-radius:5px; color:white; text-align:center; line-height:normal;}
.sticker.small{min-width:75px;font-size:1.0rem;}
.cat-primair{background:#00d980;}
.cat-primair:hover{color:#00d980; background:#00ed8c;}
.cat-accent{background:rgb(140,20,201);}
.cat-accent:hover{background:#F2D7FF;color:rgb(140,20,201);}
.cat-info{background:rgb(26,200,233);}
.cat-info:hover{background:#C5E1F3;color:rgb(26,200,233);}
.cat-error{background:#B92635;}
.cat-error:hover{background:rgb(220,82,96);color:#B92635;}
/*.cat-succes{background:#00ed8c;}
.cat-succes:hover{background:#E1F3C5;color:#00ed8c;}
.cat-warning{background:rgb(220,82,96);}
.cat-warning:hover{background:#E9939C;color:rgb(220,82,96);}*/
.cat-other{background:#f5bd1f;}
.cat-other:hover{background:#ffd93d;color:#f5bd1f;}

/*content classes*/
/*column*/
.col-1{grid-column-end:span 1;}
.col-2{grid-column-end:span 2;}
.col-3{grid-column-end:span 3;}
.col-4{grid-column-end:span 4;}
.col-5{grid-column-end:span 5;}
.col-6{grid-column-end:span 6;}
.col-7{grid-column-end:span 7;}
.col-8{grid-column-end:span 8;}
.col-9{grid-column-end:span 9;}
.col-10{grid-column-end:span 10;}
.col-11{grid-column-end:span 11;}
.col-12{grid-column-end:span 12;}
/*column start*/
.col-st-1{grid-column-start:1;}
.col-st-2{grid-column-start:2;}
.col-st-3{grid-column-start:3;}
.col-st-4{grid-column-start:4;}
.col-st-5{grid-column-start:5;}
.col-st-6{grid-column-start:6;}
.col-st-7{grid-column-start:7;}
.col-st-8{grid-column-start:8;}
.col-st-9{grid-column-start:9;}
.col-st-10{grid-column-start:10;}
.col-st-11{grid-column-start:11;}
.col-st-12{grid-column-start:12;}
/*rows*/
.row-1{grid-row-end:span 1;}
.row-2{grid-row-end:span 2;}
.row-3{grid-row-end:span 3;}
.row-4{grid-row-end:span 4;}
.row-5{grid-row-end:span 5;}
.row-6{grid-row-end:span 6;}
.row-7{grid-row-end:span 7;}
.row-8{grid-row-end:span 8;}
.row-9{grid-row-end:span 9;}
.row-10{grid-row-end:span 10;}
.row-11{grid-row-end:span 11;}
.row-12{grid-row-end:span 12;}
/*row start*/
.row-st-1{grid-row-start:1;}
.row-st-2{grid-row-start:2;}
.row-st-3{grid-row-start:3;}
.row-st-4{grid-row-start:4;}
.row-st-5{grid-row-start:5;}
.row-st-6{grid-row-start:6;}
.row-st-7{grid-row-start:7;}
.row-st-8{grid-row-start:8;}
.row-st-9{grid-row-start:9;}
.row-st-10{grid-row-start:10;}
.row-st-11{grid-row-start:11;}
.row-st-12{grid-row-start:12;}

/*forms*/
/*form*/
.form-grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:24px; font-size:1.4rem; align-items:flex-start;}

.form-grid .title{margin-bottom:unset;}
.fieldset-wrap h2,
.fieldset-wrap h3{margin-bottom:24px;}
fieldset h3{margin-top:unset;}
fieldset{padding:24px; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; border-radius:10px; height:fit-content;}
fieldset .title{font-weight:700; border-bottom: 1px solid rgb(177,177,177); padding-bottom:8px; font-size:1.8rem;}
fieldset .input .switch.left{display:block; margin:auto; margin-right:auto; margin-left:0;}
fieldset .input .switch.right{display:block; margin:auto; margin-right:0; margin-left:auto;}
fieldset .input{position:relative;}
fieldset .input #delete{position:absolute; bottom:4px; right:0;}
fieldset.company{display:grid; grid-template-columns:repeat(6, 1fr); gap:24px;}
.form-grid .submit.submit-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:unset;}
.database span{margin-left:6px;}
.add{height: 24px;}
.form-grid fieldset .input.optional:hover .tooltiptext{visibility:visible;}

/*input*/
.input input:disabled{background:unset; color:rgb(192,192,192) !important;}
.input.input-grid{display:grid; grid-template-columns:1fr 4fr; gap:12px;}
.input input::placeholder{color:inherit; opacity:0.5;}
.input.switch-grid{display:grid; grid-template-columns:auto max-content; gap:12px;}
.input.switch-grid.right{margin-left:auto; margin-right:0; margin-top:0; margin-bottom:auto;}
.input.switch-grid.left{margin-left:0; margin-right:auto; margin-top:0; margin-bottom:auto;}
.input.switch-grid label{margin-bottom:auto; margin-top:auto;}
.input.switch-grid .label{line-height:40px;}
.input.input-grid label{ line-height:40px;}
.input label{line-height:40px; display:block;}
.input .number input{border:1px solid #ebebeb; max-height:32px; color:#444444;  font-family:'greycliff-cf',sans-serif; width:48px; height:40px; text-align:center;}
.input .text{padding: 6px 0 6px 12px; display:grid; grid-template-columns:auto 22px; min-height:40px; gap:12px; border:1px solid #ebebeb; border-radius:5px; background:white; }
#thumbnail{overflow-x:hidden !important;}
.input .text.area input,
.input .text.area.full{max-height:unset;}
.input .text textarea{resize:none;}
.input .text.full{width:100%; grid-template-columns:auto 22px; max-height:40px;}
.input .text.uploader{max-height:120px;}
.input .text.editor{grid-template-columns:1fr; padding:unset;}
.input .text i{color:rgb(177,177,177); grid-area: 1/2/1/2; line-height:28px; font-size:1.8rem;}
.input .text input,
.input .text select,
.input .text select[multiple],
.input .text select option,
#thumbnail,
.input textarea{border:unset; width:100%;  max-height:45px; color:#444444;  font-family:'greycliff-cf',sans-serif;}
.input .text select,
.input textarea{border:unset; color:#444444; width:100%;}
.input textarea,
.input .text select[multiple]{min-height:150px;}
.submit input[type="submit"]{border:unset; font-family:'greycliff-cf', sans-serif;}
.input .text input:focus,
.input .text select:focus{border:unset; color:#444444;}
.input .text.area:has(textarea:focus),
.input .text:has(input:focus){border-color:#444444;}
.input .text.area:has(textarea:focus) i,
.input .text:has(input:focus) i{color:#444444;}
.input .text select{grid-column-end:span 2;}
.input .text select:has(:disabled){ cursor:pointer; background:unset;}
.input.required label,
.input.required .text i,
.input.required .text input::placeholder{color:red;}
.input.required .text{border:2px solid red;}
.error {color:white; grid-column:span 2; margin-top:12px; background:#B92635; padding:4px; border-radius:4px; font-weight:700;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{-webkit-box-shadow: 0 0 0 30px white inset !important;}
input[type="submit"],
button[type="submit"]{border:unset; margin: 12px 0;}


.custom-select-wrapper {
    position: relative;
    width: 250px;
    font-family: Arial, sans-serif;
}

.custom-select-trigger {
    border: 1px solid #ccc;
    padding: 10px;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Pijltje (kan ook een icon zijn) */
.custom-select-trigger::after {
    content: '▼';
    font-size: 0.8em;
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Wordt getoond met JS */
    z-index: 10;
}

.custom-options li {
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.custom-options li:hover {
    background: #f0f0f0;
}

.custom-options li img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    object-fit: cover;
}

/* Klasse die JS toevoegt om de lijst te tonen */
.custom-select-wrapper.open .custom-options {
    display: block;
}

/*file uploader en preview*/
.uploader-preview{ width:70%; height:auto; margin:auto;margin-bottom:24px;}
.uploader-preview img{width: 100%; height: 100%; object-fit:contain;}

/*checkbox & radio*/
.boxes {font-size:1.4rem; font-family:'greycliff-cf',sans-serif;   display: grid; grid-template-columns: 1em auto; gap:12px;}
input[type="radio"],
input[type="checkbox"] { -webkit-appearance: none; appearance: none; margin: 0; font: inherit; color:#4e0b70; width: 1.08em; height: 1.08em; border: 0.15em solid #707070; border-radius: 0.15em; transform: translateY(0.25em); display: grid; place-content: center;}
input[type="radio"] {background-color: var(--form-background); margin: 0; border-radius: 50%; border: 0.15em solid #4e0b70;}
input[type="radio"]::before,
input[type="checkbox"]::before {content: ""; width: 0.65em; height: 0.65em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color); background-color:#ffd93d;}
input[type="radio"]::before {clip-path:unset; border-radius: 50%; transform-origin:unset; background-color:rgb(115,16,166);}
input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before {transform: scale(1);}
input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{background:rgb(192,192,192); border:0.15em solid #707070;}

/*switch*/
.switch {position: relative; display: inline-block; width: 54px; height: 24px;}
  /* Hide default HTML checkbox */
  .switch input {opacity: 0;width: 0;height: 0;}
  /* The slider */
  .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background:rgb(192,192,192);-webkit-transition: .4s;transition: .4s;}
  .slider:before {position: absolute;content: "";height: 16px;width: 16px;left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
  input:checked + .slider.bg-purple {background-color:rgb(140,20,201);}
  input:checked + .slider.bg-yellow {background-color:#ffd93d;}
  input:focus + .slider.bg-purple { box-shadow: 0 0 1px rgb(140,20,201);}
  input:focus + .slider.bg-yellow { box-shadow: 0 0 1px #ffd93d;}
  input:checked + .slider:before {-webkit-transform: translateX(16px);-ms-transform: translateX(16px);transform: translateX(30px);}
  /* Rounded sliders */
  .slider.round {border-radius: 34px;}
  .slider.round:before {border-radius: 50%;}

  /* switch.small variant */
.switch.small {width: 38px; height: 18px;}
.switch.small .slider:before {width: 12px; height: 12px; left: 3px; bottom: 3px;}
.switch.small input:checked + .slider:before {-webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px);}


/*login scherm*/
.overlay{position:absolute; top:0; left:0; width: 100%; height:100%; background:white; opacity:0.90;}
.background img{width: 100%; height: 100%; object-fit:cover;}
section.login .content{overflow:unset; grid-row-start:3; z-index:1000;}
section.login .background{width: 100%; height: 100%; position:absolute; top:0; left:0; border-radius:15px; z-index:0;}
section.login .overlay{border-radius:15px;}
.sidebar.login form{width:100%; box-sizing:border-box; padding:0 12px;}
.sidebar.login{grid-template-rows:200px auto 24px;}

.sidebar.login .input{display:block; margin-bottom:12px;}
.sidebar
.sidebar.login #pw i{cursor:pointer;}
.sidebar.login .input input{font-size:1.4rem !important;}
.sidebar.login .input label{margin: 0 auto 4px 0;}
.sidebar .logo.login{width: 200px; height:90px; margin: auto auto 24px auto;}

.mobile-overlay{display:none;}

/*formulier velden cms opmaak*/
#fields{display:grid; grid-template-columns:1fr; gap:24px;}
#fields .field{display:grid; grid-template-columns:repeat(6,1fr); row-gap:12px;}
#fields .field .panel{display:none;}
#fields .field .panel.visible{display:block;}
#fields .fieldbutton{margin:auto 0 auto auto;}
#fields .field fieldset{background:rgba(255,232,99,0.1)}
#fields .field .frm-controls{display:flex; gap:12px; justify-content:flex-end;}
#fields .field .frm-controls .controls{display:flex; gap:12px; justify-content:flex-end; background:#f1f1f1; border-radius:4px; padding:4px;}

/*editor top bar*/
.editor-top{display:grid; grid-template-columns:max-content auto max-content; gap:24px;}
.editor-top h1{margin-bottom:unset; color:#4e0b70; line-height:48px;}
.editor-top #website{max-width:80%; height:100%; border:none; font-size:1.8rem; font-family:'greycliff-cf', sans-serif; color:#707070;}
.editor-top .user{display:grid; grid-template-columns:24px max-content; column-gap:12px;}
.editor-top .user .username{font-family:'greycliff-cf', sans-serif;  font-size:1.6rem; font-weight:700; color:#707070;}
.editor-top .user .username span{display:block; font-family:'greycliff-cf',sans-serif; font-size:1.4rem; font-weight:400;}
.editor-top .user .notifications{cursor:pointer;}
.editor-top .user .notifications,
.editor-top .user a{margin: auto 0;}
.editor-top .user i{color:#4e0b70;}
.editor-top .user .avatar{width: 48px; height: 48px; margin: auto 0;}
.editor-top .user .avatar img{width:100%; height:100%; object-fit:contain; border-radius:50%;}

/*editor-menu*/
.editor-menu{width: 100%; border-radius:10px; background:#f8f8f8; padding:8px; min-height:51px;}
.editor-menu .button.small{margin-right:12px; width:unset !important; height:unset !important;}
.editor-menu .button i{margin: 0 12px 0 0; font-size:1.8rem; width:18px !important; height:18px !important;}
.editor-menu .button.on{color:white !important; background:#8c14c9 !important;}
.editor-menu .button.hide{visibility:hidden; display:none;}

/*editor content scroll bar*/
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background-color:#ebebeb; -webkit-border-radius:10px; border-radius:10px;}
::-webkit-scrollbar-thumb{-webkit-border-radius:10px; border-radius:10px; background:rgb(192,192,192);}


/*page editor*/
.page-editor{display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(12, 1fr); gap:24px; row-gap:12px;}
.stripes{display:grid; grid-template-columns:1fr; row-gap:12px;}
.stripe{display:grid;grid-template-columns:repeat(12, 1fr); gap:24px; row-gap:12px; box-shadow:0 3px 6px rgba(0,0,0,0.01);}
 .stripe-controls{display:flex; gap:12px; justify-content:flex-end;}
 .add-bg,
 .stripe-controls .stripe-action{display:flex; gap:12px; justify-content:flex-end; background:#f1f1f1; border-radius:4px; padding:4px;}
 .stripe-blocks{display:grid; grid-template-columns:repeat(12, 1fr); gap:24px;}
 .stripe-blocks .no-blocks,
 .stripe-blocks .stripe-block{min-height:96px; position: relative; border-radius:5px; background:rgba(98,173,233,0.1);}
 .stripe-blocks .no-blocks{padding:12px; background:rgba(177,177,177,0.1) !important;}
 .stripe-blocks .slider-preview .block-content,
 .stripe-blocks .stripe-block .block-content{padding:12px; padding-bottom:64px;}
 .stripe-blocks h1{margin-bottom:32px;}
  .stripe-blocks h2{margin-bottom:24px;}
   .stripe-blocks h3{margin-bottom:16px;}
    .stripe-blocks h4{margin-bottom:12px;}
     .stripe-blocks h5{margin-bottom:12px;}
     .stripe-blocks .block-content blockquote{border-left:2px solid #8c14c9; padding-left:8px; font-style: italic;}
     .stripe-blocks .block-content a{text-decoration:underline; color:#8c14c9;}
 .stripe-blocks .stripe-block .block-content ul,
 .stripe-blocks .stripe-block .block-content ol{list-style: disc outside; margin: 0 0 30px 20px;}
 .stripe-blocks .stripe-block .block-content img{width: 100%; height: 100%; object-fit:cover;}
 .stripe-blocks .stripe-block .block-action{display:flex; justify-content:flex-end; gap:4px; position:absolute; bottom:8px; right:8px; padding:4px; background:#f1f1f1; border-radius:4px;}
.stripe-block .block-type{background:rgba(140,20,201,0.8); position:absolute; bottom:8px; left:8px; font-size:1.2rem; font-style:italic; color:white; display:inline-block; width:fit-content; padding:4px; border-radius:4px;}



.slider-preview{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; padding:24px;}
.slider-preview{position: relative;}
.slider-preview .block-content{background:white; z-index:100;}
.slider-preview .block-content .buttons{margin-top:24px;}
.slider-preview .background-image{width: 100%; height:100%; position:absolute; left:0; right:0; z-index: 0;}
.slider-preview .background-image img{width: 100%; height: 100%; object-fit:cover;}


/*pop-up*/
.pop-up{position:fixed; display:none; width:100vw; height:100vh; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:1000;}
.pop-up .message.edit{background:white;}
.pop-up .message{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:24px; background:white; border-radius:8px; max-height:80vh; max-width:70vw; overflow-y:scroll;}
.pop-up .message.edit{width:80vw; display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:max-content; gap:24px; height:100%;}
.pop-up .message.edit .input.input-grid{grid-template-columns:150px auto;}
.pop-up .message .button{margin-top:24px; min-width:115px; height:unset; margin-top:unset; line-height:19px;}

/*pop-up editor*/


.ck.ck-editor__editable_inline{border: 1px solid rgba(98,173,233,0.1) !important;}
.ck.ck-editor__editable_inline *{font-family:'greycliff-cf',sans-serif !important;}
.ck.ck-editor__editable_inline ul,
.ck.ck-editor__editable_inline ol{list-style:disc outside; margin: 0 0 24px 16px;}
.ck-content blockquote{border-left:2px solid #8c14c9 !important; padding-left:8px !important; font-style: italic !important;}
.ck.ck-toolbar{border: 1px solid rgba(98,173,233,0.1) !important;}
.ck.ck-toolbar__separator{background: rgba(98,173,233,0.1) !important;}
.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{box-shadow:unset !important;}
.ck.ck-editor__editable_inline>:last-child{margin-bottom:24px !important;}

/*Dashboard cards*/
.card{display:grid; grid-template-columns:repeat(6, 1fr); border-radius:8px; padding:24px; box-shadow:0  3px 6px rgba(0,0,0,0.16); position: relative;}
.card:hover{box-shadow: 0 3px 6px rgba(0,0,0,0.4);}
.card.wide{grid-template-columns:repeat(7,1fr);}
.card h3 i{margin-right:24px; height:24px; width:24px;;}
.card a:hover{text-decoration:underline; color:#f5bd1f;}
.card a:hover:after{content:'\2192';}
.card .url{margin-top:24px;}
.card:hover .url{color:#8c14c9;}
.card .url span{font-size:inherit; vertical-align:middle; margin-right:12px;}
.card .action{display:flex; justify-content:flex-start; margin-top:12px;}
.card .action.side{justify-content:flex-end; margin-top:unset;}
.card .action a{margin-right:12px;}
.card .action a:last-of-type{margin-right:unset;}
.card .action a:hover{text-decoration:unset;}
.card .action a:hover:after{content:none;}
.card .site-icons{position:absolute; bottom:24px; right:24px; width:24px; height: 24px; display:flex; justify-content:flex-end;}
.card .site-icons img{width: 100%; height: 100%; object-fit:contain;}
.card .site-lang{width:32px; height:32px; margin: 0 0 0 auto;}
.card .site-lang  img{width: 100%; height: 100%; object-fit:contain;}

/*accordion element*/
.accordion-block{display:block;}
.page{background:#dedede; color:#444444; padding:8px; width:100%; text-align:left; border:none; outline:none; transition:0.4s; display:grid; grid-template-columns:24px auto 350px max-content; gap:24px; line-height:48px; max-height:64px; border-radius:5px; margin-bottom:12px;}
.page.level-2{background:#e7e7e7; margin-left:16px; width:calc(100% - 16px);}
.page.level-3{background:#f1f1f1; margin-left:34px; width:calc(100% - 34px);}
.page.level-4{background:#fbfbfb; margin-left:50px; width:calc(100% - 50px);}
.page.hide{display:none;}
.page.active, .page:hover{background:rgba(140,23,123,0.1) !important;}
.page .page-title{font-family:'greycliff-cf', sans-serif; font-size:1.6rem; font-weight:700;}
.page .page-url{color:rgb(26,200,233); font-weight:700;}
.page .page-action{display:flex; justify-content:center; align-items:center;}
.page .page-action .button{margin-right:12px;}
.page .page-action .button:last-child{margin-right:unset;}
.element-status{margin: auto; font-size:1.8rem;}
.element-status:hover{cursor:pointer;}

/*table*/
.table-container{overflow-x:auto;}
table{width:100%; border-collapse:collapse; table-layout:auto;}
table td, th{white-space:nowrap; min-width:max-content;}
table tr:first-of-type{border-radius:8px;}
table th{text-align:left; background: rgb(177,177,177,0.1);}
table th,tr,td{padding:2px 8px; height:50px;}
table tr:nth-child(odd):not(tr:first-child){background:rgba(165,220,83,0.1);}
table tr:hover:not(tr:first-child){background:unset; background:rgba(140,23,123,0.1) !important;}
table th:first-child {border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
table th:last-child {border-bottom-right-radius: 10px; border-top-right-radius: 10px; text-align:right;}
table td:first-child {border-top-left-radius: 10px; border-bottom-left-radius: 10px; font-weight:700;}
table td:last-child {border-bottom-right-radius: 10px; border-top-right-radius: 10px; text-align:right; }
table th,
table td{min-width:100px;}
table th.thtd-fill,
table td.thtd-fill{width:50%;}


table td .redirection-action{display:flex; justify-content:flex-end;}
table td .redirection-action .button{cursor:pointer;}
table td .redirection-action .button{margin-right:12px;}
table td .redirection-action .button:last-child{margin-right:unset;}
table td .redirection-action .button i{line-height:50px;}
table td i{margin-right:8px;}
table .sticker{pointer-events:none;}
table .furl{color:rgb(255,217,61); text-decoration:underline; font-weight:700;}
table .durl{color:rgb(26,200,233); text-decoration:underline; font-weight:700;}

/*table velden opties*/
.show-more{display:none;}
.show-more.active{display:grid; grid-template-columns:repeat(6,1fr); gap:12px;}
.field-action{display:flex; justify-content:flex-end;}
.field-action .button{margin-right:8px;}
.field-action .button:last-child{margin-right:unset;}

/*popup*/
.popup{position:fixed; display:none; width:100vw; height:100vh; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:1000;}
.popup .message.edit{background:white;}
.popup .message{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:24px; background:white; border-radius:8px; max-height:80vh; max-width:70vw;}
.popup .message .close{position:absolute; top:6px; right:6px; cursor: pointer;}
.popup .message .button{margin-top:24px; min-width:115px; height:unset; margin-top:unset; line-height:19px;}
.popup-img{width: 113px; height: 120px; position:absolute; bottom:-5px; right:-5px; z-index:-1;}
.popup-img img{width: 100%; height: 100%; object-fit:cover; }

/**
tmp sander
*/

.file-uploader {

    padding: 20px 8px;
    text-align: center;
    cursor: pointer;
}

.file-uploader.dragover {
    border-color: #8c14c9;
    background-color: #f0f8ff;
}

.file-uploader i.material-symbols-outlined {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.file-uploader p {
    margin: 0;
    font-size:1.4rem;
    color: #352d25;
}

.hidden {
    display: none;
}



/* max-screen 1220*/
@media only screen and (max-width:1220px)
{
   
  h1{font-size:2.2rem;}
  h2{font-size:2.0rem;}

  main{grid-template-columns:150px 1fr;}

  .sidebar{width:150px;}
  .sidebar .logo{width: 150px;}
  .sidebar nav ul li a{font-size:1.2rem;}
  .sidebar .logo.login{width: 150px;}
  .sidebar.login form{padding:unset;}
  .sidebar.login .input input{font-size:1.2rem !important;}

  section{padding:24px;}
  section .content{padding-right:12px;}
  section .ct-grid{gap:12px;}

  .button.small{padding:8px;}
  .button{padding:8px 12px;}


   
.form-grid{gap:12px;}
.form-grid h3{margin-top:unset;}
.form-grid h3.col-6,
.form-grid h3.col-4{grid-column:span 12;}

.input.switch-grid{grid-template-columns:auto auto;}
.input.input-grid{grid-template-columns:1fr 2fr;}


.switch {width: 27px; height: 12px; margin:auto 0;}
.slider:before {position: absolute;content: "";height: 8px;width: 8px;left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider:before {transform: translateX(15px);}
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}

fieldset .col-1,
fieldset .col-2{grid-column:span 3;}
fieldset{padding:8px;}
fieldset.col-4,
fieldset.col-6,
fieldset.col-8{grid-column:span 6;}

.editor-top .user .username{font-size:1.4rem;}
.editor-top{gap:8px;}
.editor-menu .button.small{margin-right:4px;}

.card{padding:18px;}
.card .col-4{grid-column:span 4;}
.card h3 i{margin-right:12px;}

.col-st-1,
.col-st-2,
.col-st-3,
.col-st-4,
.col-st-5,
.col-st-6,
.col-st-7,
.col-st-8,
.col-st-9,
.col-st-10,
.col-st-11,
.col-st-12{grid-column-start:unset;}

.row-st-1,
.row-st-2,
.row-st-3,
.row-st-4,
.row-st-5,
.row-st-6,
.row-st-7,
.row-st-8,
.row-st-9,
.row-st-10,
.row-st-11,
.row-st-12{grid-row-start:unset;}

 .stripe{padding:unset; gap:12px;}
 .stripe-blocks{gap:12px;}
 .stripe-blocks .stripe-block .block-content{padding:12px; padding-bottom:32px;}
.stripe-blocks .stripe-block .block-action .reference{display:none;}

.popup .message{max-width: 80vw; width:80vw;}

}