/* Basics */

body, html, div, form
{
	padding: 0px;
	margin: 0px;
}

html, body
{
	font-size: 16px;
	
	background-color: #f8f8f8;
	height: 100%;
}

html, body, button, input, select, option, label
{
	font-family: Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, sans-serif;
}


.dynamic-textarea
{
	font-family: inherit;
}

h1
{
	font-size: 28px;
}

h2
{
	font-size: 24px;
}

h3
{
	font-size: 20px;
}

@media only screen and (max-width: 860px)
{
	h1
	{
		font-size: 26px;
	}
	
	h2
	{
		font-size: 24px;
	}
}


@media only screen and (max-width: 480px)
{
	h1
	{
		font-size: 24px;
	}
	
	h2
	{
		font-size: 22px;
	}
}


li
{
	margin-bottom: 6px;
}

a
{
	color: blue;
	text-decoration:none;
}

a:hover
{
	color: darkorange;
	text-decoration:underline;
}

p
{
	line-height: 1.4;
}

/* Util */

.nowrap
{
	white-space: nowrap;
}


/* Page structure */

.page-container
{
	display: flex;
	flex-direction: column;
	height: 100%;
	
	-background-color: purple;
}

.page-header-row
{
	background-color: #f8f8ff;
	border-bottom: 2px solid #5a5ab7;
	
	box-shadow: 0px 2px 1px #e2e2e2;
}

	.page-header-area
	{
		max-width: 1024px;
		
		width: auto;
		margin: auto;
		
		display: flex;
		padding: 0px 16px;
	
		align-items: center;
	}
	
	.logged-in .page-header-area
	{
		max-width: 1142px;
	}


.page-middle-row
{
	-background-color: yellow;
	flex:1;
	
	/*display: flex;
	width: 100%;
	align-items: stretch;*/
}

	.page-middle-area
	{
		width: auto;
		margin: auto;
		
		-background-color: #883;
		
		display: flex;
		
		justify-content: center;
	}

		.page-middle-side
		{
		}
		
		.page-middle-content
		{
			box-sizing: border-box;
			max-width: 1064px;
		
			flex:1;
			
			background-color: white;
			border: 1px solid #d0d0d0;
			border-width: 0px 1px 1px 1px;
			box-shadow: 2px 2px 4px #dadada;
			
			overflow:hidden; /* This is necessary otherwise resizing on result page does not work */
		}
		
		.page-middle-content
		{
			padding:0px 16px;
		}
		
		.page-middle-content .result-table-container
		{
			margin:0px -16px;
			padding: 0px 16px;
		}
		
		@media only screen and (max-width: 860px)
		{
			.page-middle-content
			{
				padding:0px 8px;
			}
			
			.page-middle-content .result-table-container
			{
				margin:0px -8px;
				padding: 0px 8px;
			}
		}
	
	.page-middle-footnote
	{
			color: #888;
			font-size: 13px;
			max-width: 1024px;
			padding:5px 16px;
			text-align: center;
			margin:auto;
	}

	
.page-footer-row
{
	-background-color: blue;
	
	background-color: #f8f8ff;
	border-top: 2px solid #5a5ab7;
	
	display:none;
}

	.page-footer-area
	{
		max-width: 1024px;
		
		width: auto;
		margin: auto;
	}


/* Menu */

.menu-box
{
	-padding:8px 16px;
	
	margin: 16px;
	
	background-color: white;
	border: 1px solid #d0d0d0;
	box-shadow: 2px 2px 4px #dadada;
}

.menu-box-top
{
	height:2px;
	background-color: #88f;
}

.menu-item
{
	padding:4px 16px;
}


/* Logo */

.site-logo
{
	display: inline-block;
	font-size: 200%;
	
	color: black;
	letter-spacing: 1px;
	vertical-align: middle;
	color: #222;
	
	font-weight: bold;
	
	-background-color:red;
	margin: 18px 0px;
}

.site-logo:hover
{
	color: black;
	text-decoration: none;
	
}

