/*------------------ COMMON ------------------*/

a {
    color: #55c;
}
.bg1, .bg2, .bg3 {
	background-color: initial;
}
.text-strong {
    color: #000;
}
.button {
    font-size: 12px;
}
.postlink {
    cursor: pointer;
}

.blur {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}
body.noscroll {
    overflow: hidden;
}

/*------------------ THEME PAGE --------------------*/
.left-box .profile-avatar {
    margin-bottom: 5px;
}
dl.details dt {
    color: #000000;
    font-weight: bold;
}
dl.details dd {
    color: #222;
}
.action-bar {
    margin-top: 5px;
    margin-bottom: 5px;
}
.panel {
    border-radius: 0;
    background: #fafafa;
    margin: 15px 0;
    padding: 10px 30px;
    border: 1px solid #555;
}
.viewitem.panel {
    margin: 0;
}
.viewitem .opt, .pc-profile .opt {
    float: right;
    font-size: 10pt;
    font-weight: bold;
    margin: 0 5px;
}
.ajax .viewitem .opt, .ajax .pc-profile .opt {
    margin-top: -10px;
    margin-right: 0;
}
#viewprofile .panel {
    padding: 20px 30px;
}
.postprofile, .postbody {
    float: none;
    width: 100%;
    margin: 0;
    all: unset;
}

.postprofile a.avatar, .postprofile .avatar img {
    width: 100%;
    height: auto;
}

.nickname {
    font-size: 20px;
    width: 100%;
    font-family: sans-serif;
    text-align: center;
    padding: 6px 0 3px 0;
    margin: 0 0 10px 0;
    border-top: 1px solid #ddd;
}

.avatar-container {
    max-height: 300px;
    width: 100%;
    max-width: 200px;
    border: 1px solid #555;
    margin: -1px;
}
.postprofile .has-avatar .avatar-container {
  margin-bottom: 0px;
}

.hpepmp {
    margin-top: -4px;
    width: 100%;
}

.hpepmp .hp, .hpepmp .ep, .hpepmp .mp {
    font-size: 15px;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 0.5);
    padding: 5px 0;
    width: 30%;
}
td.hp {
    color: #f00;
}
td.ep {
    color: #090;
}
td.mp {
    color: #aaf;
}
.pprofile {
    width: 20%;
    padding: 0 12px 10px 0;
    padding-left: 0;
    vertical-align: top;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.pbody {
    width: 100%;
    padding: 0 50px;
    vertical-align: top;
}
.post table {
    width: 100%;
}
.postprofile dd, .postprofile dt {
    margin: 0;
}
.postprofile dt, .postprofile table {
    max-width: 202px;
}
.postprofile, .postbody {
    float: none;
}
.pm .postprofile {
    border-color: #DDDDDD;
    float: left;
    width: 20%;
}
.pm .postbody {
    float: right;
    width: 76%;
}

.player-xp {
    font-size: 15px;
    font-weight: bold;
    padding: 5px 0;
    color: #aaf;
    text-align: center;
    background: #111;
}
.player-gold {
    font-size: 15px;
    font-weight: bold;
    border-top: 1px solid #333;
    padding: 5px 0;
    color: #990;
    text-align: center;
    background: #111;
}
.player-gold img {
    width: auto;
    height: 10pt;
    vertical-align: top;
}
table.tborder {
    margin: 0px 0;
    width: 100%;
}
span.spoilbtn.button {
    width: 99%;
    padding: 2px 0;
    margin: 0;
    border-radius: 0;
}

.item-responsive {
  position: relative; 
}
.item-responsive:before {
  display: block; 
  content: "";
  width: 100%;
}
.item-16by9 {
  padding-top: 56.25%;
}
.item-4by3 {
  padding-top: 75%;
}
.item-2by1 {
  padding-top: 50%;
}
.item-1by1 {
  padding-top: 100%;
}

.locimg {
    overflow: hidden;
    border-bottom: 25px solid #000;
    border-top: 25px solid #000;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 400px;
    background-position: center;
    background-size: cover;
    background-color: #000;
}
.item-responsive .locimg {
    height: auto !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.postbody .content {
    font-size: 14px;
    overflow: initial;
    font-family: sans-serif;
}
.content .align, .content .spoilwrapper {
    line-height: 45px;
}
textarea {
    cursor: auto;
}
#message {
    resize: vertical !important;
	overflow-x: hidden;
}
#qr_posts {
    opacity: 0;
	height: 0;
    overflow: hidden;
}
.post.hideprofile {
  margin: 20px 150px;
}
.hideprofile p.author, .hideprofile .signature.unic, .hideprofile .signature.gameapi.toolbar {
    display: none;
}
.hideprofile .postbody h3 {
    visibility: hidden;
}
img.postimage {
    border: 1px solid rgb(0 0 0 / 0.5);
    box-shadow: 1px 1px 5px 0px rgb(0 0 0 / 0.5);
}

