/* Hide the scrollbars on Chrome, Firefox, and IE on PC because
when you search for something and the page is no longer scrollable
it shifts due to the scrollbar disappearing which is a horrible UX */
html{
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
	scrollbar-width: none;  /* Firefox */
}

::-webkit-scrollbar {
    display: none;
}

body{
	background: #ffffff;
	margin: 0px;
	margin-bottom: 20px;
	-webkit-font-smoothing: antialiased;
	font-family: 'Avenir',BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.tippy-content {
  font-size: 12px !important;
  text-align: center;
}

.tooltip {
   position: relative;   
   data-placement: top;
}

.tooltip:hover::before {
   background-color: black;
   border-radius: 2px;
   color: #fff;
   content: attr(data-title);
   display: inline-block;
   font-family: sans-serif;
   font-size: 12px;
   padding: 3px 3px;
   position: absolute;
   top: 20px;
   left: 20px;
}

.tooltip:hover::after{
  content: '';
  position: absolute;
  bottom: 0px;
  left: 50%;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;	
  border-bottom: 8px solid #000;
}

#starButton {
	background-color: transparent;
	color: black;
	border: none;
	position: relative;
    float: left;
    width:100%;
    bottom: -120px;
    left: 50%;        
    font-size: 14px;
    max-width: 100%;
	padding-left: 6px;
	padding-right: 6px; 
    transform: translate(-50%, -50%);
    word-wrap: break-word;
    hyphens: auto;
}

.favoritesRatingNumber{
	align-self: center;
	justify-self: end;
	text-align: center;
	line-height: 30px;
	font-size: 16px;
}

.ratingBubbleContainer{
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background-color: #cacaca;
	cursor:default;
}

.highRating{
  background-color: #52c653;
  font-weight: 800;
  color: white;
}

.mediumRating{
  background-color: #fff58c;
  font-weight: 500;
}

.lowRating{
  background-color: #fd766f;
  font-weight: 800;
  color: white;
}

.nullRating{
  background-color: #edeff2;
  color: black;
  font-size: 9px;
  font-weight: 400;
}

.smallerSpacingRating{
  letter-spacing: -1px;
}

.smallerSpacingRating .favoritesRatingNumber{
	padding-right: 2px;
}

#header::after{
	content: " ";
	display: block;
	height: 0;
	clear: both;
}

#pageInfo{
	float: right;
	font-family: 'Avenir',BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-weight: 300;
	top: 37px;
	font-size: 22px;
	position: relative;
	right: 38px;
}

#coursicleLogo{
    font-family: 'Oleo Script', cursive;
    color: #14A2FF !important;
    text-transform: none;
    font-size: 49px;
   	float:left;
    font-weight: 600;
    margin-left: 29px;
    margin-top: 16px;
}

#tileContainer{
	max-width: 870px;
	margin:auto;
	margin-bottom:80px;
}

/*To push down the elements below the container*/
#tileContainer::after{
	content: " ";
	display: block;
	height: 0;
	clear: both;
}

#noTileResults{
	display: none;
	font-family: 'Avenir',BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-size: 22px;
	text-align: center;
	margin-top:80px;
}

.tileElement{
	color:inherit;
	text-decoration: inherit;
	font-family: 'Avenir',BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	background: #fff;
	border-radius: 2px;
	height: 250px;
	width: 250px;
	margin: 20px;
	float:left;
	text-align: center;
	vertical-align: middle;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: box-shadow 0.3s;
	overflow: hidden;
	cursor: pointer;
	border-radius: 19px;
}

.tileElement:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.tileElementText{
	position: relative;
	float: left;
	width:100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 30px;
	font-weight:700;
	max-width: 100%;
	word-wrap: break-word;
	hyphens: auto;
	padding-left: 6px;
	padding-right: 6px;
}

.professorTile .tileElementText{
	width:90%;
}

.tileElementTextWithSubtext{
	top: 40%;
}

.longSubjectNumber11,.longSubjectNumber12,.reallyLongSubjectNumber{
	font-size: 29px;
}

.tileElementHiddenText{
	position: relative;
	/*opacity: 0;*/
	font-weight:400;
	-webkit-font-smoothing: antialiased; /*Necessary for Safari to handle the font fading in smoothly*/
	font-size: 18px;
	width:94%;
	transition: .3s, opacity 0.3s;
	top:37%; /* Adjust this to have it slide in, to like 30*/
	padding-right: 3%;
	padding-left: 3%;
}

#moreTile{
	background: white;
}

#tileSearchBox{
	position:relative;
	left:50%;
	margin: 0px 0 0 -15%;
	width:30%;
	height:50px;
	margin-bottom:30px;
	margin-top:60px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  border-radius: 34px;
  box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
}

#tileSearchBoxInput{
	padding-left:15px;
	height: 95%;
	width: 90%;
	border: none;
	font-family: 'Avenir',BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-size: 19px;
  border-radius: 5px;
  color: #333;
	background-color: transparent;
}

input::placeholder{
	color: #8f8f8f;
}

#tileSearchBoxInput:focus{
	outline: none;
}

#tileSearchBoxIcon{
	position: absolute;
	top: calc(50% - 9px);
	right: 20px;
}

#itemViewHeader{
	font-family: 'Avenir',BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	margin-top: 62px;
	font-size: 38px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
	margin-bottom:50px;
	padding-left: 20px;
	padding-right: 20px;
}

#subItemContainer{
	max-width: 940px;
	margin: auto;
	/* this is called 'masonry layout' */
	column-count: 2; /* remove this to go back to floats */
	display: flex;
}

.subItem{
	display: inline-block; /*float:left;*/
	margin-left: 70px;
    margin-right: 30px;
    width: 370px;
	font-family: 'Avenir',BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	margin-bottom:22px;

}

.subItemLabel{
	font-weight: 500;
}

.professorLink, .courseLink, .professorEmailLink, .departmentLink, .backLink{
	color: #0BABE0;
	text-decoration: none;
	/* Better without transition */
}

.professorLink:hover, .courseLink:hover, .professorEmailLink:hover, .departmentLink:hover, .backLink:hover{
	color:#60C5E7;
}

.courseLink{
	display: block;
	float:left;
	clear:both;
}

/* Replaced feature plugs with guidance plugs, never used these anymore 
and moved relevant css to guidanceModals.css */

.leftTextFeaturePlug{
	clear: both;
	text-align: center;
}

.subItemContent .comment {
	padding-left: 0;
	padding-bottom: 4px;
  padding-top: 3px;
}

.subItemContent .comment-body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin-top: 0px;
	font-size: 15px;
	overflow: hidden;
	margin-bottom: 3px;
}

.subItemContent .comment-header {
	padding-bottom: 2px;
}

.subItemContent .comment:last-of-type {
		padding-bottom: 0px;
}

.subItemContent .userBadge {
	padding: 1px 5px 1px 5px;
	font-size: 9px;
	height: 12px;
}

#readMoreReviewsBtn {
	font-size: 15px;
}