/*Ashley M. -- Any future person that looks at this, please kindly keep in mind that I am a novice! */

/*Import Open Sans font*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');

/*Import Open Sans Pro font (font weights 400, 500, 600, and 700) */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
}

/* Italic font style */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
}

body {
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;
  color: #1f1727 !important;
}

/*main logo styling*/
#mainNav .brand {
  max-width: 170px !important;
}
#mainNav .brand img {
  /*height is 32 by 308*/
  height: auto !important;
  padding-bottom: 10px !important;
}
/* CSS for the nav bar main */
.popArticles {
  text-align: center !important;
  padding-left: 10px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-right: 10px !important;
  margin: 0px !important;
  list-style-type: none !important;
}

.icon-article-doc {
  visibility: hidden !important;
  display: none !important;
  padding: 0px !important;
}
/*Hiding this and showing it is helping with the alignment of the text on the article list page and the search page and stuff so it is left aligned properly*/
.row-fluid .contentWrapper .icon-article-doc {
  display: inline-block !important;
}
#serp .articleList .icon-article-doc {
  display: none !important;
}

/*main nav bar border style*/
#mainNav {
  padding-bottom: 15px !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid;
  border-bottom-color: #e6e6e6 !important;
}
#mainNav .navbar-inner {
  box-shadow: none !important;
  border: none !important;
}

/*nav bar home button styling*/
#mainNav #home {
  display: block !important;
  visibility: visible !important;
}
#mainNav #home a {
  color: #1f1727 !important;
  background-color: #ffbf40 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;

  border-radius: 8px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin: 10px !important;

  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
#mainNav #home a:hover {
  background-color: #ffaa00 !important;
}
#mainNav #home a .caret {
  visibility: hidden;
  display: none;
}

/* Hides the navbar category buttons for larger screens so they only stay visible for smaller screens like phone and tablet */
@media (min-width: 750px) {
  #mainNav .nav li {
    visibility: hidden;
    display: none;
  }
}
#mainNav .nav li a {
  color: #1f1727 !important;
  font-size: 16px !important;
  transition-property: background, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 10px !important;
  border-radius: 6px;
}
#mainNav .nav li a:hover {
  background-color: #f6f4eeff !important;
  color: #1f1727 !important;
}
#mainNav .nav li.active a {
  /*color: #ffbf40 !important;*/
}

/* CSS for the search bar and search button on the main page */
#docsSearch {
  position: relative;
  top: -1px;
  height: 150px !important;
  padding-top: 50px;

  border-bottom: none;
  background-color: #4c4551 !important;
}
#docsSearch h1 {
  box-sizing: border-box !important;
  max-width: 600px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 18px !important;
  padding-right: 15px !important;
  text-align: left !important;

  color: #fff !important;
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 28px !important;
}
#docsSearch h1::after {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url('https://cdn.commonlit.org/website_assets/562/1752679938/cleo-schoolbus-left-searching_%281%29.svg?1752679938');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-left: 4px;
}

/*main nav search bar styling*/
#docsSearch #searchBar {
  max-width: 600px !important;
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-top: 15px;
  padding-bottom: 15px;
  box-sizing: border-box !important;
}
#docsSearch #searchBar .search-query {
  height: 35px !important;

  background: #fffefa !important;
  color: #1f1727 !important;
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;
  font-size: 16px !important;

  border-color: transparent !important;
  box-shadow: none !important;

  border-radius: 8px !important;
  box-sizing: border-box !important;

  transition-property: background, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
#docsSearch #searchBar .search-query:hover {
  background-color: #fcfbf5 !important;
}

/*main nav search bar placeholder text*/
#docsSearch #searchBar input::placeholder {
  color: #57515c !important;
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;
}

/*hide the search text and show just the search icon (for all search bars on site)*/
#searchBar button span {
  display: none !important;
  visibility: hidden !important;
}
#searchBar button i {
  display: contents !important;
  visibility: visible !important;
  color: #57515c !important;
}
#searchBar button i::before {
  color: #57515c !important;
}
/*main nav search button styling overall*/
#docsSearch #searchBar button {
  height: 35px !important;
  margin-right: 15px !important;
  padding-right: 20px !important;
  top: 15px !important;

  background: none !important;
  color: #57515c !important;
  text-shadow: 0px 0px;

  border-color: transparent;
  border-radius: 0px 8px 8px 0px;
  box-sizing: border-box !important;
}