.site-logo small
{
	font-size: 14px;
}

.site-logo div
{
	display: block;
	font-size: 12px;
	letter-spacing: 2px;
	text-align:center;
}


.logged-in .site-logo
{
	margin: 12px 0px;
	font-size: 24px;
}

.logged-in .site-logo small
{
	font-size: 11px;
}

.logged-in .site-logo div
{
	font-size: 11px;
	letter-spacing: 1px;
	padding-right:16px;
}


/* Header */

.header-login
{
	-background-color:red;
	
	flex: 1;
	text-align:right;
}

.header-login form
{
	text-align: left;
	display:inline-block;
	padding-left:16px;
	padding-top:8px;
	-background-color: red;
}

.header-login-options
{
	font-size: 13px;
	text-align: center;
	text-align: right;
	padding-top: 3px;
	margin-top: 1px;
	-margin-bottom: 3px;
}

.header-login-option 
{
	font-weight: normal !important;
	display: inline-block !important;
}

.header-login-options input
{
	padding: 0px;
	vertical-align: middle;
	margin: 0px 2px;
}

.header-login-options label
{
	margin-right: 16px !important;
}

.header-login-options a, .header-login-options label
{
	color: #444;
}

#vv_errorbox, #vv_errorbox2, .vv_errorbox
{
	color: #e00;
	font-size: 16px;
}

#vv_errorbox
{
	background-color: #fee;
	border: 1px solid #a00;
	padding: 6px 8px;
}

#vv_errorbox:empty, #vv_errorbox2:empty, .vv_errorbox:empty
{
	display: none;
}

.header-menu
{
	flex: 1;
	text-align:right;

	/*display:inline-block;
	vertical-align: middle;
	font-size: 18px;
	float:right;*/
}

.header-menu-content
{
	text-align: left;
	display:inline-block;
	padding-left:16px;
	
	display: flex;
	justify-content: flex-end;
}

.header-menu-content-logge-in-as
{
	margin-right: 24px;
	line-height: 22px;
}

.header-menu-content-logge-in-as-2rows
{
	margin-right: 18px;
	font-size: 14px;
	line-height: 18px;
	margin-top: -2px;
}

.header-menu-content-logge-in-as-2rows div:nth-child(2)
{
	font-size: 12px;
	line-height: 2px;
}


.header-menu form
{
	margin:0px;
}

.header-menu div
{
	padding:4px;
	text-align: center;
	-background-color:red;
	-margin: 8px;
	align-items: center;
	justify-content: begin;
}

@media only screen and (max-width: 870px)
{
	.logged-out .site-logo
	{
		margin-top: 14px;
		margin-bottom: 4px;
	}

	.logged-out .page-header-area
	{
		-display:block;
		flex-direction: column;
	}
	
	
	.logged-out .header-login form
	{
		margin-bottom: 0px;
		text-align: center;
		margin-top: 0px;
	}
	
	.logged-out .header-login-options
	{
		margin-top: 1px;
		margin-bottom: 3px;
		text-align: center;
	}
	
}

@media only screen and (max-width: 600px)
{
	.logged-out .header-login form
	{
		text-align: left;
		display:flex;
		flex-direction: column;
	}
	
}


@media only screen and (max-width: 620px)
{
	/* It looks nicer if it doesn't get too close to the logo so we do it a bit earlier */
	.logged-in .header-menu-content-logge-in-as
	{
		margin-right: 8px;
	}
}

