.cookiesnote-wrapper {
  --c-white:#ffffff;
  --c-grey:#D4D4D4;
  --c-dark:#3b3b3b;
  --c-green:#0B936E;
  --c-red:#BD1818;
  --c-brown-light:#DF9C81;
  
  margin: 0; padding: 24px 0;
  height: 100%; width: 100%;
  position: fixed; bottom: 0; z-index: 11; overflow: hidden;
  display: none; align-items: center; justify-content: center;
  background-color: rgba(13, 16, 46, 0.7);
}

.cookiesnote-wrapper.is_visible { display: flex; }
.cookiesnote-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    padding: 18px;
    position: relative;
    width: 100%; max-width: 500px;
    font-size: 14px;
}
.cookiesnote-heading { font-size: 20px; margin-bottom: 18px; }
.cookiesnote-description {}
.cookiesnote-description p:last-child { margin-bottom: 0; }
.cookiesnote-actions { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }

.cookiesnote-settings { text-align: center; padding-top: 15px; border-top: 1px solid var(--c-grey);  }
.cookiesnote-settings button { outline: none; border: none; padding: 0; background-color: transparent; font-weight: 300; opacity: 0.8;  }
.cookiesnote-settings button .label { text-decoration: underline; }

.btn-cookie { 
  transition:all 0.2s; padding: 0px 10px; display: inline-flex; align-items: center; gap: 0 6px; height: 38px; 
  background-color: var(--c-white); border: 2px solid transparent; border-radius: 3px; font-weight: 400;  
  font-size: 14px; 
}
.btn-cookie:hover { opacity: 0.8; }
.btn-cookie .icon { font-size: 18px;  }
.btn-cookie .label {}
.btn-cookie-success { border-color: var(--c-green); background-color: var(--c-green); color: var(--c-white); }
.btn-cookie-success.outlined { background-color: white; color: var(--c-green); }
.btn-cookie-danger { border-color: var(--c-red); color: var(--c-red); }
.btn-cookie-default { border-color: var(--c-dark); color: var(--c-dark); }

#cookies_intro,
#cookies_settings { transition:opacity 0.2s; }

.cookiesnote-options { overflow: hidden; overflow-y: auto; max-height: 46vh;  }
.cookiesnote-options dl.cook-control:last-of-type { border-bottom: 1px solid var(--c-grey); }

.cook-control-wrapper { padding-top: 18px; }

dl.cook-control { padding: 15px 0; margin-bottom: 0; border-top: 1px solid var(--c-grey);  }
dl.cook-control dt { display: flex; align-items: center; gap: 0 15px; margin-bottom: 5px;  }
dl.cook-control dt .cook-label { margin-bottom: 0; font-size: 16px; }
dl.cook-control dt .cook-label-hint { font-size: 9px; color: var(--c-green); margin-left: 10px; text-transform: uppercase; text-decoration: underline; transform: translateY(-1px); display: inline-block; }
dl.cook-control dt .cook-toggle {}
dl.cook-control dd { font-size: 13px; font-style: italic; opacity: 0.8; }

.c-toggle {  cursor: pointer; display: block; width: 47px; height: 26px; border-radius: 15px; position: relative; overflow: hidden; }
.c-indicator {
  background-color: var(--c-grey);
  background: linear-gradient(180deg, var(--c-grey) 0%, #e5e5e5 100%);
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;
  transition: background-color .25s ease;
  box-shadow: inset 0px 4px 8px 4px rgba(0,0,0,0.15); overflow: hidden;
}
.c-indicator::after {
  background-color: var(--c-white);
  background: radial-gradient(2em 1.5em at 50% 35%,#ffffff 15%,#fff0), radial-gradient(1.5em 2.5em at 75% 40%,#ffffff 15%,#363636), radial-gradient(100% 100% at 50% 33%,#6e6e6e 25%,#6e6e6e 50%);
  content: ''; border-radius: 50%;
  width: 20px; height: 20px;
  position: absolute; top: 3px; left: 3px;
  transition: transform .25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.c-toggle [type="checkbox"] { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden; }
.c-toggle [type="checkbox"]:checked:disabled ~ .c-indicator { 
  cursor: not-allowed; background: var(--c-brown-light);  
  /* background-image: url('/images/cookie-toggle.svg'); background-repeat: no-repeat; background-position: center left 5px; background-size: auto 78%; */
}
.c-toggle [type="checkbox"]:checked ~ .c-indicator::after { transform: translate(99%, 0); }
.c-toggle [type="checkbox"]:checked ~ .c-indicator { background: var(--c-green); }

/* COOKIE TOOLBOX */
dl.cookie-status { 
  display: inline-block; position: fixed; left: 5px;  z-index: 10;
  top: 50%; transform: translateY(-50%);
  background: #FEFCFC; padding: 8px 10px; border-radius: 4px;  margin: 0;
  box-shadow: 0 0px 8px 2px rgba(0,0,0,0.1);
  display: none;
}
dl.cookie-status dt { font-size: 12px; text-transform: uppercase; font-weight: 600; margin-bottom: 5px;  }
dl.cookie-status dd { font-size: 13px; }
dl.cookie-status dd ul { margin: 0; padding: 0; list-style: none none; list-style-position: inside;  }
dl.cookie-status dd ul li { display: flex; align-items: center; gap: 0 6px; }
dl.cookie-status dd ul li .icon { color: #8B3E1F; font-size: 16px;  }
dl.cookie-status dd ul li .icon-green { color: #216e0f; }
dl.cookie-status dd ul li .label {}
dl.cookie-status dd hr { margin: 6px 0; }
dl.cookie-status dd button { padding: 0; color:#BD1818; border: none; outline: none; background-color: transparent; font-weight: 300;  }
dl.cookie-status dd button .label { }
