:is(#promo_bar,#alert_banner) {
    background-color: var(--orange);
    color: black;
    font-size: 21px;
    line-height: 1.2;
    padding: var(--unit) 0;

    --closebuttonsize: 56px;
    --extsize: 18px;
}
#alert_banner.red {
    background-color: #FD4251;
}
#alert_banner.green {
    background-color: #00BA9E;
}
:is(#promo_bar,#alert_banner).notshown {
    display: none;
}

:is(#promo_bar,#alert_banner) .wrapper {
    display: flex; align-items: center;
}
:is(#promo_bar,#alert_banner) p { color: inherit; display: block; flex: 1; text-align: center; margin-left: calc(var(--unit) + var(--closebuttonsize));  }
#alert_banner p {   margin-left:0;  }
:is(#promo_bar,#alert_banner) a { color: inherit; font-weight: 700; }/**/
:is(#promo_bar,#alert_banner) button { width: var(--closebuttonsize); min-width: var(--closebuttonsize); height: var(--closebuttonsize);  margin-left: var(--unit); }



:is(#promo_bar,#alert_banner) strong {
    font-weight: 600;
}
:is(#promo_bar,#alert_banner) a {
    transition: all 0.2s ease; cursor: pointer;
    text-decoration: none; font-weight: 600;
    padding: 0 0;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 0 1px, 100% 1px;
    background-size: 100% 1px, 100% 1px;
    transition: background-size .2s;

}

:is(#promo_bar,#alert_banner) a:is(:hover,:focus-visible) {
    background-size: 100% 100%, 100% 100%; color: white; background-image: linear-gradient(var(--search-blue), var(--search-blue)), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));

}
:is(#promo_bar,#alert_banner) a:focus-visible {box-shadow: 0 0 0 1px var(--orange), 0 0 0 3px white; border-radius: 4px; }



:is(#promo_bar,#alert_banner) a[href]:not([href*="//teachingcouncil.ie"]):not([href*="//www.teachingcouncil.ie"])::after {
    display: inline-block; height:var(--extsize); width:var(--extsize); flex: 1; margin-left:4px; content:""; background-repeat: no-repeat; background-size: contain; background-position:right top;
    background-image: url('data:image/svg+xml;utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="%23000000" d="M14,3v2h3.6l-9.8,9.8l1.4,1.4L19,6.4V10h2V3 M19,19H5V5h7V3H5C4.5,3,4,3.2,3.6,3.6C3.2,4,3,4.5,3,5v14 c0,0.5,0.2,1,0.6,1.4C4,20.8,4.5,21,5,21h14c0.5,0,1-0.2,1.4-0.6C20.8,20,21,19.5,21,19v-7h-2V19z"/></svg>');


}
:is(#promo_bar,#alert_banner) a[href]:not([href*="//teachingcouncil.ie"]):not([href*="//www.teachingcouncil.ie"]):is(:hover,:focus-visible)::after {
    background-image: url('data:image/svg+xml;utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="%23FFFFFF" d="M14,3v2h3.6l-9.8,9.8l1.4,1.4L19,6.4V10h2V3 M19,19H5V5h7V3H5C4.5,3,4,3.2,3.6,3.6C3.2,4,3,4.5,3,5v14 c0,0.5,0.2,1,0.6,1.4C4,20.8,4.5,21,5,21h14c0.5,0,1-0.2,1.4-0.6C20.8,20,21,19.5,21,19v-7h-2V19z"/></svg>');
}


:is(#promo_bar,#alert_banner) button { display: block; background: transparent; border: 2px solid var(--black); border-radius: 50%; padding: 14px; cursor: pointer;}
:is(#promo_bar,#alert_banner) button:is(:hover,:focus-visible) { background:var(--hero-blue); }

:is(#promo_bar,#alert_banner) button::before { display: block;width: 24px; height: 24px; content:"";

    background-size: 24px 24px; background-repeat: no-repeat; background-position: center;

    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path class="st0" d="M10.4,12l-9.6,9.6l1.6,1.6l9.6-9.6l9.6,9.6l1.6-1.6L13.6,12l9.6-9.6l-1.6-1.6L12,10.4L2.4,0.8L0.8,2.4 L10.4,12z"/></svg>');
}
:is(#promo_bar,#alert_banner) button:is(:hover,:focus-visible)::before { background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="%23FFFFFF" d="M10.4,12l-9.6,9.6l1.6,1.6l9.6-9.6l9.6,9.6l1.6-1.6L13.6,12l9.6-9.6l-1.6-1.6L12,10.4L2.4,0.8L0.8,2.4 L10.4,12z"/></svg>'); }

:is(#promo_bar,#alert_banner) button:focus-visible {  box-shadow: 0 0 0 3px var(--orange), 0 0 0 5px white;   }

@media all and (min-width: 1200px) {
    :is(#promo_bar,#alert_banner) {
        font-size: 24px;

    }
}

@media all and (max-width: 899.98px) {
    :is(#promo_bar,#alert_banner) {
        font-size: 16px;
        --closebuttonsize:46px;
        --extsize:12px;
    }
    :is(#promo_bar,#alert_banner) p { margin-left: 0; text-align: left; }

    :is(#promo_bar,#alert_banner) button{   padding: 0 !important; position: relative; }

    :is(#promo_bar,#alert_banner) button::before {
        position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); }

}

#alert_banner i.icon { width: 48px; height: 48px; display: block; margin-right: var(--unit); background-size: contain; background-repeat: no-repeat; background-position: center;}
#alert_banner.red i.icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48"><path fill="%230B0C0C" d="M26,29h-4v-10h4M26,37h-4v-4h4M2,43h44L24,5,2,43Z"/></svg>');
}
#alert_banner.green i.icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48"><path fill="%230B0C0C" d="M22,34h4v-12h-4v12ZM24,18c.6,0,1-.2,1.4-.6s.6-.9.6-1.4-.2-1-.6-1.4-.9-.6-1.4-.6-1,.2-1.4.6-.6.9-.6,1.4.2,1,.6,1.4.9.6,1.4.6ZM24,44c-2.8,0-5.4-.5-7.8-1.6-2.4-1.1-4.6-2.5-6.4-4.3-1.8-1.8-3.2-3.9-4.3-6.4-1-2.4-1.6-5-1.6-7.8,0-2.8.5-5.4,1.6-7.8,1.1-2.4,2.5-4.6,4.3-6.4,1.8-1.8,3.9-3.2,6.4-4.3,2.4-1.1,5-1.6,7.8-1.6s5.4.5,7.8,1.6c2.4,1.1,4.6,2.5,6.4,4.3,1.8,1.8,3.2,3.9,4.3,6.4,1.1,2.4,1.6,5,1.6,7.8s-.5,5.4-1.6,7.8-2.5,4.6-4.3,6.4c-1.8,1.8-3.9,3.2-6.4,4.3-2.4,1.1-5,1.6-7.8,1.6Z"/></svg>');
}