 

form#grant_filter {  background: #dddae5; padding: 32px 0 }
form#grant_filter h2{  font-size: 24px; line-height: 1.25; font-weight: 600;  margin-bottom: 1em;  }


form#grant_filter fieldset { background: white; border-radius: 12px; border: 1px solid var(--cta-blue); overflow: hidden; margin: 16px 0;
}





@media all and (min-width: 768px) {

    form#grant_filter>.wrapper { display: flex; align-items: flex-start; justify-content: space-between; }
    form#grant_filter fieldset { width: calc(50% - (var(--gutter) / 2)); }
}


form#grant_filter li   {  font-size: 16px;   line-height: 1.2;      break-inside: avoid-column; }


form#grant_filter li label { display:flex; align-items:center;position: relative; font-family: inherit; cursor: pointer;}

form#grant_filter fieldset.inactive,
form#grant_filter fieldset li label input {  position: fixed; opacity: 0; pointer-events: none; top: -100px; }
form#grant_filter fieldset li label span { display:block; padding-right: 0.5em; }
form#grant_filter fieldset li label>b { display:block; content:""; width:42px; min-width:42px; height: 42px; border-radius: 50%;
    position: relative; order: 0; margin-right: 0; }
form#grant_filter fieldset li label:is(:hover) > b ,
form#grant_filter fieldset li label:has(input:focus-visible) > b {
    background: var(--bg-purple);
}

form#grant_filter fieldset#fieldset0 > div > ul > li > label { font-weight: 700;}
form#grant_filter fieldset#fieldset0 > div > ul > li > ul li { /*padding-left: 42px;*/ }

/*
form#grant_filter fieldset#fieldset0 > div > ul > li > label >b {opacity: 0 !important;}
*/


form#grant_filter fieldset li label>input:checked~b {   }

form#grant_filter fieldset li label>b::after ,
form#grant_filter fieldset li label>b::before { content:""; display: block; position: absolute;}

form#grant_filter fieldset li label>b::before {
    width:15px; height: 15px;  border: 1.5px solid rgba(0,0,0,0.6); border-radius:2px; top:50%; left: 50%; transform: translate(-50%,-50%); }
form#grant_filter fieldset li label input[type="checkbox"]:checked ~ b::after {
    width:11px; height: 5px; border: 2px solid #FFF; border-top: none; border-right: none; left:50%; margin-top: -1px; top:50%; transform: translate(-50%,-50%) rotate(-45deg);  }

form#grant_filter fieldset li label>input:checked~b::before {

    background: var(--dark-purple); border-color: var(--dark-purple);

}
form#grant_filter fieldset li label:has(input:focus-visible) {  box-shadow:  0 0 0 3px var(--orange);}


form#grant_filter fieldset li label input[type="radio"] ~ b::before {
    width:20px; height: 20px; border-radius: 50%;  border: 2px solid var(--menu-blue);
}



form#grant_filter fieldset li label input[type="radio"]:checked ~ b::before { background: none;  }
form#grant_filter fieldset li label input[type="radio"]:checked ~ b::after {
    width:12px; height:12px; border-radius: 50%;  background:  var(--menu-blue); top:50%; left: 50%; transform: translate(-50%,-50%);
}


form#grant_filter fieldset div { padding: 16px;}


form#grant_filter fieldset div p:last-child{ margin-top:16px;}
form#grant_filter input[type="submit"]{ background: var(--hero-blue); color: white; font-family: inherit; font-size: 16px; padding: 0.75em 1.5em; min-width: 18em; line-height: 18px; border-radius: 8px; border: none; outline: none; cursor: pointer;}

form#grant_filter input[type="submit"]:focus-visible { box-shadow: 0 0 0 1px white, 0 0 0 4px var(--orange); }

@media all and (max-width:599px) {
    form#grant_filter input[type="submit"]{   min-width: 0;  }

}



form#grant_filter fieldset h3 { font-size: 20px; margin:0;}
form#grant_filter button { font-size: inherit; line-height: inherit; background: none; outline: none; font-family: inherit; color: #221D33;}
form#grant_filter h3 button { background: white; padding: 16px 24px; display: block; width: 100%; display: flex; align-items: center;}
form#grant_filter button { font-size: inherit; line-height: inherit; background: none; outline: none; font-family: inherit; color: #221D33;}

/*form#grant_filter h3 button::before { display: inline-block; height:24px; width:24px; margin-right: 8px; content:""; background-repeat: no-repeat; background-size: contain; background-position:0 0;
    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="%23221D33" d="M6.4,13.1h12v-2h-12 M3.4,6.1v2h18v-2 M10.4,18.1h4v-2h-4V18.1z"/></svg>');

}*/
form#grant_filter h3 button:focus-visible span { box-shadow: 0 0 0 3px var(--orange); }

form#grant_filter h3 button:is(:hover,:focus-visible)::before ,
form#grant_filter h3 button.opened::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="M6.4,13.1h12v-2h-12 M3.4,6.1v2h18v-2 M10.4,18.1h4v-2h-4V18.1z"/></svg>');}

form#grant_filter h3 button:is(:hover,:focus-visible), /*{ background: var(--orange); }*/
form#grant_filter h3 button.opened {   background: var(--dark-purple); color: white;}

form#grant_filter h3 button span { display: flex; align-items: center; width: 100%;}

form#grant_filter h3 button span::after {
    content: "";
    margin: 2px 0 0 auto;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><polygon fill="%23535A63" points="10,15.4 1.3,6.7 2.7,5.3 10,12.6 17.3,5.3 18.7,6.7 	"/></svg>');

    transition: all 0.2s ease;

}
form#grant_filter h3 button:is(:hover,:focus-visible) span::after,
form#grant_filter h3 button.opened span::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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><polygon fill="%23FFFFFF" points="10,15.4 1.3,6.7 2.7,5.3 10,12.6 17.3,5.3 18.7,6.7 	"/></svg>');
}
form#grant_filter h3 button.opened span::after {
    transform: rotate(180deg);
}


div#courseresultswrapper { padding: 32px 0;}


 