:root {
    --ila-cookieb-margin: .25rem;
    --ila-cookieb-padding-x: 1rem;
    --ila-cookieb-padding-y: .3rem;
    --ila-cookieb-font-white: #ffffff;
    --ila-cookieb-button-border-color: #001E62;
    /* These are echoed here to provide non-toolkit sites consistent style: */
    --ila-cookieb-border-gray: #707070; /* from toolkit v2 --il-gray-2 */
    --ila-cookieb-button-blue: #13294b; /* from toolkit v2 --il-blue */
    --ila-cookieb-button-background-color: #ffffff; /* white */
    --ila-cookieb-font-sans: "Source Sans", sans-serif;
    --ila-cookieb-button-foreground-color: #13294b; /* from --il-blue */
    /* https://brand.illinois.edu/visual-identity/color */
    --ila-cookieb-small-link-focus: #c84113; /* from -il-altgeld */
}

.cookieb-holder {
    position: fixed;
    bottom: 0;
    left: 0rem;
    width: auto;
    z-index: 29000; /* Some University site headers (or parts of headers) have z-index 10,000, displaying under can cause mixed content display */
}

.cookieb-holder h2,
.cookieb-holder p{
    color: var(--ila-cookieb-font-white);
    font-family: "Source Sans", sans-serif;
}

.cookieb-slideover-holder h2,
.cookieb-slideover-holder h3,
.cookieb-slideover-holder p{
    font-family: "Source Sans", sans-serif;
}

#ilaCookieSlideover {
    z-index: 30000; /* Some University site headers (or parts of headers) have z-index 10,000, displaying under can cause mixed content display */
}

.ila-cookieb__cookieb {
    border: 1px solid var(--ila-cookieb-border-gray);
    margin: var(--ila-cookieb-margin);
    padding: var(--ila-cookieb-padding-y) var(--ila-cookieb-padding-x);
    background-color: white;
    position: relative;
}

.ila-cookieb__h3 {
    margin: 0.5rem 0 auto auto;
}

.ila-cookieb__content p {
    margin: 0;
    padding: 0;
    line-height: 1.5rem;
    width: 60%;
}

.ila-cookieb__content {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
}

.ila-cookieb__actions {
    padding-top: 1rem;
    padding-left: 1rem;
}

.ila-cookieb__button {
  --color-primary: #fff;
  --color-secondary: var(--ila-cookieb-button-blue);
  background-color: var(--ila-cookieb-button-background-color);
  color: var(--ila-cookieb-button-foreground-color);
  display: inline-block;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: .25em;
  border: 2px solid var(--ila-cookieb-button-border-color);
  font: 700 1.1875rem/1.25rem var(--ila-cookieb-font-sans);
  letter-spacing: .01em;
  transition: background-color .3s;
  cursor: pointer;
  margin: 0 0 .5rem .5rem;
}

.ila-cookieb__button-center-slideover {
    display: flex;
    justify-content: center;
}

.ila-cookieb__button-close-slideover:hover,
.ila-cookieb__button-close-slideover:focus,
.ila-cookieb__button-close-slideover:active {
    transition: background-color 0.3s;
    background-color: var(--ila-cookieb-accent);
    color: var(--ila-cookieb-hover-button-font);
}

.ila-cookieb__close-button {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: calc(var(--ila-cookieb-padding-y) - 5px);
    margin-right: calc(var(--ila-cookieb-padding-x) - 5px);
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ila-cookieb-font-white);
}

.ila-cookieb__close-button:hover,
.ila-cookieb__close-button:focus,
.ila-cookieb__close-button:active {
    transition: background-color 0.3s;
    background-color: var(--ila-cookieb-accent);
    color: var(--ila-cookieb-hover-button-font);
}

.ila-cookieb__button:hover,
.ila-cookieb__button:focus,
.ila-cookieb__button:active {
    background-color: var(--ila-cookieb-accent);
    color: var(--ila-cookieb-hover-button-font);
}

.ila-cookieb__close-icon {
    padding: var(--ila-cookieb-padding-y) var(--ila-cookieb-padding-x);
    font-size: 25px;
}

