.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: none;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content/Box */

.modal-content {
	background-color: #fefefe;
	margin: 30vh auto;
	/* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 500px;
	text-align: center;
}

#modal_message {
	margin: 0;
}

/* The Close Button */

.modal_close {
	color: #aaa;
	/* font-size: 28px;
	font-weight: bold; */
}

.modal_close:hover, .modal_close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.flavor-selector {
	background-color: #d8d8d8;
	padding: 15px;
	border-radius: 5px;
}

.flavor-selector:hover {
	cursor: pointer;
}

.gotten {
	background-color: #b1b1b1;
	border: solid 10px #ffcdd2;
}

.notten {
	background-color: #b1b1b1;
	border: solid 10px #c8e6c9;
}

.gotten.current {
	background-color: #ffcdd2;
}

.notten.current {
	background-color: #c8e6c9;
}



.user-flavor-list {
	overflow-y: scroll;
	max-height: 50vh;
	width: 100%;
	margin: auto;
}

/* Ratings */

.star-wrapper {
	direction: rtl;
	margin: 50px auto;
}

.star-wrapper a {
	font-size: min(1.5em, 6vw);
	color: #cd2963;
	text-decoration: none;
	transition: all 0.5s;
	margin: 4px;
}

.star-wrapper a:hover {
	color: gold;
	transform: scale(1.3);
}

.star-wrapper .star-selected {
	color: gold;
}

.s1:hover~a {
	color: gold;
}

.s2:hover~a {
	color: gold;
}

.s3:hover~a {
	color: gold;
}

.s4:hover~a {
	color: gold;
}

.s5:hover~a {
	color: gold;
}


.days-histogram {
	width: 100%;
	table-layout: fixed;

}

.days-histogram, .days-histogram tr, .days-histogram tr td {
	border: none;
	text-align: center;
}

.days-histogram, .histogram-bars {
	padding-bottom: 0;
}

.days-histogram .histogram-bars {
	height: 10em;
}

.histogram-bar {
	border-bottom: 1px solid black;
}