/* 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: 8px;
}

.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%;
	border-radius: 5px;
	height:50px;
	margin-bottom:30px;
	margin-top:60px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.16), 0 1px 1px rgba(0,0,0,0.23);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

#tileSearchBox:hover{
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#tileSearchBoxInput{
	padding-left:15px;
	height: 90%;
	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: 20px;
	background-color: transparent;
}

#tileSearchBoxInput:focus{
	outline: none;
}

#tileSearchBoxIcon{
	position: absolute;
	top: calc(50% - 7px);
	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 */
}

.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;
}

.featurePlug{
	font-family: 'Avenir',BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    position: fixed;
    top: 324px;
    width: 140px;
    display: none; /*Will be displayed via javascript*/
    right: -140px; /*Will slide in via javascript*/
    padding: 8px 0px 4px 0px;
    height: 88px;
    border-radius: 6px 0px 0px 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3);
    font-size: 16px;
    background-color: inherit;
    z-index: 2;
}

.closePlug{
    font-size: 12px;
    font-weight: 700;
    cursor:pointer;
    opacity: .2;
    line-height: 0.5;
    left: 5px;
    top: 3px;
    position: absolute;
    display:none; /*By default, not displayed. Will display when on smaller screen sizes*/
}

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

.featurePlugActionButton{
	margin: auto;
	padding: 6px 7px 4px 7px;
	width: 70%;
	display: block;
	margin-top: 6px;
	height: 18px;
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 4px 4px 4px 4px;
	transition: 0.1s ease;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 12px;
	background-color: #14A2FF;
	text-align: center;
}

.featurePlugActionButton:hover{
	background-color: #2F99EA;
}