.cm-modal.cm-klaro{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(1700px, 99%); 
  max-height: 85vh; 
  overflow-y: auto;

  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 20px 20px;       
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  z-index: 100000;
}

.cm-modal.cm-klaro::before{
  content: none;
}

body.klaro,
.klaro{
  background: transparent !important;
}

/* Switches */
.cm-modal.cm-klaro .cm-switch .slider{
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: #ccc; 
  position: relative;
  transition: background .2s ease;
}

/* UIT = half-checked (grijs) */
.cm-modal.cm-klaro .cm-list-input.half-checked + .cm-list-label .cm-switch .slider{
  background: #ccc !important;
}

/* AAN = geen half-checked (dus alleen cm-list-input) */
.cm-modal.cm-klaro .cm-list-input:not(.half-checked) + .cm-list-label .cm-switch .slider{
  background: #1d1d1d !important;
}

/* Bolletje */
.cm-modal.cm-klaro .cm-switch .slider::before{
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
}

/* Bolletje naar rechts als AAN */
.cm-modal.cm-klaro .cm-list-input:not(.half-checked) + .cm-list-label .cm-switch .slider::before{
  transform: translateX(22px);
}

/* Titel + Ondertitel */

.cm-modal.cm-klaro .cm-header .title{
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #000;
  margin: 0 0 6px !important;
}
.cm-modal.cm-klaro .cm-header p{
  font-size: 13px !important;
  margin: 0 0 14px !important;
  color: #000 !important;
}

/* Basis = zwart */
.cm-modal.cm-klaro .cm-list-label{
  color: #000;
  font-weight: 600;
}

/* UIT = half-checked (zwart expliciet) */
.cm-modal.cm-klaro .cm-list-input.half-checked + .cm-list-label{
  color: #000 !important;
}

/* AAN = geen half-checked → groen */
.cm-modal.cm-klaro .cm-list-input:not(.half-checked) + .cm-list-label{
  color: #ff000 !important;
}

.cm-modal.cm-klaro .cm-services,
.cm-modal.cm-klaro .cm-services *,
.cm-modal.cm-klaro .cm-services .cm-list-title,
.cm-modal.cm-klaro .cm-services .purposes,
.cm-modal.cm-klaro .cm-services p,
.cm-modal.cm-klaro .cm-services span {
  color: #ff0000 !important;
}

/* BUTTONS */
.cm-modal.cm-klaro .cm-btn{
  padding: 10px  20px !important;   
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all .2s ease;
}

/* WEIGER (grijs) */

.cm-modal.cm-klaro 
.cm-btn.cm-btn-decline.cm-btn-danger.cn-decline{
  background: #f2f2f2 !important;
  color: #000 !important;
}

/* GESELECTEERDE (grijs) */

.cm-modal.cm-klaro 
.cm-btn.cm-btn-success.cm-btn-info.cm-btn-accept{
  background: #1d1d1d !important;
  color: #fff !important;
}

/* ACCEPTEER ALLE (rood) */

.cm-modal.cm-klaro 
.cm-btn.cm-btn-success.cm-btn-accept-all{
  background: #ff0000 !important;
  color: #000 !important;
}

/* Hover effect subtiel */
.cm-modal.cm-klaro .cm-btn:hover{
  opacity: .9;
}