body{
	background-color: #181818;
}

a {
	cursor: pointer;
}

.navbar-fixed, nav, .nav-wrapper, .nav-wrapper .row, .nav-wrapper .row>*, .nav-wrapper .row .material-icons {
	height: 64px;
}

.logo img{	
    vertical-align: middle;
}

input[id="search"] {
	height: 45px !important; 
	margin-top: 10px;
	border-radius: 5px;
}

.search-input{
	background-color: #6b6b6b ;
	height: 45px !important; 
	margin-top: 10px;
	border-radius: 5px;
}

nav .input-field label  {
	top: -20px;
	left: 20px;
}

nav .input-field label.active {
	display: none;
}

#search {
	background: transparent;
	color: #fff;
}

.tabContent{
	display: none;
	text-align: center;
	width: auto;
}

#loading{
	width: 100%;
}
#loading .progress {
	margin: 0;
}

.active{
	display: block;
}

.videosDisplay{
	display: inline-block;
	margin-top: 4px;
}

.collection{
	display: inline-block;
	text-align: left;
	width: 100%;
	max-width: 60%;
}

.video{
	display: inline-block;
	text-align: left;
	margin: 4px;
	width: 206px;
	height: 206px;
	/*background-color: #ffffff;*/
	color: #999999;
	/*box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);*/
}

.videoThumbWrapper{
	height: 116px;
}

.videoThumb{
	width: 100%;
	height: 116px;
}

.videoDataWrapper{
	padding: 6px;
}

.videoTitleWrapper{
	overflow: hidden;
	word-wrap: break-word;
	height: 30pt;
}

.videoTitle{
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	color: #FFF;
}

.videoTitle:hover, .videoTitle:active, .videoTitle:visited:hover, .videoTitle:visited:active{
	color: #FFF;
}

.channelNameWrapper{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 12px;
}

.channelName, .channelName:visited{
	color: #AAA;
	font-weight: bold;
}

.channelName:hover, .channelName:active, .channelName:visited:hover, .channelName:visited:active{
	color: #FFF;
}

.postedTime{
	font-size: 12px;
}

.videoOverlayWrapper{
	position: relative;
	width: 0;
	height: 0;
}

.videoOverlay{
	position: absolute;
	top: -115px;
	left: 133px;
	background-color: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 12px;
	width: 68px;
	border-radius: 2px;
}

.markAsWatched{
	color: #999999;
}

.markAsWatched:hover{
	color: #ffffff;
}

.collection, .collection-header {
    border-color: #424242 !important;
}

.collection-item {
    border-color: #343435 !important;
}

/* SNACKBAR */
/* Credit: https://www.w3schools.com/howto/howto_js_snackbar.asp */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -180px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 10000; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}
#snackbar.show {
    visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}