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

/* Import Lato font */
@import url('https://fonts.googleapis.com/css?family=Lato');

/* Import Crimson Pro font */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');

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

/*Import Avenir Next Pro font (font weights 400, 500, 600, and 700) */
@font-face {
    font-display: swap;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 400;
    src: url('https://assets.commonlit.org/avenir-next-pro-regular.woff2') format('woff2');
  }
  
  @font-face {
    font-display: swap;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 500;
    src: url('https://assets.commonlit.org/avenir-next-pro-medium.woff2') format('woff2');
  }
  
  @font-face {
    font-display: swap;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    src: url('https://assets.commonlit.org/avenir-next-pro-demi.woff2') format('woff2');
  }
  
  @font-face {
    font-display: swap;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    src: url('https://assets.commonlit.org/avenir-next-pro-bold.woff2') format('woff2');
  }
  
  /* Italic font style */
  @font-face {
    font-display: swap;
    font-family: 'Avenir Next';
    font-style: italic;
    font-weight: 400;
    src: url('https://assets.commonlit.org/avenir-next-pro-italic.woff2') format('woff2');
  }
  
  @font-face {
    font-display: swap;
    font-family: 'Avenir Next';
    font-style: italic;
    font-weight: 500;
    src: url('https://assets.commonlit.org/avenir-next-pro-medium-italic.woff2') format('woff2');
  }
  
  @font-face {
    font-display: swap;
    font-family: 'Avenir Next';
    font-style: italic;
    font-weight: 600;
    src: url('https://assets.commonlit.org/avenir-next-pro-demi-italic.woff2') format('woff2');
  }
  
  @font-face {
    font-display: swap;
    font-family: 'Avenir Next';
    font-style: italic;
    font-weight: 700;
    src: url('https://assets.commonlit.org/avenir-next-pro-bold-italic.woff2') format('woff2');
  }


body {
    font-family: "Avenir Next", "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: "Avenir Next", "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: "Avenir Next", "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: "Avenir Next", "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: "Avenir Next", "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: .5em !important;
	/*padding: .5em !important;*/
    padding: .8em .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: "Avenir Next", "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: "Avenir Next", "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: "Avenir Next", "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: "Avenir Next", "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: "Avenir Next", "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: "Avenir Next", "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: "Avenir Next", "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;
    
}