/** element defaults **/
table {
	width: 100%;
	text-align: left;
}

th, td {
	padding: 10px 10px;
}

code, blockquote {
	display: block;
	border-left: 5px solid #222;
	padding: 10px;
	margin-bottom: 20px;
}
code {
	background-color: #539765;
	border: none;
}
blockquote {
	border-left: 5px solid #539765;
}

blockquote p {
	font-style: italic;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin: 0;
	height: 1%;
}

p {
	margin-bottom: 20px;
}
a {
	color: #fff;
	text-decoration: none;
}
.a-underscore {
	border-bottom: 1px solid #fff;
}

a:hover {
	border-bottom-color: #F0E184;
	color: #F0E184;
}

a:focus {
	outline: none;
}


fieldset {
	display: block;
	border: none;
	border-top: 1px solid #539765;
}

fieldset legend {
	font-weight: bold;
	font-size: 0.9em;
	padding-right: 10px;
	color: #fff;
}

fieldset form {
	padding-top: 15px;
}

fieldset p label {
	float: left;
	width: 150px;
}

form input, form select, form textarea {
	padding: 5px;
	color: #fff;
	border: 1px solid #539765;
	background-color:#539765;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
}

form.searchform input {
  font-size: 0.9em;
    padding: 6px;
}

form.searchform p {
	margin: 5px 0;
}


span.required {
	color: #ff0000;
}

h1 {
	color: #fff;
	font-size: 2.7em;
}

h2 {
	color: #00adf1;
	font-size: 2.2em;
	letter-spacing: -1px;
	font-weight: bold;
	padding: 0 0 5px;
	margin: 0;
}

h3 {
	color: white;
    font-size: 1em;
    margin-top: -2px;
    margin-bottom: 6px;
}

h5 {
	padding-bottom: 10px;
	font-size: 1.1em;
	color: #ddd;
}

ul, ol {
	margin: 0 0 35px 35px;
}

li {
	padding-bottom: 5px;
}

li ol, li ul {
	font-size: 1.0em;
	margin-bottom: 0;
	padding-top: 5px;
}

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


#container {
	background-color: #3E704B;
	width: auto;
	margin: 0 auto;
}

header {
	padding: 0px 0px 0px;
	margin: 0 auto;
    	background: transparent;
	text-align: left;
}

header h1 {
	padding: 20px 0;
	font-size: 4.0em;
	text-align: center;
}

header h1 a, header h1 a:hover {
    color: #eee;
    font-size: 1.4em;
    padding: 10px 25px;
    letter-spacing: -2px;
    border-bottom: none;

}


nav {
	height: auto;
	background-color: #243B2A;
}

nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

nav ul ul { 
	margin: 0;
}

nav ul li {
	display: block;
	float: left;
	padding: 0px;
}

nav ul li li {
	padding: 0;
}


nav ul li a {
	display: block;
	float: left;
	padding: 13px 20px 10px;
    color: #eee;
    font-size: 0.8em;
     border-bottom: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.5px;
}

nav ul li li a {
	float: none;
}

nav ul li a:hover {
	color: #fff;
	text-decoration: none;
}

nav ul li.selected a {
	background: #3E704B;
	color: #fff;
}


nav ul li a:hover, nav ul li.sfHover a {
	background: #539765;
	color: #fff;
}

 nav ul li.sfHover ul a, nav ul ul {
	background: #539765;
	color: #fff;
}

nav ul li li a:hover, nav ul li.sfHover li a:hover {
	background: #6EAF80;
}


h4 {
	pointer-events: none;
	font-size: 1.4em;
	padding: 35px;
	text-decoration: underline;
    position: absolute;
}

.white {
	color: white;
}

.yellow {
	color: yellow;
}

.red {
	color: #D85D4D;
}

.green {
	color: #539765;
}

.orange {
	color: orange;
}

.th-red {
	color: #D85D4D;
}

.th-green {
	color: #00adf1;
}

.td-red {
	border-bottom: 1px solid #D85D4D;
}

.td-stat {
	padding-left: 45px;
}

.td-green {
	border-bottom: 1px solid #00adf1;
}


.tissue-item {
    position: absolute;
}

td {
	color: ddd;
}

select {
	color: #fff;
	width: 270px;
    background-color: #539765;
    position: relative; left: 50%;
	transform: translateX(-50%);
	height: 30px;
	margin-top: -27px;
	padding: 5px;
}

span {
	color: ddd;
    font-size: 16px;
}

chat_time {
	color: #737381;
	font-size: 12px;
}

/* chat_time:hover {
	color: #737381;
	font-size: 12px;
} */

chat_name {
	color: #65ed66;
	font-size: 14px;
}


.span-quest-container {
	height: 19px;
    max-width: 400px;
    position: relative;
    margin-top: 20px;
}

.span-container {
    padding: 0px 15px;
    height: 19px;
    margin-top: -30px;
}

button {
	margin-left: 39px;
    height: 25px;
    background: #F0E184;
    color: #333;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    
    text-decoration: none;
    text-transform: uppercase;
}

.quest-text-container {
	position: relative;
	color: #00adf1;
	height: 19px;
    font-size: 13px;
    margin-top: 10px;
    max-width: 350px;
}

.no-answer {
	color: #00adf1;
}

.wrong-answer {
	color: red;
}

.correct-answer {
	color: lime;
}

.text-container {
	padding: 0px 15px;
    height: 19px;
    font-size: 13px;
    margin-top: 10px;
    color: white;
}

.quest-answer {
    background: #00adf1;
    color: white;
    border: 0;
    position: relative;
    width: 60px;
    margin-left: 210px;
    margin-top: 150px;
}

button:hover {
	background:#EAD757;
}

.popup-full input {
    position: relative;
    height: 25px;
	width: 230px;
}


.popup-medium input {
	margin-top: 102px;
	color: #fff;
    background-color: #539765;
    position: relative;
    left: 50%;
    margin-left: -18px;
    transform: translateX(-50%);
    height: 25px;
    width: 230px;
}

.settings-menu input {
	margin-left: -21px;
}

.puzzle-wrapper {
	position: relative;
}

.p3-red {
    filter: brightness(2.5) sepia(30) hue-rotate(315deg) saturate(5);
}

.p3-x-blue{
    filter: brightness(3.5) sepia(99) hue-rotate(146deg) saturate(5);
}

.p3-blue {
    filter: brightness(3.5) sepia(99) hue-rotate(146deg) saturate(5);
}

.p3-yellow {
    filter: brightness(3.5) sepia(30) hue-rotate(-5deg) saturate(5);
}

.p3-cyan {
    filter: brightness(1.5) sepia(99) hue-rotate(80deg) saturate(5);
}

