body {
  margin: auto;
  font-family: sans-serif;
  background:#666;
  color:#fff;
}

*{
  margin:0;
  padding:0;
}

#topbar {
	width: 100%;
	padding: 10px;
	/* border: 1px solid green; */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.break {
	flex-basis: 100%;
	height: 0;
}

.control {
	margin: 5px;
	border: none;
}

#randombutton {
	/* background-color:silver;*/
}

#reloadbutton {
	background-color:green;
}

#textsearch {
	width: 200px;
}

#ratingsearch {
	width: 100px;
}

#adultsearch {
	width: 100px;
}

#container {
/*	border: 2px solid red; */
}


textarea {
	height: 153px;
	width: 100%;
	font-size:9pt;
	resize: none;
	border: none;
	background-color:  transparent;	
	outline: none;
	overflow: hidden;
}

.-trash- {
	text-align: center;
	position: absolute;
	top: -5px;
	right: -6px;
	width: 20px;
	height: 20px;
	color: red;
	font-size: 22pt;
	cursor: pointer;
	line-height: 0.5em;
}

.trash {
	position: absolute;
	top: 3px;
	right: 1px;
	width: 16px;
	height: 16px;

	background-image: url( './img/trash.svg'); /* https://www.svgrepo.com/ */
	background-repeat: no-repeat;
	background-size: 14px 14px;
	filter: invert(27%) sepia(70%) saturate(4532%) hue-rotate(21deg) brightness(96%) contrast(101%);
	
	color: red;
	cursor: pointer;
}

ul,li{
  list-style:none;
}

ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

ul li .note {
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
/*
  height:12em;
  width:12em;
*/
  height:200px;
  width:200px;

  padding:10px;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  transform: rotate(-6deg);
  transition: transform .15s linear;
  
}

ul li:nth-child(even) .note {
  transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}

ul li:nth-child(3n) .note {
  transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}

ul li:nth-child(5n) .note {
  transform:rotate(5deg);
  position:relative;
  top:-10px;
}

ul li .note:hover,ul li .note:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  transform: scale(1.25);
  position:relative;
  z-index:5;
}

ul li{
  margin:1em;
}

.add-note {
	margin: 0;
	height: 200px;
	width: 200px;
/*	border: 1px solid red; */
	outline: none;
	background: rgba(0, 0, 0, 0.1);
	text-align: center;
	font-size: 120px;
	color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transform: rotate(-6deg);
	transition: background 0.2s;
}
 
.add-note:hover {
	background: rgba(0, 0, 0, 0.2);
}

.controls {
	position: relative;
	left: -10px;
	width: 200px;
	height: 30px;
	
	margin: auto;
	display:flex;
	align-items:center;

	float: left;
/*	border: 1px solid red; */
}

.ratingbox {
	flex-grow: 1;
	text-align: center;
/*	border: 1px solid black; */
}

.adultbox {
	flex-grow: 1;
	text-align: center;
/* border: 1px solid blue; */
}

.adult {
	display: inline-block;
/*	border: 1px solid blue; */
	width: 18px;
	height: 16px;
	cursor: pointer;
	background-image: url( './img/adult.svg'); 
	background-repeat: no-repeat;
	background-size: 16px 16px;
}

.rating {
	display: inline-block;
/*	border: 1px solid blue; */
	width: 18px;
	height: 18px;
	cursor: pointer;
	background-image: url( './img/rating.svg');
	background-repeat: no-repeat;
	background-size: 17px 17px;
}

/* https://www.svgrepo.com/ */
/* https://codepen.io/sosuke/pen/Pjoqqp */

.pink {
	filter: invert(67%) sepia(49%) saturate(3752%) hue-rotate(295deg) brightness(101%) contrast(103%);
}

.gold {
	filter: invert(66%) sepia(96%) saturate(605%) hue-rotate(358deg) brightness(102%) contrast(106%);
}

/* 
.zero {
	filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(97%) contrast(103%);
}
 
.two {
	color: rgb(255, 106, 0);
	filter: invert(100%) sepia(76%) saturate(2526%) hue-rotate(357deg) brightness(105%) contrast(102%);
}
 
.three {
	color: rgb(255, 255, 0);
	filter: invert(56%) sepia(70%) saturate(2695%) hue-rotate(83deg) brightness(116%) contrast(127%);
}
 
.four {
	color: rgb(24, 159, 14);
}
 
.five {
	color: rgb(51, 119, 255);
}
*/

.u-none {
  display: none;
}

.tooltip-inner {
    background-color: #2f4fff;
    box-shadow: 0px 0px 4px black;
    opacity: .7;
}
.tooltip.bs-tooltip-right {
    border-right-color: #2f4fff !important;
}
.tooltip.bs-tooltip-left {
    border-left-color: #2f4fff !important;
}
.tooltip.bs-tooltip-bottom {
    border-bottom-color: #2f4fff !important;
}
.tooltip.bs-tooltip-top {
    border-top-color: #2f4fff !important;
}

.tooltip-arrow {
    filter: invert(24%) sepia(90%) saturate(2555%) hue-rotate(228deg) brightness(97%) contrast(112%);
	opacity: .5;
/*    display: none !important; */
}