/* CSS for categories on main page */

#contentArea {
  max-width: 900px !important;
}
/*Width of content that is NOT on the main page, so articles, search, etc.*/
#contentArea:has(.row-fluid) {
  max-width: 1080px !important;
}

@media (max-width: 933px) {
  #contentArea {
    max-width: 600px !important;
  }

  #docsSearch #searchBar button {
    padding-right: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

.category-list {
  width: 100% !important;
  padding: 1em !important;

  display: flex !important;
  align-items: stretch;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}
.category {
  width: 100% !important;
  max-width: 260px !important;
  min-height: 85px !important;
  max-height: 85px !important;

  margin: 0.5em !important;
  /*padding: .5em !important;*/
  padding: 0.8em 0.5em !important;

  background: #ffeabf !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .category {
    max-width: none !important;
    max-height: none !important;
  }
}

/*Inner category box, and then h3 and p are the heading text and article count text*/
section .category[id^='category-'] {
  border-radius: 8px !important;
  border-color: #dddbda !important;
  border-style: solid;
  border-width: 1px !important;
  box-shadow: none !important;
  background: #fff !important;

  transition-property: background, color, border;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
}
section .category[id^='category-']:hover {
  /*background: #ffbf40  !important;*/
  border-color: #dddbda !important;
  box-shadow: 0 0 4px #dddbda !important;
  /*box-shadow: 0 0 8px rgba(109, 104, 113, 0.25) !important;*/
}
section .category[id^='category-']:hover p.article-count {
  color: #0345cc !important;
  text-decoration: underline !important;
}

.category h3 {
  padding: 0 10px !important;
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 0 !important;
  margin-top: 11px !important;
  color: #1f1727 !important;
}
.category p.article-count {
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;
  font-weight: 400 !important;
  color: #035fe6 !important;
  font-size: 12px !important;
  margin: 10px 0 !important;
}

/* CSS for collections */
.twoCol .collection,
.threeCol .collection {
  background: #fffefa;
  border-color: #adadad;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
}
.collection-category {
  margin: 0 auto !important;
}
.collection-category h2 {
  margin-left: 15px !important;
}

/*main collections headers styling*/
.collection-category h2 {
  margin-bottom: 0 !important;
}
.collection-category h2 a {
  font-family: 'Crimson Pro', serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  color: #1f1727 !important;
}
.collection-category h2 a:hover {
  text-decoration: none !important;
}

/*wait i forgot what button this is*/
/* Collections browse button CSS */
.browse {
  background: #e1b71d;
  border-color: transparent;
  border-radius: 30px;
  padding: 14px 16px;

  font-size: 16px !important;
  font-weight: 400;
  color: #3a3a3a !important;
  text-shadow: 0px 0px;
  text-decoration: none !important;

  transition-property: background, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.browse:hover {
  background: #6c989e;
  border-color: transparent;
  color: #fff !important;
}

/*article text and title styling*/
#fullArticle h1.title {
  font-family: 'Crimson Pro', serif !important;
  font-size: 30px;
  font-weight: 500;
  color: #1f1727 !important;
}
#fullArticle p {
  color: #1f1727 !important;
  font-size: 16px !important;
}
#fullArticle strong {
  color: #1f1727 !important;
  font-weight: 600 !important;
}
#fullArticle b {
  color: #1f1727 !important;
  font-weight: 600 !important;
}
#fullArticle em {
  color: #1f1727 !important;
}
#fullArticle li {
  color: #1f1727 !important;
  font-size: 16px !important;
}
#fullArticle h1 {
  font-size: 22px;
  font-weight: 600;
  color: #1f1727 !important;
}
#fullArticle h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1f1727 !important;
}
#fullArticle h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f1727 !important;
}
#fullArticle .icon-print {
  visibility: hidden;
}

