/*@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

* {
	-webkit-font-smoothing: antialiased;
	transition: all 0.05s;
	transition-delay: 0s;

	-webkit-overflow-scrolling: touch;

	margin: 0;
	padding: 0;
}

*:focus {
	outline: none;
}

:root {
	--black: #272727;
	--white: #FAFAFA;
	--gray: #F3EEEA;

	--red: #F27070;
}

html {
	height: 100%;
}

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

	letter-spacing: -0.05em;
	font-family: Inconsolata, sans-serif;
	font-size: 16px;
	/*line-height: 1.8vw;

	color: var(--black);
}*/

.nav__game {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;

	text-align: right;
}

.nav__game--title {
	position: absolute;
		left: 0;
		top: 0;
}

#action__send_data {
	position: absolute;
		bottom: 48px;
		left: 50%;

	transform: translateX(-50%);
}

/* INDEX */
/*
.map {
	position: relative;
	width: calc(960px - 32px);

	margin: 0 auto;
	padding: 32px 16px;

	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
	align-content: center;

	border: 1px solid gray;
	border-bottom-width: 2px;
	background: #f8fcfd;
}

.world-box {
	position: relative;
	width: calc(20% - 32px);
	height: 64px;

	margin: 8px;
	border: 1px solid #5E716A;
	border-bottom-style: dashed;
	border-bottom-color: lightblue;

	padding: 16px;

	border-top-left-radius: 80px;
	border-top-right-radius: 80px;
	background: white;
}

.world-box:nth-child(1)  {
	transform: translateX(-10px);
}

.world-box:nth-child(2), .world-box:nth-child(4)  {
	transform: translateY(10px);
}

.world-box:nth-child(6), .world-box:nth-child(8)  {
	transform: translateY(10px);
}

.world-box:nth-child(8)  {
	transform: translate(10px,10px);
}

.world-box a {
	position: relative;
	text-decoration: none;
	color: black;
	background: lightgray;
	padding-left: 8px;
	padding-right: 8px;
	display: inline-block;
	/*z-index: 4;*/
	/*transform: rotate(-4deg);*/
/*}*/
/*
.world-box a:before {
	content: "";
	position: absolute;
		left: 0;
		top: 0;

	width: 1px;
	height: 40px;

	background: black;
	transform: rotate(-4deg);
}

.world-box a:hover {
	background: darkslategray;
	color: white;
}

.checked {
	position: absolute;
		right: -4px;
		bottom: 8px;

	font-size: 15px;
	text-transform: uppercase;
	background: lightgreen;

	padding-right: 8px;

	opacity: 0;

}

.layer--active-explorer .checked {
	opacity: 1;
}

.map--nav {
	position: relative;
	width: 960px;

	margin: 0 auto;
	padding: 16px 0;

	display: flex;
	justify-content: space-between;
}

.map--info {
	position: relative;
	width: 960px;

	margin: 0 auto;
	padding: 0px 0 4px 0;

	font-size: 14px;
	opacity: 0.8;

	/*display: flex;
	justify-content: space-between;*/
/*}

.layer_info-explorer {
	display: block;
	width: 100%;
	display: none;
}

.layer_info-results {
	display: block;
	width: 100%;

	text-align: right;
	display: none;
}

.layer--active-explorer .layer_info-explorer {
	display: block;
}

.layer--active-result .layer_info-results {
	display: block;
}

.label-result {
	position: absolute;
		left: 60%;
		top: 80%;

	font-size: 15px;
	/*font-style: oblique;*/
	/*text-transform: uppercase;*/
	/*background: lightblue;
	width: 80%;

	padding-right: 8px;
	padding: 4px;

	transform: translate(-50%, -50%);*/
/*}

.cta-test {
	position: absolute;
		top: -6px;
		right: -4px;

	color: inherit;
	background: #EFEFEF;
	border-radius: 16px;
	padding: 4px;

	text-decoration: none;
}

.do-the-test {
	background: orange;
}*/

/* WORLDS */

.header {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding: 32px 0;

	text-align: center;
}

input[type="button"] {
	padding: 6px 14px;
}

	.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
	.ui-widget-header p, .ui-widget-content p { margin: 0; }
	#snaptarget { height: 140px; }

.target__items {
	position: relative;
	width: 960px;
	margin: 0 auto;

	display: flex;
	flex-grow: nowrap;

	padding: 16px 0;

	

	margin-top: 32px;
}

#game .target__items {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

#game .target__items:before {
	content: attr(data-label);
	position: absolute;
		top: -8px;
		left: 50%;

	width: max-content;
	line-height: 16px;
	padding: 0 16px;

	font-size: 14px;
	text-transform: uppercase;

	transform: translateX(-50%);

	background: var(--offwhite);
}