.p3-purple {
    filter: brightness(1.5) sepia(99) hue-rotate(-70deg) saturate(5);

}

.p3-brown {
    filter: brightness(1.5) sepia(30) hue-rotate(-5deg) saturate(5);
}

.p3-gray {
    filter: brightness(1.5) sepia(30) hue-rotate(-5deg) saturate(0);
}

.p3-white {
    filter: brightness(4.5) sepia(30) hue-rotate(-5deg) saturate(0);
}


.p3-x-red {
    filter: brightness(2.5) sepia(30) hue-rotate(315deg) saturate(5);
}


.p3-x-yellow {
    filter: brightness(3.5) sepia(30) hue-rotate(-5deg) saturate(5);
}

.p3-x-cyan {
    filter: brightness(1.5) sepia(99) hue-rotate(80deg) saturate(5);
}

.p3-x-purple {
    filter: brightness(1.5) sepia(99) hue-rotate(-70deg) saturate(5);
}

.p3-x-brown {
    filter: brightness(1.5) sepia(30) hue-rotate(-5deg) saturate(5);
}

.p3-x-gray {
    filter: brightness(1.5) sepia(30) hue-rotate(-5deg) saturate(0);
}

.p3-dark {
    filter: brightness(0.5) sepia(30) hue-rotate(-5deg) saturate(0);
}


.p3-o {
    pointer-events: none;
	z-index: 7;
    width: 27px;
    height: 27px;
    margin-left: 25px;
    margin-top: 5px;
	border: 2px solid;
    position: relative;
}

.p3-x {
    margin-top: 15%;
    margin-left: -15%;
}

.quest-container {
	width: 100%;
    height: calc(100% - 60px);
    margin-top: 60px;
    overflow-y: overlay;
}

.puzzle-container {
	width: 100%;
    height: calc(100% - 60px);
    margin-top: 60px;
    overflow-y: overlay;
	justify-content: center;
    display: flex;
}

.popup-small {
	position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -150px;
	height: 100px;
}

.popup {
    background-color: rgba(0, 0, 0, .95);
    position: absolute;
    left: -10;
    top: -10;
    padding: 5px;
}

.popup-small-low {
	top: 84%;
    left: 50%;
    margin-top: -50px;
    margin-left: -150px;
    height: 62px;
}

.evolution-container-img {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-top: 100px;
}

.evolution-container-text {
    display: flex;
	margin-top: 50px;
    flex-flow: row wrap;
    justify-content: space-around;
}

