body {
	padding: 0px;
	font-family: Arial, Sans-Serif;
	font-size: 14px;
  color: #508299;
  background: white url(../back.jpg) left top repeat;
}

a {
  color: black;
}

* {
	box-sizing: border-box;
  word-wrap: break-word;
}

.page {
	max-width: 800px;
	margin: 0 auto;
}

.item {
	border: 2px #508299 dotted;
	padding: 7px 8px;
	margin: 15px 5%;
	text-align: center;
	float: left;
	position: relative;
  display: none;
  cursor: pointer;
  transition: background-color .3s;
}

.item:hover, ul.items-list li:hover {
  background: #EEF3F6;
}

.item.initial, .item.root-item {
  display: block;
}

.item.root-item, .item.inner-choice, .item.item-result {
  cursor: default;
  background: white !important;
}

.item.inner-choice {
  border: 0 none;
  padding: 0;
}

.item ul {
  text-align: left;
}

.item ul.items-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.items-list li {
  margin: 10px 0;
  padding: 7px 8px;
  border: 2px #508299 dotted;
  cursor: pointer;
}

ul.items-list li.active {
  background: #EEEFF6;
}

ul.items-list li:last-child {
  margin-bottom: 0;
}


.item:before {
  position: absolute;
  top: -28px;
  left: 50%;
  margin-left: -3px;
  font-size: 20px;
  content: '↓';
  color: #508299;
}

.item.arrow-to-col-6-left:before {
  left: 22%
}

.item.arrow-to-col-6-right:before {
  left: auto;
  right: 22%;
}



.item.root-item:before,.item.root-item:after {
  display: none;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.col {
	float: left;
}

.col-12 {
	width: 90%;
}

.col-6 + .col-6 {
  margin-left: 55%;
}

.col-6 + .col-6.initial {
  margin-left: 5%;
}

.item.arrow-root-left:before {
  content: '↙';
  margin-left: 0px;
}

.item.arrow-root-right:before {
  content: '↘';
  margin-left: -8px;
}

.col-6 {
	width: 40%;
}

.item-result {
  border: 1px #508299 solid;
  padding: 15px 18px;
  border-radius: 0px;
  position: relative;
}

.item-result ul {
  margin: 0 0 0 20px;
  padding: 0;
}

.item-result ul li {
  margin-bottom: 5px;
}

.item-result .close {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

@keyframes bgr-animation {
  0%   {background-color:white; }
  50%  {background-color:#EFF6EE;}
  100% {background-color:white;}
}

@-webkit-keyframes bgr-animation {
  0%   {background-color:white; }
  50%  {background-color:#EFF6EE;}
  100% {background-color:white;}
}

.item.click-anim {
  animation-name: bgr-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}