@font-face
{
	font-family: "Gypsy Curse";
	src: url("Gypsy Curse.ttf") format("truetype");
}

:root
{
	font-family:	monospace;

	width:			100%;
	height:			100%;
}

body
{
	width:			100%;
	height:			100%;
	margin:			0;
}

.widget-frame
{
	position:			relative;
	height:				100%;
	width:				100%;
	border-radius:		20px;
	overflow:			hidden;
}

.overlay
{
	position:			absolute;
	top:				0;
	left:				0;
	width:				100%;
	height:				100%;
	box-sizing:			border-box;
	flex-direction:		column;
	align-items:		center;
	justify-content:	center;
	z-index:			1;
	
	background-color:	#fffa;
	padding:			10px;
}

.info-text
{
	color:				#333;
	font-size:			10px;
	text-align:			center;
}

.scrolling-list-item
{
	border-bottom:		1px solid black;
	cursor:				pointer;
	padding:			2px 0;
}

.scrolling-list-wrapper
{
	flex:				1;
	position:			relative;
	margin:				5px 0px;
}

.scrolling-list-wrapper > .scrolling-list
{
	position:			absolute;
	top:				0;
	left:				0;
	height:				100%;
	width:				100%;
	overflow-y:			auto;
	font-size:			10px;
}

.centered-column
{
	flex:				1;
	
	display:			flex;
	flex-direction:		column;
	align-items:		stretch;
	justify-content:	center;
}

/*
*	JUN COUNT
*/

.overlay.jun-count-overlay
{
	display:			flex;
	flex-direction:		column;
	align-items:		center;
	justify-content:	center;
	background:			radial-gradient(#CCCA, transparent 70%);
}

.overlay.jun-count-overlay .overlay.crown-container
{
	display:			flex;
	z-index:			1;
	background:			none;
}

.overlay.jun-count-overlay .overlay.crown-container img
{
	height:				200px;
	/* img will respect aspect ratio if you only give one dimension */
}

.jun-count-container
{
	font-family:		"Gypsy Curse";
	font-size:			70px;
	z-index:			2;
}

.jun-count-container > .jun-count
{
	font-size:			140px;
	line-height:		140px;
	margin:				0px 5px;
	color:				#9b0e0e;
	text-shadow:		3px 3px 3px black;
}

.overlay.jun-controls-container
{
	display:			flex;
	z-index:			3;
	align-items:		stretch;
	background:			radial-gradient(transparent, #CCC7 80%);
}

.jun-controls-container > .top-controls,
.jun-controls-container > .bottom-controls
{
	display:			flex;
	align-items:		center;
	flex-direction:		row;
}

.jun-controls-container > .bottom-controls
{
	margin-top:			auto;
}

/*
*	MAIN MENU
*/

.overlay.menu 
{
	display:			flex;
}

.menu-row
{
	display:			flex;
	flex-direction:		row;
}

.menu-option
{
	display:			flex;
	margin:				5px;
	border-radius:		2px;
	cursor:				pointer;
}

.menu-option:hover
{
	background-color:	gray;
}

/*
*	SELECT MICROPHONE
*/

.overlay.mic-select
{
	display:			flex;
	align-items:		stretch;
}

.overlay.mic-select .device-list-wrapper
{

}

.overlay.mic-select .device-list-wrapper > .device-list
{

}

.overlay.mic-select .device-list-wrapper .device
{
	
}

.overlay.mic-select .device-list-wrapper .system-device
{
	display:			inline;
	text-transform:		uppercase;
	font-weight:		bold;
	color:				blue;
}

.overlay.mic-select .device-list-wrapper .device.selected
{
	background-color:	#5a5;
}

/*
*	CALIBRATION
*/

.overlay.calibration
{
	display:			flex;
	font-size:			12px;
	align-items:		stretch;
}

.calibration-threshold-raw
{
	font-size:			10px;
	color:				#555;
	text-align:			center;
}

.calibration-mic-meter
{
	position:			absolute;
	background-color:	#5a5a;
	bottom:				0;
	left:				0;
	width:				100%;
	height:				0;
}

.calibration-jun-threshold
{
	position:			absolute;
	border-bottom:		2px solid black;
	width:				100%;
	height:				0;
	bottom:				0;
	left:				0;
}

.calibration-jun-threshold.current
{
	border-bottom:		2px dashed #5a5;
}

/*
*	SETTINGS
*/

.overlay.settings
{
	display:			flex;
	align-items:		stretch;
}

.settings-interface
{
	
}

.title-row
{
	line-height:		24px;
	text-align:			center;
}

.title-row::first-letter
{
	font-size:			24px;
	font-family:		"Gypsy Curse";
	color:				red;
	text-shadow:		1px 1px 1px black;
	margin:				0 4px;
}

.config-row
{
	display:			block;
}

.config-row > .config-label
{
	font-size:			10px;
}

.config-row > input
{
	width:				100%;
	margin:				0;
	border:				0;
	padding:			0;
}

button
{
	font-size:			12px;
	padding:			2px 4px;
}

/*
*	JUNLOG
*/

.overlay.junlog
{
	display:			flex;
	align-items:		stretch;
}

.overlay.junlog textarea
{
	width:				100%;
	resize:				none;
	font-size:			10px;
	overflow:			hidden;
}

.overlay.junlog .junlog-header
{
	display:			flex;
	flex-direction:		row;
	align-items:		center;
}

.overlay.junlog .junlog-header > .jun-score-record
{
	font-size:			14px;
	font-weight:		bold;
	margin:				0 5px;
}

.overlay.junlog .junlog-history-list
{
	
}

.overlay.junlog .junlog-history-list > .history-item-container
{
	display:			flex;
	flex-direction:		row;
	align-items:		center;
}

.overlay.junlog .history-item-container .session-time
{
	flex:				1;
	font-size:			12px;
	margin:				0 10px;
}

.overlay.junlog .history-item-container .item-jun-count-container
{
	font-family:	"Gypsy Curse";
}

.overlay.junlog .history-item-container .item-jun-count
{
	font-size:			24px;
	line-height:		24px;
	color:				red;
	text-shadow:		1px 1px 1px black;
	font-size:			30px;
	line-height:		30px;
	margin:				0 5px;
}

.overlay.junlog .history-item-container .item-jun-label
{
	display:			inline-block;
	font-size:			20px;
	line-height:		20px;
	width:				30px;
}

.overlay.junlog .overlay.junlog-viewer
{
	display:			flex;
	align-items:		stretch;
	background-color:	#bbbe;
}

.overlay.junlog .overlay.junlog-viewer .junlog-data-container
{
	
}

.overlay.junlog .junlog-empty-note
{
	position:			absolute;
	top:				0;
	left:				0;
	height:				100%;
	width:				100%;
	
	display:			flex;
	flex-direction:		column;
	font-size:			12px;
	text-align:			center;
	justify-content:	center;
}

.overlay.junlog .junlog-empty-note > .junned
{
	font-family:		"Gypsy Curse";
	font-size:			70px;
	line-height:		70px;
}

.overlay.junlog .junlog-empty-note > .junned::first-letter
{
	color:				red;
	font-size:			100px;
}
/*
*	LINK
*/

.overlay.link
{
	display:			flex;
	align-items:		stretch;
}

.overlay.link textarea
{
	width:				100%;
	resize:				none;
	font-size:			10px;
	overflow:			hidden;
}

/*
*	INFO
*/

.overlay.info
{	
	display:			flex;
	align-items:		stretch;
}

.overlay.info p
{
	text-align:			center;
	font-size:			10px;
	margin:				5px 0px;
}