/*------------------ AVATARS COLLECTION --------------------*/

.avatars div.avatar {
    display: inline-block;
    width: 100px;
    vertical-align: top;
    height: 110px;
    overflow: hidden;
    position: relative;
    border: 1px solid #aaa;
    padding: 0;
    margin: 2px 1px;
}
.avatars .avatar img {
    width: 100%;
    height: auto;
}
.upload_avatar {
    margin: 10px 0 0 0;
}
.upload_avatar input {
    width: 250px;
    margin: 2px 0;
}
.avatars .button, .avatars .bg2 {
    position: absolute;
    top: 90px;
    width: 100%;
    display: block;
    padding: 2px 0;
    border: none;
}
.avatars #anim-loading div {
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0 0 0 / 15%);
    width: 100%;
    height: 100%;
    padding: 35px 0;
    color: #fff;
}
.avatars .button div, .avatars .button i {
    font-size: 15px !important;
    padding: 0;
    line-height: 16px;
}
.avatars .bg2 input {
    padding: 10px;
    padding-right: 100px;
    margin: 2px;
    margin-left: 10px;
}

/*------------------ CHARACTER PROFILE --------------------*/
#viewprofile dl.profilemenu a {
    width: 100%;
    padding: 5px 0;
    margin-bottom: 3px;
    text-decoration: none;
    color: #333;
    background: #f5f5f5;
    border: 1px solid #555;
    margin-right: 10px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
#viewprofile dl.profilemenu a:hover {
    background: #dfdfdf;
    color: #BC2A4D;
}
#viewprofile dl.profilemenu a.active {
    background: #f7f7f7;
    color: #D31141;
}
#viewprofile .right-box {
    float: right;
    width: 200px;
    text-align: right;
    max-width: 200px;
	padding-right: 20px;
}
#viewprofile .left-box {
    float: left;
    width: auto;
    text-align: left;
    max-width: 100%;
    display: inline-table;
}
#viewprofile .left-box.profile-details {
    width: 50%;
    float: none;
}
#viewprofile .panel .inner {
    padding: 5px 0;
    text-align: -webkit-center;
}
.profile-avatar img {
    max-width: 100%;
    height: auto;
}
.memberlist .profile-avatar img {
    max-width: 100px;
}
.toolbar a.button, .toolbar a.button:hover {
    border: 1px solid #ccc;
    margin: 3px 5px;
}
.signature.toolbar {
    padding: 15px 0 0 0;
}
.gameapi.toolbar i.icon {
}
.char-profile {
    display: inline-block;
    width: 65%;
}
.char-profile.common {
    width: 100%;
    padding: 0;
    margin: 0;
}
.gameapi .rhead.username {
    font-size: 16px;
    font-family: sans-serif;
}
.stats-table td, .stats-table tr {
    border: 1px solid #ddd;
}
#viewprofile .pc-profile div.left-box {
    text-align: center;
    min-width: 25%;
    display: inline-block;
    border-right: 1px solid #ddd;
    padding-right: 3%;
    padding-bottom: 50px;
}
.pc-profile td.text {
    vertical-align: top;
    padding: 5px 10px;
}
.pc-profile tr.panel {
    background: #fff;
    padding: initial;
}
.shop .details i {
    background: none;
    display: block;
    padding: 3px 5px;
    border: none;
    font-weight: bold;
}
.shop .details hr {
    margin: 10px 0;
}
img.avatar {
    border: 1px solid #555;
}
.pc-profile img.avatar {
    max-width: 200px;
    height: auto;
}
.avatar-container img.avatar {
    border: none;
}
.shop .pagination {
    margin: 10px 0;
}
.shop .pagination .current {
  color: #aaa !important;
}
/*------------------ MODAL WINDOW --------------------*/

/* свойства модального окна по умолчанию */
.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.75); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */

