/* SCSS */
/*
	@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
*/
	/* latin-ext */
	@font-face {
	  font-family: 'Noto Sans';
	  font-style: normal;
	  font-weight: 400;
	  src:
		url(https://quickmatch.com/css/o-0IIpQlx3QUlC5A4PNr6zRAW_0.woff2) format('woff2');
	  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}
	/* latin */
	@font-face {
	  font-family: 'Noto Sans';
	  font-style: normal;
	  font-weight: 400;
	  src:
		url(https://quickmatch.com/css/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	html,
	body {
		background: #fff;
		font-family: 'Noto Sans', sans-serif;
		height: 80%;
	}

	#home {
		position: relative;
		height: 100%;
		overflow-y: auto;
		margin-bottom: 1%;
		margin-left: 5%;
		margin-right: 5%;
	}

	p {
		margin-bottom: 0.1em;
		margin-top: 0.1em;
	}

	.content {
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 80px;
	}

	nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 80px;
		background-color: #ddd;
	}

	nav a {
		height: 80px;
		display: block;
		line-height: 80px;
		float: left;
		text-decoration: none;
		padding: 0 0.5em 0 0;
	}

	nav ul {
		list-style-type: none;
	}

	nav li:first-child a {
		padding-left: 1em;
	}

	input {
		padding: 0.5em;
	}
	.honey {
		font-size: 0;
		display: none;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: 0em;
		margin-top: 0em;
		font-weight: bold;
	}

	h1 {
		font-size: calc(100% + 1.2vw);
		margin-top: 0.03em;
		margin-bottom: 0.1em;
		text-align: center;
	}

	h2 {
		font-size: calc(100% + 1.1vw);
		margin-top: 0.03em;
		margin-bottom: 0.1em;
		text-align: center;
	}

	h3 {
		font-size: calc(100% + 0.8vw);
		margin-top: 0.05em;
		margin-bottom: 0.1em;
		text-align: center;
	}

	h4 {
		font-size: calc(100% + 0.5vw);
		margin-top: 0.05em;
		margin-bottom: 0.1em;
		text-align: center;
	}

	.information {
		font-size: calc(100% + 0.6vw);
		text-align: center;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
	}
	/*
	@media (max-width: 768px) {
		.btn-responsive {
			padding: 2px 4px;
			font-size: 80%;
			line-height: 1;
			border-radius: 3px;
		}
	}
*/

	@media (min-width: 769px) and (max-width: 992px) {
		.btn-responsive {
			padding: 4px 9px;
			font-size: 90%;
			line-height: 1.2;
		}
	}
	/* */

	#logo {
		max-width: 6%;
		max-height: 6%;
		position: fixed;
		top: 1%;
		left: 47%;
		padding-bottom: 0.1%;
	}

	#main-menu {
		height: 8%;
		margin: 0.1em 0.5em 0.0em 0.5em;
		padding: 0.25em;
	}

	.menu-button {
		cursor: pointer;
		color: #666;
	}
	.menu-button:hover {
		color: #f66;
	}
	.secondary-menu {
		margin: 0.1em 0.5em 0.0em 0.5em;
		padding: 0em 0.5em 0em 0.5em;
	}

	#loading {
		position: fixed;
		height: 85%;
		width: 100%;
		top: 9%;
	}

	#ready {
		position: fixed;
		height: 85%;
		width: 100%;
		top: 9%;
	}

	#loggedin {
		position: fixed;
		height: 85%;
		width: 100%;
	}

	#login {
		width: 100%;
	}

	@media only screen and (max-width: 600px) {
		.video-container {
			position:relative;
			padding-bottom:56.25%;
			padding-top:30px;
			height:0;
			overflow:hidden;
			text-align: center;
		}

		.video-container iframe, .video-container object, .video-container embed {
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			max-width: 560px;
			max-height: 315px;
		}
	}
	@media only screen {
		.video-container {
			text-align: center;
			width: 100%;
			height: auto;
		}
	}

	.info {
		cursor: pointer;
	}
	.panel-body-edit {
		position: fixed;
		height: 83%;
		width: 100%;
		overflow-y: scroll
	}

	.error {
		color: red;
		font-weight: bold;
	}

	.empty-list {
		text-align: center;
		color: darkgrey;
	}

	.scroll-list {
		position: relative;
		height: 90%;
		width: 100%;
		overflow-y: scroll;
		margin-bottom: 1%;
	}
	.sub-scroll-list {
		position: relative;
		overflow-y: scroll;
		max-height: 30vw;
	}
	.sub-scroll-list-full {
		position: relative;
		overflow-y: scroll;
		max-height: 60vw;
	}
	.section {
		position: absolute;
		height: auto;
/*		height: 83%;   setting the height prevents Situation selection and scrolling Admin Users */
		width: 100%;
		margin-bottom: 1%;
	}
	#admin-user-list {
		position: fixed;
		height: 83%;
		width: 100%;
		margin-bottom: 1%;
	}
	.list-component {
		position: fixed;
		height: 83%;
		width: 100%;
		margin-bottom: 1%;
	}
	.list-panel-body {
		position: fixed;
		height: 90%;
		width: 100%;
		margin-bottom: 1%;
	}
	.list-sub-panel-body {
		position: relative;
		height: 35%;
		width: 100%;
		left: 0;
		margin-bottom: 1%;
	}

	.admin-body {
		position: fixed;
		height: 90%;
		width: 100%;
		margin-bottom: 1%;
	}

	.admin-user-list {
		position: relative;
		height: 90%;
		width: 100%;
		overflow-y: scroll;
		margin-bottom: 1%;
	}
	#situation-edit, #situation-display, .panel-body-edit	{
			position: fixed;
			height: 83%;
			width: 100%;
			margin-bottom: 1%;
	}
	#situation-list {
		position: fixed;
		height: 83%;
		width: 100%;
		margin-bottom: 1%;
	}
	#item-list, #option-list {
		position:relative;
		height: auto;
		width: 100%;
		margin-bottom: 1%;
	}
	.situation-sub-list {
		position: relative;
		height: 85%;
	}

	.situation-body {
		position: fixed;
		height: 90%;
		width: 100%;
		margin-bottom: 1%;
	}

	.situation-selected {
		border-bottom: 1px solid #eee;
		position: fixed;
		height: 75%;
		width: 100%;
		overflow-y: auto
	}

	.situation-list-name {
		color: darkslategray;
		font-weight: bold;
	}

	#situation-display button {
		margin-right: 2px;
	}

	.item-list {
		border-bottom: 1px solid #eee;
	}

	.item-list:hover {
		background-color: #ddf;
	}

	.item-list-name {
		color: darkslategray;
		font-weight: bold;
	}

	.invitation-list {
		border-bottom: 1px solid #eee;
	}

	.invitation-list:hover {
		background-color: #eef;
	}

	.invitation-list-name {
		color: darkslategray;
		font-weight: bold;
	}

	#group-list {
		position: fixed;
		top:10%;
		height: 83%;
		width: 100%;
		margin-bottom: 1%;
	}
	.group-list {
		border-bottom: 1px solid #eee;
	}
	.group-selected {
		border-bottom: 1px solid #eee;
	}

	.group-list:hover {
		background-color: #eef;
	}

	.group-list-name {
		color: darkslategray;
		font-weight: bold;
	}

	#group-display button {
		margin-right: 2px;
	}

	.group-member-list {
		border-bottom: 1px solid #eee;
	}

	.group-member-list:hover {
		background-color: #eef;
	}

	.group-member-list-name {
		color: darkslategray;
		font-weight: bold;
	}
	.inbox-list {
		overflow-y: scroll;
		border-bottom: 1px solid #eee;
	}

	.inbox-selected {
		border-bottom: 1px solid #eee;
	}

	.inbox-list:hover {
		background-color: #eef;
	}

	.inbox-list-name {
		color: darkslategray;
		font-weight: bold;
	}

	.inbox-list-name-responded {
		color: darkslategray;
		font-weight: normal;
	}

	#items li {
		border: 1px solid #888;
		padding: 0.5em;
	}

	#items button {
		float: right;
		margin-bottom: 5px;
	}

	#most-head {
		background-color: #eee;
		font-size: 0.8em;
		text-align: center;
		margin-bottom: 3px;
		padding: 0.05em;
		width: 100%;
		top: 0;
	}

	#least-head {
		background-color: #eee;
		font-size: 0.8em;
		text-align: center;
		margin-top: 3px;
		padding: 0.05em;
		width: 100%;
		position: static;
		bottom: 0;
	}


	#evaluated {
		border: 1px solid #888;
		padding-right: 2px;
		font-size: 1em;
	}

	#evaluate-item {
		overflow-y: hidden;
		height: 5em;
		width: 50%;
		float: right;
		border: 1px solid #888;
		padding-left: 2px;
		vertical-align: middle;
	}

	#highlight {
		width: 50%;
		z-index: -1;
		float: left;
	}

	.level {
		border-bottom: 1px solid #bbb;
		margin: 0px;
		text-align: center;
		padding: 3px;
/*		height: 13%;
*/
		height: auto;
		min-height: 1em;
		overflow-x: auto;
		white-space: nowrap;
	}

	.level:hover {
		background: #fee;
	}

	.rank-arrow {
		margin-right: 1em;
		margin-top: 0.1em;
		margin-bottom: : 0.1em;
		font-size: 1.5em;
	}

	#evaluated-container {
		position: relative;
		height: 87%;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 0.5% 0.5% 0.5%;
		overflow-x: hidden;
	}

	#evaluated-table {
		max-height: 80%;
		margin-bottom: 3px;
		width: 100%;
	}

	#evaluated .row {
		border: 1px solid #ccc;
	}

	#evaluated ul {
		list-style-type: none;
	}

	#evaluated li {
		border: 1px solid #ccc;
		padding: 3px;
		margin-bottom: 3px;
		white-space: nowrap;
	}

	#evaluated button {
		vertical-align: middle;
	}

	#evaluate {
		border: 2px solid #333;
		background: #ffd;
		overflow-y: auto;
		margin: 2px 0px 2px 0px;
		padding: 3px;
		position: relative;
	}

	#evaluate ul {
		list-style-type: none;
	}

	#evaluate li {
		border: 1px solid #ccc;
		padding: 3px;
		margin: 3px;
		background: #eee;
		border-radius: 3px;
		display: inline;
		white-space: nowrap;
	}

	#levels-container {
		overflow-y: scroll;
		overflow-x: hidden;
		max-height: 65%;
		position: static;
		width: 96%;
		margin: auto;
	}

	#unevaluated-container {
		padding: 0.2em;
		border: 0px solid #aaa;
		z-index: 100;
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100%;
		max-height: 20%;
	}

	.unevaluated {
		border: 1px solid #bbb;
		background: #fff;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0em 0.5em 0em 0em;
		/*		max-height: 2.5em; */
		min-height: 2em;
		width: 100%;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
		display: inline-block;
		white-space: nowrap;
	}

	.unevaluated-level {
		white-space: nowrap;
	}

	.selected-unevaluated-level {
		white-space: nowrap;
		display: inline-block;
	}

	.satisfied {
		border: 3px solid #484;
		text-align: center;
		margin-left: 0.2em;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		margin-right: 0em;
		padding-left: 2em;
		padding-right: 2em;
		font-size: 1em;
		border-radius: .25em;
		background: #8c8;
		font-weight: bold;
	}

	#compare-section {
