#article_filter { clear: both;  transition: background-color 0.2s ease;
    position: relative;/* margin-top: 32px;*/
    z-index: 10;}

#article_filter+.section { padding-top: 24px;}
#article_filter.open {   background-color: white; box-shadow: rgba(167, 141, 252, 0.25) 0px 8px 16px;}
#article_filter {   font-family: inherit;


}

#article_filter > div:first-child { border: 1px solid var(--light-purple); border-left: none; border-right: none; }
#article_filter div.wrapper {  }
#article_filter div#filters { width: 100%; background: var(--off-white); display: none; }
#article_filter div#filters::before,
#article_filter div#filters::after
{ width: 100%; height: 32px; display: block; content:""; }


#article_filter h2{ font-family:inherit; font-size: 16px; line-height: 1.5;  width: 100%; margin: 0; }
#article_filter h2 button { cursor:pointer; font-size: inherit; line-height: inherit; background: none; outline: none; font-family: inherit; color: var(--dark-purple);  padding: 16px 0;  display: flex; align-items: center;}
#article_filter h2 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>');

}


#article_filter form{ width: 100%; display: flex; flex-wrap: wrap;  /*   overflow: hidden; */ align-items: flex-start; }
#article_filter form>div:first-child {   /*min-width:240px; */padding-right: 24px; display: flex; align-items: center;}
#article_filter form>div:last-child {   flex:1; border-left: 1px solid #C0B8D9;  padding-left: 16px; }

#article_filter div.wrapper div h3{ font-family:inherit; font-size: 14px; }





#article_filter div.wrapper div input[type="submit"] { border: 1px solid var(--dark-purple); outline: none;cursor:pointer; background:#E2D9FF; color: var(--dark-purple);  padding:12px 18px;  font-size: 16px; border-radius: 8px;  margin:1em 0 0 40px; }
#article_filter div.wrapper div input[type="submit"]:is(:hover,:focus-visible) {   background:var(--dark-purple); color: white;  }



#article_filter fieldset { width: 100%; }


#article_filter h3 button { font-size: inherit; font-size: inherit; font-weight: inherit; background: none; display: block; width: 100%; text-align: left;  }

#article_filter { display: block;     }
#article_filter h3 { margin: 0 8px 0 0;}
#article_filter button span { display: flex; align-items: center;  }
#article_filter button span::after {  content:""; width:0.8em; height:0.8em; min-width:0.8em; display:block;  margin-left: auto;
    position: relative; top:-0.2em; transform: rotate(45deg); border: 2px solid currentColor; border-left: none; border-top: none; }
#article_filter button.opened span::after {  transform: rotate(225deg); top:0.2em; }




@media all and (min-width: 900px) {

    #article_filter ul { column-count: 2;
        column-gap: var(--gutter); }
}
@media all and (max-width: 599px) {

    #article_filter form{ display: block; }
    #article_filter form>div:first-child {  padding-right: 0;  }
    #article_filter form>div:last-child  { border-left: none;  padding-left: 0; padding-top: 16px;}
}


#article_filter ul li { font-size: inherit;  break-inside: avoid-column; }


#article_filter ul li { margin: 0 0 0.5em 0 !important; list-style:none !important;}



#article_filter label { display:flex; align-items:center;position: relative; font-family: inherit; cursor: pointer; font-size: 16px; border: 1px solid transparent;}
#article_filter label input {  position: fixed; opacity: 0; pointer-events: none; top: -100px; }
#article_filter label span { display:block;   }
#article_filter label>b { display:block; content:""; width:42px; min-width:42px; height: 42px; border: 4px solid var(--off-white); position: relative;  border-radius: 50%;  margin-right:1px; /*background: red; border-color: blue;*/ }
#article_filter label>b::before { content:""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width:15px; height: 15px; border: 1px solid #9288B2;  border-radius: 2px; }
#article_filter label>input:checked~b::before {  background: #9288B2;   }

#article_filter label:is(:hover,:focus-visible)>b {  background: #d8ccff;  }


#article_filter label>input:checked~b {    }


#article_filter label>input:checked~b::after { content:""; display: block; position: absolute; width:10px; height:5px; border: 2px solid #FFF; border-top: none; border-right: none; left:12px; top: 13px; transform: rotate(-45deg); }