.evolution-container-btn {
	position: fixed;
    width: inherit;
    bottom: 30px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.secondary-stats {
	overflow-y: overlay;
    height: calc(100% - 60px);
}

.stats-container,
.colony-container,
.skills-list {
	margin-top: 70px;
    margin-right: 10px;
    margin-left: 10px;
}

.plants-list {
    position: absolute;
    top: 150px;
    left: 50px;
    overflow-y: overlay;
    overflow-x: hidden;
    height: 100px;
}

.plant-btn {
	margin-bottom: 10px;
	width: 100%;
}

.synthesis-require {
	overflow-y: overlay;
    height: 225px;
}

.require-img {
	width: 50px;
}

.flex-container, 
.desktop-flex {
	display: flex;
}


.up-progress {
	text-align: center;
    background-color: #F0E184;
    color: black;
	line-height: 0.85;
    vertical-align: middle;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 10px;
    width: 14px;
	height: 25px;
	cursor: pointer;
    position: absolute;
    font-size: 20px;
    top: 70px;
    left: 0px;
}

.skill-item-img {
	width: 64px;
    height: 64px;
    padding: 13px;
}

.skill-container {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	position: relative;
	margin-left: 30px;
    display: -webkit-inline-box;
}

.skill-menu progress[value] {
	width: 100px;
	height: 10px;
	-webkit-appearance: none;
	bottom: 5;
	right: 0;
	position: absolute;

}

.logs-menu progress[value] {
	width: 90px;
    height: 7px;
    -webkit-appearance: none;
    bottom: 3px;
    right: 6px;
    position: absolute;
}

.action-container progress[value] {
	-webkit-appearance: none;
	width: 40px;
    position: absolute;
    top: 35px;
    left: 0;
    height: 4px;
}

.action-container-self progress[value] {
	-webkit-appearance: none;
	width: 40px;
    position: absolute;
    top: 35px;
    left: 0;
    height: 4px;
}

.up-lvl {
	text-align: center;
	background-color: #F0E184;
    color: black;
	cursor: pointer;
    line-height: 0.75;
    vertical-align: middle;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    position: absolute;
    font-size: 50px;
    top: 69px;
    left: -20px;
	z-index: 4;
}

.skill-key-code {
	-webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    width: 20px;
	height: 30px;
	cursor: pointer;
    top: 0px;
    left: 80px;
    text-align: center;
    background-color: #539765;
    vertical-align: middle;
    position: absolute;
}

.skill-key-code input {
    outline: none;
    background-color: transparent;
    border: 0px solid;
    color: white;
    font-size: 15px;
    font-weight: bold;
    margin-top: 6px;
    text-align: center;
    width: 20px;
}

.skill-lvl {
	position: absolute;
    color: white;
    top: -2px;
    font-size: 17;
    font-weight: bold;
}

.skill-progress {
    position: absolute;
    right: 2px;
    bottom: 17px;
    font-size: 10;
    color: white;
}

.skills-list {
	height: 240px;
    overflow-y: auto;
}

.p25 {
	width: 25%;
}

.p33 {
	width: 33%;
}

.p66 {
	width: 66%;
}

.p50 {
	width: 50%;
}

.p100 {
	width: 100%;
}

.popup-medium {
    top: 25%;
    left: 50%;
    margin-top: -50px;
    margin-left: -150px;
	height: 250px;
}

.small-header {
    margin-top: -13px;
    margin-right: -15px;
    font-size: 1.6em;
}

.popup-menu {
	z-index: 2;
    top: 25%;
    left: 50%;
	width: 400px;
    margin-top: -50px;
    margin-left: -200px;
	height: 300px;
}

.popup-medium-low {
	z-index: 3;
}

.popup-full,
.popup-puzzle {
    z-index: 2;
    height: 100%;
    width: 100%;
}

.evolution-wide-text {
    text-align: center;
    margin-top: 35px;
    font-size: 18px;
	flex-basis: calc(50% - 300px);
}

.button-base, .upload-logo-btn {
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 3px 16px;
    border: none;
    text-decoration: none;
    text-transform: uppercase;
}

.tissue-color {
	margin-left: 20px;
    position: absolute;
    bottom: 43px;
    width: 25px;
    height: 25px;
}

.green-button, .upload-logo-btn {
    background: #00adf1;
    color: #fff;
}

.yellow-button {
    background: white;
    color: #00adf1;
}

.radar-canvas-class {
	position: absolute;
}

.popup-medium-low {
	top: 45%;
    left: 50%;
    margin-top: -50px;
    margin-left: -150px;
    height: 211px;
}

.popup hr {
	border: none;
    height: 1px;
    color: #539765;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #539765;
}

.chat-container {
	color: ddd;
	padding: 5px;
	padding-right: 8px;
	overflow-y: hidden;
	display: table-cell;
	position: absolute;
	vertical-align: bottom;
	bottom: 31px;
	width: 276px;
}

.chat-container-full {
	padding-top: 1px;
	overflow-y: overlay;
	overflow-x: hidden;
	max-height: 168px;
}

.chat-container-bg {
	overflow-y: hidden;
	background-color: #243B2A;
    height: 163px;
}

.chat-container-game {
    max-height: 113px;
	overflow-y: overlay;
}

.chat-message-btn {
	border: 0;
    bottom: 5px;
    left: -30px;
	position: absolute;
    height: 1.3rem;
	color: white;
	background-color: #00adf1;
        border-radius: 5px;
}


.chat-input {
	height: 1.3rem;
	color: white;
    padding-top: 2px;
	margin-left: 45px;
	padding-left: 5px;
	bottom: 5px;
    left: 5px;
	position: absolute;
    border: 0px;
    background-color: rgba(0, 0, 0, .5);
    width: 200px;
}

.chat-message {
	font-size: 13px;
	color: #fff;
	cursor: pointer;
}

.chat-message-nick {
	font-size: 13px;
	color: #F0E184;
}

.chat-input::placeholder { 
    color: #00adf1;
    opacity: 1;
}

.room-list-btn {
	width: 100px;
	height: 100px;
    cursor: pointer;
    right: 10;
    bottom: 10;
    position: absolute;
}

/* Стили кнопок перенесены в buttons-override.css */

.close-menu-btn {
	position: absolute;
	right: -47px;
    top: 18px;
}

.colony-request-title {
	max-width: 65%;
}


.chat-private {
	color: green !important;
}

.puzzle6-present {
	background-image: linear-gradient(gray, darkgray);
}

.puzzle6-active {
	background-image: linear-gradient(lime, darkgreen);
}

.puzzle6-missing {
	background-image: linear-gradient(black, black);
}

.puzzle6-input {
	
    width: 30px;
	height: 30px;
	border-radius: 15px;
    z-index: 62;
    position: absolute;
}


.puzzle5 {
	cursor: pointer;
	width: 70px;
    margin-top: -30px;
}

.puzzle1-button {
	background: #00adf1;
    color: white;
    font-size: 30px;
	border: 0px;
    width: 75px;
    height: 100px;
}



























.menu-btn-img {
	width: 30px;
	margin-left: 7px;
}

.close-menu-btn-img {
	width: 27px;
    margin-top: 6px;
    margin-left: 7px;
}

.steam-close-menu-btn-img {
	width: 27px;
    margin-top: 6px;
    margin-left: 5px;
}

/* Стили иконок кнопок перенесены в buttons-override.css */

.tissue-menu-btn-img {
	margin-left: 0px;
    margin-top: 4px;
}

.hormones-menu-btn,
.constructor-menu-btn {
	right: 43;
}

.skill-menu-btn {
	right: 134;
}

.settings-menu-btn {
	right: -2px;
}

.tissue-menu-btn {
	right: 180;
}

.tree-menu-btn {
	right: 226;
}

.colony-menu-btn {
	right: 272;
}

.achievement-menu-btn {
	right: 318;
}

.stat-menu-btn {
	right: 89;
}

.stat-menu-btn-img,
.skill-menu-btn-img,
.settings-menu-btn-img,
.constructor-menu-btn-img,
.colony-menu-btn-img,
.tree-menu-btn-img {
    margin-top: 4px;
    margin-left: 0px;
}

.hormones-menu-btn-img {
	margin-top: 8px;
    margin-left: 2px;
}

.menu-btn,
.menu-nav-btn {
	position: absolute;
	border-radius: 50%;
    height: 40px;
    float: right;
	z-index: 25;
	margin-right: 56px;
    width: 40px;
    cursor: pointer;
}

.menu-nav-btn {
	background: #00adf1;
}


.menu-btn {
	background: white;
}

.effect-item {
	position: relative;
    width: 40px;
    height: 14px;
    margin-top: 7px;
    margin-left: 20px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.mission-item-text {
    font-size: 12;
    margin-left:25px;
}

.mission-item-wide {
	position: relative;
    width: 250px;
    height: 18px;
    margin-top: 7px;
    margin-left: 20px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.effect-item-wide {
	position: relative;
    width: 100px;
    height: 14px;
    margin-top: 7px;
    margin-left: 20px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.effect-item-wide .effect-power, .effect-item .effect-power {left: 26px; top: -2px;}

.effect-item-capture {
	position: relative;
    width: 150px;
    height: 26px;
    margin-top: 1px;
    margin-left: 20px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.effect-fight-timer {
	font-size: 11px;
    position: absolute;
    right: 2px;
    color: chocolate;
    top: 6px;
}

.effect-item-fight {
	position: relative;
    width: 165px;
    height: 26px;
    margin-top: 1px;
    margin-left: 20px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.effect-owner {
    color: springgreen;
    font-size: 11px;
    position: absolute;
    left: 22px;
    top: -1px;
}

.effect-target {
    color:orangered;
    font-size: 11px;
    position: absolute;
    left: 22px;
    bottom: 1px;
}

.missions-list {
    display: flex;
    position: absolute;
    top: 95px;
    right: 0;
}

.effects-list {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 65px; /* Под HP/EP барами */
    left: 50%;
    transform: translateX(-50%);
    gap: 8px;
}

.actions-list {
	position: absolute;
	pointer-events: none;
	top: 145px;
	width: 140px;
    height: 200px;
}
    
.self-actions-list {
	pointer-events: none;
	position: absolute;
    right: 10px;
	width: 140px;
	top: 145px;
	height: 200px;
}

.action-container,
.action-container-self {
	width: 40px;
	user-select: none;
    height: 40px;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	position: relative;
    margin-left: 5px;
    margin-bottom: 10px;
    pointer-events: all;
	display: -webkit-inline-box;
    background-color: #2f3b3c;

}

.change-logo-info {
	font-size: 12;
	width: 110px;
	color: dimgray;
}

.action-container-self {
	float: right;
}

.action-key-code {
    color: ddd;
    position: absolute;
    top: 0px;
    left: 3px;
    font-size: 12px;
}

.action-item-img {
    width: 30px;
    height: 30px;
    padding: 6px;
}

.action-cooldown {
	width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
}

.hidden-partially {
    visibility: hidden;
}


.hidden {
    display: none !important;
}

.invisible {
	visibility: hidden;
}

.inline-hidden {
    display: none;
}

.clear {
	clear: both;
}

footer {
	margin:50px auto 0;
	background: #243B2A;
	padding: 10px;
	text-align: center;
}

footer p {
	text-align: center;
	margin: 0;
	font-size: 0.8em;
}

footer p, footer p a {
	color: #539765;
	border-bottom-color: #539765;
}

.chat-container-game::-webkit-scrollbar { 
    display: none; 
}


::-webkit-scrollbar {
	width: 0.4em;
	height: 0.4em;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
::-webkit-scrollbar-thumb {
  background-color: #00adf1;
}

.belok-panel {
    position: absolute;
    z-index: 900;
}

.belok-panel-container {
    width: 62px;
    height: 62px;
    margin-top: -5px;
    margin-left: -15px;
    position: absolute;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    left: 50%;
    text-align: center;
    z-index: 1;
    -webkit-border-radius: 21px/22px 22px 21px 21px;
    -moz-border-radius: 21px/22px 22px 21px 21px;
    border-radius: 100px;
}
.belok-panel-amount {
    position: relative;
    text-align: center;
    width: auto;
    font-weight: normal;
}


span.belok-panel-amount {
    font-size: 13px;
    color: #caffff;
}


.belok-menu-btn-img {
    width: 40px;
    margin-top: 0;
    margin-left: 0;
    display: block;
    margin: 0 auto;
    margin-bottom: 4px;
    padding-top: 3px;
}
.stat-panel-container {
    display: flex;
    position: absolute;
    top: 5px;
    left: 50%;
    width: 522px;
    margin-left: -255px;
    height: 62px;
    -webkit-border-radius: 21px/22px 22px 21px 21px;
    -moz-border-radius: 21px/22px 22px 21px 21px;
    border-radius: 50px;
    padding: 0 6px;
    background: url(/images/menu/hood-bg.png) no-repeat center top;
    padding-top: 20px;
}

.underline {
	text-decoration: underline;
}

.stat-panel-item {
    position: relative;
    width: 197px;
    height: 14px;
    margin-top: 7px;
    margin-left: 20px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-border-radius: 5px 4px 4px 5px/4px 4px 5px 5px;
    -moz-border-radius: 5px 4px 4px 5px/4px 4px 5px 5px;
    border-radius: 5px 4px 4px 5px/4px 4px 5px 5px;
    background-color: #04070b;
    -webkit-box-shadow: 0 1px #303849, inset 0 1px #121319;
    -moz-box-shadow: 0 1px #303849, inset 0 1px #121319;
    box-shadow: 0 1px #303849, inset 0 1px #121319;
}

.stat-panel-item:nth-child(2n) {
    margin-left: 90px;
}


.effect-power, .stat-panel-amount {
    position: absolute;
    font-size: 13px;
    left: 17px;
    letter-spacing: 1px;
    top: 18px;
}

.blink_me_green {
    animation: blinker 1s linear infinite;
    color: lime !important;
  }

  .blink_me_red {
    animation: blinker 1s linear infinite;
    color: red !important;
  }

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }

.mission-item-img {
    width: 25px;
    margin-top: -4px;
    margin-left: -5px;
    position: absolute;
}

.effect-item-img {
	width: 30px;
    margin-top: -8px;
    margin-left: -10px;
    position: absolute;
}

.effect-item-capture-img {
	width: 30px;
    margin-top: -2px;
    margin-left: -10px;
    position: absolute;
}

.puzzle1-button-21 {
	margin-left: 23px;
}

.puzzle1-button-11 {
	margin-left: 163px;
}

.puzzle1-label3 {
    color: #fff !important;
    font-size: 4.5vw;
    line-height: 60% !important;
}


.log-item-img {
    width: 18px;
    margin-top: -2px;
    margin-left: -10px;
    position: absolute;
	background-color: #175e17;
    border-radius: 5px;
}

.effect-log-item-img {
    width: 18px;
    margin-top: -2px;
	margin-left: 30px;
    position: absolute;
	background-color: blue;
    border-radius: 5px;
}


.log-killer-text {
	position: absolute;
    text-align: right;
    font-size: 10px;
    right: 70px;
    letter-spacing: 1px;
}

.log-death-img {
	width: 14px;
    margin-top: 0px;
    margin-left: 50px;
    position: absolute;
}

.hp-panel-container,
.ep-panel-container {
    pointer-events: all;
}

.hp-panel-container progress::-moz-progress-bar { 
	background: red;
}

.hp-panel-container progress::-webkit-progress-value {
	background: red; 
}

.ep-panel-container progress::-webkit-progress-value { 
	background: #0063a6; 
}

.ep-panel-container progress::-moz-progress-bar { 
	background: #0063a6;
}

.stat-panel-amount.ep-amount {
    right: 17px;
    left: auto;
}

.stat-panel progress[value] {
	width: 189px;
	height: 10px;
	-webkit-appearance: none;
	bottom: 2;
	left: 4;
	position: absolute;
}
 
.menu-col {
	overflow-y: overlay;
    height: 225px;
}

.action-container progress::-moz-progress-value { 
	background: orange !important; 
}
 
.action-container progress::-webkit-progress-value {
	background: orange !important; 
}

.action-container-self progress::-moz-progress-value { 
	background: orange !important; 
}
 
.action-container-self progress::-webkit-progress-value {
	background: orange !important; 
}

.ep-panel-img {
    width: 40px;
    margin-top: -5px;
    margin-left: 0;
    position: absolute;
    right: 0;
    margin-right: -19px;
}

.hp-panel-img {
    position: absolute;
    width: 40px;
    margin-top: -1px;
    margin-left: -20px;
}

.primary-colony {
	left: 10%;
	top: 15%;
    position: relative;
}


.colony-request h2 {
	padding: 20px;
	letter-spacing: 0px;
	font-size: 1.2em;
}


.choice-evo {
    text-align: center;
    flex-basis: calc(50% - 300px);
}

.is-sound-container {
	margin-top: -8px;
}

.map-canvas-class {
    width: 100%;
    margin-top: 60px;
    height: calc(100% - 60px);
}

.is-music-container {
	margin-top: 12px;
}

.settings-container {
	color: white;
	position: relative;
    left: 40%;
	top: 30%;
}

.is-music-on,
.is-sound-on {
	height: 20px !important;
    position: absolute !important;
	pointer-events: all;
}

.change-audio {
	padding: 60px;
	position: relative;
    left: 50%;
	width: 270px;
	font-size: 20;
	pointer-events: none;
    color: white;
    font-weight: bold;
    transform: translateX(-50%);
}

.degrode-container {
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 130px;
}

.quest-wrapper {
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.change-sound {
	padding: 60px;
	position: relative;
    left: 50%;
	width: 270px;
	font-size: 20;
	pointer-events: none;
    color: white;
    font-weight: bold;
    transform: translateX(-50%);
}

.old-password-input::placeholder,
.new-password-input::placeholder { 
    color: black;
    opacity: 1;
}

.change-password {
	margin-top: 10px;
}

.old-password-input,
.new-password-input { 
    margin-top:10px;
}

.synthesis-bonus,
.synthesis-require {
	overflow-y: scroll;
	overflow-x: hidden;
    height: calc(100% - 125px);
}


.log-wide {
	width: 100;
	background-color: rgba(0, 0, 0, .5);
}

.log-wide-text {
	right: 5px;
}

.log-text {
    position: absolute;
    text-align: right;
    font-size: 8px;
    top: 2px;
    left: 67px;
    letter-spacing: 1px;
}

.puzzle4-table {
    width: 240px;
    left: 35%;
    position: absolute;
	margin-top: 30px;
	border-collapse:collapse;
}
    
.puzzle4 {
	width: 58px;
    height: 60px;
    border: 0;
	padding: 0;
}
.tutorial-suffer1 {
	position: absolute;
    left: 120px;
    top: 85px;
    mix-blend-mode: lighten;
}

.tutorial-suffer3 {
	position: absolute;
    left: 210px;
    top: 85px;
    mix-blend-mode: lighten;
}

.tutorial-suffer2 {
	position: absolute;
    left: 335px;
    bottom: 165px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.tutorial-immune {
    position: absolute;
    right: 0px;
    width: 55px;
    mix-blend-mode: lighten;
    top: 200px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.tutorial-map {
    right: -100px;
    width: 250px;
    bottom: 140px;
    transform: translateX(-50%);
}

.tutorial-bot {
    left: 350px;
    width: 250px;
    top: 75px;
    transform: translateX(-50%);
}

.event-image-class {
    width: 130px !important;
    padding: 20px;
}

.tutorial-bot2 {
    left: 430px;
    width: 250px;
    top: 75px;
    transform: translateX(-50%);
}
.tutorial-bot3 {
    left: 500px;
    width: 250px;
    top: 75px;
    transform: translateX(-50%);
}
.tutorial-top {
    left: calc(50% - 18px);
    width: 250px;
    height: 70px;
    margin-top: 40px;
    transform: translateX(-50%);
}
.tutorial-top2 {
    left: calc(50% - 18px);
    width: 250px;
    height: 70px;
    margin-top: 40px;
    transform: translateX(-50%);
    top: 100px;
}
.tutorial-right {
    right: 150px;
    width: 250px;
    height: 70px;
    margin-top: 40px;
}

.tutorial-arrow-left {
	position: absolute;
    left: 55px;
    width: 65px;
    mix-blend-mode: lighten;
    top: 140px;
}

.tutorial-arrow-left-up {
    position: absolute;
    right: 0px;
    width: 65px;
    mix-blend-mode: lighten;
}
.tutorial-arrow-left-up2 {
	position: absolute;
    right: -40px;
    width: 50px;
    mix-blend-mode: lighten;
}

.tutorial-arrow-menu-lvl {
    position: absolute;
    right: 13px;
    width: 65px;
    mix-blend-mode: lighten;
    left: calc(50% - 36px);
    top: 75px;
    top: 50px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}


.tutorial-arrow-map {
    position: absolute;
    right: 135px;
    bottom: 50px;
    width: 65px;
    mix-blend-mode: lighten;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.tutorial-arrow-menu {
    position: absolute;
    right: 13px;
    width: 65;
    mix-blend-mode: lighten;
    top: 62px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.tutorial-arrow-zoom {
    position: absolute;
    right: 65px;
    width: 65px;
    mix-blend-mode: lighten;
    top: 62px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.tutorial-arrow-skill {
    position: absolute;
    left: 17%;
    width: 50;
	z-index: 999;
    top: 450px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.tutorial-arrow-stat {
	position: absolute;
    left: 44%;
    width: 50;
    top: 250px;
    z-index: 999;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.show {
  opacity: 1 !important;
  transition: opacity 1000ms;
}

.hide {
  opacity: 0 !important;
  transition: opacity 1000ms;
}

.tutorial-arrow-right {
	position: absolute;
    right: 55px;
    width: 65px;
    mix-blend-mode: lighten;
    top: 140px;
}

.tutorial-left {
	left: 100px;
    width: 250px;
    height: 70px;
    margin-top: 40px;
}

.tutorial-common {
	color: white;
    padding: 10px;
    position: absolute;
    background-color: rgba(0, 0, 0, .75);
}

[tooltip]{
  position:relative;
  display:inline-block;
}
[tooltip]::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 99;
    opacity:0;
}

[tooltip]::after {
    content: attr(tooltip);
	white-space: pre-wrap;
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 230px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;
}


.secondary-colony,
.primary-requests-colony {
	overflow-y: auto;
	height: calc(100% - 60px);
}

.secondary-colony {
	width: 33%;
}

.primary-no-colony {
	width: 66%;
}

.primary-stats {
	margin-top: 100px;
}

[tooltip]:hover::after,[tooltip]:hover::before {
   opacity:1
}

.stat-table {
	padding-right: 15px;
}

.portrait-warning {
	color: #00adf1;
    max-width: 50%;
    text-align: center;
    top: 40%;
    left: 20%;
    position: relative;
    font-size: 28px;
}

.preloader-counter {
    color: cyan;
    font-weight: bold;
    position: relative;
    font-size: x-large;
    left: 45%;
    top: 90%;
}

.preloader-bg {
    z-index: 998;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
}

.preloader {
    z-index: 999;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
}

.preloader-img {
    background: url(/bgs/preloader.png)  no-repeat center center fixed;
    background-size: contain;
}

.preloader12 {
    background: url(/bgs/preloader12.png)  no-repeat center center fixed;
    background-size: contain;
}

.preloader5 {
    background: url(/bgs/preloader5.png)  no-repeat center center fixed;
    background-size: contain;
}

.force-landscape {
    z-index: 100;
    background-color: black;
	display: none;
    width: 120%;
    left: -40px;
    height: 100%;
    position: absolute;
}

.popup-logs {
	margin-left: 300px;
}







/**************************************************************/

/* RIDDLE/PUZZLE STYLES MOVED TO riddle-menu.css */
/* Styles below are kept for backwards compatibility but will be overridden */

.quiz .shkatulka {
    background: url(/images/puzzles/3/shkatulka.png) no-repeat center top;
    width: 650px;
    background-size: contain;
    margin: 0 auto;
    top: 5vh;
    display: block;
    position: relative;
    font-size: 100%;
    height: 400px;
    padding-top: 50px;
}


.quiz .shkatulka .input-row {
    text-align: center;
    margin-left: 2%;
}

.quiz .shkatulka .one-stone {
    position: absolute;
    top: 150px;
    left: 9%;
}

.quiz .shkatulka .input-row div {
    width: 70px;
    height: 70px;
    position: relative;
    display: inline-block;
}

.quiz .shkatulka .input-row .p3-o {
    border-radius: 100px;
    border: 3px solid #a06458;
    height: 50px;
    width: 50px;
    position: absolute;
    z-index: 1;
    margin: 0 auto;
    left: 10%;
    top: 10%;
}

.quiz .shkatulka .input-row .stone {
    cursor: pointer;
        background: url(/images/puzzles/3/stone.svg) no-repeat center top;
        /*filter: brightness(1.5) sepia(99) hue-rotate(-70deg) saturate(5);*/
} 

.quiz .shkatulka .input-row .rune {
    position: absolute;
    z-index: 1;
    text-align: center;
    width: 45%;
    margin: 30%;
    margin-top: 21%;
}
.quiz .shkatulka .input-row .circle {
    pointer-events: none;
    border-radius: 100px;
    border: 3px solid gray;
    height: 50px;
    width: 50px;
    position: absolute;
    z-index: 1;
    margin: 0 auto;
    left: 10%;
    top: 10%;
}
.quiz .shkatulka .input-row .p3-x {
    pointer-events: none;
    background: url(/images/puzzles/3/rune1.svg) no-repeat center top;
} 

.quiz .shkatulka .input-row .p3-square {
    pointer-events: none;
    background: url(/images/puzzles/3/rune2.svg) no-repeat center top;
} 

.quiz .shkatulka .input-row .rune3 {
        background: url(/images/puzzles/3/rune3.svg) no-repeat center top;
        filter: brightness(3.5) sepia(5) hue-rotate(-70deg) saturate(5);
} 


.quiz {
    height: 100vh;
    margin: 0 auto;
}

.quiz .riddle.settings-container {
    width: 580px;
    padding: 2%;
    margin-bottom: 20px;
    margin: 0 auto;
    left: auto;
    background: transparent;
    border: none;
    margin-top: 0%;
}

.quiz .riddle.settings-container .button-base {
    width: 100%;
}

.quiz .screen-dna {
    background: url(/images/puzzles/screen.svg) no-repeat left top;
    width: 100%;
    background-size: contain;
    margin: 0 auto;
    top: -3vh;
    display: block;
    position: relative;
    font-size: 100%;
	margin-bottom: -5%;
	transform: scale(.7);
}

.quiz .screen-dna .molecule {
    position: relative;
    width: 25%;
    height: auto;
    padding-top: 9%;
    padding-bottom: 12%;
}

.quiz .screen-dna .molecule img {
    margin-top: 0;
    width: 100%;
}


.quiz .screen-dna .info {
    position: absolute;
    top: 15%;
    text-align: center;
    margin: 0 auto;
    width: 110%;
}

.quiz .screen-dna .info h2,.quiz .screen-dna .info h3, .screen-dna .btns div  { font-size: 4.5vw; color: #05FEFF;}
.quiz .screen-dna .info h2 b { color: #fff; }

.quiz .screen-dna .info h3 {
    color: #fff;
    background: url(/images/puzzles/input.svg) no-repeat center top;
    padding: 1.9%;
    line-height: 60%;
    padding-bottom: 2%;
    background-size: contain;
    margin-top: 2%;
}
.screen-dna .info h3 b { color: #05FEFF; }

.screen-dna .btns {width: 100%;}

.screen-dna .btns div {
    display: inline-block;
    background: hsla(180, 100%, 51%, 0.39);
    color: #fff;
    padding: 1% 2.45%;
    border-radius: 1000%;
    margin: 1%;
    margin-top: 3%;
    font-weight: bolder;
    cursor: pointer;
}

.screen-dna .btns div:hover {background: hsla(180, 100%, 51%, 0.99);}


/***********************************************************/

.quiz .manhole {
    background: url(/images/puzzles/2.png) no-repeat center top;
    width: 100%;
    background-size: cover;
	margin: 0 auto;
}

.selected-puzzle11 {

    border-color: red !important;
}

.puzzle13-off{
    background: url(/images/puzzles/13/off.png) no-repeat center top;
    max-width: 30px;
    max-height: 30px;
    background-size: cover;
}

.puzzle13-on{
    background: url(/images/puzzles/13/on.png) no-repeat center top;
    max-width: 30px;
    max-height: 30px;
    background-size: cover;
}

.quiz .voyager {
    background: url(/images/puzzles/13/commy.png) no-repeat center top;
    width: 100%;
    max-width: 450px;
    max-height: 360px;
    height: 130%;
    background-size: cover;
    margin: 0 auto;
    margin-top: 50px;
    cursor: pointer;
}

.quiz .lava {
    background: url(/images/puzzles/lava.png) no-repeat center top;
    width: 100%;
    max-width: 473px;
    max-height: 404px;
    height: 130%;
    background-size: cover;
    margin: 0 auto;
    margin-top: 50px;
}

.quiz .refraction {
    background: url(/images/puzzles/12/refraction.png) no-repeat center top;
    width: 100%;
    max-width: 540px;
    max-height: 315px;
    height: 130%;
    background-size: cover;
    margin: 0 auto;
    margin-top: 50px;
}

.quiz .buffer {
    background: url(/images/puzzles/11/buffer.png) no-repeat center top;
    width: 100%;
    max-width: 540px;
    max-height: 220px;
    height: 130%;
    background-size: cover;
    margin: 0 auto;
    margin-top: 50px;
}

.quiz .hatch {
    background: url(/images/puzzles/hatch.png) no-repeat center top;
    width: 100%;
    max-width: 415px;
    max-height: 415px;
    height: 130%;
    background-size: cover;
	margin: 0 auto;
}

.quiz .manhole .input-row {
    display: inline-flex;
}

.quiz .refraction .input-row {
    display: inline-flex;
    top: 12px;
    left: 31px;
    position: relative;
}

.quiz .manhole .input-row input {
    background: url(/images/puzzles/hole-input.png) no-repeat center top;
    width: 8%;
    background-size: contain;
    position: relative;
    font-size: 4vw;
    border: none;
    color: #fff;
    text-align: center;
    width: 8%;
    line-height: 190%;
    padding: 0;
    margin:0px;
}

/************************************************/

.orange {
    color: orange;
}

.orange-red {
    color: orangered;
}

.quiz .sudoku {
    background: url(/images/puzzles/sudoku.png) no-repeat center top;
    width: 90%;
    background-size: cover;
    margin: 0 auto;
    max-width: 800px;
    min-height: 800px;
}

.quiz .library-puzzle {
    background: url(/images/puzzles/9/mech-bg.png) no-repeat center top;
    width: 100%;
    background-size: cover;
    margin: 0 auto;
    width: 800px;
    height: 530px;
}
.puzzle7 {
    width: 30px; background-size: 30px 30px; background-repeat: no-repeat; height: 30px;
}

.puzzle16 {
    border: 1px solid #222222;
    width: 100px; background-size: 100px 100px; background-repeat: no-repeat; height: 100px;
}

.puzzle15 {
    border: 10px solid black;
    height: 50px;
    width: 10px;

}

.c-lime {
    color: greenyellow;
}


.white-bg {
    background-color: white;
}

.red-bg {
    cursor: pointer;
    background-color: red;
}

.blue-bg {
    background-color: blue;
}

.green-bg {
    cursor: pointer;
    background-color: green;
}

.yellow-bg {
    background-color: yellow;
}




.puzzle9{

    width: 75px;
    height: 75px;
    margin-top: 94px;
    margin-left: 3px;
    position: relative;
}


.puzzle11{
    width: 150px;
    height: 25px;
    margin-left: 16px;
    margin-top: -1px;
    border: 1px;
    border-style: dashed;
    border-color:transparent;
}

.p12-l {
    position: absolute;
}


.p12-h1 {
    background-color: yellow;
    width: 16px;
    height: 2px;
    margin-top: 15px;
}
.p12-h {
    background-color: yellow;
    width: 32px;
    height: 2px;
    margin-top: 15px;
}
.p12-h2 {
    background-color: yellow;
    width: 16px;
    height: 2px;
    margin-top: 15px;
    margin-left: 16px;
}
.p12-v1 {
    background-color: yellow;
    width: 2px;
    height: 16px;
    margin-left: 15px;
}
.p12-v {
    background-color: yellow;
    width: 2px;
    height: 32px;
    margin-left: 15px;
}
.p12-v2 {
    background-color: yellow;
    width: 2px;
    height: 16px;
    margin-left: 15px;
    margin-top: 16px;
}



.lense-num {
    position: relative;
    top: 4px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    background-color: unset;
    border: 0px;
}

.lense-num-right {
    left: 150px;
}

.lense-num-left {
    left: 210px;
}

.puzzle13 {
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: relative;
}

.puzzle14 {
    width: 2px;
    height: 2px;
    cursor: pointer;
    position: relative;
}

.puzzle12{
    width: 33px;
    height: 33px;
    margin-left: -1px;
    margin-top: -1px;
    border: 0px;
    border-style: dashed;
    border-color:transparent;
}

.quiz .library-puzzle  .input-row .puzzle9-trigger {
    pointer-events: none;
    background: url(/images/puzzles/9/btn.svg) no-repeat center top;
} 

.quiz .library-puzzle  .input-row .puzzle9-stone {
    pointer-events: none;
    background: url(/images/puzzles/9/stone.svg) no-repeat center top;
} 

.puzzle9-green {
    filter: brightness(0.5) sepia(5) hue-rotate(70deg) saturate(5);
}

.puzzle9-purple {
    filter: brightness(0.5) sepia(5) hue-rotate(240deg) saturate(5);
}

.puzzle9-blue {
    filter: brightness(0.5) sepia(5) hue-rotate(180deg) saturate(5);
}

.puzzle9-red {
    filter: brightness(0.5) sepia(5) hue-rotate(310deg) saturate(5);
}

.puzzle9-yellow {
    filter: brightness(0.5) sepia(5) hue-rotate(380deg) saturate(5);
}



.quiz .library-puzzle .input-row {
    display: inline-flex;
    margin-left: 10%;
    margin-left: 46px;
    margin-top: -80px;
}

.puzzle10-lbl {
    position: absolute;
    color: darkgray;
}

.puzzle10-check {
    cursor: pointer;
    top: 183px;
    left: 60%;
    position: absolute;
    width: 25px;
    height: 65px;
}

.puzzle10-input {
    background-size: contain;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 22px;
    width: 72px;
    height: 71px;
    background-color: unset;
    text-align: center;
    padding: 0;
}


.puzzle10-input2 {
    position: absolute;
    background-size: contain;
    border: none;
    outline: none;
    font-size: 22px;
    width: 72px;
    height: 71px;
    color: black;
    background-color: unset;
    text-align: center;
    padding: 0;
}

.quiz .sudoku .input-row input {
    background-size: contain;
    position: relative;
    border: none;
    color: #fff;
    outline: none;
    font-size: 40px;
    width: 72px;
    height: 71px;
    background-color: unset;
    text-align: center;
    padding: 0;
}

.quiz .sudoku .input-row {
    display: inline-flex;
    margin-left: 10%;
}

.quiz .lever {
    background: url(/images/puzzles/5-1.jpg) no-repeat center top;
    width: 100%;
    background-size: cover;
    margin: 0 auto;
    padding: 15% 0;
    margin-bottom: -10%;
	margin-top: -7%;
	max-width: 800px;
}

.quiz .lever .input-row {
    display: flex;
    width: 80%;
    margin: 0 auto;
    margin-top: 1%;
    position: relative;
}
.quiz .lever .input-row div {
    position: relative;
    color: #fff;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 25%;
    display: inline-block;
}

.quiz .lever .input-row div img {
    width: 70%;
    margin: 0 auto;
    vertical-align: middle;
    cursor: pointer;
}










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

	.portrait-warning {
		left: 25%;
	}

	body { font-size: 0.8em; }	

	header h1 a, header h1 a:hover { padding: 5px; }

	div#container { width: auto; }

	footer .footer-content ul { margin-bottom: 15px; }

	footer .footer-content ul.endfooter { margin-bottom: 0px; }

	.width { width:auto; padding-left: 10px; padding-right: 10px; }
	
	#content, aside.sidebar { float: none; width: auto; }

	footer .footer-content ul { width: auto; float: none; }

	.stat-panel progress[value] {
		width: 89px;
	}

	.stat-panel-item {
		width: 96px;
	}

	.chat-container {
		width: 186px;
	}

	.popup-chat {
		width: 200px;
	}


	.chat-input {
		width: 158px;
	}



    .stat-panel-container {
        transform: translateX(32%);
        width: 313px;
        margin-left: 6px;
        background: none;
    }
    .belok-panel-container {
        left: 158px;
    }

    .stat-panel-item:nth-child(2n) {
        margin-left: 80px;
    }



}

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


    .newdiz .my-points .list ul li {
        font-size: 12px;
    }

    .newdiz .my-points .list ul li span {
        font-size: 14px;
    }

	.evolution-container-text {
		margin-top: 0px;
	}

	.evolution-container-img {
		margin-top: 25px;
	}

	.evolution-wide-text {
		margin-top: 10px;
		font-size: 14px;
		flex-basis: calc(50% - 125px);
	}

	.choice-evo {
		flex-basis: calc(50% - 200px);
		max-width: 150px;
	}

	.settings-container {
		top: 20%;
    }
    
    .missions-list {
		top: 95px;
		right: 0;
	}

	.effects-list {
		top: 95px;
	}

	.primary-stats {
		margin-left: -40px;
	}


	.primary-colony {
		left: 5%;
	}
}

@media screen and (max-width: 1000px){
	.colony.settings-container {
		width: 82% !important;
    }
    .colony-list {width: 45% !important;}
    .create-colony-price {
        margin-top: 75px !important;
    }

    .create-colony-btn {
        margin-left: 9px;
        height: 50px !important;
        width: 98% !important;
        margin-top: 15px;
    }
}

@media screen and (max-width: 600px) {
	
	.evolution-container-img {
		margin-top: 20px;
	}
    .colony-list {width: 90% !important;}
	.evolution-wide-text {
		margin-top: 5px;
		font-size: 12px;
		flex-basis: calc(50% - 60px);
	}

	.evolution-container-btn {
		bottom: 15px;
	}
    
	.choice-evo {
		max-width: 90px;
	}

	.td-stat {
		padding-left: 15px;
	}

	.primary-stats {
		width: 41%;
		margin-left: -15px;
	}

	.require-img {
		width: 45px;
	}

	.stats-container {
		margin-left: 0px;
	}
    .missions-list {
		top: 95px;
		right: 0;
	}

	.effects-list {
		top: 95px;
    	left: 0px;
	}

	.stat-panel progress[value] {
		width: 79px;
	}

	.stat-panel-item {
		width: 90px;
	}


	.action-container {
		float: right;
	}

	.actions-list {
		top: 60px;
		width: 92px;
		right: 55px;
	}

	.self-actions-list {
		top: 60px;
		width: 88px;
	}

	.tutorial-arrow-left {
		position: absolute;
		right: 100px;
		width: 50;
		left: unset;
		top: 65px;
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
	}

	.tutorial-arrow-right {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
		right: 5px;
		top: 115px;
	}

    .stat-panel-container {
        transform: translateX(36%);
        width: 300px;
        margin-left: 6px;
    }

    .belok-panel-container {
        left: 147px;
    }
   

}

@media screen and (orientation: portrait) {
	.force-landscape {
		display: block;
	}	
}

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

	.stats-container, .colony-container, .skills-list {
		margin-top: 105px;
	}

	.span-quest-container {
		max-width: 230px;
	}

	.quest-text-container {
		max-width: 230px;
	}


	.primary-colony {
		left: 35%;
		margin-top: 70px;
	}

    .missions-list {
		top: 98px;
		right: 0;
	}

	.effects-list {
		top: 98px;
		left: 0;
	}

	body { font-size: 0.8em; }

	header { text-align: center; }

	header h1 a, header h1 a:hover { text-align: center;  padding: 0px; font-size: 1.1em; }

	header h1 { padding: 5px 0; }
	
	nav { height: auto; position: relative; }

	nav ul li, .sf-menu li { margin: 0px; float: none;  padding: 0; }

	nav ul li a { padding: 5px 10px; float: none; }

	nav ul li li { margin: 0; }

	.sf-menu ul { position: relative; width: auto; padding: 0; margin: 0; }

	nav .width { padding: 0; }

	.sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 0px; }

	div.slides-container p { font-size: 0.9em; }
	
	div.slides-container h2 { font-size: 1.8em; }

	div.slides-container { height: 200px; overflow: scroll; }

}

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



	.popup-menu {
		width: 300px;
		height: 305px;
		margin-left: -159px;
	}

	.room-list-btn {
		bottom: 35;
	}

	.primary-stats {
		margin-top: 50px;
		margin-left: 20px;
	}

	.secondary-stats {
	    height: calc(100% - 320px);
		padding-left: 20px;
		padding-right: 20px;
	}
	
	th, td {
    	padding: 10px 3px;
	}
}


@media only screen and (max-width: 540px) and (min-width: 350px)  {

	.auth-window {
		margin-left: -15px;
	}

}

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

	.puzzle1-button-21 {
		margin-top: 50px;
		margin-left: 130px;
	}

	.puzzle1-button-11 {
		margin-top: 60px;
		margin-left: 130px;
	}

	.choice-evo {
		max-width: 90px;
	}

	.flex-container {
		display: unset;
	}

	.synthesis-view {
		position: fixed;
	}

	.synthesis-bonus,
	.synthesis-require {
		height: calc(100% - 380px);
		overflow-y: auto;
	}

	.p33 {
		width: 50%;
	}

	.p66 {
		width: 100%;
	}

	.primary-requests-colony {
		top: 300px;
		overflow-y: auto;
		position: absolute;
		height: 240px;
	}

	.secondary-colony {
		width: 50%;
		left: 50%;
		position: relative;
		margin-left: 10px;
		height: calc(100% - 290px);
	}

	.primary-requests-colony {
		top: 300px;
		overflow-y: auto;
		position: absolute;
		height: 240px;
	}

	.skills-list {
		height: 480px;
	}

	.popup-full .p50 {
		width: 100%;
	}

	.popup-full .p25 {
		width: 50%;
	}

	.synthesis-view {
		top: 100%;
	}
}


@media screen and (max-height: 540px) {

	.evolution-container-text {
		margin-top: 0px;
	}

	.primary-stats {
		margin-top: 60px;
	}



	.auth-window { 
		margin-top: -120px;
	}
}


@media screen and (max-height: 420px) {

    .chat-message,
    .chat-message-nick {
        font-size: 11px !important;
    }
    
	.chat-container-game {
		max-height: 64px;
	}

	.chat-container-full {
		max-height: 84px;
    }
    
	.chat-container-full {
		max-height: 84px;
	}

	.primary-stats {
		margin-top: 0px;
	}

	.chat-container-bg {
		height: 77px;
	}
}

@media screen and (max-height: 400px) {

	.popup-menu {
		margin-top: -80px;
	}

    .auth-window { 
		margin-top: -150px;
		padding-top: 10px;
	}
}

@media screen and (max-width: 350px) {
	div.slides-container { height: 275px; }

	.popup-small {
		margin-left: -157px;
	}

    .auth-window { 
		width: 240px;
	}
}