@media only screen and (max-width: 620px)
{
	.logged-in .site-logo
	{
		margin-top: 14px;
		margin-bottom: 2px;
		
		min-width: 95vw;
	}
	
	.logged-in .page-header-area
	{
		flex-wrap: wrap;
		
		justify-content: space-evenly;
		text-align: center;
	}
	
	.logged-in .header-menu
	{
		order: 1;
	}
	
	.logged-in .header-menu-content-logge-in-as-2rows
	{
		padding-bottom:6px;
	}
	
	.logged-in .header-menu-content
	{
		justify-content: center;
	}
	
	.logged-in #menu-toggle-link
	{
		padding-left: 0px !important; 
		padding-bottom: 4px !important;
	}
	
	.logged-in #header-universe-selection
	{
		padding-left: 0px !important; 
		padding-right: 10px !important; 
		margin: 0px;
	}
	
	.logged-in input[type=submit],
	.logged-in input[type=button]
	{
		padding: 6px 12px !important;
		font-size: 14px !important;
	}
	
	.logged-in .logged-in-as
	{
		
		font-size: 15px;
	}
}


.inactive-account-menu-item a
{
	background-color: #fdd;
	border-top-color: #f66;
	border-left-color: #f66;
	border-right-color: #f66;
}

.inactive-account-menu-item a:hover
{
	background-color: #ffe6e6;
}

.inactive-account-menu-item.selected a,
.inactive-account-menu-item.selected a:hover
{
	background-color: #fff;
	background: linear-gradient(180deg, rgba(255,221,221,1) 0%, rgba(255,255,255,1) 100%);
}


.side-menu-item:first-child
{
	margin-top: 8px;
}

.side-menu-item
{
	min-width: 140px;
}

.side-menu-item a
{
	display: block;

	color: black;
	
	margin: 4px 4px;
	padding: 6px 8px;
	font-size: 14px;
	
	letter-spacing: 0.3px;
	
}

.side-menu-item a:hover
{
	text-decoration: underline 1px solid #b6b8ba;
}

.side-menu-item a:hover,
.side-menu-item.selected a
{
	outline: 1px solid #dddfe2;
	background-color: #fefefe;
	
}

.side-menu-item.selected
{
	font-weight: bold;
}

#menu-toggle-link
{
	display:none;
}

#keep-menu-open-row
{
	display:none;
}

@media only screen and (max-width: 860px)
{
	.page-middle-side:not(.show)
	{
		display:none;
	}
	
	#menu-toggle-link
	{
		display:block;
	}
	
	#keep-menu-open-row
	{
		display: block;
	}
}



/* Form */
/* https://www.sanwebe.com/2014/08/css-html-forms-designs */
.form-style-1 {
	margin:10px auto;
	-padding: 20px 12px 10px 20px;
	/*font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;*/
	font-size: 13px;
}
.form-style-1 li {
	padding: 0;
	display: block;
	list-style: none;
	margin: 10px 0 0 0;
}
.form-style-1 label{
	margin:0 0 3px 0;
	padding:0px;
	display:block;
	font-weight: bold;
	
	/*background-color: blue;*/
}

.label-row
{
	display:block;
}

.label-row label
{
	display:inline-block;
	/*background-color: yellow;*/
}


.form-style-1 input[type=text], 
.form-style-1 input[type=password], 
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
.form-style-1 textarea, 
.form-style-1 select{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border:1px solid #BEBEBE;
	padding: 7px;
	margin: 2px 0px;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
	
	font-size:16px;
	line-height: 16px;
}

.form-style-1 input[type=date]
{
	font-size:14px;
}

.form-style-1 select
{
	/* default gray looks to ugly */
	background-color: #f8f8f8;
}


.form-style-1 select, 
.form-style-1 input[type=text]:read-only, 
.form-style-1 input[type=password]:read-only, 
.form-style-1 input[type=date]:read-only,
.form-style-1 input[type=datetime]:read-only,
.form-style-1 input[type=number]:read-only,
.form-style-1 input[type=search]:read-only,
.form-style-1 input[type=time]:read-only,
.form-style-1 input[type=url]:read-only,
.form-style-1 input[type=email]:read-only,
.form-style-1 textarea:read-only
{
	/* default gray looks to ugly */
	background-color: #f8f8f8;
}