#article_filter input[type="submit"]:focus-visible,
#article_filter button:focus-visible ,
#article_filter label:has(input:focus-visible) {  box-shadow:  0 0 0 3px var(--orange); }

#article_filter form>div:first-child label { border-radius: 60px; background: white; padding: 0 12px 0 1px; border: 1px solid #221D33  }
#article_filter form>div:first-child label>b { border-color: white;}
    /*
    #article_filter form>div:first-child label>b {  !* width:38px; min-width:38px; height: 38px; *!border-width: 2px;   }
    #article_filter form>div:first-child label>input:checked~b::after {   left:14px; top: 15px;   }
    */


/*
#currentfilterswrapper { padding-bottom: 0 !important;}
#currentfilters {   }


#currentfilters button { background: none; outline: none; border: none; cursor: pointer;    }

#currentfilters dl{ display: flex; flex-wrap: wrap; padding: 12px 0 0px;  }
#currentfilters dt button,
#currentfilters dd button { margin: 0 19px 16px 0;
    font-size: 16px;
    line-height: 19px; padding: 0.75em 8px 0.666em 0;
    color: #233A65;
}
#currentfilters dt button{ color: #233A65;  }

#currentfilters dd button {   background: #F2FBFF;
    border: 2px solid #0099D7; font-weight: 600;
    padding: 0.75em 3em 0.666em 2em;
    border-radius: 8px; color: #002422; text-align: center;
    position:relative;
}


#currentfilters dd button>b { position:absolute; width: 18px; height: 18px; display: block; top:50%; right:12px; margin-top:-10px;}


#currentfilters dd button>b::before,
#currentfilters dd button>b::after
{content:""; height: 1px; background: #002422; width: 21px; display: block; position:absolute; top:calc(50% + 1px); left: 50%; transform: translate(-50%,-50%); }
#currentfilters dd button>b::before{ transform: translate(-50%,-50%) rotate(-45deg); }
#currentfilters dd button>b::after{ transform: translate(-50%,-50%) rotate(45deg); }

#currentfilters dd button:is(:hover,:focus-visible) { background: #233A65; color:white; border-color: #233A65; }
#currentfilters dd button:is(:hover,:focus-visible)>b::before,
#currentfilters dd button:is(:hover,:focus-visible)>b::after
{ background:white;  }


#currentfilters.notinuse { display: none;}



#currentfilters button:focus-visible,
#article_filter button:focus-visible
{

}
#article_filter input:focus-visible
{

}



@media all and (max-width: 599px) {
    #currentfilters dt,
    #currentfilters dd  { font-size: 14px; line-height: 1; padding:0.5em 0.5em 0.4em 0; }
    #currentfilters dd  { padding:0.5em 1.5em 0.4em 0.5em; border-radius: 5px; }


    #currentfilters dd>b { width: 12px; height: 12px; right:6px; margin-top:-6px; }
    #currentfilters dd>b::before,
    #currentfilters dd>b::after
    { width: 10px;   }


}

*/




@media screen and (min-width:1024px) {

    #article_filter fieldset { width: calc(50% - 30px); }
}

@media screen and (min-width:601px)  {
    #article_filter div.wrapper {   display: flex; flex-wrap: wrap; justify-content: space-between; align-items:flex-start;  }
}
@media screen and (min-width:601px) and (max-width:1023px){

    #article_filter fieldset { width: calc(50% - 12px); }



}
@media screen and (max-width:600px) {
    #article_filter {

        font-size: 2rem;
    }
}


body.loading::before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--purple);
    opacity: 0.75;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 9992;
}




body.loading::after {
    z-index: 9993; box-sizing: border-box;
    content: " ";
    display: block;
    width: 80px;
    height: 80px;
    animation: spin 1s infinite linear;
    border-radius: 50%;
    border-width: 12px;
    border-style: solid;

    border-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 1) rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 1);

    overflow: hidden;
    text-indent: -99999em;
    margin: auto;
    position: fixed;
    top: 50%;
    left: 50%;  /*
    position: relative; left: calc(50% - 45px);*/
    margin: -40px 0 0 -40px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}