/*article page preview "View in Help Scout" button*/
#fullArticle a.admin-edit.btn {
  background-image: none !important;
  background-color: #ffeabf !important;

  color: #1f1727 !important;
  font-size: 12px !important;

  border: 2px solid #ffbf40 !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;

  text-shadow: none !important;
  text-decoration: none !important;

  transition-property: background, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
#fullArticle a.admin-edit.btn:hover {
  background-color: #ffbf40 !important;
}

/*full article links styling*/
#fullArticle a {
  text-decoration: none !important;
  color: #035fe6 !important;
}
#fullArticle a:hover {
  color: #0345cc !important;
  text-decoration: underline !important;
}
#fullArticle a u {
  text-decoration: none !important;
  color: #035fe6 !important;
}
#fullArticle a u:hover {
  color: #0345cc !important;
  text-decoration: underline !important;
}
#fullArticle a strong {
  text-decoration: none !important;
  color: #035fe6 !important;
}
#fullArticle a strong:hover {
  color: #0345cc !important;
  text-decoration: underline !important;
}
#fullArticle a b {
  text-decoration: none !important;
  color: #035fe6 !important;
}
#fullArticle a b:hover {
  color: #0345cc !important;
  text-decoration: underline !important;
}
#fullArticle a em {
  text-decoration: none !important;
  color: #035fe6 !important;
}
#fullArticle a em:hover {
  color: #0345cc !important;
  text-decoration: underline !important;
}

/*full article images and GIFs styling*/
#fullArticle img {
  /* border: none !important;*/
  border: 2px solid #dddbda !important;
  border-radius: 6px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/*article list page*/

/* Styling for the list of articles on the article list page*/
.articleList a:hover {
  color: #0345cc !important;
  font-size: 16px !important;
}
.articleList a {
  color: #035fe6 !important;
}

/*article list page content border styling and padding and such*/
.contentWrapper {
  box-shadow: none !important;
  border: none !important;
  background-color: #fffefa !important;
}
.contentWrapper #categoryHead h1 {
  font-family: 'Crimson Pro', serif !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  color: #1f1727 !important;
  margin-bottom: 0 !important;
}
.row-fluid .contentWrapper h1 {
  font-family: 'Crimson Pro', serif !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  color: #1f1727 !important;
}
#main-content {
  padding: 0 !important;
  margin: 0 !important;
  background-color: #fffefa !important;
}
#main-content .articleList li {
  font-size: 16px !important;
  padding: 8px 8px 8px 0px !important;
  margin: 0 !important;
}

/*article list view search bar styling*/
#sidebar {
  padding: 10px !important;
  background-color: #fff !important;

  border: 1px solid #dddbda !important;
  border-radius: 8px !important;

  margin-top: 50px !important;
}

#sidebar .search-query {
  height: 37px !important; /*was 35*/
  width: 95% !important;
  padding: 8px 12px !important; /*was 8px by 12px */
  margin-left: 5px !important;
  margin-right: 5px !important;
  margin-top: 5px !important;

  background-color: #fff !important;
  color: #1f1727 !important;
  font-size: 16px !important;
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;

  border: 1px solid #dddbda !important;
  border-radius: 8px !important;
  outline: none !important;
  box-shadow: none !important;

  transition-property: background, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
#sidebar .search-query:hover {
  /* background-color: #f7f4ee !important; */
}
#sidebar #searchBar {
  margin-bottom: 0 !important;
}

#sidebar .search-query::placeholder {
  color: #57515c !important;
  font-size: 16px !important;
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;
}
#sidebar .icon-search {
  color: #57515c !important;
}
/*sidebar article pages search button styling*/
#sidebar #searchBar button {
  margin-right: 5px !important;
  height: 37px !important;
  width: 40px !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2357515c' stroke-width='1.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important; /*make icon larger or smaller, fyi*/
  background-color: transparent !important;

  border: none !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}
#sidebar #searchBar button i {
  display: none !important;
}

