:root {
  --border-radus: 3px;
  --space-unit: 0.5rem;
  --mds-spacing-xx-small: calc(0.25 * var(--space-unit));
  --mds-spacing-x-small: calc(0.5 * var(--space-unit));
  --mds-spacing-small: calc(0.75 * var(--space-unit));
  --mds-spacing-medium: calc(1 * var(--space-unit));
  --mds-spacing-large: calc(1.25 * var(--space-unit));
  --mds-spacing-x-large: calc(1.75 * var(--space-unit));
}

#sliding-popup,
.eu-cookie-withdraw-tab {
  background: black;
  color: white;
}

.eu-cookie-withdraw-tab {
  border-radius: var(--border-radus) var(--border-radus) 0 0;
  border-bottom: 0;
  padding: var(--mds-spacing-small) var(--mds-spacing-large);
}

.sliding-popup-bottom {
  box-shadow: rgb(151, 151, 153) 0 4px 8px 0;
  box-sizing: border-box;
  padding: var(--mds-spacing-x-large);
  right: 0;
}

/* Display input checkboxes inline. */
.eu-cookie-compliance-categories label {
  display: inline;
  margin-left: var(--mds-spacing-small);
}

#sliding-popup .popup-content {
  display: flex;
  flex-direction: column;
  gap: var(--mds-spacing-large);
  margin: 0;
}

#sliding-popup .popup-content a:visited,
#sliding-popup .popup-content a:link,
#sliding-popup .popup-content a:hover {
  color: white;
  text-decoration: underline;
}

#sliding-popup .popup-content #popup-text,
#sliding-popup .popup-content,
#popup-buttons {
  max-width: none !important;
}

#popup-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--mds-spacing-large);
  border-top: 1px solid white;
  padding-top: var(--mds-spacing-x-large);
  width: 100%;
  justify-content: space-between;
}

#eu-cookie-compliance-categories {
  display: flex;
  flex-direction: column;
  gap: var(--mds-spacing-large);
}

/* Button styling.*/
:where(.eu-cookie-withdraw-banner,
.eu-cookie-compliance-banner,
.eu-cookie-withdraw-button) button,
.eu-cookie-withdraw-button,
.eu-cookie-compliance-toggle-withdraw-banner {
  border: white 2px solid !important;
  border-radius: var(--border-radus) !important;
  background: black !important;
  color: white !important;
  padding: var(--mds-spacing-x-small) var(--mds-spacing-small);
}

:where(.eu-cookie-withdraw-banner,
.eu-cookie-compliance-banner) button:hover,
.eu-cookie-withdraw-button:hover,
.eu-cookie-compliance-toggle-withdraw-banner:hover {
  background-color: white !important;
  color: black !important;
  text-decoration: none!important;
}

.eu-cookie-compliance-default-button {
  background-color: white !important;
  color: black !important;
}

.eu-cookie-compliance-default-button:hover {
  background: black !important;
  color: white !important;
}

/* Adjust space between buttons */
.eu-cookie-compliance-categories-buttons {
  display: flex;
  gap: var(--mds-spacing-large);
}

/*
  Other D7 elements do not use responsive spacing.
  This button should look similar to the log in button on small and larger devices.
*/
.eu-cookie-withdraw-button,
.eu-cookie-compliance-toggle-withdraw-banner {
  padding: 8px;
  font-size: 14px;
  font-family: McGillSans-Regular, Arial, sans-serif;
}

/* Hide elements, including the tab. */
#popup-buttons,
.eu-cookie-compliance-more-button,
.eu-cookie-compliance-hidden,
.eu-cookie-withdraw-tab {
  display: none !important;
}

/* Define the width of the pop-up on larger displays. */

@media (min-width: 720px) {

  #sliding-popup {
    width: 300px;
  }

}

/* CUSTOM WP */
#popup-text p {
  margin: 0 0 1em;
}

/* MERGE OTHER CSS */

#sliding-popup {
  z-index: 99999;
  text-align: center;
}

.sliding-popup-bottom {
  position: fixed;
  bottom: 0;
}

.sliding-popup-top {
  position: relative;
}

#sliding-popup .popup-content {
  margin: 0 auto;
  max-width: 80%;
  /* display: inline-block; */
  text-align: left;
  width: 100%;
}

#sliding-popup .popup-content #popup-buttons {
  float: right;
  max-width: 40%;
}

#sliding-popup button {
  cursor: pointer;
}

#sliding-popup .popup-content #popup-text {
  float: left;
  max-width: 60%;
}

.eu-cookie-withdraw-tab {
  cursor: pointer;
}

.eu-cookie-withdraw-wrapper.sliding-popup-top,.eu-cookie-withdraw-wrapper.sliding-popup-top .eu-cookie-withdraw-banner {
  transform: scaleY(-1);
}

.eu-cookie-withdraw-tab {
  position: absolute;
  top: 0;
  transform: translate(-50%,-100%);
  left: 50%;
}

.eu-cookie-withdraw-wrapper.sliding-popup-top .eu-cookie-withdraw-tab {
  transform: translate(-50%,-100%) scaleY(-1);
}

@media screen and (max-width: 600px) {
  #sliding-popup .popup-content {
      max-width:95%;
  }

  #sliding-popup .popup-content #popup-text {
      max-width: 100%;
  }

  #sliding-popup .popup-content #popup-buttons {
      clear: both;
      float: none;
      max-width: 100%;
  }
}