.form-style-1 input:not([readonly])[type=text]:focus, 
.form-style-1 input:not([readonly])[type=password]:focus, 
.form-style-1 input:not([readonly])[type=date]:focus,
.form-style-1 input:not([readonly])[type=datetime]:focus,
.form-style-1 input:not([readonly])[type=number]:focus,
.form-style-1 input:not([readonly])[type=search]:focus,
.form-style-1 input:not([readonly])[type=time]:focus,
.form-style-1 input:not([readonly])[type=url]:focus,
.form-style-1 input:not([readonly])[type=email]:focus,
.form-style-1 textarea:not([readonly]):focus, 
.form-style-1 select:not([readonly]):focus{
	-moz-box-shadow: 0 0 8px #88D5E9;
	-webkit-box-shadow: 0 0 8px #88D5E9;
	box-shadow: 0 0 8px #88D5E9;
	border: 1px solid #88D5E9;
	
}

.form-style-1 .field-divided{
	width: 49%;
}

.form-style-1 .field-long{
	width: 100%;
}
.form-style-1 .field-select{
	width: 100%;
}
.form-style-1 .field-textarea{
	height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
	background: #4B99AD;
	padding: 8px 15px 8px 15px;
	border: none;
	color: #fff;
	margin: 2px 0px;
	font-size: 16px;
	line-height: 16px;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
	background: #4691A4;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
}

.form-style-1 input[type=submit]:disabled, .form-style-1 input[type=button]:disabled{
	color: #ddd !important;
	background: #4B99AD !important;
}

.form-style-1 .required{
	color:red;
}

.form-style-1 input[type=submit].small_button, 
.form-style-1 input[type=button].small_button
{
	padding: 6px 12px;
	font-size: 14px;
}

.checkbox_label
{
	font-weight: normal !important;
	display: inline-block !important;
	font-size: 14px; 
	
}

.checkbox_label input
{
	/* looks nice in Firefox and Chrome but needs more testing */
	vertical-align: middle; 
	margin-top:1px;
	
}


/* Results */

.result-table
{
	font-size: 110%;
	min-width: 200px;
	border-collapse: separate;
	border-spacing: 0px;
	width:100%;
	overflow: scroll;
}

.result-table td, .result-table th
{
	text-align: center;
	font-size:14px;
	padding: 6px 6px;
}

.result-table th
{
	font-size:13px;
}

.result-table th
{
	color: #333;
}

.result-table .data_row:nth-child(even)
{
	background-color: #e6e6e6;
}

.result-table .data_row:nth-child(odd)
{
	background-color: #f6f6f6;
}

.result-table .data_row td
{
	border: 1px solid #aaa;
	border-width: 1px;
}

.result-table .diff_row td, .result-table .point_row td
{
	font-size:14px;
	padding: 7px 5px;
	
	
	border: 1px solid #aaa;
	border-width: 1px;
}

.result-table .diff_row, .result-table .point_row
{
	-display:none;
	background-color: #f6f6f6;
}

.result-table td.plain_cell
{
	background: white;
	border-width: 0px;
	padding: 0px;
}

.result-table
{
	border-bottom: 1px solid #aaa;
}

.result-table-container
{
	overflow-x: auto; 
	padding: 1px;
	padding-bottom: 25px;
}

/* fix border collapse bug, but we don't want to mess with the full screen stuff because that is working */
.result-table-container .result-table td
{
	border-width: 1px 1px 0px 0px;
}
.result-table-container .result-table td:first-child
{
	border-left-width: 1px;
}

/* fix 1px gap between bottom cell and border on chrome (not hugely important) */
.result-table-container .result-table tr:last-child td
{
	border-bottom-width: 1px;
}
.result-table-container .result-table
{
	border-width: 0px;
}


/* Points */

.point_table
{
	border: 1px solid lightgray;
	font-size: 110%;
	border-collapse: collapse;
}

.point_table tr
{
	border: 1px solid lightgray;
}

.point_table th
{
	vertical-align: bottom;
	font-size: 90%
}

.point_table td
{
	padding: 6px 8px;
	-border: 1px solid lightgray;
}

