body {font-family:'Noto Serif';}
/* Search bar */

#searchbar  { margin-bottom: 25px; margin-left: 10px; }
#searchterm  { background-image: url("/images/magnifying_glass.svg"); background-size: auto 80%; background-position: center right; background-repeat: no-repeat; }
#searchterm::placeholder  { color: #888888; font-weight: normal; }
#search LABEL  { cursor: pointer; display: inline-block; overflow-wrap: anywhere; }
#search INPUT[type='checkbox']  { margin-right: 7px; cursor: pointer; }
#searchdropdowns  { width: 98%; padding: 10px 1%; margin-left: -1%; background-color: #dedede; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; }
#showdropdowns  { border: none; display: block; float: left; position: relative; border-radius: 4px; transform: rotate(0deg); background-image: url("/images/dropdown.svg"); background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; cursor: pointer; }
#showdropdowns:hover  { background-image: url("/images/dropdownhover.svg"); }
#searchdropdowns.hidden  { display: none; }
#max  { font-size: 17px; background-color: #f0f0f0; border-radius: 4px; padding: 5px 2% 5px 2%; width: 98%; margin: 0% 1% 10px 1%; }
#max DIV  { display: inline-block; }
#max .select  { margin-left: 5px; margin-right: 3px; border: 1px solid #999999; cursor: pointer; width: 55px; }
#max .select:hover  { border: 1px solid #bbbbbb; }
#max SPAN  { display: inline-block; color: #000000; margin-right: 5px; }
#maxlesson, #maxresource  { font-size: 17px; }

#searchgrade  { order: 1; }
#searchresource  { order: 2; } 
#searchcontent  { order: 3; }
#searchoutcome  { order: 4; }
#searchcommon  { order: 5; }
#searchresource LABEL  { width: 48%; display: block; float: left; }
#searchresource.one LABEL  { width: 22%; }

#search LABEL.grade  { width: 90%; margin-right: 0%; }
#sl, #sr  { width: auto; margin-right: 25px; display: block; float: left; }
#sl SPAN, #sr SPAN  { position: relative; }
#advanced  { display: block; float: left; padding: 0px 15px 10px 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; margin: 5px 0px 0px -10px; cursor: pointer; }
#advanced.open  { background-color: #dedede; }
#advanced SPAN  { font-size: 1em; line-height: 20px; margin-left: 10px; padding-top: 7px; display: block; float: left; }
/*
#numfilters  { font-size: 14px; line-height: 14px; width: 28px; height: 28px; border: none; margin-left: 10px; border-radius: 20px; background-color: #bbbbbb; color: #ffffff; display: inline-block; text-align: center; position: relative; top: 3px; }
#numfilters  { display: none; }
*/
#allfilter  { width: 100%; position: relative; }
#allfilters  { width: 100%; z-index: 2; display: block; position: relative; }
#allfilters.hidden  { display: none; }