.target__item {
	position: relative;

	flex-basis: 100%;
	text-align: center;

	padding: 16px;
	padding-bottom: 64px;
	padding-top: 24px;
	margin: 8px;
	/*border: 1px solid gray;*/
	background: #F0F0F0;
}

.target__item span {
	display: block;
	padding-bottom: 16px;
}

.target__item .price {
	position: absolute;
		left: 50%;
		top: calc(100% - 24px);

	transform: translate(-50%, -50%);
	width: calc(100% - 16px);
	height: 32px;

	border: 1px dashed gray;
	border-radius: 32px;
}

.price .box {
	margin-bottom: -6px;
} 

.ui-draggable-dragging {
	z-index: 20;
}

.target__item .price--data-total {
	position: absolute;
		left: 50%;
		top: 100%;

	transform: translate(-50%, -50%);
	width: calc(100% - 16px);
	height: 32px;

	border: 1px solid gray;
	border-radius: 32px;

	background: black;
	color: white;
	font-weight: bold;

	line-height: 32px;
	font-size: 24px;
}

.target__item--info {
	position: relative;
	width: 100%;
	text-align: center;

	padding: 0.8vw 0;
	z-index: 2;

	text-decoration: underline;

	cursor: pointer;
}

.target__item--info:before {
	content: "ⓘ ";
}

.target__item--infopanel {
	position: absolute;
		top: 40px;
		left: 50%;

	width: calc(100% + 16px);
	padding: 16px;

	font-size: 14px;
	line-height: 14px;

	background: white;

	transform: translateX(-50%);

	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.target__item--infopanel:before {
	content: "";
	position: absolute;
		top: -12px;
		left: calc(50% - 10px);

	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 12px 8px;
	border-color: transparent transparent white transparent;
}

.ui-draggable-dragging { background: green; }

.box {
	border: 1px solid gray;
	display: inline-block;
	padding: 8px 16px;
	border-radius: 32px;
	border-bottom-width: 2px;
}

.drag_items {
	position: relative;
	width: 960px;
	height: 40px;
	margin: 0 auto;
	
	padding: 16px 0;
	/*padding-top: 0;*/
	text-align: center;

	z-index: 100;

}

#game .drag_items {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

#game .drag_items:before {
	content: attr(data-label);
	position: absolute;
		top: -8px;
		left: 50%;

	width: max-content;
	line-height: 16px;
	padding: 0 16px;

	font-size: 14px;
	text-transform: uppercase;

	transform: translateX(-50%);

	background: var(--offwhite);
}

.drop_items {
	padding: 1em;
}

.drag_items .box {
	background: #F0F0F0;
	z-index: 100;

	cursor: grab;
}

.target__item .box {
	background: #F9E79F;
	color: black;

}

.data__send, .data__result {
	position: relative;
	width: 960px;
	margin: 0 auto;

	padding: 32px 0;
}

.data__send {
	text-align: center;
}

.result__graph {
	position: absolute;
		bottom: 0;
		left: 8px;

	width: calc(100% - 16px);
	height: 0%;

	background: blue;
	mix-blend-mode: multiply;
	transition: all 0.2s;
}

#sortable {
	position: relative;
	width: 960px;
	margin: 0 auto;

	list-style-type: none;
}

#sortable li {
	padding: 16px;
	margin-bottom: 8px;

	cursor: move;
}

/*#sortable li:nth-child(2) {
	padding: 12px;
}

#sortable li:nth-child(3) {
	padding: 8px;
}*/

#behaviours {
	position: relative;
	width: 960px;
	margin: 0 auto;	

	text-align: center;
}

#behaviours li {
	position: relative;
	border: 1px solid gray;
	display: inline-block;
	padding: 8px 16px;
	border-radius: 32px;

	margin: 16px;

	cursor: pointer;
}

#behaviours li:before {
content: unset;
    position: absolute;
    top: 5px;
    left: -12px;
    width: 24px;
    height: unset;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    background: black;
    color: white;
    line-height: 24px;
    padding-bottom: 3px;
}

#behaviours li:after {
	content: "+";
	position: absolute;
	top: 5px;
	right: -12px;
	width: 24px;
	height: unset;
	font-size: 20px;
	font-weight: bold;
	border-radius: 50%;
	background: black;
	color: white;
	line-height: 24px;
	padding-bottom: 3px;
}

.removed {
	/*opacity: 0.5;*/
	background: white;
}

.removed:after {
	content: unset !important;
}

.removed:before {
	content: "x" !important;
}