/*		position: absolute;
*/
		height: 100%;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 0.5% 0.5% 0.5%;
	}

	#graph-section {
		position: relative;
		height: 100%;
		width: auto;
/*		overflow-y: auto;
*/
	overflow-y: hidden;
		overflow-x: auto;
	}
.graph-filter-row {
	position: relative;
	width: 94%;
	left: 3%;
}
	.error-message {
		color: red;
		font-weight: bold;
	}
	/** modal **

	.modal-mask {
		position: fixed;
		z-index: 9998;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		display: table;
		transition: opacity .3s ease;
	}

	.modal-wrapper {
		display: table-cell;
		vertical-align: middle;
	}

	.modal-container {
		width: 300px;
		margin: 0px auto;
		padding: 20px 30px;
		background-color: #fff;
		border-radius: 2px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
		transition: all .3s ease;
		font-family: Helvetica, Arial, sans-serif;
	}

	.modal-header h3 {
		margin-top: 0;
		color: #4283b9;
	}

	.modal-body {
		margin: 20px 0;
	}

	.modal-default-button {
		float: right;
	}

		 * The following styles are auto-applied to elements with
		 * transition="modal" when their visibility is toggled
		 * by Vue.js.
		 *
		 * You can easily play with the modal transition by editing
		 * these styles.
		 *

	.modal-enter {
		opacity: 0;
	}

	.modal-leave-active {
		opacity: 0;
	}

	.modal-enter .modal-container,
	.modal-leave-active .modal-container {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	** </modal> **/
	/*# sourceMappingURL=style.css.map */