.accordions > div {
    padding: 16px;


    border: 1px solid var(--blue);
    background: #FFF;

    border-radius: var(--radius);
    transition: background-color 0.2s ease;
}

.accordions > div:not(:last-child) {
    margin-bottom: var(--gutter);
}
.accordions,
.accordions.stepbystep {
    margin-top: var(--gutter); border-top: 1px solid transparent;
}
.accordions:first-child, .accordions.stepbystep:first-child {
    margin-top: 0 !important;
}
.accordions > div.hover {
    background-color: rgba(63, 95, 222, 0.10);
}

.accordions > div > header {
    position: relative;

    /*align-items: center;*/
    align-items: flex-start;

    display: flex;
    flex-wrap: wrap;
}

.accordions > div > header > button {
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/*.accordions > div > header button:focus-visible {
    box-shadow: 0 0 0 3px white, 0 0 0 5px var(--orange);
    border-radius: 8px;
}*/

.accordions > div > header h3 {
    margin: 0;

    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    flex: 1;
    padding-top: 3px;
    padding-bottom: 3px;
}

.accordions > div > header p {
    margin: 0.75em 0;
    width: 100%;
}


button.showall { cursor:pointer; margin: 16px 0 var(--gutter); font-family: inherit}
.accordions.stepbystep button.showall {   margin: 16px 0 64px; }

button.showall,
/*.accordions > div > header::after {*/
.accordions > div > header .pseudo_button::after {
    content: "Show";
    color: var(--blue);
    display: flex; align-items: center;
    border: 1px solid var(--blue);
    background: #FFF;
    border-radius: 16px;
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    padding: 8px 8px 8px 36px;
    background-size: 20px 20px;
    background-position: 8px 50%;
    background-repeat: no-repeat;

    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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><polygon fill="%233F5FDE" points="10,13.1 5.9,9.1 7,8 10,11 13,8 14.1,9.1"/><path fill="%233F5FDE" d="M10,20C4.5,20,0,15.5,0,10C0,4.5,4.5,0,10,0c5.5,0,10,4.5,10,10C20,15.5,15.5,20,10,20z M10,1c-5,0-9,4-9,9 c0,5,4,9,9,9c5,0,9-4,9-9C19,5,15,1,10,1z"/></svg>');


}
/*@media reader, speech, aural {
    .accordions > div > header::after {
        display: none;
        visibility: hidden;

    }
}*/

:lang(ga) button.showall,
/*:lang(ga) .accordions > div > header::after {*/
:lang(ga) .accordions > div > header .pseudo_button::after {
    content: "Taispeáin";
}


button.showall:focus-visible,
/*.accordions > div > header:has(:focus-visible)::after  {*/
.accordions > div > header:has(:focus-visible) .pseudo_button::after  {
    box-shadow: 0 0 0 3px white, 0 0 0 5px var(--orange);

}
button.showall.opened,
/*.accordions > div.open > header::after {*/
.accordions > div.open > header .pseudo_button::after {
    content: "Hide";
    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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><polygon fill="%233F5FDE" points="13,12 10,9 7,12 5.9,10.9 10,6.9 14.1,10.9 		"/><path fill="%233F5FDE" d="M10,20C4.5,20,0,15.5,0,10C0,4.5,4.5,0,10,0s10,4.5,10,10C20,15.5,15.5,20,10,20z M10,1c-5,0-9,4-9,9s4,9,9,9 s9-4,9-9S15,1,10,1z"/></svg>');
}

:lang(ga) button.showall.opened,
/*:lang(ga) .accordions > div.open > header::after {*/
:lang(ga) .accordions > div.open > header .pseudo_button::after {
    content: "Folaigh";
}

button.showall:hover,
button.showall:focus-visible,
/*.accordions > div > header:has(:focus-visible)::after  ,
.accordions > div.hover > header::after {*/
.accordions > div > header:has(:focus-visible) .pseudo_button::after  ,
.accordions > div.hover > header .pseudo_button::after {
    background-color: rgba(63, 95, 222, 0.10);
    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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><path fill="%233F5FDE" d="M10,20C4.5,20,0,15.5,0,10S4.5,0,10,0s10,4.5,10,10S15.5,20,10,20z"/><polygon fill="%23FFFFFF" points="10,13.1 5.9,9.1 7,8 10,11 13,8 14.1,9.1  "/></svg>');

}
button.showall.opened:focus-visible,
button.showall.opened:hover,
/*.accordions > div.open > header:has(:focus-visible)::after ,
.accordions > div.open.hover > header::after {*/
.accordions > div.open > header:has(:focus-visible) .pseudo_button::after ,
.accordions > div.open.hover > header .pseudo_button::after {
    background-color: rgba(63, 95, 222, 0.10);
    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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><path fill="%233F5FDE" d="M10,20C4.5,20,0,15.5,0,10C0,4.5,4.5,0,10,0s10,4.5,10,10C20,15.5,15.5,20,10,20z"/><polygon fill="%23FFFFFF" points="13,12 10,9 7,12 5.9,10.9 10,6.9 14.1,10.9 		"/></svg>');
}



.accordions > div > div {
    visibility: hidden;
    max-height: 0;
    transition: max-height 0.333s ease-out;
    overflow: hidden
}

.accordions:not(.stepbystep) > div > div::before {
    display: block;
    height: 24px;
    content: "";
}

.accordions > div.open > div {
    max-height: 850em;visibility: visible;
    transition: max-height 0.5s ease-in;
}

@media all and (max-width: 1199px) {

    .accordions.stepbystep button.showall {   margin: 16px 0 var(--wrapper-margin); }

}
@media all and (max-width: 899px) {
    .accordions > div > header {
        display: block;
    }
    button.showall,
    /*.accordions > div > header::after {*/
    .accordions > div > header .pseudo_button::after {
        font-size: 17px; display: inline-flex;
    }

    .accordions.stepbystep button.showall { margin:0 0 32px; }

    .accordions > div > header h3 {
        font-size: 20px; margin-bottom: 0.5em;
    }
    .accordions > div > header h3+p { margin-top: 0}
}


.stepbystep > div { padding: 15px 0 0 72px; border: none; border-radius: 0;
    position: relative;}
.stepbystep > div.hover { background-color: transparent;}
.stepbystep > div::before {

    content: attr(data-number);
    display: block;
    width: 40px;
    height: 40px;
    line-height: 36px; border-radius: 50%; background: white; color: var(--black);
    font-size: 19px;
    font-style: normal; text-align: center; border:1px solid #B1B4B6;
    font-weight: 700; position: absolute; top: 10px; left: 0;
    z-index: 2;
}

.stepbystep > div::after { content:""; display: block;
    width: 16px; height: 100%;
    position: absolute; top: 10px; left: 12px;
    border:1px solid #B1B4B6;
    border-left: none;
    border-right: none;


    background-size: 1px 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;

    background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" 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 1 20" style="enable-background:new 0 0 1 20;" xml:space="preserve"><rect fill="%23B1B4B6" width="1" height="20"/></svg>');

}
.stepbystep > div:first-child::after { border-top:none; height:calc(100% - 10px);}
.stepbystep > div:last-child::after { height:40px;  }

.stepbystep > div:not(:first-child):not(:last-child)::after {   height: 100%; }
.stepbystep > div:not(:first-child)::after {  top: 0 }

.stepbystep > div > header {
    padding-bottom: 16px;
}

@media all and (max-width: 899px) {
    .stepbystep > div {
        padding:10px 0 0 calc(32px + 24px);
    }
    .stepbystep > div::before {
        width: 32px;
        height: 32px;
        line-height: 30px

    }
    .stepbystep > div::after{
        left: 8px;
    }


}