.modal.enabled {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
    z-index: 2;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 800px;
      margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */ 
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #555;
    outline: 0;
    background: #fafafa;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: block;
    border-bottom: 1px solid #eceeef;
    background: #eee;
    border: 1px solid #555;
    padding: 4px 0;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: normal;
    font-size: 17px;
    padding: 4px 15px;
    font-weight: bold;
    float: left;
}
/* свойства для кнопки "Закрыть" */
.modal .close {
    float: right;
    font-family: sans-serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
    padding: 0 15px;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.modal .close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}
.modal-closarea {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: auto;
}
.modal-body p {
    padding: 0;
    margin: 0 0 15px 0;
}

#modal-result {
    min-height: 30px;
    padding: 10px;
    font-size: 10pt;
}

.modal i.icon.fa.fa-circle-o-notch.fa-spin.fa-3x.fa-fw {
    font-size: 30px;
}
#modal-body-inner form {
    width: fit-content;
}
.modal tr {
    border: none;
}
.modal td {
    padding: 2px 5px;
    border: 1px solid #ccc;
    background: #eee;
}
.modal select, .modal input, .modal textarea {
    width: 100%;
    margin: 1px 0;
    border: 1px solid #ddd;
}
.modal input, .modal textarea {
  width: 96%;
  font-size: 9pt;
}
#modal-loading .fa.fa-fw {
    font-size: 20px;
    width: 20px;
}
.modal .post_content h3, .modal .post_content .post-buttons, .modal .post_content .author, .modal .post_content .signature {
    display: none;
}
.modal .post_content .content {
    font-size: 10pt;
    font-family: sans-serif;
}
.modal fieldset dt span {
  font-size: 11px;
}
/*------------------ GAME API --------------------*/
.acp_forms td {
    padding: 2px 10px;
}
.gameapi .mobile-menu {
    padding: 5px 0;
    text-align: center;
	display: none;
}
.gameapi .mobile-menu .button {
    width: 100%;
    padding: 0;
}

.gameapi p {
    font-size: 14px;
    overflow: initial;
}
.gameapi .inner {
    clear: both;
    min-height: 3em;
    line-height: 1.4em;
    font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding-bottom: 1px;
    color: #333;
    overflow: initial;
}

.gameapi h3 {
    margin-bottom: 10px;
    padding-bottom: 5px;
    margin-top: 5px;
    font-weight: 900;
    font-family: sans-serif;
    font-size: 14px;
}
table.info {
    width: 100%;
}
.config-inner, .config-inner table {
    width: 100%;
}
.config-inner td {
    vertical-align: top;
    padding: 2px 5px;
}
.param input {
    width: 96%;
    text-align: left;
}
.shop i.fa-pulse {
    font-size: 20px;
}
.panel div {
    padding: 2px 0;
}
div.buybutton {
    margin-top: 5px;
}
.shop .itemname {
    font-weight: bold;
}
td.text.catdesc {
    padding: 10px;
}
td.text.items {
    width: 15%;
}
td.text.price {
    width: 10%;
}
.rhead {
    background: #eee;
    border: 1px solid #555;
    padding: 10px;
    font-weight: bold;
    vertical-align: middle;
}
.shop-inner img.cat-img {
    width: 15px;
}
.shop-inner .catrow td {
    padding: 5px;
    text-align: center;
    font-size: 14px;
}
.shop-inner td {
    vertical-align: top;
    padding: 10px 5px;
}
td.categories {
    padding-left: 0;
}
td.items {
    padding-right: 0;
}
.empty td.text {
    padding: 10px;
}
.catrow {
    max-width: 250px;
}
.shop table {
    width: 100%;
}
.shop .search-box {
    width: 100%;
    margin: 10px 0;
    box-shadow: none;
    border: 1px solid #555;
    border-radius: 0;
}
.shop .search-box .inputbox {
    width: 95%;
    height: 30px;
}
.shop .search-box button {
    width: 5%;
    height: 30px;
}
.shop .search-box i {
    background: none;
    border: none;
}
.shop .search-box form {
    padding: 3px;
    background: #eee;
}
.shop a.acp_link {
    text-align: right;
    width: 100%;
    margin: 20px 0px;
    font-size: 15px;
    font-weight: bold;
}
.shop .name span, .shop .name #i_name, #items-container .name span {
    font-weight: 900;
    font-size: 10pt;
    font-family: sans-serif;
    text-decoration: none;
    cursor: pointer;
    color: #55c;
}
.shop td.text.img img {
    width: 50px;
    height: 50px;
}

.shop.adm dt.separator.catlink.hidden, .shop.adm dt.catlink.hidden {
    display: block;
}
.shop.adm dt.separator.catlink.hidden a, .shop.adm dt.catlink.hidden a {
    color: #aaa;
}