/*Sort by.. Popularity etc. bar */
.row-fluid .sort form {
  padding-bottom: 10px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 3px !important;
}
.row-fluid .sort form #sortBy {
  border: 1px solid #dddbda !important;
  border-radius: 6px !important;
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;
  color: #1f1727 !important;

  transition-property: background, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.row-fluid .sort form #sortBy:hover {
  background-color: #fcfbf5 !important;
}

/*article list view side bar categories*/
#sidebar .nav-list {
  /*background-color: #f7f4ee !important;*/

  /*border-radius: 0 0 6px 6px;
    border: 1px solid #f7f4ee;*/
  /*padding: 15px 15px !important;*/

  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 0px !important;

  margin-bottom: 0 !important;
}
#sidebar .nav-list a {
  font-size: 16px !important;
  color: #1f1727 !important;
}
#sidebar .nav-list li {
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  margin-bottom: 10px !important;
}
#sidebar .nav-list li:hover {
  background-color: #fcfbf5 !important;
  border-radius: 4px !important;
}

#sidebar h3 {
  color: #1f1727 !important;

  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 10px !important;
  padding-bottom: 0 !important;

  margin-bottom: 0 !important;

  /*background-color: #f7f4ee !important;*/

  font-size: 16px !important;
  text-transform: capitalize !important;
  font-weight: 600 !important;

  /*border-radius: 6px 6px 0 0;
    border: 1px solid #f7f4ee;*/
}

#sidebar .nav-list .active a {
  font-weight: 400 !important;
  background-color: #f7f4ee !important;
  border-radius: 4px !important;
}
#sidebar .nav-list .active {
  /*color: #e59900 !important;*/
  font-weight: 400 !important;
  background-color: #f7f4ee !important;
  border-radius: 4px !important;
}
#sidebar .nav-list .active:hover {
  background-color: #f7f4ee !important;
}

#sidebar .nav-list .active a .icon-arrow {
  display: none !important;
  visibility: hidden !important;
}

.articleFoot .lu {
  font-family: 'Open Sans', sans-serif !important;
}

/*Related Articles section at bottom of articles*/
#main-content .related {
  border: none !important;
  background-color: #fffefa !important;
}
#main-content .related ul {
  margin: 0 !important;
  padding: 0 !important;
}

#main-content .related li a {
  color: #035fe6 !important;
  font-weight: normal !important;
  font-size: 16px !important;
  margin: 0 !important;
}
#main-content .related li a:hover {
  color: #0345cc !important;
  text-decoration: underline !important;
}
#main-content .related h3 {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #1f1727 !important;
  padding: 0 !important;
  padding-bottom: 8px !important;
}

/*search results page styling*/
#serp .articlesFound {
  color: #625c66 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#serp .nada {
  /*no articles found*/
  color: #625c66 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#serp .articleList li p {
  color: #1f1727 !important;
  font-size: 16px !important;
}
#serp .articleList a {
  color: #035fe6 !important;
  font-size: 18px !important;
  font-weight: 600 !important;

  display: block;
  padding: 0;
  margin: 0;
  text-align: left;
  word-wrap: break-word;
  hyphens: auto;
}
#serp .articleList a:hover {
  font-size: 18px !important;
  color: #0345cc !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}
#serp h1 {
  color: #1f1727 !important;
  font-family: 'Crimson Pro', serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
}

/*This is for the - Still Need Help? Contact Us - button under article pages */
.articleFoot .help {
  font-family: 'Open Sans', 'Open Sans', sans-serif !important;
  color: #57515c !important;
  text-decoration: none !important;
  font-style: normal !important;
}
.articleFoot .icon-contact::before {
  display: none !important;
}
.articleFoot .help::before {
  content: ''; /* This is required for pseudo-elements! */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z' stroke='%2357515c' stroke-width='1' fill='none'/%3E%3Cpolyline points='22,6 12,13 2,6' stroke='%2357515c' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  margin-bottom: 3px !important;
}
.articleFoot .help a {
  color: #035fe6 !important;
  border: none !important;
}
.articleFoot .help a:hover {
  text-decoration: underline !important;
  color: #0345cc !important;
}