/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 :root {
  --color-main: #334152;
  --color-border: #eceeef;
  --color-primary: #00b6a9;
  --color-highlight: #f7934e;
  --color-white: #fff;
  --font-family: "Arial", sans-serif !important;
  --text-main: 14px;
  --text-filter-title: 13.6px;
  --text-filter-title-sm: 11px;
  --line-height: 1.3rem;
  --line-height-sm: 1rem;
  --line-height-lg: 1.8rem;
  --button-radius: 4px;
  --input-radius: 3px;
}
/* GENERAL STYLES*/
#snou-search {
  justify-content: space-between;
  font-family: var(--font-family);
  color: var(--color-main);
  line-height: var(--line-height);
  width: 100%;
  margin-top: calc( 29px + 2rem );
}
#snou-search-filters {
  font-size: var(--text-main);
}
.search-results-wrap {
  padding: 0 20px;
}

/* Filter Output TO LEFT OF RESULTS */

.snou-filter-term-single .toggle-filter,
.snou-filter-term .toggle-filter {
  display: none;
}

/* Filter Headers and Icons */
h3.snou-filter-title {
  font-size: var(--text-filter-title);
  cursor: pointer;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: var(--line-height-lg);
  background-color: var(--color-border);
  padding-left: 6px;
  line-height: 1.8em;
  width: -webkit-max-content;
  width: max-content;
  border-radius: var(--button-radius);
}
/* Toggle Items */
span.toggle-icons {
  display: inline-block;
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: 0 var(--button-radius) var(--button-radius) 0;
  text-align: center;
  width: 25px;
  height: 100%;
}
#snou-header-search span.toggle-icons {
  color: inherit;
  background-color: transparent;
}
#snou-header-search h3.snou-filter-title {
  margin-top:0;
  margin-left:8px;
  text-transform:none;
  font-weight:normal;
}
h3.snou-filter-title.shut .fa-close,
h3.snou-filter-title.open .fa-chevron-down {
  display: none;
}
h3.snou-filter-title.minimal {
  padding-left: 0;
  background-color:transparent;
}
h3.snou-filter-title.minimal .toggle-icons {
  background-color: transparent;
  color: var(--color-main);
}

/* Filter Groups */
.snou-filter-group .filters.shut {
  display: none;
}
/* Filter Labels and Inputs */
.snou-filter-term-single,
.snou-filter-term {
  display: flex;
  align-items: baseline;
  line-height: var(--line-height-sm);
  margin-bottom: 0.25rem;
  position: relative;
}
.snou-filter-term-single label.filter-label-radio,
.snou-filter-term-single label.filter-label,
.snou-filter-term label.filter-label {
  margin-left: 4px;
  margin-bottom:0;
  display: block;
}
.snou-filter-term-single label.filter-label:before,
.snou-filter-term label.filter-label:before {
  content: "\2713";
  background-color: var(--color-primary);
  border-radius: 3px;
  color: var(--color-border);
  display: block;
  font-size: 1rem;
  height: 15px;
  left: 0;
  top: 0;
  position: absolute;
  text-align: center;
  width: 15px;
  z-index: 1;
}
.snou-filter-term-single input[type="checkbox"],
.snou-filter-term input[type="checkbox"] {
  appearance: none;
  -o-appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-white);
  border-radius: var(--input-radius);
  border: 1px solid var(--color-main);
  color: transparent !important;
  cursor: pointer;
  height: 15px;
  margin-bottom: 0 !important;
  margin-left:0 !important;
  min-width: 15px !important;
  outline: none;
  padding:0;
  transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  width: 15px;
  z-index: 5;
}
.snou-filter-term-single input[type="checkbox"]:checked,
.snou-filter-term input[type="checkbox"]:checked {
  background-color: transparent;
  border: 1px solid var(--color-main);
}
.snou-filter-term-single input[type=radio] {
  display:block;
  height:15px !important;
  width:15px !important;
  min-width:15px !important;
 
}
.snou-filter-term-single input[type=radio]:checked:before,
.snou-filter-term-single input[type=radio]:before {
  height:15px;
  width:15px !important;
  left:0 !important;
}

/* YEARS + MATCH TYPE */
#filter-year h3.snou-filter-title {
  font-size: var(--text-filter-title-sm);
  margin-top: 1rem;
  cursor: pointer;
}
#filter-year .sublist-wrap {
  display: flex;
}
#filter-year .sublist-wrap > div:nth-of-type(1) {
  margin-right: 20px;
}

/* Header Search - theme */
.header-search .flex-section {
  justify-content:flex-start;
  flex-wrap:wrap;
  /*padding:30px 8px 0;*/
}
.header-search input[type="search"] {
  border: 1px solid lightgrey !important;
  border-radius: var( --button-radius );
  height:30px;
  width: calc( 100% - 100px );
}
.header-search button {
  height:30px;
  padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	line-height: 1;
  background: var(--color-primary);
	border-radius: var( --button-radius );
	color: var(--color-white);
	border: 2px solid transparent;
  min-width:max-content;
  margin-left:6px;
}
/* Advanced Search Button*/
.header-search #snou-header-search {
  flex-basis:100%;
}
@media all and (min-width: 768px ) {
  
  .header-search .flex-section {
    justify-content:flex-start;
    flex-wrap:nowrap;
    
  }
  .header-search #snou-header-search {
    flex-basis:unset;
  }
  
}
/* ADV SEARCH - hidden filters */
.snou-adv-search .snou-inner .filters {
  /*position:relative;*/
  width:100%;
  z-index: 99;
}
.advanced-filters {
  align-items:center;
  background-color: #fff;
  border:1px solid var( --color-border );
  display:flex;
  padding:10px;
  font-size: 12px;
  position: absolute;
  width:max-content;
  min-width:100%;
  right:0;
  top:100%;
}
.advanced-filters > div {
  padding: 0 12px 0 0;
}
.advanced-filters > span {
  display:block;
  width:8px;
}
@media all and (min-width: 768px ) {
  .advanced-filters label {
    font-size: var(--text-main);
    white-space:nowrap;
  }
}