.edititem i, .shop p i {
    background: initial;
    display: initial;
    padding: initial;
    border: initial;
}
.edititem td {
    padding: 2px 10px;
    border: 1px solid #ccc;
}
.edititem input, .edititem textarea, .edititem select {
    font-family: sans-serif;
    font-size: 12px;
}
.edititem span {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 12px;
}
.bb_bar .button {
    margin: 1px 0;
}
#items-container td {
    vertical-align: middle;
    padding: 5px 10px;
    border-left: 1px solid #bbb;
}
.item.blocked {
    background: #f9f9f9;
    opacity: 0.7;
}
.item.blocked:hover {
    opacity: 1;
    background: #fafafa;
}
table.cat-title {
    margin-bottom: 5px;
}
div.item_icon {
    width: 64px;
	height: 64px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transition: all 0.1s ease-in;
}
tr.item.panel:hover div.item_icon {
    box-shadow: 3px 2px 7px 0px rgba(0, 0, 0, 0.5);
    margin-top: -6px;
    margin-left: -2px;
    position: relative;
    display: block;
}
tr.item.panel {
    transition: all 0.1s ease-in;
}
tr.item.panel:hover .name span {
    text-decoration: underline;
}
td.text.img {
    width: 10%;
    min-width: 55px;
    padding: 10px 0;
}
td.text.desc {
    width: 85%;
}
dl.cat-menu a {
    width: 100%;
    padding: 5px 0;
    margin-bottom: 3px;
    text-decoration: none;
    color: #333;
    background: #f5f5f5;
    border: 1px solid #555;
    margin-right: 10px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
dl.cat-menu dt.catlink.separator a {
    background: #e6e6e6;
    font-size: 12px;
    font-weight: 900;
    font-family: sans-serif;
    padding: 5px 0;
    position: relative;
}
dl.cat-menu a:hover {
    background: #dfdfdf;
    color: #BC2A4D;
}
dl.cat-menu dt.catlink.separator a:hover {
    color: #000;
    font-size: 12px;
    background: #eee;
}
.menugroup {
    margin-bottom: 15px;
}
span.what-this {
    color: #aaa;
    width: 30px;
    opacity: 0;
    float: right;
    display: inline;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    position: absolute;
    right: 0px;
}
a:hover span.what-this {
    opacity: 1;
}
.catlink span.balancer {
    width: 30px;
    float: left;
    opacity: 0;
	display: none;
}
.catlink i.fa.fa-question-circle {
    border: none;
    background: none;
    padding: 0;
    display: inline;
}
.item_icon.left-box {
    margin: 1px 10px 1px 0px;
}
.item_icon.right-box {
    margin: 0px 0px 2px 5px;
}
.subcat-list.panel {
    text-align: center;
    margin: 0;
}
.spoilbtn {
    display: inline-block;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
	border-color: #C7C3BF;
    background-color: #E9E9E9;
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E9E9E9 100%);
    background-image: linear-gradient(to bottom, #FFFFFF 0%,#E9E9E9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E9E9E9',GradientType=0 );
    box-shadow: 0 0 0 1px #FFFFFF inset;
    -webkit-box-shadow: 0 0 0 1px #FFFFFF inset;
    color: #D31141;
}
.button, .spoilbtn {
    font-size: 9pt;
    border-radius: 0;
    padding: 3px 10px;
    border-color: #ddd;
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #f1f1f1 100%);
    background-image: linear-gradient(to bottom, #FFFFFF 0%,#f1f1f1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#f1f1f1',GradientType=0 );
    font-family: sans-serif;
    font-weight: bold;
}
.pbody .spoilbtn {
    width: 99.8%;
    padding: 3px 0 !important;
}
.pbody .spoilcontent {
    padding: 10px;
    background: #eee;
    border: 1px solid #ccc;
}
.button:hover, .button:focus, .spoilbtn:hover, .spoilbtn:focus {
    border-color: #ddd;
    background-color: #FFFFFF;
    background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #FFFFFF 100%);
    background-image: linear-gradient(to bottom, #f1f1f1 0%,#FFFFFF 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#FFFFFF',GradientType=0 );
    text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px -1px 0 rgba(188, 42, 77, 0.2);
}

td.items.view {
    padding: 20px;
}
.item div.desc {
    min-height: 40px;
}

.item .text.desc .button {
  opacity: 0;
  margin: 3px 0px;
  transition: all 0.3s ease;
  float: right;
}
.item .text.desc:hover .button {
  opacity: 1;
}

.acp_forms .item div.desc {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #536482;
    font-size: 10pt;
}
.modal .itemheader {
    font-weight: 900;
    font-size: 14px;
    font-family: sans-serif;
    padding: 0 0 5px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
.acp_forms form#editor, .acp_forms table.shop {
    max-width: 1000px;
}


/*------------------ ИНВЕНТАРЬ --------------------*/
div.inventory{
  width: 93%;
  background: #efefef;
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
  height: 250px;
  overflow-y: scroll;
  display: inline-block;
  margin: 5px;
}
.inventory .item {
    display: inline-block;
    border: 1px solid #ccc;
    cursor: pointer;
    width: 48px;
    height: 48px;
    overflow: hidden;
}
.inventory .item:hover img{
  width: 60px;
  height: 60px;
  margin-top: -5px;
  margin-left: -5px;
}
.inventory .item img{
  width: 50px;
  height: 50px;
  transition: all 0.1s ease;
}
.inventory .item:active{
  border: 1px solid #aaf;
}
.inventory-inner {
    text-align: -webkit-center;
}



/*------------------ ВСПЛЫВАЮЩИЕ УВЕДОМЛЕНИЯ --------------------*/
#notes {
    position: fixed;
    bottom: 5px;
    left: 75px;
    width: auto;
    cursor: default;
    transition: height 0.45s ease-in-out;
    -webkit-transition: height 0.45s ease-in-out;
    pointer-events: none;
    z-index: 1;
}
#notes .note-item {
  max-height: 12em;
  opacity: 1;
  will-change: opacity, transform;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  width: 50vw;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  z-index: 2;
  pointer-events: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  max-width: 20em;
  font: inherit;
  line-height: 1.25em;
  color: #fff;
  margin: 0 auto 1em auto;
  transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  padding: 0.75em 1em;
}
@media (max-width: 30em) {
#notes .note-item {
    width: 85vw;
    max-width: none;
}
}
#notes .note-item[data-show="false"] {
  pointer-events: none;
  opacity: 0 !important;
  max-height: 0 !important;
  margin-bottom: 0 !important;
}
#notes .note-item[data-type="info"] {
  background-color: rgba(55, 94, 151, 0.72);
}
#notes .note-item[data-type="warn"] {
  background-color: rgba(235, 172, 0, 0.72);
  animation: shake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -webkit-animation: shake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
