/* 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%; background-color: #dddddd; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; }
#showdropdowns  { background-color: #417c39; border: none; display: block; float: left; position: relative; border-radius: 5px; transform: rotate(0deg); background-image: url("/images/dropdown.svg"); background-position: center center; background-size: 80% auto; background-repeat: no-repeat; cursor: pointer; }
#showdropdowns:hover  { background-color: #619c59; }
#searchdropdowns.hidden  { display: none; }
#max  { font-size: 1em; background-color: #f0f0f0; border-radius: 6px; padding: 5px 2% 1% 2%; width: 94%; margin: 0% 1% 10px 1%; }
#max DIV  { display: inline-block; margin-right: 10px; }
#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: 1em; }

#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: 3px 0px 0px -10px; }
#advanced.open  { background-color: #dddddd; }
#advanced SPAN  { font-size: 1em; line-height: 1em; margin-left: 10px; padding-top: 8px; display: block; float: left; }

.search_term  { padding: 6px 10px; font-size: 1.1em; line-height: 100%; border: 1px solid #888888; border-radius: 5px; display: block; float: left; }
.search_term:hover  {background-color:aliceblue; border: 1px solid #aaaaaa; }
.searchbutton  { background-color: #417c39; float: left; font-size: 1.1em; line-height: 0.8em; color: #ffffff; padding: 11px 20px; border-radius: 5px; border: none; display: block; margin-left: 10px; cursor: pointer; }
.searchbutton:hover  { background-color: #619c59; }

.searchdropdown  { float: left; display: block; width: 27.3%; margin: 5px 1%; padding: 1% 2% 2% 2%; background-color: #f0f0f0; border-radius: 6px; }
.searchdropdown H4  { margin: 0% 0% 5px 0%; font-size: 1.2em; line-height: 1.1em; }
.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; }
.mark  { position: absolute; top: 0px; left: 0px; width: 26px; height: 26px; background-color: #ffffff; border: 2px solid #417c39; border-radius: 5px; box-sizing: border-box; }
.checkbox:hover INPUT ~ .mark  { background-color:aliceblue; border: 2px solid #518c49; }
.checkbox INPUT:checked ~ .mark  { background-color: #ffffff; border: 2px solid #417c39; }
.checkbox:hover INPUT:checked ~ .mark  { background-color:aliceblue; border: 2px solid #518c49; }
.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 #417c39; border-width: 0px 2px 2px 0px; transform: rotate(45deg); }




@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; 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%; }
    #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: 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: 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: 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: 5px; }
}