.fieldplay, .playfield {
	position: absolute !important;
		top: 50%;
		left: 50%;

	width: 100%;
	margin: 0 auto;

	transform: translate(-50%, -50%);
}

.behaviours--impact {
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;

	width: 100px;
}

.behaviours--impact-process {
	position: relative;
	width: 100px;
	height: 16px;

	border: 1px solid gray;
}

.status-bar {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;
	background: blue;
}

.dilemma {
	position: relative;
	width: 100%;

	padding: 16px 0;
	margin: 0;
	list-style-type: none;
	display: flex;
}

.dilemma:after {
	content: "vs.";
	position: absolute;
		top: 50%;
		left: 50%;

	width: 24px;
	height: 24px;

	line-height: 24px;
	text-align: center;

	background: lightgray;
	text-align: center;

	transform: translate(-50%, -50%);
}

.dilemma li {
	position: relative;
	border: 1px solid gray;
	display: inline-block;
	padding: 8px 16px;
	border-radius: 8px;
	margin: 8px;

	width: calc(50% - 32px - 16px);
	cursor: pointer;
}

.dilemma li:hover {
	background: #F0F0F0;
}

.dilemma li span {
	position: absolute;
		top: 0;
		left: 0;

	width: 0%;
	height: 100%;

	background: var(--orange);
	mix-blend-mode: multiply;

	transition: all 0.2s;
}

.dilemma li span: {

}

#result .dilemma {
	pointer-events: none;
}

.selected {
	background: #F9E79F;
}

.notselected {
	opacity: 0.5;
}

.object__nav {
	position: relative;
	width: 100%;

	display: flex;
	flex-flow: wrap;

	justify-content: space-around;

	padding: 4px 0;
}

.object__nav-group {
	position: relative;
	width: 100%;
	text-align: center;
	line-height: 32px;

	font-size: 18px;
	padding-bottom: 4px;
}

.object__nav-slider {
	position: relative;
	width: 80%;
}

.object__nav-left {
	position: relative;
	width: 8%;
	font-size: 16px;

	opacity: 0.5;
}

.object__nav-right {
	position: relative;
	width: 8%;
	font-size: 16px;

	text-align: right;

	opacity: 0.5;
}

.marker {
	position: absolute;
		top: -24px;
		left: 20%;

	width: 32px;
	height: 100%;
	text-align: center;

	transform: translateX(-50%);
}

.marker:before {
	content: "";
	position: absolute;
		top: 20px;
		left: 50%;

	width: 1px;
	height: 28px;

	background: black;
}

.ui-state-disabled {
	opacity: 0.8;
}

.ui-slider-horizontal .ui-slider-range-max {
	opacity: 0;
}

.state--active {
	transform: translateY(-10px);
}

.instructions {
	position: relative;
	width: 960px;
	margin: 0 auto;

	opacity: 0.5;
	color: blue;

	padding-top: 0px;
	padding-bottom: 16px;

	margin-top: -16px;

	text-align: center;
}


#options {
	position: relative;
	width: 960px;
	margin: 0 auto;

	list-style-type: none;
}

#options:before {
	content: "";
	position: absolute;
		top: -16px;
		left: 50%;

	width: 1px;
	height: calc(100% + 32px);

	background: gray;
}

.options--drag {
	border: 1px solid gray;
	border-bottom-width: 2px;
	display: block;
	padding: 8px 16px;
	border-radius: 32px;
	width: calc(120px - 32px );
	text-align: center;	

	left: calc(50%);

	margin-bottom: 8px;
	background: white;

	transform: translateX(-50%);
}