.ila-cookieb.ila-cookieb--closed {
    transition: opacity 0.25s ease-in-out, visibility 0.25s, order 1s;
    visibility: hidden;
    opacity: 0;
    order: 1;
    position: absolute;
}

@media (prefers-reduced-motion) {
    .ila-cookieb.ila-cookieb--closed {
        visibility: hidden;
        opacity: 0;
        order: 1;
        position: absolute;
    }
}

/* `About Cookies` slide out */

.ila-cookieb__slide_small {
    font-size: 0.8em;
    line-height: 1.2em;
}

.ila-cookieb__pointer_hover {
    cursor: pointer;
}

.ila-cookieb__small-font-link:hover,
.ila-cookieb__small-font-link:focus,
.ila-cookieb__small-font-link:active {
    color: var(--ila-cookieb-small-link-focus);
}

/* allow buttons to slide underneath text on thin screens */

@media (max-width: 1030px) {
    .ila-cookieb__actions {
        padding-top: .5em;
        padding-left: 1em;
        flex-direction: column;
        align-items: flex-start;
    }

    .ila-cookieb__button {
        margin: .5rem .5rem .5rem .5rem;
    }

    .ila-cookieb__content p {
        width: 100%;
    }
}

/* Make Slideout wider on thin screens */

@media (max-width: 1030px) {
    .ila-slideover--left .ila-slideover__slideover {
        right: 5% !important;
    }
}

/* UIUC Branding */

html body .ila-cookieb__cookieb {
    /* html body makes this style stronger, but still allows !important to override */
    color: var(--ila-cookieb-font-white);
    background-color: var(--ila-cookieb-main);
}

.ila-cookieb__cookieb a {
    color: var(--ila-cookieb-font-white);
}

/* Hide Cookie Banner when Printing */

@media print {
    .ila-cookieb_no-printing {
        display: none !important;
    }
}

.ila-cookieb__popup-info span {
    display: none;
}

.ila-cookieb__popup-info-link:hover,
.ila-cookieb__popup-info-link:focus,
.ila-cookieb__popup-info-link:active {
    color: var(--ila-cookieb-focused-link-color);
}

.ila-cookieb__popup-info-slideout-link:hover,
.ila-cookieb__popup-info-slideout-link:focus,
.ila-cookieb__popup-info-slideout-link:active {
    color: var(--ila-cookieb-slideout-focused-link-color);
}

.ila-cookieb__popup-info:hover span,
.ila-cookieb__popup-info:focus span,
.ila-cookieb__popup-info:active span {
    display: block;
    position: absolute;
    bottom: 2.5rem;
    left: 10rem;
    padding: 1rem;
    background-color: var(--ila-cookieb-main);
    color: var(--ila-cookieb-hover-text-font);
    border-style: solid;
    border-color: var(--ila-cookieb-accent);
}

@media (max-width: 1030px) {

    .ila-cookieb__popup-info:hover span,
    .ila-cookieb__popup-info:focus span,
    .ila-cookieb__popup-info:active span {
        bottom: 7rem;
    }
}

.ila-cookieb__popup-info-slideout span {
    display: none;
}

.ila-cookieb__popup-info-slideout:hover span,
.ila-cookieb__popup-info-slideout:focus span,
.ila-cookieb__popup-info-slideout:active span {
    display: block;
    position: absolute;
    bottom: auto;
    left: 10rem;
    padding: 1rem;
    background-color: var(--ila-cookieb-main);
    color: var(--ila-cookieb-hover-text-font);
    border-style: solid;
    border-color: var(--ila-cookieb-accent);
}

@media (max-width: 1030px) {

    .ila-cookieb__popup-info-slideout:hover span,
    .ila-cookieb__popup-info-slideout:focus span,
    .ila-cookieb__popup-info-slideout:active span {
        bottom: auto;
    }
}

.ila-cookieb-slideover__header {
    border-color: var(--ila-cookieb-line-color) !important;
}

/* Used to enable or disable scroll on the page */

.ila-cookieb-noscroll {
    overflow: hidden;
}

/* Used to enable or disable a modal background on the page  */

.ila-cookieb-modal {
    position: fixed;
    z-index: 2000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #24242496;
}