.point_table td:first-child
{
	padding-left: 10px;
}

.point_table td:last-child
{
	padding-right: 10px;
}

.point_table td:nth-child(1)
{
	color: #222;
	text-align: right;
	width:1px;
	
	font-size: 80%;
}

.point_table td:nth-child(2)
{
	text-align: left;
	padding-left: 2px;
	min-width: 220px;
}

.point_table td:nth-child(3)
{
	text-align: right;
	padding-left: 16px;
}

.point_table tr:nth-child(even)
{
	background-color: #fafafa
}

.point_table tr:nth-child(odd)
{
	background-color: #f0f0f0
}

/*.point_table tr:hover
{
	background-color: lightyellow
}*/

.point_table .highlight td
{
	background-color: lightyellow
}


/* Charts */


.chart-type-container
{
	float: right;
}

#chart-type-button0
{
	background-image: url("/img/graf0.png");
	background-size: 100%;
}

#chart-type-button1
{
	background-image: url("/img/graf1.png");
	background-size: 100%;
}

#chart-type-button2
{
	background-image: url("/img/pie.png");
	background-size: 100%;
}

.chart-type-button
{
	display: inline-block;
	width: 24px;
	height: 24px;
	filter: grayscale(90%);
	cursor: pointer;
}

.chart-type-button.selected
{
	filter: grayscale(0%);
	width: 28px;
	height: 28px;
}

.chart-type-button:hover
{
	display: inline-block;
	filter: grayscale(0%);
}

#graph_data_selection
{
	-margin-bottom: 10px;
	-font-size: 16px;
}

.graph-header
{
	display: flex;
	-background-color:red;
	justify-content: space-between;
	align-items: flex-end;
}

/* Checkboxes */

.graph-header select, .graph-header options,
select.normal-select, select.normal-select options
{
	min-height: 24px;
	font-size: 14px;
	font-size-adjust:0.5;
}

/* Result fullscreen */

.result-fullscreen-link
{
	font-size: 14px;
	text-align: center;
	margin: 6px;
	margin-bottom: 12px;
	
}

.result-fullscreen-link a
{
	color: #222;
}

.result-fullscreen-link a:hover
{
	color: darkblue;
	text-decoration: none;
}

.result-fullscreen-link a span
{
	display: none;
}

.result-fullscreen-link a:hover span
{
	display: inline;
}


/* Coach */

@media only screen and (min-width: 700px)
{
	.wrong-user-universe
	{
		display: flex;
	}
	
	.wrong-user-universe p
	{
		flex: 1;
	}
}


/* Notification */

#notification-bell
{
	position: relative; 
	margin: 0px 6px; 
	cursor: pointer; 
	user-select: none;
}

#notification-count,
.notification-count-sample
{
	position: absolute; 
	font-size: 10px; 
	line-height: 10px; 
	text-align: center; 
	margin: 0px; 
	padding: 3px 4px;  
	top: 0px; 
	right: 0px; 
	background-color:#f80000; 
	border-radius: 100px; 
	color: white; 
	font-weight: 560;
}

#notification-count:empty
{
	display: none;
}