/* ---- RESULTS --- */
#search-results {
  padding: 20px 0;
  width: 100%;
}
#search-results article {
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
  position: relative;
}
#search-results article header {
  margin-bottom: 1rem;
}
#search-results article a {
  color: var(--color-primary);
}
#search-results article h2.entry-title {
  color: var(--color-primary);
  font-size: 18px !important;
  margin-bottom: 0.25rem;
}
#search-results article h2.entry-title a {
  color: inherit !important;
}
#snou-results-found {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* --- FILTERS AND OUTPUT ABOVE THE SEARCH RESULTS */
#snou-sort-filters {
  display: flex;
}
#snou-sort-filters > div {
  margin-left: 10px;
}
#snou-sort-filters select {
  font-size: 12px;
}
#snou-sort-filters label {
  display: inline-block;
  font-size: var(--text-main);
}
#snou-active-filters {
  padding: 10px 0;
  display:flex;
  justify-content:space-between;
}
#snou-clear-filters {
  cursor:pointer;
  border-radius: var(--button-radius);
  width: max-content;
  font-size: 0.875rem !important;
  padding: 0 8px !important;
  line-height: 1.8em !important;
  background-color: #eceeef !important;
  border-color: #eceeef;
  transition:all .5s;
  border-width:1px;

  &:hover {
    border-color:transparent;
  }
}
#snou-active-filters .toggles {
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
}
#snou-active-filters .toggle-filter {
  cursor:pointer;
  display: flex;
  align-items: center;
  border-radius: var(--button-radius);
  width: max-content;
  font-size: 0.875rem !important;
  padding: 0 8px !important;
  line-height: 1.8em !important;
  background-color: #eceeef !important;
  margin: 6px 6px 0 0;
  border-color: #eceeef;
  border-style:outset;
  transition:all .5s;
  border-width:1px;
  text-decoration:none;

  &:hover {
    border-color:transparent;
  }
}
#snou-active-filters .toggle-close {
  background-image: url("../../img/xmark.svg");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  height: 20px;
  width: 20px;
  display: inline-block;
  line-height: 1.8em !important;
  cursor: pointer;
}

/*----HIGHLIGHT----*/
#unhighlight-results,
#highlight-results {
  display: inline-block;
  border-radius: var(--button-radius);
  width: max-content;
  font-size: 0.75rem !important;
  padding: 0 8px !important;
  line-height: 1.8em !important;
  background-color: #00b6a9 !important;
  border-color: #00b6a9 !important;
  color: #fff;
  cursor: pointer;
  margin: 6px 6px 0 0;
}
#unhighlight-results {
  background-color: #eee;
}
mark.qterm {
  background-color: var(--color-highlight);
  color: var(--color-white);
  padding: 0.125em 0;
  text-decoration: none;
  transition: padding 0.5s;
}


/* ------ MEDIA ------------*/
@media all and (min-width: 756px) {
  #snou-search {
    display: flex;
  }
  #snou-search-filters {
    flex-basis: 25%;
    min-width: 25%;
    padding-right: 20px;
    border-right: 1px solid var(--color-border);
  }
  .search-results-wrap {
    width: 74%;
  }
}
/* ------Pagination ----- */
.search-pagination {
  display:flex;
  justify-content:flex-end;
}
.snou-pagination-link {
  display:inline-block;
  padding: 0 5px;
}
.snou-pagination-link.current {
  color: var(--color-main);
}
/*.snou-pagination-link {
  display:block;
  width:40px;
  margin-right:6px;
  border:1px solid;
  height:20px;
  line-height:20px;
  padding: 2px 0;
  text-align:center;
}*/
/*----- css spinner ---*/
#snou-loader-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  display: none;
}
.snou-loading-grid {
  display: inline-block;
  position: absolute;
  top: calc(50% - 80px);
  left: calc(50% - 80px);
  width: 160px;
  height: 160px;
}
.snou-loading-grid div {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: snou-loading-grid 1.2s linear infinite;
}
.snou-loading-grid div:nth-child(1) {
  top: 16px;
  left: 16px;
  animation-delay: 0s;
}
.snou-loading-grid div:nth-child(2) {
  top: 16px;
  left: 64px;
  animation-delay: -0.4s;
}
.snou-loading-grid div:nth-child(3) {
  top: 16px;
  left: 112px;
  animation-delay: -0.8s;
}
.snou-loading-grid div:nth-child(4) {
  top: 64px;
  left: 16px;
  animation-delay: -0.4s;
}
.snou-loading-grid div:nth-child(5) {
  top: 64px;
  left: 64px;
  animation-delay: -0.8s;
}
.snou-loading-grid div:nth-child(6) {
  top: 64px;
  left: 112px;
  animation-delay: -1.2s;
}
.snou-loading-grid div:nth-child(7) {
  top: 112px;
  left: 16px;
  animation-delay: -0.8s;
}
.snou-loading-grid div:nth-child(8) {
  top: 112px;
  left: 64px;
  animation-delay: -1.2s;
}
.snou-loading-grid div:nth-child(9) {
  top: 112px;
  left: 112px;
  animation-delay: -1.6s;
}
@keyframes snou-loading-grid {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}