#notes .note-item[data-type="error"] {
  background-color: rgba(251, 101, 66, 0.72);
  animation: shake 0.54s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -webkit-animation: shake 0.54s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
#notes .note-item[data-type="success"] {
  background-color: rgba(63, 104, 28, 0.72);
}
#notes .note-item .note-item-text {
  flex: auto;
  -webkit-flex: auto;
  -moz-flex: auto;
  -ms-flex: auto;
  padding-right: 0.5em;
  max-width: calc(100% - 1.25em);
  max-width: -webkit-calc(100% - 1.25em);
}
#notes .note-item .note-item-btn {
  width: 1.25em;
  height: 1.25em;
  cursor: pointer;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTguMyw1LjcxTDE4LjMsNS43MWMtMC4zOS0wLjM5LTEuMDItMC4zOS0xLjQxLDBMMTIsMTAuNTlMNy4xMSw1LjdjLTAuMzktMC4zOS0xLjAyLTAuMzktMS40MSwwbDAsMCBjLTAuMzksMC4zOS0wLjM5LDEuMDIsMCwxLjQxTDEwLjU5LDEyTDUuNywxNi44OWMtMC4zOSwwLjM5LTAuMzksMS4wMiwwLDEuNDFoMGMwLjM5LDAuMzksMS4wMiwwLjM5LDEuNDEsMEwxMiwxMy40MWw0Ljg5LDQuODkgYzAuMzksMC4zOSwxLjAyLDAuMzksMS40MSwwbDAsMGMwLjM5LTAuMzksMC4zOS0xLjAyLDAtMS40MUwxMy40MSwxMmw0Ljg5LTQuODlDMTguNjgsNi43MywxOC42OCw2LjA5LDE4LjMsNS43MXoiLz48L3N2Zz4=)  no-repeat 0 0 / contain;
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
}
#notes .note-item .note-item-btn:hover {
  opacity: 0.6;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
    -webkit-transform: translate3d(-1px, 0, 0);
    -ms-transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0 0);
    -webkit-transform: translate3d(2px, 0, 0);
    -ms-transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
    -webkit-transform: translate3d(-4px, 0, 0);
    -ms-transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
    -webkit-transform: translate3d(4px, 0, 0);
    -ms-transform: translate3d(4px, 0, 0);
  }
}
@-webkit-keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0) t;
  }
  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
  }
}