.notification-count-sample
{
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

#notification-bell img
{
	display: block;
}

#notification-box
{
	width: 380px;
	max-width: 98%;
	overflow-y: auto;
	background-color: white;
	border: 1px solid #888;
	position: absolute;
	top: 48px;
	right: 350px;
	text-align: left;
	
	box-shadow: 2px 2px 4px #dadada;
	
	display:none;
}

#notification-box.visible
{
	display:block;
}

#notification-list
{
	max-height: 400px;
	overflow-y: auto;
}

@media only screen and (max-height: 650px)
{
	#notification-list
	{
		max-height: 66vh;
	}
}

.notification-list-item
{
	text-align: left; 
	
	padding: 0px 6px;
	
	cursor: pointer;
}

.notification-list-item.unread
{
	background: #e5f1fb;
	margin-top: -1px;
}

.notification-list-item-time,
.notification-list-item-title
{
	color: #444;
	font-size: 13px;
	padding-left:0px;
	padding:1px;
	padding-left: 4px;
}

.notification-list-item-title
{
	padding-top: 6px;
	padding-bottom:2px;
}

.notification-list-item-time
{
	padding-top: 1px;
	padding-bottom: 6px;
}

.notification-list-item.read .notification-list-item-time
{
	border-bottom: 1px solid #ddd; 
}

.notification-list-item.unread .notification-list-item-title
{
	border-top: 1px solid #cedfed; 
}

.notification-list-item.unread .notification-list-item-time
{
	border-bottom: 1px solid #cedfed; 
}

.notification-list-item-message
{
	font-size: 15px; 
	padding:1px;
	padding-left: 4px;
	color: #111;
	line-height: 1.4;
}

.notification-list-item:last-child .notification-list-item-time
{
	border-bottom: none;
}

/*
.notification-list-item:last-child .notification-list-item-time
{
	border-bottom: none; 
}*/

#notification-top
{
	padding: 6px 8px;
	padding-bottom: 2px;
	display: flex;

	-border-bottom: 1px solid #ddd;
	
}

#notification-bottom
{
	border-top: 1px solid #ccc; 
	-background: #fbfbfb;
	color: #222;
	cursor: pointer;
}


.notification-list-item.read:hover,
#notification-bottom:hover
{
	background-color: #f8f8f8;
}

.notification-list-item.unread:hover
{
	background-color: #daecfb;
}


a.email-link:hover img
{
	filter: brightness(0.75) sepia(1) hue-rotate(160deg);
}



#account-renewal-ask-continue,
#account-renewal-ask-cancel
{
	display: none;
}

#account-renewal-ask-auto > div
{
	max-width: 580px !important;
}






#keep-menu-open-row
{
	text-align: center; 
	padding: 16px 6px;
}

#keep-menu-open-link
{
	cursor: pointer; 
}

#keep-menu-open-icon
{
	font-size: 14px;
	opacity: 0;
	
	color: #d00;
}

#keep-menu-open-text
{
	font-size: 12px;
	opacity: 0.4;
}

#keep-menu-open-link.enabled #keep-menu-open-icon,
#keep-menu-open-link.enabled #keep-menu-open-text
{
	opacity: 1;
}

#keep-menu-open-link:hover #keep-menu-open-text
{
	opacity: 0.7;
}



.missing_email_notice
{
	background-color: lightyellow; 
	border: 1px solid orange; 
	margin: 16px; 
	padding: 6px 8px; 
	font-size: 14px; 
	line-height: 1.5; 
	cursor: pointer;
}

.missing_email_notice:hover
{
	background-color: #ffffc9;
	border-color: darkorange;
}




.date_picker
{
	margin: 0px;
	display: inline-block;
}

.date_picker_edit_button_container
{
	display: inline-block;
	user-select: none;
	width: 1px;
	vertical-align: middle;
	font-size: 24px;
}
.date_picker_edit_button
{
	margin-left: 12px;
	cursor: pointer;
	color: #444;
	
}


.date_picker_edit_button:hover
{
	color: darkblue;
}

.date_picker_description
{
	font-size:11px;
	color: #666;
	text-align: center;
	margin-top: 1px;
}


/* NTABLE */

.ntable
{
	width:100%;
	border-spacing: 0px;
}

.ntable td, 
.ntable th
{
	text-align: center;
	padding: 8px 6px;
}

.ntable th
{
	font-size: 13px;
	
	color: #444;
	background-color: #eee;
	
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	
	
}

.ntable td
{
	font-size: 14px;
	
	color: #222;
	
	border-bottom: 1px solid #999;
	

	/*background-color: #f0fff0;*/
	/*background-color: #fff0f0;*/
	/*background-color: #f0f0ff;*/
	
	/*background-color: #f2eacc;
	
	background-color: #f2cccc;*/
}