/*
We declare all variables here as default so that they are easy to override...
*/
/* Border, shadows, ... */
/*
Variables that begin with $var- should NEVER be used directly in CSS rules.
they should only be included via the "@include var(property, var-name)"
mechanism.
*/
/* Border styles */
/* Cookie notice positioning */
/* Text colors */
/* Font Families */
/* White */
/* Differently shaded colors */
/*
Use @include var(property, varname) to include a variable, e.g.

    @include var(background-color, white1);

to create a white background.
*/
/* Spacing */
/* Breakpoints */
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description p,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description strong,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description h1,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description h2,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description ul,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description li,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table {
  color: #bbb;
  color: var(--dark3, #bbb);
}
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table {
  display: table;
  width: 100%;
  border-style: solid;
  border-style: var(--border-style, solid);
  border-color: #bbb;
  border-color: var(--dark3, #bbb);
  border-width: 1px;
  border-width: var(--border-width, 1px);
}
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table > .tr {
  display: table-row;
}
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table > .tr > .th {
  white-space: nowrap;
  font-weight: bold;
}
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table > .tr > .th,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table > .tr > .td {
  padding: 0.25rem 0.5rem;
  display: table-cell;
  border-bottom-style: solid;
  border-bottom-style: var(--border-style, solid);
  border-bottom-color: #bbb;
  border-bottom-color: var(--dark3, #bbb);
  border-bottom-width: 1px;
  border-bottom-width: var(--border-width, 1px);
  border-left-style: solid;
  border-left-style: var(--border-style, solid);
  border-left-color: #bbb;
  border-left-color: var(--dark3, #bbb);
  border-left-width: 1px;
  border-left-width: var(--border-width, 1px);
}
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table > .tr:last-child > .th,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table > .tr:last-child > .td {
  border-bottom: none;
}
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table > .tr > .th:first-child,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-list-description .table > .tr > .td:first-child {
  border-left: none;
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by.d-flex {
  display: flex;
  justify-content: center;
}
.klaro .cookie-modal .cm-modal .cm-footer > span:last-child {
  display: block;
  font-size: 0.8em;
  padding-top: 4px;
  text-align: right;
  padding-right: 8px;
  color: #888;
  color: var(--dark2, #888);
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
  font-size: inherit;
  padding-top: 0;
  padding-right: 0;
}


.klaro h2#id-cookie-title {
  /*display: none;*/
  color: #008519;
  text-transform: none;
  margin-top: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: normal;
  margin-left: 11px;
}

.separator {
  margin: 0 5px; /* Adjust the spacing as needed */
}
.slider-active-red{
  background-color: #e88484 !important;
}

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive styles for smaller screens (e.g., mobile devices) */
@media only screen and (max-width: 430px) {

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok{
    display: block;
    a.cm-toggle-all{
      width: 100%;
    }
    div.cn-buttons {
      width: 100%;
      button{
        width: 100%;
      }
    }
  }
}