.search_term  { padding: 6px 10px; font-size: 1em; line-height: 100%; border: 1px solid #888888; border-radius: 4px; display: block; float: left; }
.search_term:hover  { border: 1px solid #aaaaaa; }
.searchbutton  { background-image: linear-gradient(rgb(0, 26, 63), rgb(11, 47, 97)); float: left; font-size: 1em; line-height: 1em; color: #ffffff; padding: 8px 20px; border-radius: 4px; border: none; display: block; margin-left: 10px; cursor: pointer; }
.searchbutton:hover  { background-image: linear-gradient(rgb(20, 46, 83), rgb(31, 67, 117)); }

.searchdropdown  { float: left; display: block; margin: 5px 1%; padding: 1% 2% 2% 2%; background-color: #f0f0f0; border-radius: 4px; }
#searchgrade H6, #searchresource H6, #searchcontent H6, #searchoutcome H6, #searchcommon H6  { margin: 0% 0% 7px 0%; font-size: 1.2em; line-height: 1.2em; color: #555555; }

.searchdropdown.one  { width: 100%; }
.searchdropdown.one LABEL  { width: 16%; }
.searchdropdown.two  { width: 48%; }
.searchdropdown.three  { width: 31.3%; }
.searchdropdown.onethird  { width: 31.3%; }
.searchdropdown.twothird  { width: 64.6%; }
#search .searchdropdown.three LABEL.grade  { width: 90%; }


.checkbox  { font-size: 1em; line-height: 1.1em; width: 100%; height: 32px; display: block; position: relative; cursor: pointer; user-select: none; margin-top: 5px; }
.checkbox.delete  { width: 45px; margin-left: 5px; display: inline-block; top: 10px; }
.checkbox SPAN  { display: block; margin-left: 42px; margin-top: 0px; font-size: 1em; line-height: 1.1em; position: absolute; top: 50%; transform: translateY(-50%); }
.checkbox INPUT  { position: absolute; opacity: 0; height: 0px; width: 0px; }
.mark  { position: absolute; top: 0px; left: 0px; width: 26px; height: 26px; background-color: #ffffff; border-radius: 4px; border: 2px solid #051a3a; }/*can change size/style for the checkboxes if necessary*/
.checkbox:hover INPUT ~ .mark  { background-color: #eeeeee; border: 2px solid #354a6a; }
.checkbox INPUT:checked ~ .mark  { background-color: #ffffff; border: 2px solid #051a3a; }
.checkbox:hover INPUT:checked ~ .mark  { background-color: #eeeeee; border: 2px solid #354a6a; }
.mark:after  { content: ""; position: absolute; display: none; }
.checkbox INPUT:checked ~ .mark:after  { display: block; }
.checkbox .mark:after  { left: 7px; top: 1px; width: 6px; height: 14px; border: solid #051a3a; border-width: 0px 2px 2px 0px; transform: rotate(45deg); }


/*  tagging search filters  */
.filtertag  { background-color: #bbbbbb; cursor: pointer; border: none; color: #ffffff; padding: 4px 28px 4px 10px; border-radius: 5px; margin: 0px 3px 6px 3px; font-size: 15px; display: block; float: left; background-size: auto 100%; background-image: url("/images/deleteX.svg"); background-position: center right 5px; background-repeat: no-repeat; }
.filtertag:hover  { background-color: #cccccc; }

/*  open/close extra results  */
.showrest.open  { padding-bottom: 60px; }
.showallbtn.open, .showallbtn.open:hover  { text-align: left; height: 34px; width: 90px; background-image: url("/images/hide.svg"); background-size: auto 100%; background-repeat: no-repeat; background-position: center right; }



@media screen and (min-width: 1050px) {
    .search_term  { width: 550px; }
    .mark  { top: 3px; left: 6px; }
    #showdropdowns  { width: 26px; height: 26px; top: 5px; }
}
@media screen and (max-width: 1050px){
    #advanced  { float: none; display: block; position: relative; width: 245px; height: 36px; clear: both; top: 10px; left: -5px; }
    #advanced.open  { left: 10px; }
    #showdropdowns  { width: 26px; height: 26px; top: 3px; display: inline-block; }
    #searchresource LABEL  { width: 47%; }
    #searchresource.one LABEL  { width: 31.3%; }
    #searchdropdowns  { position: relative; top: -15px; }
    #searchgrade  { order: 2; }
    #searchresource  { order: 1; } 
    #searchcontent  { order: 3; }
    #searchoutcome  { order: 4; }
    #searchcommon  { order: 5; }
    .checkbox  { height: 26px; margin-top: 8px; }
    .checkbox SPAN  { margin-left: 35px; }
    .search_term  { width: 70%; }
    .searchdropdown, .searchdropdown.one, .searchdropdown.twothird  { width: 98%; padding: 2% 3% 3% 3%; } 
    .searchdropdown.two, .searchdropdown.three, .searchdropdown.onethird  { width: 48%; padding: 2% 3% 3% 3%; }  
}
@media (max-width: 900px) {
    #searchresource.one LABEL  { width: 48%; }
}
@media (max-width: 650px) {
    .search_term  { width: 95%; }
    .mark  { top: 3px; left: 6px; }
    .checkbox  { height: 30px; margin-top: 8px; }
    .checkbox SPAN  { margin-left: 40px; }
    .searchdropdown, .searchdropdown.one, .searchdropdown.two, .searchdropdown.three, .searchdropdown.onethird, .searchdropdown.twothird  { width: 98%; padding: 2% 3% 3% 3%; }    
    #showdropdowns  { width: 26px; height: 26px; top: 5px; }
    #submitsearch  { margin: 10px 0px 15px 0px; }
    #searchgrade  { order: 1; }
    #searchresource  { order: 2; } 
    #searchcontent  { order: 3; }
    #searchoutcome  { order: 4; }
    #searchcommon  { order: 5; }
}
@media (max-width: 570px) {
    #searchresource LABEL  { width: 97%; }
    #showdropdowns  { margin-left: 5px; }
}