/*------------------ ГЛАВНОЕ МЕНЮ --------------------*/

@import url(https://fonts.googleapis.com/css?family=Lora);
.nav-menu nav * {
    -webkit-transition: color 0.2s ease-out, opacity 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-out, opacity 0.2s ease-in-out;
    -o-transition: color 0.2s ease-out, opacity 0.2s ease-in-out;
    transition: color 0.2s ease-out, opacity 0.2s ease-in-out;
}
.topmenu > li {
  display: inline-block;
  position: relative;
}
.topmenu > li:last-child {
  margin-right: 0;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;

}
.nav-menu nav ul a {
  color: #74924C;
  text-shadow: none;
}
.nav-menu nav ul a:hover {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.nav-menu nav .submenu {
    background: #353438;
    visibility: hidden;
    opacity: 0;
    margin: 0 0 0 -5px;
    border: none;
    width: 102%;
}
.nav-menu nav .submenu li {
    border-bottom: 1px solid #484848;
    display: block;
}
.nav-menu nav .submenu a {
    border-right: none;
    padding: 10px 5px;
    line-height: normal;
    font-size: 10pt;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    color: #617b3b;
    text-decoration: none;
    border: none;
}
.nav-menu nav ul li:hover .submenu {
  visibility: visible;
  opacity: 1;
}
.submenu li a {
  border-bottom: 1px solid rgba(255,255,255,.3);
  color: #74924C;
}
.nav-menu nav a {
    display: inline-block;
    padding: 0 20px;
    line-height: 60px;
    margin: 0px;
    font-weight: 900;
    font-size: 15px;
    font-family: sans-serif;
    color: #000;
    text-decoration: none;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}
.nav-menu nav a:hover {
    color: #85b546;
}
.nav-menu nav.mobile-menu .burger {
    width: 120px;
}
.nav-menu nav.mobile-menu .submenu {
    margin: 0px 0 0 0px;
    width: 99%;
}


/*------------------ СПИСОК ТЕГОВ --------------------*/
.tags {
    text-align: center;
}
.tags .tag {
    border: 1px solid #777;
    border-radius: 10px;
    padding: 1px 7px;
    background: #ccf;
    font-weight: bold;
    margin: 2px 1px;
    display: inline-block;
}
.tags .tag span {
    color: #fff;
    text-shadow: 1px 1px #888;
    cursor: pointer;
}
.tag span.del-tag {
    margin: 0 0 0 10px;
    color: red;
}
.tags .tag span:hover {
    color: #f8ffde;
    text-shadow: 1px 1px #000;
    text-decoration: none;
}
.tags .tag span.del-tag:hover {
    color: #91ff00;
    text-shadow: 1px 1px #000;
    text-decoration: none;
}

/*------------------ SCROLLBAR --------------------*/

::-webkit-scrollbar {
    width: 8px;
	cursor:pointer;
}

::-webkit-scrollbar-button {
    background-image: url(gameapi.css);
    background-repeat: no-repeat;
    width: 6px;
    height: 10px;
    background-color: #888;
    border: 1px solid #555;
	cursor:pointer;
}
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #777;
    background-image: url(/images/site/59610063.png);
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #555;
	cursor:pointer;
}
::-webkit-scrollbar-track {
    background-color: #333;
	cursor:pointer;
}

/*------------------ PLACEHOLDER --------------------*/
::-webkit-input-placeholder { /* Chrome */
    color: #ccc;
    font-size: 11px;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #ccc;
    font-size: 11px;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #ccc;
    font-size: 11px;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
    color: #ccc;
    font-size: 11px;
  opacity: 1;
}

/*------------------ UI DIALOGS --------------------*/

.ui-dialog .char-name {
    font-weight: 900;
    background: #eee;
    padding: 5px 0;
    margin-bottom: 5px;
}
.ui-dialog .char-profile {
    display: inline-block;
    width: 100%;
    float: none;
}
.ui-dialog dl.details dt {
    width: 45%;
}
.ui-dialog dl.details dd {
    width: 50%;
}
.ui-dialog .anim-loading {
    position: relative;
    top: 40%;
}