.playfield {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

.panel--left {
	position: absolute;
		top: 8px;
		left: 8px;

	width: calc(50% - 16px - 8px);
	height: calc(100% - 24px);
	margin: 8px;

	background: #f0f0f0;
}

.panel--right {
	position: absolute;
		top: 8px;
		right: 8px;

	width: calc(50% - 16px - 8px);
	height: calc(100% - 24px);
	margin: 8px;

	background: #f0f0f0;
}

.panel--left span {
	position: absolute;
		top: 8px;
		left: 8px;

	/*transform: translate(-50%,-50%);*/

	height: 100%;
	text-align: center;


	writing-mode: vertical-rl;
	/*height: max-content;*/
	transform: scale(-1);
}

.panel--right span {
	position: absolute;
		top: 8px;
		right: 8px;

	height: 100%;
	text-align: center;

	/*transform: translate(-50%,-50%);*/

	writing-mode: vertical-rl;
	/*height: max-content;*/
	transform: scale(-1);
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default,
.ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active,
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active,
a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
	border-bottom-width: 2px;
}

.result__headline {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

.result__headline h3 {
	width: 100%;
}

.result_urban-row {
	width: 100%;
	display: flex;
}

.result_urban-row div {
	width: 50%;
}

.water_dilemma {
	position: relative;
	width: 100%;

	display: flex;
	justify-content: space-between;
}

.water_dilemma--hide {
	opacity: 0.5;
	pointer-events: none;
}

.water__item {
	width: calc(30% - 16px);
	padding: 8px;
}

.water__item-question {
	font-weight: bold;
	padding-bottom: 8px;
}

.water__item-info {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: scroll;
}

/* URBAN */

.results__area--margin {
	position: absolute;
		top: 0;
		left: 0;

	width: calc(100% - 0vw);
	height: calc(100% - 0vw);
	padding: 0vw;
}

.result__headline {
	position: absolute;
		top: 2.4vw;
		left: 2.4vw;
	
	width: calc(100% - 4.8vw);
	/*margin: 0 0.8vw;*/

	font-family: 'Editorial New';
	font-size: 2.2vw;
	line-height: 1.6vw;
	font-weight: normal;
	letter-spacing: -0.04em;

	padding-bottom: 1.6vw;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.result__headline--explain {
	font-family: 'freight-sans-pro';
	font-size: 1vw;
	line-height: 1.2vw;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.graph__blocks {
	position: absolute;
		left: 2.4vw;
		bottom: 2.4vw;

	width: calc(100% - 4.8vw);
	height: 75%;

	display: flex;
	flex: 1;
    flex-grow: 1;
    flex-basis: 0;
}

.graph__item {
	position: relative;
	height: 100%;
	margin: 0 0.8vw;
	width: 100%;
}

.graph__item--label {
	position: relative;
	width: calc(100%);

	font-family: 'Editorial New';
	font-size: 1.4vw;
	line-height: 1.6vw;
	font-weight: normal;
	letter-spacing: -0.04em;

	padding: 1.2vw;

	box-sizing: border-box;
	background: var(--green);

	border-radius: 0.4vw;
	cursor: pointer;
	z-index: 4;
}

.graph__item:nth-child(2n + 2) .graph__item--label {
	transform: translateY(1.6vw);
}

.graph__item:hover .graph__item--label {
	box-shadow: inset 2px 2px white, 2px 2px rgba(0, 0, 0, 0.1);
}

.graph__item--ground {
	position: absolute;
		bottom: 0;
		left: 0;

	width: 100%;
}

.graph__item--ground svg {
	width: 100%;
	height: auto;
	opacity: 0.4;
}

.graph__item--object {
	position: absolute;
		bottom: 3.2vw;
		left: 0;

	width: 100%;
	height: 70%;
}

.graph__item--object:before {
	content: "";
	position: absolute;
		left: 50%;
		bottom: 4vw;

	width: 1px;
	height: 80%;

	border-left: 1px dashed rgba(0, 0, 0, 0.2);
}

.graph__item--dynamic {
	position: absolute;
		left: 1.6vw;
		bottom: 3.2vw;

	width: calc(100% - 3.2vw);
	height: 100%;
}

.graph__dynamic-bar {
	position: absolute;
		left: 0;
		bottom: 0;

	width: 100%;
	border-bottom: 1px solid var(--black);
	z-index: 2;
}

.graph__dynamic-bar:before {
	content:'';
	position: absolute;
		bottom: calc(100% - 2vw);
		left: 0;

	width: 100%;
	height: 4vw;

	background-color: var(--offwhite);

	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.graph__dynamic-bar:after {
	content:'';
	position: absolute;
		top: 100%;
		left: 0;

	width: 100%;
	height: 2vw;

	background-color: var(--black);

	clip-path: polygon(100% 0, 0 0, 50% 100%);
}

.graph__item--procent {
	position: absolute;
		left: 2.4vw;
		bottom: 0;
	
	width: calc(100% - 4.8vw);
	line-height: 3.2vw;
	border-radius: 2.4vw;
	text-align: center;
	z-index: 4;
	font-size: 1.4vw;
}

.type__finance .graph__dynamic-bar:before {
	clip-path: unset; 
	border-radius: 50%;
}

.type__finance .graph__dynamic-bar:after {
	clip-path: circle(50% at 50% 0);
	height: 8vw;
	transform: scale(1, 0.5);
	transform-origin: top;
}

.type__finance .graph__item--ground {
	position: absolute;
	bottom: 0.8vw;
	left: 0.8vw;
	width: calc(100% - 1.6vw);
	height: 5vw;
	border: 1px dashed rgba(1,1,1,0.4);
	border-radius: 50%;
}

.graph__blocks.type__energy {
	left: calc(8vw);
	width: calc(100% - 16vw);
}

.graph__overview {
	position: absolute;
		top: 9.6vw;
		left: 2.4vw;

	width: calc(100% - 4.8vw);

	display: flex;
	flex-flow: wrap;
}

.answer__item {
	position: relative;
	width: calc(50% - 3.2vw);

	padding: 1.6vw;
	border-radius: 0.4vw;
	background-color: var(--green);

	cursor: pointer;
}

.answer__item:hover {
	box-shadow: inset 2px 2px white, 2px 2px rgba(0, 0, 0, 0.1);
	z-index: 4;
}

.type__sustainability .answer__item:nth-child(1) {
	order: 1;
}

.type__sustainability .answer__item:nth-child(2) {
	order: 3;
}

.type__sustainability .answer__item:nth-child(3) {
	order: 5;
}

.type__sustainability .answer__item:nth-child(4) {
	order: 7;
}

.type__sustainability .answer__item:nth-child(5) {
	order: 9;
}

.type__sustainability .answer__item:nth-child(6) {
	order: 2;
}

.type__sustainability .answer__item:nth-child(7) {
	order: 4;
}

.type__sustainability .answer__item:nth-child(8) {
	order: 6;
}

.type__sustainability .answer__item:nth-child(9) {
	order: 8;
}

.answer__item--label {
	position: relative;
	width: 100%;

	display: flex;

	padding-bottom: 0.4vw;
}

.answer__item--order {
	width: 3.2vw;

	font-family: 'Editorial New';
	font-size: 1.6vw;
	line-height: 1.6vw;

	transform: translateY(0.6vw);

}

.answer__item--name {
	width: calc(100% - 3.2vw);

	font-size: 1.4vw;
	line-height: 1.6vw;
	font-weight: bold;
}

.answer__item--data {
	position: relative;
	width: calc(100% - 3.2vw);
	padding-left: 3.2vw;

	display: flex;
}

.answer__item--data--bar {
	position: relative;
	width: calc(100% - 3.2vw);
	height: 0.8vw;

	background: white;
	border: 1px solid var(--black);
}

.answer__item--total {
	position: absolute;
		top: 0;
		left: 0;

	height: 100%;
	background: var(--black);
}

.answer__item--procent {
	position: relative;
	width: 3.2vw;

	line-height: 0.8vw;
	font-size: 1.2vw;
	text-align: right;
}

.user--select {
	position: absolute;
	    top: -0.2;
	    left: 1.6vw;

	width: 0.8vw;
	height: 200%;

	border-radius: 0.2vw;

	background: var(--orange);

	box-shadow: inset 2px 2px rgba(0, 0, 0, 0.1);
}

.user--select--log {
	position: absolute;
		top: 0.2vw;
		right: 0;

	padding: 0 1vw;
	line-height: 1.2vw;
	font-family: 'freight-sans-pro';
	font-size: 1vw;
	line-height: 1.8vw;
	text-transform: uppercase;
	letter-spacing: 0.1em;

	border-radius: 0.2vw;

	background: var(--orange);

	box-shadow: inset 2px 2px rgba(0, 0, 0, 0.1);	
}

@media screen and (max-width: 768px){

	input[type="button"] {
	-webkit-appearance: none;
	font-size: 14px;
	border: 1px solid E0E0E0;
}

	body {
		font-size: 15px;
	}

	.header, .instructions, .data__send, .data__result, .map--info, .map--nav, .playfield, #options, #behaviours, #sortable {
		width: calc(100% - 32px);
	}

	.map {
		width: calc(100% - 64px);
	}

	.world-box {
		width: calc(64% - 32px);
		height: 48px;
		/*transform: translateX(-20%);*/
	}

	.world-box:nth-child(2), .world-box:nth-child(4), .world-box:nth-child(6), .world-box:nth-child(8) {
		transform: translateX(-20%);
	}

	.world-box:nth-child(1), .world-box:nth-child(3), .world-box:nth-child(5), .world-box:nth-child(7) {
		transform: translateX(20%);
	}	

	.drag_items {
		width: calc(100% - 32px);
		height: auto;
		padding-bottom: 16px;
	}

	.drag_items .box {
		margin-bottom: 4px;
	}

	.target__items {
		width: calc(100% - 32px);
		flex-flow: wrap;
	}

	.target__item {
		flex-basis: unset;
		width: calc(50% - 16px - 16px);
		padding: 8px;
		padding-bottom: 16px;
	}

	.target__item .price {
		transform: translate(-50%, -72%);
	}



	#behaviours li {
		padding: 8px 12px;
		margin: 4px;
	}

}