
#search  { margin-bottom: 25px; margin-left: 10px; }
#searchterm  { background-image: url("/images/matrix/magnifying_glass.svg"); background-size: auto 80%; background-position: center right; background-repeat: no-repeat; box-sizing: border-box; padding: 2px 10px; height: 32px; width:500px; }
#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: #e8e8e8; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; }
#showdropdowns  { background-color: #1c315f; border: none; display: block; float: left; position: relative; border-radius: 5px; transform: rotate(0deg); background-image: url("/images/matrix/dropdown.svg"); background-position: center center; background-size: 80% auto; background-repeat: no-repeat; cursor: pointer; transition:all 0.3s;}
#showdropdowns:hover  { background-color: #4c618f; }
#searchdropdowns.hidden  { display: none; }
#max  { font-size: 17px; background-color: #ffffff; border-radius: 6px; padding: 5px 2% 1% 2%; width: 94%; 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; transition:all 0.3s;}
#max .select:hover  { border: 1px solid #bbbbbb; }
#max SPAN  { display: inline-block; color: #002a52; 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; font-size: 19px; }
#advanced  { display: block; float: left; padding: 0px 15px 10px 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; margin: 3px 0px 0px -10px; }
#advanced.open  { background-color: #e8e8e8; }
#advanced SPAN  { font-size: 19px; line-height: 20px; margin-left: 10px; padding-top: 7px; display: block; float: left; }

.search_term  { padding: 6px 10px; font-size: 1em; line-height: 100%; border: 1px solid #888888; border-radius: 5px; display: block; float: left; transition:all 0.3s;}
.search_term:hover  {background-color:aliceblue; border: 1px solid #aaaaaa;}
.searchbutton  { background-color: #1c315f; float: left; font-size: 1em; line-height: 0.8em; color: #ffffff; padding: 10px 20px; border-radius: 5px; border: none; display: block; margin-left: 10px; cursor: pointer; transition:all 0.3s;}
.searchbutton:hover  { background-color: #3c517f; }

.searchdropdown  { float: left; display: block; margin: 5px 1%; padding: 1% 2% 2% 2%; background-color: #ffffff; border-radius: 6px; }
.searchdropdown H4  { margin: 0% 0% 5px 0%; font-size: 1.2em; line-height: 1.2em; }
.searchdropdown H6  { font-size: 0.9em; color: #777777; padding-top: 5px; display: block; }

.searchdropdown.one  { width: 94%; }
.searchdropdown.one LABEL  { width: 16%; }
.searchdropdown.two  { width: 44%; }
.searchdropdown.three  { width: 27.3%; }
.searchdropdown.onethird  { width: 27.3%; }
.searchdropdown.twothird  { width: 60.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; }
.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; transition:all 0.3s;}
.mark  { position: absolute; top: 0px; left: 0px; width: 26px; height: 26px; background-color: #ffffff; border: 2px solid #1c315f; border-radius: 5px; box-sizing: border-box; transition:all 0.3s;}
.checkbox:hover INPUT ~ .mark  {background-color:aliceblue;}
.checkbox INPUT:checked ~ .mark  { background-color: #ffffff; border: 2px solid #2c416f; }
.checkbox:hover INPUT:checked ~ .mark  { background-color:aliceblue; }
.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 #1c315f; border-width: 0px 2px 2px 0px; transform: rotate(45deg); }
.purpose  { font-size: 1em; line-height: 1.1em; margin: 5px 0px 20px 15px; }
.purpose P  { font-size: inherit; line-height: inherit; margin: 0px; }
.purpose2  { font-size: 1em; line-height: 1.1em; margin: 3px 0px 20px 35px; }

.showall  { width: 100%; position: relative; }
.showallfade  { height: 80px; width: 100%; position: absolute; z-index: 2; bottom: 0px; left: 0px; background-image: url("/images/matrix/whiteblend.svg"); background-size: auto 100%; }
.showallbtn  { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); border: none; border-radius: 5px; padding: 7px 15px 8px 15px; background-color: #1c315f; color: #ffffff; font-size: 1em; cursor: pointer; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6); transition:all 0.3s;}
.showallbtn:hover  { background-color: #4c618f; }
.showrest.hidden  { display: none; }

/*
#numfilters  { font-size: 14px; width: 28px; height: 28px; border: none; margin-left: 10px; border-radius: 20px; background-color: #1c315f; cursor: pointer; color: #ffffff; display: inline-block; text-align: center; position: relative; top:4px; }
#numfilters:hover  { background-color: #4c618f; }
*/
#allfilter  { width: 100%; position: relative; }
#allfilters  { width: 100%; z-index: 2; display: block; position: relative; }
#allfilters.hidden  { display: none; }

/*  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/matrix/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  { text-align: left; height: 34px; width: 90px; background-color: #1c315f; background-image: url("/images/matrix/hide.svg"); background-size: auto 100%; background-repeat: no-repeat; background-position: center right; }
.showallbtn.open:hover  { background-color: #4c618f; }



@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; }
#searchdropdowns  { position: relative; top: 0px; left:7px; }

    /* 
    #advanced  { float: none; display: block; display: block; position: relative; width: 190px; height: 26px; clear: both; top: 10px; left: -5px; }
    #advanced.open  { left: 1%; }
	*/
    #showdropdowns  { width: 26px; height: 26px; top: 3px; }
    #searchresource LABEL  { width: 47%; }
    #searchresource.one LABEL  { width: 31.3%; }
    #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: 92%; padding: 2% 3% 3% 3%; } 
    .searchdropdown.two, .searchdropdown.three, .searchdropdown.onethird  { width: 42%; padding: 2% 3% 3% 3%; }  
}
@media (max-width: 900px) {
    #searchresource.one LABEL  { width: 48%; }
}
@media (max-width: 768px) {
	#advanced  {top:3px; left:0; }
	#searchterm {width:95%;}
    /*.search_term  {width:90%;}*/
    .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: 92%; 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:0; }
}


