@import url('http://fonts.cdnfonts.com/css/helvetica-neue-9');

#ccc {
  --main-color: #5357fd;
}

#ccc-icon {
  fill: var(--main-color) !important;
}

#ccc p {
  font-family: 'Helvetica 45 Light', sans-serif;
}

#ccc-title {
  color: #000 !important;
  font-size: 26px !important;
  font-weight: 300 !important;
}

.ccc-notify-text {
  max-width: 50% !important;
}

#ccc-notify p {
  padding: 0;
  font-size: 12px !important;
}

.ccc-notify-buttons {
  margin-top: 0 !important;
}

#ccc-notify-accept,
#ccc-notify-reject,
.ccc-notify-button.ccc-notify-link {
  border-radius: 0 !important;
  width: 170px;
  border: 2px solid #fff !important;
  text-decoration: none;
  margin: 0 20px !important;
}

#ccc-notify-accept {
  background-color: #fff !important;
}

#ccc-notify #ccc-notify-accept span {
  color: var(--main-color) !important;
}

#ccc-content {
  max-width: 740px !important;
  max-height: 700px !important;
  border-radius: 0 !important;
}

.ccc-panel {
  left: 50px !important;
  right: 50px !important;
  top: 50px !important;
  bottom: 50px !important;
}

#ccc-recommended-settings {
  background: var(--main-color) !important;
  border-radius: 0 !important;
  border: none !important;
  width: 170px;
  margin-right: 50px !important;
}

#ccc-content .ccc-notify-button span {
  color: #fff !important;
}

#ccc-reject-settings {
  border: 1px solid var(--main-color) !important;
  border-radius: 0 !important;
  width: 170px;
}

#ccc-content #ccc-reject-settings span {
  color: #000 !important;
}

#ccc hr[aria-hidden='true'] {
  background-color: var(--main-color) !important;
  margin: 20px 0;
}

#ccc-necessary-title {
  font-size: 20px !important;
  font-weight: 300 !important;
}

.optional-cookie-header {
  font-size: 20px !important;
  font-weight: 300 !important;
}

#ccc-info {
  display: none !important;
}

.optional-cookie-header ~ p {
  max-width: 70% !important;
}

#ccc-optional-categories hr:last-of-type {
  display: none;
}

.checkbox-toggle {
  transform: translateY(50px);
  border-radius: 0 !important;
  background-color: #fff !important;
  border: 1px solid var(--main-color) !important;
  outline-color: var(--main-color) !important;
}

.checkbox-toggle-toggle {
  right: 0 !important;
  left: auto !important;
  background-color: rgba(52, 66, 134, 0.37) !important;
  border-radius: 0 !important;
}

#ccc .checkbox-toggle--slider input:checked ~ .checkbox-toggle-toggle {
  right: 50% !important;
  left: auto !important;
}

#ccc-content span.checkbox-toggle-on,
#ccc-content span.checkbox-toggle-off {
  width: 88px !important;
  height: 35px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--main-color) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

#ccc-close svg path {
  fill: var(--main-color) !important;
}

#ccc-end {
  display: flex;
  justify-content: center;
  margin: 0 !important;
  padding-bottom: 50px;
}

#ccc-dismiss-button {
  margin: 20px 0 0 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: var(--main-color) !important;
  width: 177px;
}

#ccc-dismiss-button span {
  background: transparent !important;
  font-weight: 400 !important;
}

@media (max-width: 650px) {
  /* notify  */
  .ccc-notify-text {
    max-width: 100% !important;
  }

  #ccc-notify p {
    padding: 10px 30px 20px 30px;
    text-align: center !important;
    font-size: 12px !important;
  }

  .ccc-notify-buttons {
    margin-top: 0 !important;
    padding: 0 30px 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #ccc-notify-accept,
  #ccc-notify-reject,
  .ccc-notify-button.ccc-notify-link {
    width: 185px;
    height: 38px;
    font-size: 12px !important;
    margin: 8px 0 0 0 !important;
  }

  /* content  */

  #ccc-content {
    max-height: 630px !important;
  }

  .ccc-panel {
    left: 24px !important;
    right: 24px !important;
    top: 24px !important;
    bottom: 24px !important;
  }

  #ccc-button-holder {
    display: flex;
    justify-content: space-between;
  }

  #ccc-button-holder button {
    margin: 0 !important;
    width: 47%;
  }

  #ccc-title,
  #ccc-necessary-title,
  .optional-cookie-header {
    font-size: 16px !important;
  }

  #ccc p {
    font-size: 12px !important;
  }

  #ccc-recommended-settings,
  #ccc-reject-settings {
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #ccc-content .ccc-notify-button span {
    font-size: 12px;
  }

  .optional-cookie-header ~ p {
    max-width: 100% !important;
  }

  .checkbox-toggle {
    position: static !important;
    transform: translateY(0);
    width: 146px !important;
  }

  #ccc-content span.checkbox-toggle-on,
  #ccc-content span.checkbox-toggle-off {
    font-size: 12px !important;
  }

  #ccc-end {
    margin: 0 !important;
    padding-bottom: 30px;
  }

  #ccc-dismiss-button {
    width: 145px;
    height: 34px;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
}