@charset "UTF-8";
@font-face {
  font-family: 'TrajanR';
  font-style: normal;
  font-weight: normal;
  src: local("TrajanR"), url("TrajanPro3-Regular.woff") format("woff"); }

@font-face {
  font-family: 'TrajanB';
  font-style: normal;
  font-weight: normal;
  src: local("TrajanB"), url("TrajanPro3-SemiBold.woff") format("woff"); }

@font-face {
  font-family: 'kiddo';
  font-style: normal;
  font-weight: normal;
  src: local("kiddo"), url("FontOfKindness.otf") format("opentype"); }

.container {
  max-width: 126rem;
  min-width: 1060px;
  margin: 0 auto;
  width: calc(100% - 31rem); }
  @media screen and (max-width: 736px) {
    .container {
      padding: 0 10px; } }

body {
  height: 100vh;
  background-color: #0d1221;
  /*background-color: var(--bg-color);*/ }
  body ::-moz-selection {
    background: #353d4a;
    background-color: #20b2aa;
    color: #fff; }
  body ::selection {
    background: #353d4a;
    background-color: #20b2aa;
    color: #fff; }
  body.kiddo {
    font-family: kiddo; }
  body .patch_note {
    display: block;
    position: fixed;
    top: 5%;
    opacity: 0;
    width: 1260px;
    left: 50%;
    max-width: 126rem;
    margin: 0 auto;
    z-index: 9999;
    height: 93%;
    overflow: hidden;
    margin-left: -630px;
    padding: 15px 0px !important;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    background: rgba(3, 3, 3, 0.9) !important; }
  body .patch_note_modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 0;
    z-index: 100;
    -webkit-transition: opacity 300ms ease-out 0s, visibility 300ms ease-out 0s;
    -o-transition: opacity 300ms ease-out 0s, visibility 300ms ease-out 0s;
    transition: opacity 300ms ease-out 0s, visibility 300ms ease-out 0s; }
  body .build {
    max-width: 100%;
    background-color: rgba(0, 0, 0, 0.5); }
  body .in {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 300ms ease-out 0s, visibility 300ms ease-out 0s;
    -o-transition: opacity 300ms ease-out 0s, visibility 300ms ease-out 0s;
    transition: opacity 300ms ease-out 0s, visibility 300ms ease-out 0s; }
  body .an {
    opacity: .7;
    visibility: visible; }

#wrapper > .bg {
  /* background-color: var(--bg-color);*/ }

html:not(.style-scope) {
  overflow: hidden;
  font-size: 14px;
  --main-bg-color: #fff;
  --main-color: #212931;
  --h-color: #212931;
  --bg-color: #f4f4f4;
  --blur-gradient: linear-gradient(180deg, rgba(13, 18, 33, 0.4), #f4f4f4 80%);
  --bg-color: #0d1221;
  --blur-gradient: linear-gradient(180deg,rgba(13,18,33,.4),#0d1221 80%);
  --date-border: #eeeeee;
  --copyright-color: #21293180;
  --copyright-color: rgba(255, 255, 255, 0.25);
  --button-border-color:  #212931;
  --button-border-color:  #28435d;
  --input-title: rgba(0,0,0,.9);
  --a-color: #346eb8;
  --a-hover-color: #cd192e;
  --post-bg-color: #f4f4f4;
  --blockquote-bg: #fffaf1;
  --blockquote-shadow: unset;
  --link-bg-color: #fff;
  --link-bg-hover-color: #fff;
  --link-border-color: #F2F2F2 ;
  --link-text-color: #1A1A1A;
  --link-shadow: 0 1px 8px -4px rgba(0,0,0,.1);
  --link-shadow-hover: 0 1px 20px -4px rgba(0,0,0,.1);
  --comments-bg-color: #f4f4f4;
  --comments-text-color: #212931;
  --comments-item-bg-color:  #fffaf1;
  background-color: var(--bg-color);
  font-size: 10px; }

html:not(.style-scope)[dark], :not(.style-scope)[dark] {
  --main-bg-color: rgba(3,3,3,.3);
  --main-color: #dfecff;
  --h-color: hsla(0,0%,100%,.9);
  --bg-color: #0d1221;
  --blur-gradient: linear-gradient(180deg,rgba(13,18,33,.4),#0d1221 80%);
  --date-border: #dfecff80;
  --copyright-color: rgba(255, 255, 255, 0.25);
  --button-border-color:  #20b2aa;
  --a-color: #20b2aa;
  --a-hover-color: #06d7cb;
  --input-title: rgba(0,0,0,.5);
  --post-bg-color: rgba(3,3,3,.3);
  --blockquote-bg: rgba(3, 3, 3, 0.7);
  --blockquote-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  --link-bg-color: rgba(3,3,3,.7);
  --link-bg-hover-color: rgba(3,3,3,1);
  --link-border-color:  rgba(3,3,3,.7);
  --link-text-color: rgba(255,255,255,.9);
  --link-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  --link-shadow-hover: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  --comments-bg-color: rgba(3,3,3,.3);
  --comments-text-color: #ddd;
  --comments-item-bg-color: rgba(3,3,3,.3); }

strong, b {
  font-weight: 700; }

em, i {
  font-style: italic; }

.cdx-marker {
  background: #b88b58d1 !important;
  padding: 0 5px !important;
  border-radius: 3px !important; }

code {
  background: rgba(0, 6, 21, 0.74) !important; }

table {
  margin: 0 0 2rem 0;
  width: 100%; }

input[type="text"],
input[type="password"],
input[type="email"],
select {
  width: 100%;
  height: 4.5rem; }

textarea {
  width: 100%; }

.header {
  position: relative;
  z-index: 50;
  width: 100%;
  width: calc(100% - 5.6rem);
  max-width: 126rem;
  margin: 0 auto;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-transition: opacity 300ms ease-out 0s, -webkit-transform 300ms ease-out 0s;
  transition: opacity 300ms ease-out 0s, -webkit-transform 300ms ease-out 0s;
  -o-transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s;
  transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s;
  transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s, -webkit-transform 300ms ease-out 0s; }
  .header-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 5;
    height: 60px; }
    .header-left a {
      line-height: 40px;
      height: 4rem;
      border-bottom: unset;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .header-left img {
      height: 17px;
      opacity: 0;
      vertical-align: middle;
      -webkit-animation: imgIn 1s ease forwards;
      animation: imgIn 1s ease forwards; }
  .header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .header .nav {
    -webkit-transition: background-color .2s,height .2s;
    -o-transition: background-color .2s,height .2s;
    transition: background-color .2s,height .2s;
    position: relative;
    z-index: 5;
    height: 60px;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.0001); }
    .header .nav ul, .header .nav li {
      list-style: none;
      padding: unset;
      margin: unset; }
    .header .nav a {
      border-bottom: unset; }
    .header .nav > ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      z-index: 5;
      margin: 0;
      font-weight: 400; }
      .header .nav > ul #profileImage {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 100%;
        -webkit-animation: avatarIN 1.5s ease forwards;
        animation: avatarIN 1.5s ease forwards; }
      .header .nav > ul > li {
        position: relative;
        -webkit-transition: padding .3s ease;
        -o-transition: padding .3s ease;
        transition: padding .3s ease;
        letter-spacing: .1rem;
        padding: .5rem 1rem;
        font-size: 1.5rem;
        line-height: 1.5; }
        .header .nav > ul > li:last-child, .header .nav > ul > li:first-child {
          padding-left: 0; }
        .header .nav > ul > li > a {
          cursor: pointer;
          font-size: 18px;
          color: rgba(255, 255, 255, 0.8);
          text-shadow: rgba(3, 3, 3, 0.9) 0px 0.1rem 0.5rem;
          font-size: 14px;
          font-weight: 500;
          letter-spacing: .08em;
          text-transform: uppercase; }
          .header .nav > ul > li > a:hover {
            color: #fff; }
      .header .nav > ul ul {
        clear: both;
        position: absolute;
        left: 0;
        top: 40px;
        opacity: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: end;
        align-content: flex-end;
        max-height: 20rem;
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
        -webkit-transition: opacity 0.3s, visibility 0.4s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 0.3s, visibility 0.4s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: opacity 0.3s, visibility 0.4s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 0.3s, visibility 0.4s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 0.3s, visibility 0.4s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        visibility: hidden; }
        .header .nav > ul ul.active {
          opacity: 1;
          visibility: visible;
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          transform: translateY(0); }
        .header .nav > ul ul li {
          margin: .4rem 0;
          margin-left: 2rem;
          line-height: 1; }
        .header .nav > ul ul a {
          color: #888;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: .08em;
          text-transform: uppercase; }
          .header .nav > ul ul a:hover {
            color: #fff; }
    .header .nav .new:after {
      content: ' new';
      color: #b88b58;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase; }

.navbg {
  background: rgba(3, 3, 3, 0.9);
  -webkit-transition: opacity 300ms ease-out 0s, height 300ms ease-out 0s, background-color .2s ease;
  -o-transition: opacity 300ms ease-out 0s, height 300ms ease-out 0s, background-color .2s ease;
  transition: opacity 300ms ease-out 0s, height 300ms ease-out 0s, background-color .2s ease;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  height: 0;
  overflow: hidden; }
  .navbg-hover {
    height: 26rem; }

ul.login li {
  margin-left: 0 !important; }

@-webkit-keyframes imgIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes imgIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

#main_nav {
  padding: 1.5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  height: 7rem;
  /*a:hover:before{*/ }
  #main_nav .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    #main_nav .logo a {
      height: 1.5rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      line-height: 1; }
    #main_nav .logo img {
      height: 1.5rem; }
  #main_nav .nav_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 5rem;
    position: relative; }
    #main_nav .nav_right .nav_menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0; }
      #main_nav .nav_right .nav_menu .nav-item, #main_nav .nav_right .nav_menu .nav-item-off {
        padding: .5rem 2rem;
        font-size: 1.9rem;
        /*letter-spacing: .1rem;*/ }
        #main_nav .nav_right .nav_menu .nav-item img, #main_nav .nav_right .nav_menu .nav-item-off img {
          display: inline-block;
          vertical-align: middle;
          width: 30px;
          height: 30px;
          line-height: 30px;
          border-radius: 100%;
          -webkit-animation: avatarIN 1.5s ease forwards;
          animation: avatarIN 1.5s ease forwards; }

@-webkit-keyframes avatarIN {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes avatarIN {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
        #main_nav .nav_right .nav_menu .nav-item a, #main_nav .nav_right .nav_menu .nav-item-off a {
          color: #ddd; }
        #main_nav .nav_right .nav_menu .nav-item ul, #main_nav .nav_right .nav_menu .nav-item-off ul {
          margin: 1rem 0 0 0;
          opacity: 0;
          visibility: hidden;
          -webkit-transition: opacity .5s;
          -o-transition: opacity .5s;
          transition: opacity .5s;
          position: absolute;
          font-size: 13px;
          z-index: 3;
          color: #555;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          max-height: 22rem;
          font-size: 1.5rem;
          list-style: none; }
          #main_nav .nav_right .nav_menu .nav-item ul li, #main_nav .nav_right .nav_menu .nav-item-off ul li {
            margin-left: unset;
            margin: .2rem 0;
            padding: unset; }
            #main_nav .nav_right .nav_menu .nav-item ul li a, #main_nav .nav_right .nav_menu .nav-item-off ul li a {
              color: #aaa;
              white-space: nowrap; }
          #main_nav .nav_right .nav_menu .nav-item ul.dva li, #main_nav .nav_right .nav_menu .nav-item-off ul.dva li {
            margin-right: 3rem; }
        #main_nav .nav_right .nav_menu .nav-item .active, #main_nav .nav_right .nav_menu .nav-item-off .active {
          visibility: visible;
          opacity: 1;
          z-index: 999; }
        #main_nav .nav_right .nav_menu .nav-item .pullRight, #main_nav .nav_right .nav_menu .nav-item-off .pullRight {
          float: right !important;
          margin-top: -10px; }
          #main_nav .nav_right .nav_menu .nav-item .pullRight .avatar, #main_nav .nav_right .nav_menu .nav-item-off .pullRight .avatar {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            position: relative;
            display: block;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat; }
      #main_nav .nav_right .nav_menu .login {
        position: absolute;
        right: 0px; }
        #main_nav .nav_right .nav_menu .login a {
          float: right; }
  #main_nav a {
    border-bottom: unset;
    -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
    #main_nav a:before {
      content: '';
      position: absolute;
      width: 0;
      height: 1px;
      background-color: #18bfef;
      bottom: 0px;
      right: 0px;
      -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      -o-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      -webkit-transform: unset  !important;
      -ms-transform: unset  !important;
      transform: unset  !important; }
  #main_nav li:hover > a:not(.avatar):before {
    left: 0px;
    width: 100%; }

.drop_nav {
  height: 0;
  background: rgba(3, 3, 3, 0.7);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  overflow: hidden; }
  .drop_nav.active {
    height: 28rem; }
  .drop_nav.header_fix {
    position: fixed !important;
    -webkit-transform: translateY(-76px);
    -ms-transform: translateY(-76px);
    transform: translateY(-76px);
    opacity: 0;
    will-change: transform; }
  .drop_nav.header-fix-show {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    min-height: 76px;
    opacity: 1;
    position: fixed !important;
    -webkit-transition: opacity 300ms ease-out 0s, all .3s ease, -webkit-transform 300ms ease-out 0s;
    transition: opacity 300ms ease-out 0s, all .3s ease, -webkit-transform 300ms ease-out 0s;
    -o-transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s, all .3s ease;
    transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s, all .3s ease;
    transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s, all .3s ease, -webkit-transform 300ms ease-out 0s; }

#main, .skill_page {
  margin-top: 0 !important;
  max-width: 126rem;
  min-width: 1060px;
  -webkit-transition: opacity 300ms ease-out 0s, -webkit-transform 300ms ease-out 0s;
  transition: opacity 300ms ease-out 0s, -webkit-transform 300ms ease-out 0s;
  -o-transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s;
  transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s;
  transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s, -webkit-transform 300ms ease-out 0s; }
  #main.translator, .skill_page.translator {
    max-width: 100%;
    margin: 0; }
  #main .notFounds, .skill_page .notFounds {
    padding: 0; }
  #main .notFound, .skill_page .notFound {
    width: 100%;
    height: 458px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 300px;
    width: calc(100% + 10px);
    left: -4px;
    position: relative; }
  #main .notFound_title, .skill_page .notFound_title {
    position: absolute;
    right: 40px;
    bottom: 32px;
    left: 40px; }
    #main .notFound_title h1, .skill_page .notFound_title h1 {
      font-size: 3rem;
      line-height: 42px;
      font-family: 'Roboto', sans-serif;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
      margin: 0 0 0rem 0;
      color: rgba(255, 255, 255, 0.9); }
    #main .notFound_title .bad, .skill_page .notFound_title .bad {
      font-size: 100px;
      font-size: 10rem;
      line-height: 42px;
      margin: 0 0 8rem 0;
      color: rgba(255, 255, 255, 0.9); }

.asd {
  display: block;
  height: 0px;
  -webkit-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -o-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  top: 190px;
  z-index: 3;
  position: absolute;
  height: 600px; }
  .asd > div {
    width: 300px;
    float: right;
    height: 100%;
    background-color: rgba(3, 3, 3, 0.9);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border-radius: 5px; }

.asd_left {
  left: 30px;
  right: 50%;
  margin-right: calc((100% - 63rem)/2);
  margin-right: 650px; }

.asd_right {
  left: 50%;
  margin-left: calc((100% - 63rem)/2);
  margin-left: 650px; }

.asd_horiz {
  display: none;
  height: 130px;
  margin-top: 10px !important; }
  .asd_horiz > div {
    width: 100%;
    height: 100%;
    background-color: rgba(3, 3, 3, 0.9);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border-radius: 5px; }

@media screen and (max-width: 1700px) {
  .asd_left, .asd_right {
    display: none; }
  .asd_horiz {
    display: block; }
    .asd_horiz .supButton {
      display: none; } }

@media screen and (min-width: 980px) and (max-width: 1100px) {
  .header-right ul .off {
    display: none; } }

.os-theme-dark > .os-scrollbar-vertical,
.os-theme-light > .os-scrollbar-vertical {
  bottom: 10px;
  width: 1.4rem; }

.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-dark > .os-scrollbar > .os-scrollbar-track, .os-theme-light > .os-scrollbar > .os-scrollbar-track {
  border-radius: 1px; }

.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  /*background: rgba(0,0,0,0.9);
    background: rgba(256,256,256,0.25);
    background-color: rgb(14, 10, 23);
    background: #6c6e714d;
    background: rgba(120, 120, 120, 0.4);*/
  background: #303c47; }

.os-host-transition > .os-scrollbar, .os-host-transition > .os-scrollbar-corner {
  -webkit-transition: opacity 0.4s linear,visibility 0.4s,top 0.4s,right 0.4s,bottom 0.4s,left .4s;
  -o-transition: opacity 0.4s linear,visibility 0.4s,top 0.4s,right 0.4s,bottom 0.4s,left .4s;
  transition: opacity 0.4s linear,visibility 0.4s,top 0.4s,right 0.4s,bottom 0.4s,left .4s; }

.bgfake {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .1; }

.image.newmain {
  padding: 0 !important;
  position: absolute;
  height: 0px;
  overflow: hidden;
  /*&:before{
	 	display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    content: "";
	    width: 100%;
	    height: 100%;
	    background-image: linear-gradient(0deg,rgba(13,18,33,.4),#0d1221 20%);
	}*/ }
  .image.newmain .blur {
    opacity: 0.6;
    position: absolute;
    height: 600px;
    -webkit-filter: blur(80px) brightness(1.5);
    filter: blur(80px) brightness(1.5);
    opacity: 0.2;
    position: absolute;
    height: 600px;
    -webkit-filter: blur(5px) brightness(1.2);
    filter: blur(5px) brightness(1.2); }

#main {
  background: rgba(3, 3, 3, 0.3);
  background: var(--main-bg-color);
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0.34);
  box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0.34);
  color: #c40235;
  color: #c70234;
  color: #180106;
  color: #137b75;
  color: #883E3E00;
  color: #20b2aa;
  color: rgba(255, 255, 255, 0.9);
  color: #dfecff;
  color: var(--main-color); }

header.major .date::before, header.major .date::after {
  border-top-color: #eeeeee;
  border-top-color: var(--date-border); }

header.major {
  font-size: 1.7rem;
  z-index: 0; }
  header.major p {
    font-weight: 600;
    text-transform: uppercase;
    margin: 0; }
  header.major a.change-post:before {
    font-family: FontAwesome;
    margin-right: 4px;
    content: "\f040";
    font-size: 1.3rem;
    -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset; }

a {
  color: #137b75;
  color: #20b2aa;
  /*&:hover:before{
			visibility: visible;
			transform: scaleX(0);
		}*/ }
  a:not(.change-post):before {
    /*content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		bottom: 0;
		left: 0;
		//background: #777;
		border-bottom: .2rem solid #18bfef;;
		visibility: visible;
		border-radius: 5px;
		transform: scaleX(0);
		transition: .25s linear;
		margin: 0;*/ }

.post a {
  border-bottom: unset; }

.post .class {
  height: 300px; }
  .post .class .img {
    position: absolute;
    left: 0rem;
    width: 100%; }

.post ul li img {
  width: 39px;
  margin: 0px 3px; }

/*padding*/
#main .padd {
  padding: 6rem 4rem 4rem 4rem;
  padding: 8rem 0rem 6rem 0rem;
  padding: 11rem 0rem 9rem 0rem; }
  #main .padd header.major {
    padding: 0 11rem;
    width: 100%;
    margin: 0 0 6rem 0 !important; }
  #main .padd > header {
    width: 100%; }
  #main .padd > p,
  #main .padd > h1,
  #main .padd > h2,
  #main .padd > h3,
  #main .padd > h4,
  #main .padd > ul,
  #main .padd > ol,
  #main .padd > hr,
  #main .padd > div,
  #main .padd > dl,
  #main .padd > form,
  #main .padd > blockquote,
  #main .padd > header {
    margin: 0 11rem 2.8rem 11rem; }
  #main .padd > ul {
    margin: 0 11rem 4rem 11rem; }
  #main .padd > h2 {
    margin: 0 11rem 2.1rem 11rem; }
  #main .padd > h4, #main .padd > h5, #main .padd > h6 {
    margin: 0 11rem 1.4rem 11rem; }
  #main .padd > hr {
    margin: 4rem 11rem; }
  #main .padd p > img:not(strong) {
    margin: 0 -11rem;
    width: calc(100% + 23rem); }

.patch_note {
  color: #dfecff; }
  .patch_note h1, .patch_note h2, .patch_note h3, .patch_note h4, .patch_note h5, .patch_note h6 {
    color: rgba(255, 255, 255, 0.9); }
  .patch_note .as {
    padding: 6rem 4rem 4rem 4rem;
    padding: 8rem 0rem 6rem 0rem;
    overflow: hidden; }
    .patch_note .as header.major {
      padding: 0 8rem;
      width: 100%;
      margin: 0 0 4rem 0 !important; }
    .patch_note .as > header {
      width: 100%; }
    .patch_note .as > p,
    .patch_note .as > h1,
    .patch_note .as > h2,
    .patch_note .as > h3,
    .patch_note .as > h4,
    .patch_note .as > ul,
    .patch_note .as > ol,
    .patch_note .as > hr,
    .patch_note .as > div,
    .patch_note .as > dl,
    .patch_note .as > form,
    .patch_note .as > blockquote,
    .patch_note .as > header {
      margin: 0 8rem 2rem 8rem; }
    .patch_note .as > ul {
      margin: 0 8rem 3rem 8rem; }
    .patch_note .as > h2 {
      margin: 0 8rem 1.5rem 8rem; }
    .patch_note .as > h4, .patch_note .as > h5, .patch_note .as > h6 {
      margin: 0 8rem 1rem 8rem; }
    .patch_note .as > hr {
      margin: 3rem 8rem; }
    .patch_note .as p > img:not(strong) {
      margin: 0 -8rem;
      width: calc(100% + 16rem); }

@media screen and (max-width: 1280px) {
  #main .padd {
    padding: 6rem 4rem 4rem 4rem;
    padding: 6rem 0rem 4rem 0rem; }
    #main .padd header.major {
      padding: 0 4rem; }
    #main .padd > p,
    #main .padd > h1,
    #main .padd > h2,
    #main .padd > h3,
    #main .padd > h4,
    #main .padd > ul,
    #main .padd > ol,
    #main .padd > hr,
    #main .padd > div,
    #main .padd > dl,
    #main .padd > form,
    #main .padd > blockquote,
    #main .padd > header {
      margin: 0 4rem 2rem 4rem; }
    #main .padd > ul {
      margin: 0 4rem 3rem 4rem; }
    #main .padd > h2 {
      margin: 0 4rem 1.5rem 4rem; }
    #main .padd > h4, #main .padd > h5, #main .padd > h6 {
      margin: 0 4rem 1rem 4rem; }
    #main .padd > hr {
      margin: 3rem 4rem; }
    #main .padd p > img:not(strong) {
      margin: 0 -4rem;
      width: calc(100% + 8rem); }
  .patch_note .as {
    padding: 6rem 4rem 4rem 4rem;
    padding: 6rem 0rem 4rem 0rem; }
    .patch_note .as header.major {
      padding: 0 4rem; }
    .patch_note .as > p,
    .patch_note .as > h1,
    .patch_note .as > h2,
    .patch_note .as > h3,
    .patch_note .as > h4,
    .patch_note .as > ul,
    .patch_note .as > ol,
    .patch_note .as > hr,
    .patch_note .as > div,
    .patch_note .as > dl,
    .patch_note .as > form,
    .patch_note .as > blockquote,
    .patch_note .as > header {
      margin: 0 4rem 2rem 4rem; }
    .patch_note .as > ul {
      margin: 0 4rem 3rem 4rem; }
    .patch_note .as > h2 {
      margin: 0 4rem 1.5rem 4rem; }
    .patch_note .as > h4, .patch_note .as > h5, .patch_note .as > h6 {
      margin: 0 4rem 1rem 4rem; }
    .patch_note .as > hr {
      margin: 3rem 4rem; }
    .patch_note .as p > img:not(strong) {
      margin: 0 -4rem;
      width: calc(100% + 8rem); } }

@media screen and (max-width: 736px) {
  #main > .post {
    padding: 4rem 2rem 2rem 2rem;
    padding: 4rem 0rem 2rem 0rem; }
    #main > .post header.major {
      padding: 0 2rem; }
    #main > .post > p,
    #main > .post > h1,
    #main > .post > h2,
    #main > .post > h3,
    #main > .post > h4,
    #main > .post > ul,
    #main > .post > ol,
    #main > .post > hr,
    #main > .post > div,
    #main > .post > dl,
    #main > .post > form,
    #main > .post > blockquote,
    #main > .post > header {
      margin: 0 2rem 2rem 2rem; }
    #main > .post > ul {
      margin: 0 2rem 3rem 2rem; }
    #main > .post > h2 {
      margin: 0 2rem 1.5rem 2rem; }
    #main > .post > h4, #main > .post > h5, #main > .post > h6 {
      margin: 0 2rem 1rem 2rem; }
    #main > .post > hr {
      margin: 3rem 2rem; }
    #main > .post p > img:not(strong) {
      margin: 0 -2rem;
      width: calc(100% + 4rem); }
  .patch_note > .as {
    padding: 4rem 2rem 2rem 2rem;
    padding: 4rem 0rem 2rem 0rem; }
    .patch_note > .as header.major {
      padding: 0 2rem; }
    .patch_note > .as > p,
    .patch_note > .as > h1,
    .patch_note > .as > h2,
    .patch_note > .as > h3,
    .patch_note > .as > h4,
    .patch_note > .as > ul,
    .patch_note > .as > ol,
    .patch_note > .as > hr,
    .patch_note > .as > div,
    .patch_note > .as > dl,
    .patch_note > .as > form,
    .patch_note > .as > blockquote,
    .patch_note > .as > header {
      margin: 0 2rem 2rem 2rem; }
    .patch_note > .as > ul {
      margin: 0 2rem 3rem 2rem; }
    .patch_note > .as > h2 {
      margin: 0 2rem 1.5rem 2rem; }
    .patch_note > .as > h4, .patch_note > .as > h5, .patch_note > .as > h6 {
      margin: 0 2rem 1rem 2rem; }
    .patch_note > .as > hr {
      margin: 3rem 2rem; }
    .patch_note > .as p > img:not(strong) {
      margin: 0 -2rem;
      width: calc(100% + 4rem); }
  #main .notFound_title h1 {
    font-size: 1.5rem; }
  #main .notFound_title .bad {
    font-size: 5rem;
    margin: 3rem 0; } }

ul.actions.fit {
  width: unset; }

#jsform button {
  height: 100%; }

/*padding*/
#copyright {
  color: var(--copyright-color); }
  @media screen and (max-width: 400px) {
    #copyright {
      font-size: 13px; } }

.siteVersion {
  position: fixed;
  bottom: 0px;
  right: 40px;
  z-index: 999;
  color: rgba(255, 255, 255, 0.2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 40px;
  cursor: default;
  pointer-events: none; }

.theme-change {
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  position: fixed;
  bottom: 0px;
  right: 0px;
  border-radius: 100%;
  padding: 10px;
  line-height: 100%;
  max-width: 40px;
  max-height: 40px;
  opacity: .3;
  z-index: 999; }
  .theme-change__op {
    opacity: 0; }
  .theme-change span {
    color: #bfbfbf;
    width: 20px;
    height: 20px; }
  .theme-change:hover {
    background-color: #23293c;
    -webkit-box-shadow: 0 1px 8px rgba(3, 3, 3, 0.7);
    box-shadow: 0 1px 8px rgba(3, 3, 3, 0.7);
    opacity: 1; }

.theme-change.show {
  background-color: #23293c;
  -webkit-box-shadow: 0 1px 8px rgba(3, 3, 3, 0.7);
  box-shadow: 0 1px 8px rgba(3, 3, 3, 0.7);
  opacity: 1; }

.overlay {
  z-index: 99999;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 450px;
  /*288*/
  pointer-events: none; }
  .overlay .popup {
    height: 100%;
    width: 100%;
    background-color: rgba(3, 3, 3, 0.8);
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    border-top-left-radius: 16px;
    overflow: hidden;
    position: relative;
    padding: 15px 25px;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    will-change: transform;
    z-index: 999999;
    pointer-events: auto; }
    .overlay .popup .emoji {
      width: 25px;
      height: 25px; }
    .overlay .popup .theme_change .mdc-form-field {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 40px; }
      .overlay .popup .theme_change .mdc-form-field > label {
        margin-right: 0; }
    .overlay .popup .theme_change .time {
      margin-left: 5px;
      color: #fff9; }
    .overlay .popup .theme_auto .mdc-form-field {
      font-size: 12px;
      -webkit-box-pack: unset;
      -ms-flex-pack: unset;
      justify-content: unset; }
  .overlay_visible {
    pointer-events: auto; }
    .overlay_visible .popup {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; }
  .overlay_animatable .popup {
    -webkit-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); }
  .overlay_visible .popup, .overlay_animatable .popup {
    -webkit-transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
    -o-transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
    transition: all 200ms cubic-bezier(0.4, 0, 1, 1); }
  .overlay label, .overlay span {
    color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    border-radius: 2px; }
  .overlay .change_block {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 5px; }
    .overlay .change_block:last-child {
      margin-bottom: 0; }
    .overlay .change_block span {
      width: 100%;
      font-size: 1.7rem;
      line-height: 1.5; }
    .overlay .change_block .mdc-form-field {
      width: 100%;
      height: 40px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }

.btn-primary {
  bcorder-color: unset;
  border: unset;
  height: 2.5rem; }

.btn-danger {
  background-color: rgba(3, 3, 3, 0.9);
  bcorder-color: unset;
  border: unset;
  height: 2.5rem;
  color: #ff5157 !important; }
  .btn-danger:hover {
    background-color: #ff5157 !important; }

/*button, .button,.btn-primary{
	box-shadow: inset 0 0 0 2px var(--button-border-color);
	color: #20b2aa !important;
	background-color: rgba(3, 3, 3, 0.9);
	border-radius: .2rem;
	opacity: 1;
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12) !important;
	transition: background-color .3s ease-out, opacity 300ms ease-out .3s, transform 300ms ease-out .3s, color .2s ease-out ;

	&#jsbuttonSave{
		color: #ff5157 !important;
		&:hover{
			background-color: #7cffc3;
	    	color: rgba(3, 3, 3, 0.9) !important;
		}
	}
}*/
input[type="text"], input[type="password"], input[type="email"], select, textarea, .mce-combobox input, .mce-textbox {
  border-radius: 3px !important;
  border: 0px;
  background: rgba(0, 0, 0, 0.5);
  padding: .7rem 1.4rem;
  border-bottom: 0.28rem solid rgba(0, 0, 0, 0.9);
  color: #fff;
  -webkit-transition: all .5s, opacity 300ms ease-out .3s, -webkit-transform 300ms ease-out .3s;
  transition: all .5s, opacity 300ms ease-out .3s, -webkit-transform 300ms ease-out .3s;
  -o-transition: all .5s, opacity 300ms ease-out .3s, transform 300ms ease-out .3s;
  transition: all .5s, opacity 300ms ease-out .3s, transform 300ms ease-out .3s;
  transition: all .5s, opacity 300ms ease-out .3s, transform 300ms ease-out .3s, -webkit-transform 300ms ease-out .3s; }
  input[type="text"]:focus, input[type="text"]:hover, input[type="password"]:focus, input[type="password"]:hover, input[type="email"]:focus, input[type="email"]:hover, select:focus, select:hover, textarea:focus, textarea:hover, .mce-combobox input:focus, .mce-combobox input:hover, .mce-textbox:focus, .mce-textbox:hover {
    -webkit-box-shadow: unset;
    box-shadow: unset;
    color: unset;
    border-bottom: .28rem solid #d05;
    background: rgba(0, 0, 0, 0.9); }

#jstitle {
  background: var(--input-title); }

#nav-tab .nav-link {
  height: unset; }

.btn-light.disabled, .btn-light:disabled {
  background: rgba(0, 0, 0, 0.9); }

.mce-textbox, .mce-combobox input {
  padding: 0 1.4rem; }

.mce-panel {
  background: rgba(0, 0, 0, 0.9);
  border: 0 !important; }
  .mce-panel .mce-btn {
    border: 0;
    border-radius: .28rem; }
    .mce-panel .mce-btn:hover button, .mce-panel .mce-btn:hover {
      background-color: var(--button-border-color) !important;
      color: rgba(3, 3, 3, 0.9) !important; }
    .mce-panel .mce-btn:active {
      background-color: rgba(3, 3, 3, 0.9) !important; }
    .mce-panel .mce-btn .mce-txt {
      color: #ddd; }
  .mce-panel .mce-menu-item .mce-ico, .mce-panel .mce-menu-item .mce-text {
    color: #ddd; }
  .mce-panel #mceu_151-body {
    background: rgba(3, 3, 3, 0.9);
    border: unset;
    border-top-color: rgba(3, 3, 3, 0.9) !important; }
  .mce-panel > currentcolor {
    border-top-color: rgba(3, 3, 3, 0.9) !important; }
  .mce-panel .mce-btn i {
    text-shadow: unset;
    color: #ddd; }
  .mce-panel .mce-menu-item-normal.mce-active {
    background: rgba(3, 3, 3, 0.9);
    color: #fff; }
  .mce-panel .mce-menu-item:hover, .mce-panel .mce-menu-item.mce-selected, .mce-panel .mce-menu-item:focus {
    text-decoration: none;
    background: rgba(3, 3, 3, 0.9); }
  .mce-panel .mce-btn.mce-active, .mce-panel .mce-btn.mce-active:hover {
    background: var(--button-border-color); }
  .mce-panel .mce-menu-item:hover .mce-text, .mce-panel .mce-menu-item.mce-selected .mce-text, .mce-panel .mce-menu-item:focus .mce-text {
    color: #7cffc3 !important;
    color: var(--button-border-color) !important; }

#mceu_346, #mceu_516, #mceu_573, #mceu_588 {
  background: rgba(3, 3, 3, 0.9);
  border: unset; }

#mceu_573 *, .mce-panel * {
  color: #ddd; }

#mceu_588 {
  width: 100%; }

#mceu_346-body {
  width: 100%  !important; }

#mceu_15 {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

body.is-preload #main:not(.guide) {
  -webkit-transform: translateY(6rem);
  -ms-transform: translateY(6rem);
  transform: translateY(6rem);
  -webkit-transform: translate3d(0, 6rem, 0);
  transform: translate3d(0, 6rem, 0);
  opacity: 0; }

body.is-preload button, body.is-preload #jsform, body.is-preload #jstitle {
  -webkit-transform: translateY(1.4rem);
  -ms-transform: translateY(1.4rem);
  transform: translateY(1.4rem);
  -webkit-transform: translate3d(0, 1.4rem, 0);
  transform: translate3d(0, 1.4rem, 0);
  opacity: 0; }

body.is-preload .header {
  -webkit-transform: translateY(-6rem);
  -ms-transform: translateY(-6rem);
  transform: translateY(-6rem);
  -webkit-transform: translate3d(0, -6rem, 0);
  transform: translate3d(0, -6rem, 0);
  opacity: 0; }

.skill_data_item .icon img,
.trip_item img {
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out 0s;
  -o-transition: opacity 1000ms ease-out 0s;
  transition: opacity 1000ms ease-out 0s;
  -webkit-animation: img_op 1s ease-out forwards .3s;
  animation: img_op 1s ease-out forwards .3s; }

.skill_page.op .skill_left .skill__list .skill__icon .skill_icon_head .rightskill .tripode_icon {
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out 0s;
  -o-transition: opacity 1000ms ease-out 0s;
  transition: opacity 1000ms ease-out 0s;
  -webkit-animation: img_op 1s ease-out forwards;
  animation: img_op 1s ease-out forwards; }

.skill_page.op .skill_right .skill__trip .skill__trip__item img {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in 0.3s, all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: opacity 0.5s ease-in 0.3s, all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 0.5s ease-in 0.3s, all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-animation: img_op 1s ease-out forwards .3s;
  animation: img_op 1s ease-out forwards .3s; }

.skill_data_title,
.class_choice,
.graph_stat {
  opacity: 0;
  -webkit-transform: translate3d(0, 30px, 0) rotate(0.001deg);
  transform: translate3d(0, 30px, 0) rotate(0.001deg);
  z-index: -1;
  position: relative; }

.skill_page .gs_check,
.skill_page .class_header,
.skill_page .head_skil,
.skill_page .skill_left,
.skill_page .search,
.skill_page .sort {
  -webkit-transition: opacity .5s,-webkit-transform .5s !important;
  transition: opacity .5s,-webkit-transform .5s !important;
  -o-transition: transform .5s,opacity .5s !important;
  transition: transform .5s,opacity .5s !important;
  transition: transform .5s,opacity .5s,-webkit-transform .5s !important;
  -webkit-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 0;
  will-change: opacity, transform;
  -webkit-transform: translate3d(0, 40px, 0) rotate(0.001deg);
  transform: translate3d(0, 40px, 0) rotate(0.001deg); }

.skill_page .class_header,
.skill_page .head_skil,
.skill_page .sort {
  -webkit-transition-delay: 0.3s !important;
  -o-transition-delay: 0.3s !important;
  transition-delay: 0.3s !important; }

.skill_page .skill_left {
  -webkit-transition-delay: 0.7s !important;
  -o-transition-delay: 0.7s !important;
  transition-delay: 0.7s !important; }

.skill_page .skill_left {
  -webkit-transform: translate3d(0, -100px, 0) rotate(0.001deg);
  transform: translate3d(0, -100px, 0) rotate(0.001deg); }

.skill__trip__blue,
.skill__trip__green,
.skill__trip__orange {
  opacity: 0;
  -webkit-transform: translate3d(0, -100px, 0) rotate(0.001deg);
  transform: translate3d(0, -100px, 0) rotate(0.001deg); }

.skill_page .search {
  -webkit-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-transform: translate3d(0, 16px, 0) rotate(0.001deg);
  transform: translate3d(0, 16px, 0) rotate(0.001deg);
  z-index: 10; }

.skill_page .gs_check.animation,
.skill_page .class_header.animation,
.skill_page .head_skil.animation,
.skill_page .skill_left.animation,
.skill_page .search.animation,
.skill_page .sort.animation {
  opacity: 1 !important;
  -webkit-transform: translateZ(0) rotate(0.001deg) !important;
  transform: translateZ(0) rotate(0.001deg) !important;
  will-change: unset; }

@-webkit-keyframes showAnim {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60px);
    transform: translateY(60px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@keyframes showAnim {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60px);
    transform: translateY(60px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

#jseditor_ifr * {
  background: rgba(3, 3, 3, 0.9); }
  #jseditor_ifr * #tinymce {
    background: rgba(3, 3, 3, 0.9); }

/*animation: antRadioEffect .36s ease-in-out;
@keyframes antRadioEffect {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1.6);
            transform: scale(1.6);
    opacity: 0;
  }
}*/
.checkbox_switch {
  border: 0;
  position: relative;
  height: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 35px;
  background-color: #e9e9e9;
  background-color: #393d41;
  color: transparent;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
  .checkbox_switch:after {
    position: absolute;
    left: -2px;
    top: -5px;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 100px;
    background-color: #cacaca;
    background-color: #20b2aa;
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    content: '';
    -webkit-transition: left 200ms ease-out,background-color 200ms ease-out;
    -o-transition: left 200ms ease-out,background-color 200ms ease-out;
    transition: left 200ms ease-out,background-color 200ms ease-out;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.checkbox_switch.checkbox_checked {
  background-color: #8ac858;
  background-color: rgba(3, 3, 3, 0.6);
  border-color: #8ac858;
  border-color: rgba(3, 3, 3, 0.6);
  color: #fff; }
  .checkbox_switch.checkbox_checked:after {
    left: 17px;
    background-color: #20b2aa;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

input[type="checkbox"] + label, input[type="radio"] + label {
  color: #fff;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 900;
  line-height: 2.1;
  letter-spacing: 0.105em;
  font-size: 1.1rem;
  text-transform: uppercase; }

input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before {
  background-color: rgba(3, 3, 3, 0.6);
  border-color: rgba(3, 3, 3, 0);
  border-color: #10121a;
  border-color: #20b2aa;
  color: #20b2aa;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

body, input, select, textarea {
  font-family: Open sans;
  font-size: 2rem;
  line-height: 1.5;
  line-height: 2;
  font-weight: 400; }

#main > .post header.major > h1, #main > .post header.major h2 {
  font-size: 4rem;
  padding: 0 130px; }

#wrapper > .bg {
  background-image: unset;
  /*background-color: rgb(8, 22, 28);
	background-color: #111111;*/
  /*background-color: #0d1221;	*/
  background-color: var(--bg-color); }

.blurimg {
  position: absolute;
  height: 568px;
  overflow: hidden;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  width: 101%;
  top: 0;
  left: 0;
  background: no-repeat center -2px;
  background-image: none;
  background-size: auto auto;
  background-size: 100%;
  /*opacity: .9;*/
  height: 900px;
  top: -1rem;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: calc(100vh + 10rem);
  background: #111111 none repeat scroll 0% 0%;
  width: 100%;
  height: 100vh; }
  .blurimg img {
    /*min-width: 100%;
		min-height: 100%;
		background-size: cover !important;
		background-repeat: no-repeat !important;
		max-width: unset;
*/
    opacity: 0;
    -webkit-transition: opacity 1000ms ease-out 0s;
    -o-transition: opacity 1000ms ease-out 0s;
    transition: opacity 1000ms ease-out 0s;
    -webkit-animation: img_op 1s ease-out forwards;
    animation: img_op 1s ease-out forwards;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
    min-width: 100%;
    min-height: 100%; }
  .blurimg .revr {
    -webkit-animation: img_op_rev 1s ease-out forwards;
    animation: img_op_rev 1s ease-out forwards; }

@-webkit-keyframes img_op {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes img_op {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes img_op_rev {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes img_op_rev {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .blurimg:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-image: var(--blur-gradient);
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
    min-width: 100%;
    min-height: 100%;
    z-index: 999;
    height: 100vh;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(13, 18, 33, 0.4)), color-stop(105%, #0d1221));
    background-image: -o-linear-gradient(top, rgba(13, 18, 33, 0.4), #0d1221 105%);
    background-image: linear-gradient(180deg, rgba(13, 18, 33, 0.4), #0d1221 105%); }

.bgg {
  -webkit-filter: blur(1px);
  filter: blur(1px); }

/*SKILL_PAGE*/
body .patch_note, .skill_page .gs_check, .skill_page .class_header, .skill_page .skill_right .head_skil, .skill_page .thx, .skill_page .combo_skill_zone .skill__icon_combo, .skill_page .card_zone .icon_card, .skill_page .ult_zone .ult_item, .class_select, .copied, #main.guide, .build_list, .class_choice, .class_choice .gs_block .mousewheel, .graph_stat, .info_hide, .info_private, .rank_item, .skill_data_item, .build_tab_list .build_tab, .user_dashboard .user_info, .modal_o, .ship_data, .crewList, .archetype .classitem, .publishModal, .anchor_list, .content, .skill-data-filter__gs .tooltip, .rune-list .tooltip, .engrave .tooltip, .tooltip-new {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  background: rgba(3, 3, 3, 0.7);
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 15px 25px;
  /* transition: opacity 300ms ease-out 0s, transform 300ms ease-out 0s;*/
  font-size: 2.1rem; }

.skill_page {
  background: unset;
  color: #dfecff;
  color: #ddd; }
  .skill_page a {
    border: unset; }
  .skill_page .gs_check {
    background: #07070a;
    display: inline-block;
    display: block;
    height: 70px;
    overflow: hidden;
    /*transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms ease-out 0s, transform 300ms ease-out 0s;
		transition: height 300ms ease, opacity 300ms ease-out 0s, transform 300ms ease-out 0s;*/
    position: absolute;
    top: -80px;
    z-index: 200;
    /*transform: translateZ(0);*/ }
    .skill_page .gs_check.open {
      height: auto; }
    .skill_page .gs_check .gs_nick {
      display: grid;
      grid-template-columns: 1.3fr 5fr;
      grid-gap: 0.7rem;
      margin: 0 0 15px;
      margin-bottom: 1.5rem;
      align-self: center; }
      .skill_page .gs_check .gs_nick .gs_nick_name {
        height: 4.5rem;
        line-height: 4.5rem;
        cursor: pointer;
        font-weight: 500;
        letter-spacing: .04em; }
      .skill_page .gs_check .gs_nick input {
        background: black; }
        .sh .skill_page .gs_check .gs_nick input {
          background: #030303; }
    .skill_page .gs_check #gs_form {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-gap: 1.5rem 1.5rem;
      margin: 0; }
      .skill_page .gs_check #gs_form div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
      .skill_page .gs_check #gs_form div:last-child {
        -ms-flex-item-align: center;
        align-self: center;
        text-align: center;
        display: unset; }
        .skill_page .gs_check #gs_form div:last-child span {
          color: #ddd; }
      .skill_page .gs_check #gs_form label {
        display: none; }
  .skill_page .sh input {
    background: rgba(41, 41, 41, 0.08);
    border-bottom: .2rem solid #7777774d;
    border-bottom: .2rem solid #060d12;
    background: #0d122133;
    background: rgba(255, 255, 255, 0.015); }
    .skill_page .sh input:hover {
      border-bottom: .2rem solid #d05;
      background: black; }
  .skill_page .class_header {
    background: #07070a;
    line-height: initial;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom-right-radius: 0px;
    z-index: 11;
    position: relative; }
    @media screen and (max-width: 500px) {
      .skill_page .class_header {
        border-bottom-left-radius: 0px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        .skill_page .class_header .date {
          margin-bottom: 15px; }
        .skill_page .class_header .build_right > a {
          float: unset !important; } }
    .skill_page .class_header .calcServ {
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.8); }
      .skill_page .class_header .calcServ .l {
        color: rgba(255, 255, 255, 0.93);
        margin-right: 10px; }
      .skill_page .class_header .calcServ span {
        float: left !important;
        margin-right: 5px; }
    .skill_page .class_header .class_name {
      cursor: pointer;
      -ms-flex-item-align: center;
      align-self: center;
      text-align: center;
      float: left;
      text-transform: capitalize;
      font-weight: 500;
      font-size: 18px;
      letter-spacing: .04em; }
      .skill_page .class_header .class_name span {
        float: left !important; }
        .skill_page .class_header .class_name span i {
          font-size: 1.6rem; }
    .skill_page .class_header .date {
      display: grid; }
      .skill_page .class_header .date a {
        font-weight: 500;
        font-size: 18px;
        letter-spacing: .04em; }
      .skill_page .class_header .date > span {
        color: #20b2aa;
        cursor: pointer; }
        .skill_page .class_header .date > span:hover {
          color: #18bfef !important; }
    .skill_page .class_header .build_right {
      line-height: 1.7rem;
      line-height: 2.3rem;
      font-weight: 500;
      font-size: 18px;
      letter-spacing: .03em; }
      .skill_page .class_header .build_right #patch_note {
        cursor: pointer; }
      .skill_page .class_header .build_right > a {
        float: right; }
      .skill_page .class_header .build_right span {
        float: right; }
  .skill_page .skill_zone {
    display: grid;
    grid-template-columns: minmax(250px, 800px) minmax(440px, 510px);
    grid-gap: 14px; }
    @media screen and (max-width: 775px) {
      .skill_page .skill_zone {
        grid-template-columns: 1fr; } }
    @media screen and (max-width: 500px) {
      .skill_page .skill_zone {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse; } }
  .skill_page .skill_left {
    /*width: 60%;
		float: left;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 10px;
    max-height: 578px;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-color: #b88b588a rgba(255, 255, 255, 0) !important;
    scrollbar-width: thin !important; }
    @media screen and (max-width: 775px) {
      .skill_page .skill_left {
        max-height: 380px; } }
    .skill_page .skill_left::-webkit-scrollbar {
      width: 2px; }
    .skill_page .skill_left::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0); }
    .skill_page .skill_left::-webkit-scrollbar-thumb {
      background-color: #b88b588a; }
    .skill_page .skill_left .skill__list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      /*transition: grid-gap .3s ease .6s;*/
      grid-gap: 1rem 1.4rem; }
      .skill_page .skill_left .skill__list .active {
        height: unset; }
      .skill_page .skill_left .skill__list .skill__list .active {
        background: -webkit-gradient(linear, left top, right top, color-stop(70%, black), color-stop(110%, transparent));
        background: -o-linear-gradient(left, black 70%, transparent 110%);
        background: linear-gradient(90deg, black 70%, transparent 110%); }
      .skill_page .skill_left .skill__list .skill__icon {
        cursor: pointer;
        -webkit-transition: 2s all ease;
        -o-transition: 2s all ease;
        transition: 2s all ease;
        border-radius: 5px;
        -webkit-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        background: rgba(3, 3, 3, 0.7);
        -webkit-box-shadow: inset rgba(3, 3, 3, 0.7) 0 0 100px -100px, inset rgba(3, 3, 3, 0.7) 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
        box-shadow: inset rgba(3, 3, 3, 0.7) 0 0 100px -100px, inset rgba(3, 3, 3, 0.7) 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
        position: relative; }
        .skill_page .skill_left .skill__list .skill__icon.active .name span {
          color: #51d6ff !important;
          font-weight: 700; }
        .skill_page .skill_left .skill__list .skill__icon.active:before {
          display: block;
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 94px;
          height: 26px;
          background: url(../../assets/img/activeSkill.png) no-repeat 100% 0;
          background-position: 0px 0px;
          opacity: 0;
          -webkit-animation: img_op .6s ease-out forwards;
          animation: img_op .6s ease-out forwards; }
        .skill_page .skill_left .skill__list .skill__icon.active:after {
          display: block;
          content: "";
          position: absolute;
          right: 0;
          top: 0;
          width: 100px;
          height: 74px;
          background: url(../../assets/img/activeSkill.png) no-repeat 100% 0;
          background-position: -94px 0px;
          -webkit-animation: img_op .6s ease-out forwards;
          animation: img_op .6s ease-out forwards; }
        .skill_page .skill_left .skill__list .skill__icon.active:before {
          /*content: '';
						position: absolute;
						left: -7px; top: -7px;
						right: -7px; bottom: -7px;
						background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0V10H3V3H10V0H0Z' fill='red'/%3E%3C/svg%3E") 0 0 no-repeat, url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4.37114e-07L1.31134e-07 0L0 3L7 3L7 10H10V4.37114e-07Z' fill='black'/%3E%3C/svg%3E") 100% 0 no-repeat, url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10V2.62268e-07L7 0L7 7L1.31134e-07 7L0 10H10Z' fill='black'/%3E%3C/svg%3E") 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10H10V7L3 7L3 2.62269e-07L4.37114e-07 0L0 10Z' fill='black'/%3E%3C/svg%3E") 0 100% no-repeat;
						
						animation: scaled 1.5s ease infinite;*/ }

@-webkit-keyframes scaled {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scaleX(0.95) scaleY(0.85);
    transform: scaleX(0.95) scaleY(0.85); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes scaled {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scaleX(0.95) scaleY(0.85);
    transform: scaleX(0.95) scaleY(0.85); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }
        .skill_page .skill_left .skill__list .skill__icon[data-grade='4'] {
          -webkit-box-shadow: inset #0f1f2fe6 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
          box-shadow: inset #0f1f2fe6 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
          .skill_page .skill_left .skill__list .skill__icon[data-grade='4'] .name span {
            color: #00B0FA !important;
            color: #51d6ff !important; }
        .skill_page .skill_left .skill__list .skill__icon[data-grade='7'] {
          -webkit-box-shadow: inset #112211 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
          box-shadow: inset #112211 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
          .skill_page .skill_left .skill__list .skill__icon[data-grade='7'] .name span {
            color: #8DF901 !important;
            color: #96c910 !important; }
          .skill_page .skill_left .skill__list .skill__icon[data-grade='7'].active:before {
            background-position: 0px -26px; }
          .skill_page .skill_left .skill__list .skill__icon[data-grade='7'].active:after {
            background-position: -94px -74px; }
        .skill_page .skill_left .skill__list .skill__icon[data-grade='10'] {
          -webkit-box-shadow: inset #412800 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
          box-shadow: inset #412800 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
          -webkit-box-shadow: inset #73450480 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
          box-shadow: inset #73450480 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
          .skill_page .skill_left .skill__list .skill__icon[data-grade='10'] .name span {
            color: #F99200 !important; }
          .skill_page .skill_left .skill__list .skill__icon[data-grade='10'].active:before {
            background-position: 0px -52px; }
          .skill_page .skill_left .skill__list .skill__icon[data-grade='10'].active:after {
            background-position: -94px -148px; }
        .skill_page .skill_left .skill__list .skill__icon .bottomskill {
          overflow: hidden;
          /*height: 25px;*/ }
          .skill_page .skill_left .skill__list .skill__icon .bottomskill p {
            font-size: 11px;
            text-align: center;
            text-transform: uppercase;
            -webkit-transition: .5s all ease;
            -o-transition: .5s all ease;
            transition: .5s all ease;
            font-weight: 700;
            margin: 0;
            color: #dfd350;
            height: inherit;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis; }
        .skill_page .skill_left .skill__list .skill__icon .des_skill {
          display: none;
          position: absolute;
          font-size: 1.4rem;
          line-height: 2.5rem;
          -webkit-transition: -webkit-transform 1s;
          transition: -webkit-transform 1s;
          -o-transition: transform 1s;
          transition: transform 1s;
          transition: transform 1s, -webkit-transform 1s;
          z-index: 100;
          max-width: 300px;
          color: #ddd;
          width: 350px;
          border-radius: 4px;
          background-color: rgba(3, 3, 3, 0.7);
          -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
          border: 1px solid rgba(3, 3, 3, 0.7);
          width: 100%;
          padding: 5px 15px; }
        .skill_page .skill_left .skill__list .skill__icon:hover .des_skill {
          /*display: block;*/ }
        .skill_page .skill_left .skill__list .skill__icon:hover .lvl p {
          color: #dfd350;
          color: var(--a-color) !important; }
  .skill_page .skill_right {
    display: inline-block;
    position: relative; }
    .skill_page .skill_right .head_skil {
      background: #07070a;
      margin-top: -10px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      padding-top: 0;
      height: 84px; }
      @media screen and (min-width: 500px) and (max-width: 775px) {
        .skill_page .skill_right .head_skil {
          padding-top: 15px;
          border-radius: 5px; } }
      .skill_page .skill_right .head_skil .point2 {
        font-weight: 500;
        font-size: 18px;
        letter-spacing: .05em; }
      .skill_page .skill_right .head_skil div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-item-align: center;
        align-self: center;
        position: relative; }
        .skill_page .skill_right .head_skil div .share {
          -ms-flex-item-align: center;
          align-self: center; }
          .skill_page .skill_right .head_skil div .share a {
            -ms-flex-item-align: center;
            align-self: center;
            cursor: pointer; }
      .skill_page .skill_right .head_skil .point {
        color: #dfd350;
        color: #20b2aa; }
    .skill_page .skill_right .reset {
      /*position: absolute;*/ }
      .skill_page .skill_right .reset span {
        opacity: 0;
        line-height: 1;
        position: absolute;
        left: 2.8rem;
        top: 0;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-transition: opacity 250ms ease, visibility 250ms ease, -webkit-transform 250ms ease;
        transition: opacity 250ms ease, visibility 250ms ease, -webkit-transform 250ms ease;
        -o-transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease;
        transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease;
        transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease, -webkit-transform 250ms ease;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: .08em; }
      .skill_page .skill_right .reset a {
        cursor: pointer;
        -webkit-transition: opacity 250ms ease, visibility 250ms ease, -webkit-transform 250ms ease;
        transition: opacity 250ms ease, visibility 250ms ease, -webkit-transform 250ms ease;
        -o-transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease;
        transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease;
        transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease, -webkit-transform 250ms ease;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg); }
      .skill_page .skill_right .reset:hover span {
        opacity: 1;
        -webkit-transform: translateY(3px);
        -ms-transform: translateY(3px);
        transform: translateY(3px); }
      .skill_page .skill_right .reset:hover a {
        opacity: 1;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg); }
    .skill_page .skill_right .copy a {
      margin: 0 10px; }
    .skill_page .skill_right .copy span {
      opacity: 0;
      line-height: 1;
      left: 2.8rem;
      top: 0;
      -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
      transform: translateY(30px);
      -webkit-transition: opacity 250ms ease, visibility 250ms ease, -webkit-transform 250ms ease;
      transition: opacity 250ms ease, visibility 250ms ease, -webkit-transform 250ms ease;
      -o-transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease;
      transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease;
      transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease, -webkit-transform 250ms ease;
      font-weight: 500;
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: .08em; }
    .skill_page .skill_right .copy:hover span {
      opacity: 1;
      -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
      transform: translateY(3px); }
    .skill_page .skill_right .skill__trip {
      position: relative;
      z-index: 5;
      background-image: none;
      -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      height: 150px;
      padding: 30px 0px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 0.5rem;
      border-radius: 5px;
      background-image: -o-linear-gradient(250deg, #0f1f2fe6, #000);
      background-image: linear-gradient(200deg, #0f1f2fe6, #000);
      background-image: -o-linear-gradient(250deg, #0f1f2fba, #000);
      background-image: linear-gradient(200deg, #0f1f2fba, #000);
      margin-bottom: 10px;
      height: 158px; }
      @media screen and (max-width: 500px) {
        .skill_page .skill_right .skill__trip {
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          padding: 10px 0px; } }
      .skill_page .skill_right .skill__trip.grey img {
        -webkit-filter: grayscale(97%);
        filter: grayscale(97%);
        z-index: 1;
        z-index: 10;
        -webkit-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease; }
      .skill_page .skill_right .skill__trip .skill__trip__item {
        text-align: center;
        cursor: pointer;
        opacity: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .skill_page .skill_right .skill__trip .skill__trip__item.anim_exit {
          -webkit-animation: en 3s cubic-bezier(0.4, 0, 1, 1) forwards;
          animation: en 3s cubic-bezier(0.4, 0, 1, 1) forwards; }
        .skill_page .skill_right .skill__trip .skill__trip__item.anim {
          /*animation: op .3s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;*/ }

@-webkit-keyframes en {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0); } }

@keyframes en {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0); } }

@-webkit-keyframes op {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes op {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
        .skill_page .skill_right .skill__trip .skill__trip__item.v {
          opacity: 0; }
        .skill_page .skill_right .skill__trip .skill__trip__item img {
          width: 70px;
          height: 70px;
          border: 3px solid #1a1a1a;
          border-radius: 100%;
          background: #0000004d;
          vertical-align: middle;
          -webkit-transition: all .2s ease;
          -o-transition: all .2s ease;
          transition: all .2s ease;
          opacity: 1;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          -webkit-transition: opacity 0.5s ease-in 0.3s, all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          -o-transition: opacity 0.5s ease-in 0.3s, all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          transition: opacity 0.5s ease-in 0.3s, all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
          @media screen and (max-width: 500px) {
            .skill_page .skill_right .skill__trip .skill__trip__item img {
              width: 60px;
              height: 60px; } }
        .skill_page .skill_right .skill__trip .skill__trip__item:hover .deschide {
          /*display: block !important;*/ }
        .skill_page .skill_right .skill__trip .skill__trip__item:hover img {
          -webkit-filter: grayscale(0%);
          filter: grayscale(0%); }
        .skill_page .skill_right .skill__trip .skill__trip__item p {
          color: #979797;
          font-weight: 500;
          font-size: 11px;
          text-align: center;
          text-transform: uppercase;
          margin: 0;
          -webkit-transition: all .5s ease;
          -o-transition: all .5s ease;
          transition: all .5s ease;
          line-height: 1.5;
          letter-spacing: .08em;
          margin-top: 10px; }
          @media screen and (max-width: 500px) {
            .skill_page .skill_right .skill__trip .skill__trip__item p {
              max-width: 100px;
              overflow: hidden;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
              padding: 0 10px;
              font-size: 10px; } }
        .skill_page .skill_right .skill__trip .skill__trip__item .deschide {
          display: none;
          margin-top: 0px;
          position: absolute;
          top: 100%;
          font-size: 13px;
          line-height: 20px;
          -webkit-transition: -webkit-transform 1s;
          transition: -webkit-transform 1s;
          -o-transition: transform 1s;
          transition: transform 1s;
          transition: transform 1s, -webkit-transform 1s;
          z-index: 3;
          max-width: 342px;
          color: #ddd;
          opacity: .9;
          border-radius: 5px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          padding: 10px 14px;
          border: 1px solid #171717;
          -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
          min-width: 263px;
          background-image: -o-linear-gradient(250deg, #0f1f2fe6, #000);
          background-image: linear-gradient(200deg, #0f1f2fe6, #000);
          text-transform: uppercase;
          font-weight: 400;
          font-size: 13px;
          letter-spacing: .08em;
          pointer-events: none; }
          .skill_page .skill_right .skill__trip .skill__trip__item .deschide.deshide_green {
            /*background: linear-gradient(90deg,rgb(0, 0, 0) 0px,#043317 90%);
					    background-image: linear-gradient(90deg, rgb(0, 0, 0) 0px, rgb(4, 51, 23) 90%);*/
            background-image: -o-linear-gradient(250deg, #112211, #000);
            background-image: linear-gradient(200deg, #112211, #000); }
          .skill_page .skill_right .skill__trip .skill__trip__item .deschide.deshide_orange {
            /*background: linear-gradient(90deg,rgb(0, 0, 0) 0px,#5c5530 90%);
					    background: linear-gradient(90deg,rgb(0, 0, 0) 0px,#4a3f05 90%);
					    background: linear-gradient(90deg,rgb(0, 0, 0) 0px,#906628 90%);
					    background-image: linear-gradient(90deg, rgb(0, 0, 0) 0px, rgb(144, 102, 40) 90%);
					    background-image: linear-gradient(200deg,#ff9d0033,#000);
					    background: linear-gradient(200deg, #73450466, #000);*/
            background: -o-linear-gradient(250deg, #2e2011, #000);
            background: linear-gradient(200deg, #2e2011, #000); }
    .skill_page .skill_right #blue {
      z-index: 5;
      border-radius: 5px; }
      .skill_page .skill_right #blue .skill__trip__item:hover p {
        text-shadow: 0 0 8px #3c867e;
        color: #c4fff7; }
      .skill_page .skill_right #blue .skill__trip__item:hover img {
        -webkit-box-shadow: 0 0 10px #3c867e;
        box-shadow: 0 0 10px #3c867e;
        border: 3px solid #c4fff7; }
      .skill_page .skill_right #blue .active_tripod p {
        text-shadow: 0 0 8px #3c867e;
        color: #c4fff7; }
      .skill_page .skill_right #blue .active_tripod img {
        -webkit-box-shadow: 0 0 10px #3c867e;
        box-shadow: 0 0 10px #3c867e;
        border: 3px solid #c4fff7;
        -webkit-filter: none;
        filter: none; }
    .skill_page .skill_right #green {
      z-index: 3; }
    .skill_page .skill_right #orange {
      z-index: 1; }
    .skill_page .skill_right .skill__trip__green {
      z-index: 3;
      border-radius: 5px;
      background-image: -o-linear-gradient(250deg, #112211, #000);
      background-image: linear-gradient(200deg, #112211, #000);
      background-image: -o-linear-gradient(250deg, #112211b0, #000);
      background-image: linear-gradient(200deg, #112211b0, #000); }
      .skill_page .skill_right .skill__trip__green .skill__trip__item:hover p {
        text-shadow: 0 0 8px #4b863c;
        color: #9ee0a3; }
      .skill_page .skill_right .skill__trip__green .skill__trip__item:hover img {
        border: 3px solid #b1ffb7;
        -webkit-box-shadow: 0 0 10px #4b863c;
        box-shadow: 0 0 10px #4b863c; }
      .skill_page .skill_right .skill__trip__green .active_tripod p {
        text-shadow: 0 0 8px #4b863c;
        color: #9ee0a3; }
      .skill_page .skill_right .skill__trip__green .active_tripod img {
        border: 3px solid #b1ffb7;
        -webkit-box-shadow: 0 0 10px #4b863c;
        box-shadow: 0 0 10px #4b863c;
        -webkit-filter: none;
        filter: none; }
    .skill_page .skill_right .skill__trip__orange {
      z-index: 1;
      border-radius: 5px;
      grid-template-columns: 1fr 1fr;
      background-image: -o-linear-gradient(250deg, #ff9d0033, #000);
      background-image: linear-gradient(200deg, #ff9d0033, #000);
      background: -o-linear-gradient(250deg, #73450466, #000);
      background: linear-gradient(200deg, #73450466, #000); }
      .skill_page .skill_right .skill__trip__orange .skill__trip__item:hover p {
        text-shadow: 0 0 6px #ecd549;
        color: #ffec87; }
      .skill_page .skill_right .skill__trip__orange .skill__trip__item:hover img {
        border: 3px solid #ffec87;
        -webkit-box-shadow: 0 0 8px #ecd549;
        box-shadow: 0 0 8px #ecd549; }
      .skill_page .skill_right .skill__trip__orange .active_tripod p {
        text-shadow: 0 0 6px #ecd549;
        color: #ffec87; }
      .skill_page .skill_right .skill__trip__orange .active_tripod img {
        border: 3px solid #ffec87;
        -webkit-box-shadow: 0 0 8px #ecd549;
        box-shadow: 0 0 8px #ecd549;
        -webkit-filter: none;
        filter: none; }
  .skill_page .thx {
    line-height: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    color: #ddd;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    -webkit-transition: height 300ms ease, opacity 300ms ease-out 0s, -webkit-transform 300ms ease-out 0s;
    transition: height 300ms ease, opacity 300ms ease-out 0s, -webkit-transform 300ms ease-out 0s;
    -o-transition: height 300ms ease, opacity 300ms ease-out 0s, transform 300ms ease-out 0s;
    transition: height 300ms ease, opacity 300ms ease-out 0s, transform 300ms ease-out 0s;
    transition: height 300ms ease, opacity 300ms ease-out 0s, transform 300ms ease-out 0s, -webkit-transform 300ms ease-out 0s; }
    .skill_page .thx p {
      margin: 0; }
  .skill_page .combo_skill_zone {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-gap: 1rem;
    margin-bottom: 10px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    /*transform: translate3d(0,4rem,0) rotate(.001deg);*/
    /*transition: transform .5s,opacity .5s;
		opacity: 0;
		transform: translate3d(0,4rem,0) rotate(.001deg);*/ }
    .skill_page .combo_skill_zone.view_block {
      opacity: 1;
      -webkit-transform: translateZ(0) rotate(0.001deg);
      transform: translateZ(0) rotate(0.001deg); }
    .skill_page .combo_skill_zone.open {
      opacity: 1;
      height: auto; }
    .skill_page .combo_skill_zone .skill__icon_combo {
      width: 100%;
      line-height: 4.2rem;
      font-size: 2.1rem;
      -ms-flex-item-align: start;
      align-self: start;
      max-width: calc(1260px/4);
      cursor: pointer;
      padding: 5px 15px;
      margin: 0; }
      .skill_page .combo_skill_zone .skill__icon_combo .lvl_skill_combo {
        color: #dfd350;
        text-shadow: 0px 0px 2px #dfd350;
        text-align: center;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        position: relative;
        white-space: nowrap; }
        .skill_page .combo_skill_zone .skill__icon_combo .lvl_skill_combo .del_combo {
          color: #ddd;
          position: absolute;
          font-weight: 700;
          -webkit-transition: .5s all ease;
          -o-transition: .5s all ease;
          transition: .5s all ease;
          text-shadow: 0px 0px 2px #131315;
          right: -1px;
          top: 9px;
          line-height: 0; }
          .skill_page .combo_skill_zone .skill__icon_combo .lvl_skill_combo .del_combo:hover {
            color: #e33b3b;
            text-shadow: 0px 0px 2px #bb22e1; }
      .skill_page .combo_skill_zone .skill__icon_combo .header_combo {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 2fr;
        font-size: 1.4rem;
        line-height: 2.8rem;
        margin-bottom: 10px; }
        .skill_page .combo_skill_zone .skill__icon_combo .header_combo .leftskill_combo img {
          border-radius: 3px;
          height: 60px;
          vertical-align: top;
          top: 0px;
          left: 0px; }
      .skill_page .combo_skill_zone .skill__icon_combo .des_skill_combo {
        font-size: 1.4rem;
        line-height: 2.52rem;
        position: relative; }
        .skill_page .combo_skill_zone .skill__icon_combo .des_skill_combo .des_height {
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          line-height: 2.52rem;
          height: calc(2.52rem * 2);
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          position: relative;
          -webkit-transition: height 300ms ease;
          -o-transition: height 300ms ease;
          transition: height 300ms ease; }
        .skill_page .combo_skill_zone .skill__icon_combo .des_skill_combo .des_height_hidden {
          opacity: 0;
          position: absolute; }
        .skill_page .combo_skill_zone .skill__icon_combo .des_skill_combo .add_ef {
          position: relative;
          line-height: 2.52rem;
          max-height: calc(2.52rem * 2);
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          -webkit-transition: max-height 300ms ease;
          -o-transition: max-height 300ms ease;
          transition: max-height 300ms ease; }
          .skill_page .combo_skill_zone .skill__icon_combo .des_skill_combo .add_ef:after {
            content: "\f107";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            text-align: right;
            position: absolute;
            bottom: 0;
            right: 0;
            -webkit-transition: -webkit-transform .2s ease-in-out;
            transition: -webkit-transform .2s ease-in-out;
            -o-transition: transform .2s ease-in-out;
            transition: transform .2s ease-in-out;
            transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; }
        .skill_page .combo_skill_zone .skill__icon_combo .des_skill_combo .add_rotate:after {
          -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
  .skill_page .card_zone {
    display: inline-block;
    opacity: 0;
    -webkit-transform: translate3d(0, 6rem, 0) rotate(0.001deg);
    transform: translate3d(0, 6rem, 0) rotate(0.001deg);
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1rem;
    line-height: 2.52rem;
    /*transition: transform .5s,opacity .5s;
		opacity: 0;
		transform: translate3d(0,4rem,0) rotate(.001deg);*/
    /*.card_view{
			.card_desc:after{
				transform: rotate(180deg);
			}	
			
		}*/ }
    .skill_page .card_zone.view_block {
      opacity: 1;
      -webkit-transform: translateZ(0) rotate(0.001deg);
      transform: translateZ(0) rotate(0.001deg); }
    .skill_page .card_zone .icon_card {
      -ms-flex-item-align: start;
      align-self: start;
      padding: .7rem;
      cursor: pointer;
      /*position: relative;*/
      margin-bottom: 0;
      font-size: 14px;
      /*.card_desc_hide{
				height: 0;
				overflow: hidden;
				color: fff;
				&.open{
					height:auto;
				}

			}
			.card_desc_hidden{
					opacity: 0;
					position: absolute;

			}*/ }
      .skill_page .card_zone .icon_card img {
        width: 71px;
        height: 100px;
        float: left;
        margin-right: 1rem; }
      .skill_page .card_zone .icon_card .card_name {
        text-align: center;
        color: #c65042;
        text-shadow: 0px 0px 2px #8b3935;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase; }
      .skill_page .card_zone .icon_card .card_prob {
        display: inline-block;
        color: #ffa200; }
      .skill_page .card_zone .icon_card .card_desc {
        line-height: 2.52rem;
        max-height: calc(2.52rem * 3);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        position: relative;
        color: #ddd;
        -webkit-transition: color .5s ease;
        -o-transition: color .5s ease;
        transition: color .5s ease;
        /*&:after {
					  content: "\f107";
					  font-family: "Font Awesome 5 Free";
					  font-weight: 900;
					  text-align: right;
					  position: absolute;
					  bottom: 0;
					  right: 0;
					  transition: transform .2s ease-in-out;
					}*/ }
      .skill_page .card_zone .icon_card span {
        font-size: 14px; }
      .skill_page .card_zone .icon_card .card_tooltip {
        display: none;
        position: absolute;
        border-radius: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 15px;
        font-size: 1.4rem;
        line-height: 2.5rem;
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        -o-transition: transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
        z-index: 100;
        color: #ddd;
        border-radius: 5px;
        -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(3, 3, 3, 0.7);
        max-width: 500px;
        background: rgba(3, 3, 3, 0.9);
        width: 100%; }
        .skill_page .card_zone .icon_card .card_tooltip img {
          width: 64px;
          height: 64px; }
  .skill_page .ult_zone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-gap: 1rem;
    opacity: 0;
    -webkit-transform: translate3d(0, 6rem, 0) rotate(0.001deg);
    transform: translate3d(0, 6rem, 0) rotate(0.001deg);
    display: none; }
    .skill_page .ult_zone .ult_item {
      width: 100%;
      position: relative;
      line-height: 1.5; }
      .skill_page .ult_zone .ult_item .name {
        text-align: center;
        color: #c65042;
        text-shadow: 0px 0px 2px #8b3935; }
      .skill_page .ult_zone .ult_item .head {
        display: grid;
        grid-template-columns: 1fr 6fr;
        grid-auto-columns: 1fr;
        grid-gap: 0.7rem;
        margin-top: 5px; }
        .skill_page .ult_zone .ult_item .head .icon img {
          border-radius: 3px; }
      .skill_page .ult_zone .ult_item .description {
        line-height: 2.52rem;
        height: calc(2.52rem * 1);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        position: relative;
        color: #ddd;
        -webkit-transition: color .5s ease;
        -o-transition: color .5s ease;
        transition: color .5s ease; }
        .skill_page .ult_zone .ult_item .description:after {
          content: "\f107";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          text-align: right;
          position: absolute;
          bottom: 0;
          right: 0;
          -webkit-transition: -webkit-transform .2s ease-in-out;
          transition: -webkit-transform .2s ease-in-out;
          -o-transition: transform .2s ease-in-out;
          transition: transform .2s ease-in-out;
          transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; }
        .skill_page .ult_zone .ult_item .description.open {
          height: auto; }
          .skill_page .ult_zone .ult_item .description.open.description:after {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
      .skill_page .ult_zone .ult_item .add {
        font-size: 1.5rem; }
      .skill_page .ult_zone .ult_item .gif {
        height: 0px; }
        .skill_page .ult_zone .ult_item .gif video {
          width: 100%;
          height: 0px;
          max-height: 320px; }
        .skill_page .ult_zone .ult_item .gif.open {
          height: auto; }
          .skill_page .ult_zone .ult_item .gif.open video {
            height: auto; }

.skill_icon_head {
  padding: 0.7rem 0.7rem 0.7rem 0.7rem;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0px .5rem; }
  .skill_icon_head img {
    border: 1px solid rgba(29, 29, 29, 0.7);
    border-radius: 3px;
    height: 60px;
    width: 60px;
    -webkit-transition: opacity 0.5s ease-in .3s;
    -o-transition: opacity 0.5s ease-in .3s;
    transition: opacity 0.5s ease-in .3s; }
  .skill_icon_head .rightskill {
    display: grid;
    position: relative;
    grid-template-rows: 1fr 1fr; }
    .skill_icon_head .rightskill .name {
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      white-space: nowrap; }
      .skill_icon_head .rightskill .name span {
        overflow: hidden;
        max-width: 100%;
        font-size: 13px;
        text-transform: uppercase;
        -webkit-transition: color .5s ease;
        -o-transition: color .5s ease;
        transition: color .5s ease;
        font-weight: 500;
        letter-spacing: .04em;
        color: #dfd350;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis; }
    .skill_icon_head .rightskill .tripode_icon {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      opacity: 1;
      -webkit-transition: opacity 0.5s ease-in .3s;
      -o-transition: opacity 0.5s ease-in .3s;
      transition: opacity 0.5s ease-in .3s; }
      .skill_icon_head .rightskill .tripode_icon div {
        margin-left: auto;
        margin-right: auto;
        width: 25px;
        height: 25px;
        background-size: cover; }
      .skill_icon_head .rightskill .tripode_icon .blue {
        background-image: url(/images/icon/blue.png); }
      .skill_icon_head .rightskill .tripode_icon .blue_on {
        background-image: url(/images/icon/blue_on.png); }
      .skill_icon_head .rightskill .tripode_icon .green {
        background-image: url(/images/icon/green.png); }
      .skill_icon_head .rightskill .tripode_icon .green_on {
        background-image: url(/images/icon/green_on.png); }
      .skill_icon_head .rightskill .tripode_icon .orange {
        background-image: url(/images/icon/orange.png); }
      .skill_icon_head .rightskill .tripode_icon .orange_on {
        background-image: url(/images/icon/orange_on.png); }

.class_select {
  z-index: 1030;
  cursor: auto;
  /*visibility: hidden;*/
  opacity: 0;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  overflow: hidden;
  position: absolute;
  z-index: 300;
  pointer-events: none;
  margin: 0;
  margin-top: 2.5rem;
  padding: 0;
  left: 0;
  display: block;
  background: rgba(3, 3, 3, 0.9);
  -webkit-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  /*transition: opacity 250ms ease,visibility 250ms ease,transform 250ms cubic-bezier(.71,1.7,.77,1.24);*/ }
  .class_select ul {
    margin: 0;
    padding: 0;
    position: relative; }
    .class_select ul li {
      cursor: pointer;
      height: 24px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
      font-size: 1.5rem;
      text-transform: uppercase;
      padding: 6px 25px; }
      .class_select ul li:hover {
        background-color: rgba(255, 255, 255, 0.1); }
        .class_select ul li:hover a {
          color: #fff !important; }
  .class_select .mdc-button {
    border-radius: 0;
    font-family: unset;
    letter-spacing: unset;
    --mdc-theme-primary: #20b2aa;
    --mdc-theme-secondary: #018786; }
  .class_select a {
    border: unset; }

.ce-toolbar__plus2.smiles {
  left: -60px;
  width: 20px;
  height: 20px;
  -webkit-transform: translate3d(0px, calc(-50% + 30px), 0px);
  transform: translate3d(0px, calc(-50% + 30px), 0px);
  color: #909498;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute; }

.ce-toolbar__content .commentForm {
  position: absolute;
  left: 50%;
  top: 160px;
  left: 53%;
  top: 300px;
  left: 0;
  top: 100%;
  width: 100%; }
  .ce-toolbar__content .commentForm .tooltip {
    top: 50px !important;
    left: 0 !important; }
  .ce-toolbar__content .commentForm .emojiBlock {
    height: 100%;
    overflow: hidden; }

.post_build {
  /*@extend %item_css;
	display: block;
	position: fixed;
	top: 10%;
	opacity: 0;
	width: 1260px;
	left: 50%;
	max-width: 126rem;
	margin: 0 auto;
	z-index: 9999;
	height: 99%;
	margin-left: -630px;
	transform: translate3d(0,100%,0);*/
  position: absolute;
  z-index: 9999;
  width: 100%;
  height: 100%;
  padding-top: 25px;
  color: #ddd;
  opacity: 0;
  will-change: transform;
  -webkit-transform: translateY(16px);
  -ms-transform: translateY(16px);
  transform: translateY(16px);
  pointer-events: none;
  display: none;
  -webkit-transition: opacity 150ms linear, -webkit-transform 150ms ease;
  transition: opacity 150ms linear, -webkit-transform 150ms ease;
  -o-transition: opacity 150ms linear, transform 150ms ease;
  transition: opacity 150ms linear, transform 150ms ease;
  transition: opacity 150ms linear, transform 150ms ease, -webkit-transform 150ms ease; }
  .post_build.vis {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: translate(0) !important;
    -ms-transform: translate(0) !important;
    transform: translate(0) !important; }
  .post_build__close {
    color: #909498;
    font-family: Open Sans;
    font-weight: 100;
    font-size: 65px;
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 1;
    text-align: center;
    width: 48px;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: opacity 150ms linear;
    -o-transition: opacity 150ms linear;
    transition: opacity 150ms linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .post_build__close:hover {
      opacity: 0.9; }
  .post_build .type {
    float: right;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .post_build .type div {
      margin-right: 10px; }
    .post_build .type .tumb {
      width: 50px;
      border-radius: 3px;
      margin-right: 10px;
      height: 30px; }
    .post_build .type input[type="radio"]:checked + label::before {
      -webkit-animation: radioanim .36s ease-in-out;
      animation: radioanim .36s ease-in-out; }
  .post_build .build {
    min-width: 100px;
    font-size: 1.4rem;
    background: black;
    /*color:  #ff5157 !important;*/ }
    .post_build .build:hover {
      background-color: rgba(255, 255, 255, 0.03);
      color: #ff5157 !important; }
  .post_build #type_radio {
    min-width: 100px;
    font-size: 1.4rem;
    background: black; }
    .post_build #type_radio:hover {
      background-color: rgba(255, 255, 255, 0.03); }

@-webkit-keyframes radioanim {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.9; }
  100% {
    -webkit-transform: scale(0.999);
    transform: scale(0.999);
    opacity: .8; } }

@keyframes radioanim {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.9; }
  100% {
    -webkit-transform: scale(0.999);
    transform: scale(0.999);
    opacity: .8; } }

.copied {
  position: absolute !important;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 666;
  font-weight: 500;
  font-family: Open sans;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .08em;
  color: #fff;
  padding: 5px 15px; }
  .copied.sign {
    background: #9a0007; }

tp {
  color: #eceec9; }

cb {
  color: #53d9e4; }

pt {
  color: #f7d418; }

hld {
  color: #6ac67d; }

cha {
  color: #81e2ce; }

ch {
  color: #3490c3; }

ct {
  color: #eb9de1; }

.magic {
  color: #37b7d0;
  color: #00acf3; }

.physic {
  color: #ffbb00; }

.groupSkill {
  margin-left: 10px;
  font-size: 12px;
  display: none; }
  .groupSkill[data-group='arcana_0'] {
    color: #cccc06;
    color: #FFFF00;
    display: unset; }
  .groupSkill[data-group='arcana_1'] {
    color: #00acf3;
    color: #8181F7;
    display: unset; }
  .groupSkill[data-group='arcana_2'] {
    color: #ffbb00;
    color: #FE9A2E;
    display: unset; }
  .groupSkill[data-group='warlord_0'] {
    color: #f15f5f;
    display: unset; }
  .groupSkill[data-group='warlord_1'] {
    color: #F6F6F6;
    display: unset; }
  .groupSkill[data-group='destroyer_0'] {
    color: #8181F7;
    display: unset; }
  .groupSkill[data-group='destroyer_1'] {
    color: #8181F7;
    display: unset; }
  .groupSkill[data-group='demonic_0'] {
    color: #F6F6F6;
    display: unset; }
  .groupSkill[data-group='demonic_1'] {
    color: #A566FF;
    display: unset; }
  .groupSkill[data-group='devilhunter_0'] {
    color: #FF00FF;
    display: unset; }
  .groupSkill[data-group='devilhunter_1'] {
    color: #FF00FF;
    display: unset; }
  .groupSkill[data-group='devilhunter_2'] {
    color: #FF00FF;
    display: unset; }
  .groupSkill[data-group='lancemaster_0'] {
    color: #5CD1E5;
    display: unset; }
  .groupSkill[data-group='lancemaster_1'] {
    color: #F15F5F;
    display: unset; }
  .groupSkill[data-group='infighter_0'] {
    color: #FE9A2E;
    display: unset; }
  .groupSkill[data-group='infighter_1'] {
    color: #8181F7;
    display: unset; }
  .groupSkill[data-group='battlemaster_1'] {
    color: #FF00FF;
    display: unset; }
  .groupSkill[data-group='holyknight_0'] {
    color: #4eaaff;
    display: unset; }
  .groupSkill[data-group='holyknight_1'] {
    color: #ffc81f;
    display: unset; }
  .groupSkill[data-group='scouter_0'] {
    color: #5CD1E5;
    display: unset; }
  .groupSkill[data-group='scouter_1'] {
    color: #8181F7;
    display: unset; }
  .groupSkill[data-group='scouter_2'] {
    color: #F15F5F;
    display: unset; }
  .groupSkill[data-group='scouter_3'] {
    color: #F6F6F6;
    display: unset; }

war {
  color: red;
  text-shadow: 0px 0px 1px #fe00fb; }

.cd {
  color: #ffa200; }

.mana {
  color: #24a5d7;
  color: #37b7d0;
  color: #00acf3; }
  .mana .min {
    color: #d05;
    color: #e60029; }
  .mana .pls {
    color: #3eb600; }
  .mana .shock {
    color: #39c344; }
  .mana .energy {
    color: #fcf05f;
    color: #e3b308; }

.add {
  font-size: 11px;
  color: #ffa200; }

.tripPlus {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateX(0%) translateY(-50%);
  -ms-transform: translateX(0%) translateY(-50%);
  transform: translateX(0%) translateY(-50%);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  -webkit-transition: opacity .5s ease, -webkit-transform .5s ease;
  transition: opacity .5s ease, -webkit-transform .5s ease;
  -o-transition: transform .5s ease, opacity .5s ease;
  transition: transform .5s ease, opacity .5s ease;
  transition: transform .5s ease, opacity .5s ease, -webkit-transform .5s ease;
  opacity: 1;
  background: rgba(3, 3, 3, 0.7);
  padding: 5px 8px;
  border-radius: 5px;
  z-index: 500;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .tripPlus .dmg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-gap: 1rem; }
    .tripPlus .dmg_el {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-flow: row;
      flex-flow: row; }
      .tripPlus .dmg_el span {
        margin-right: 5px; }

@-webkit-keyframes tripPlus {
  0% {
    top: 60%;
    -webkit-transform: translateY(-60%);
    transform: translateY(-60%); }
  20%, 80% {
    opacity: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
    opacity: 0; } }

@keyframes tripPlus {
  0% {
    top: 60%;
    -webkit-transform: translateY(-60%);
    transform: translateY(-60%); }
  20%, 80% {
    opacity: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
    opacity: 0; } }

j {
  color: aqua;
  color: #24a5d7;
  color: #5df3ce; }

pr {
  color: #d05;
  color: #e60029; }

prp {
  color: #3eb600; }

/*~~~~SKILL_PAGE_END~~~~*/
@media screen and (min-width: 980px) and (max-width: 1560px) {
  #main, .skill_page, .container {
    width: 100%;
    min-width: unset; }
  .skill__icon_combo {
    max-width: calc(1060px/4) !important; }
  .header .nav > ul > li {
    padding: .5rem 1rem; }
  .nav-item-off {
    display: none; }
  .asd_right {
    margin-left: 550px; }
  .asd_left {
    margin-right: 550px; } }

@media screen and (max-width: 1300px) {
  #main, .skill_page, .patch_note, .container {
    padding: 0 4rem;
    min-width: unset; } }

@media screen and (max-width: 736px) {
  #main, .skill_page, .patch_note, .container {
    padding: 0 1rem;
    min-width: unset; } }

@media screen and (max-width: 980px) {
  .combo_skill_zone {
    grid-template-columns: 1fr 1fr 1fr !important; }
    .combo_skill_zone .skill__icon_combo {
      white-space: unset !important;
      font-size: 1.1rem !important; }
      .combo_skill_zone .skill__icon_combo .header_combo {
        font-size: 1.1rem !important;
        line-height: 2 !important;
        grid-template-columns: 1fr 3fr !important; }
        .combo_skill_zone .skill__icon_combo .header_combo .leftskill_combo img {
          height: 40px !important; }
      .combo_skill_zone .skill__icon_combo .des_skill_combo {
        font-size: 1.1rem !important; }
  .skill__icon_combo {
    max-width: calc(1060px/3) !important; }
  /*body .patch_note, body .post_build{
		width: calc(100% - 8rem) !important;
		margin-left: calc((100% - 8rem)/-2) !important;
	}*/
  .header {
    width: calc(100% - 8rem) !important; }
  .header .nav > ul > li {
    padding: .5rem 1rem; }
  .drop_nav, .asd_right, .asd_left {
    display: none; }
  .header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: unset; }
    .header .header-left {
      height: unset; }
  .supporter-button {
    display: none; }
  .navbg-hover {
    height: 35rem; }
  .home {
    width: 100%;
    padding: 10px; }
  .la_container, .skill_page, .container {
    width: 100%;
    min-width: unset !important; }
  .postList {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .postList_item {
      height: 300px !important; }
  .tagList, .editTime {
    display: none !important; } }

@media screen and (max-width: 1100px) {
  .nav-item-off {
    display: none; }
  #main, .skill_page, .patch_note, .container {
    min-width: unset; }
  /*body .patch_note, body .post_build{
		width: calc(100% - 8rem) !important;
		margin-left: calc((100% - 8rem)/-2) !important;
	}*/
  .header {
    width: calc(100% - 8rem) !important; } }

@media screen and (max-width: 736px) {
  .skill_page .gs_check * {
    font-size: 1.2rem !important; }
  .skill_page .gs_check .gs_nick {
    grid-template-columns: 2fr 6fr; }
  .skill_page .gs_check input {
    height: 2.8rem; }
  .combo_skill_zone {
    grid-template-columns: 1fr 1fr !important; }
  #main, .skill_page, .patch_note, .container {
    width: 100% !important; } }

@media screen and (max-width: 500px) {
  .la_container__first {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; }
    .la_container__first .lastBuild {
      width: 100%; }
  .squareLink, .friendLink {
    display: none !important; } }

#main.guide {
  margin: 0 0 1rem 0;
  width: 100%;
  background: var(--main-bg-color); }
  #main.guide header.major > p {
    font-size: 1.7rem; }

.like, .top_guide .build_item .build_like, .build_list .build_item .build_like {
  color: #ff0062; }
  .like .fas, .top_guide .build_item .build_like .fas, .build_list .build_item .build_like .fas {
    text-shadow: 0 0 8px #d05; }
  .like .unlike, .top_guide .build_item .build_like .unlike, .build_list .build_item .build_like .unlike {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); }

.like {
  cursor: pointer;
  font-size: 2rem;
  height: 27px;
  padding: 0 3px;
  white-space: nowrap;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  /*.anim_like{
		animation: like_anim .35s ease forwards;
		transform: scale(1.25) translateZ(0);
	}*/ }
  .like i {
    font-size: 2.5rem; }
  .like .fa-heart {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    cursor: pointer; }
  .like .anim {
    -webkit-animation: unlike_anim .35s ease forwards;
    animation: unlike_anim .35s ease forwards;
    /*transform: scale(1.25) translateZ(0);*/ }
  .like .like_click {
    -webkit-animation: like_click_anim2 .6s ease forwards;
    animation: like_click_anim2 .6s ease forwards; }
  .like span {
    margin-left: 6px;
    text-align: left;
    direction: ltr;
    height: 2.2rem;
    line-height: 2.2rem;
    -webkit-transition: margin-left 100ms linear;
    -o-transition: margin-left 100ms linear;
    transition: margin-left 100ms linear;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 600;
    font-family: Open Sans; }
  .like.unlike {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); }
    .like.unlike span {
      margin-left: 0 !important;
      /*color: #67707a;*/ }

@-webkit-keyframes like_click_anim2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0 0 5px #d05; }
  15% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: grayscale(20%);
    filter: grayscale(20%);
    text-shadow: 0 0 25px #d05; }
  50% {
    font-weight: 900; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0 0 8px #d05;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    font-weight: 900; } }

@keyframes like_click_anim2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0 0 5px #d05; }
  15% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: grayscale(20%);
    filter: grayscale(20%);
    text-shadow: 0 0 25px #d05; }
  50% {
    font-weight: 900; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0 0 8px #d05;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    font-weight: 900; } }

@-webkit-keyframes like_click_anim {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0 0 5px #d05; }
  15% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    text-shadow: 0 0 25px #d05; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0 0 8px #d05; } }

@keyframes like_click_anim {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0 0 5px #d05; }
  15% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    text-shadow: 0 0 25px #d05; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0 0 8px #d05; } }

@-webkit-keyframes like_anim {
  0% { }
  50% {
    text-shadow: 0 0 12px #d05; }
  100% {
    text-shadow: 0 0 20px #d05; } }

@keyframes like_anim {
  0% { }
  50% {
    text-shadow: 0 0 12px #d05; }
  100% {
    text-shadow: 0 0 20px #d05; } }

@-webkit-keyframes unlike_anim {
  0% {
    font-weight: 0; }
  25% { }
  50% {
    -webkit-filter: grayscale(40%);
    filter: grayscale(40%);
    font-weight: 900; }
  100% {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    text-shadow: 0 0 20px #d05;
    font-weight: 900; } }

@keyframes unlike_anim {
  0% {
    font-weight: 0; }
  25% { }
  50% {
    -webkit-filter: grayscale(40%);
    filter: grayscale(40%);
    font-weight: 900; }
  100% {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    text-shadow: 0 0 20px #d05;
    font-weight: 900; } }

.titleBuild {
  font-family: El Messiri;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 20px; }

.author {
  padding: 10px 25px;
  padding-right: 0;
  margin-bottom: 20px;
  height: 62px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .author #edit {
    margin-right: 5px; }
    .author #edit span {
      font-size: 14px; }
  .author #min {
    margin-right: 50px; }
    .author #min span {
      font-size: 14px; }
  .author .like i {
    font-size: unset; }
  .author .like.unlike {
    -webkit-filter: unset;
    filter: unset; }
  .author .avatar {
    width: 36px;
    height: 36px; }
  .author_first {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-right: 50px;
    font-family: Open Sans;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 14px;
    line-height: 18px; }
  .author_name {
    color: #b88b58; }
    .author_name:hover {
      color: #996f40; }
  .author .editTime {
    font-family: Open Sans;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 14px;
    line-height: 18px;
    margin-right: 50px;
    margin-left: -20px; }
  .author .like {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 50px;
    margin-left: 20px; }
    .author .like span {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      font-weight: 400; }
  .author .build_views {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    min-width: 50px;
    height: 4rem;
    font-family: Open Sans;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    margin-left: auto; }
    .author .build_views span {
      margin-left: 6px !important;
      height: 2.2rem;
      line-height: 2.2rem; }

.top_guide {
  min-width: 1024px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 210px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 20px; }
  .top_guide .tagList {
    position: absolute;
    top: 0;
    left: 5px; }
    .top_guide .tagList .tag {
      border-radius: 8px; }
  .top_guide .build_item {
    height: 210px;
    margin: 0 10px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    width: 100%;
    overflow: hidden;
    position: relative;
    will-change: transform, opacity; }
    .top_guide .build_item:first-child {
      margin-left: 0; }
    .top_guide .build_item:last-child {
      margin-right: 0; }
    .top_guide .build_item .build_thumbnail {
      overflow: hidden;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .top_guide .build_item .build_thumbnail img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover; }
    .top_guide .build_item .cardImgOverlay {
      width: 100%;
      height: 100%;
      background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(transparent));
      background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.9), transparent);
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent);
      position: absolute;
      top: 0; }
    .top_guide .build_item .buildInfo {
      position: absolute;
      left: 0;
      bottom: 0px;
      padding: 0 20px;
      width: 100%;
      z-index: 2;
      color: rgba(255, 255, 255, 0.7);
      font-family: Open Sans;
      font-weight: 400;
      max-height: 105px;
      overflow: hidden; }
      .top_guide .build_item .buildInfo h4 {
        color: rgba(255, 255, 255, 0.8);
        font-family: Open Sans;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: .08em;
        word-wrap: break-word;
        -webkit-transition: color .2s ease;
        -o-transition: color .2s ease;
        transition: color .2s ease;
        margin-bottom: 3px;
        text-transform: unset; }
    .top_guide .build_item .infoBottom {
      font-size: 12px;
      line-height: 1;
      font-family: Open Sans;
      font-weight: 400;
      margin-bottom: 8px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      color: rgba(255, 255, 255, 0.4);
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .top_guide .build_item .infoBottom .build_name {
        color: rgba(255, 255, 255, 0.4);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .top_guide .build_item .infoBottom .build_name .avatar {
          margin-right: 10px;
          width: 24px;
          height: 24px; }
    .top_guide .build_item .build_views {
      position: absolute;
      top: 0;
      right: 65px;
      width: 7rem;
      height: 4rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: rgba(255, 255, 255, 0.85);
      display: none; }
      .top_guide .build_item .build_views span {
        font-size: 1.5rem;
        line-height: 2.1rem;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 2.1rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        text-align: center;
        font-weight: 600;
        font-family: Open Sans; }
    .top_guide .build_item .build_like {
      position: absolute;
      top: 0;
      right: 5px;
      width: 6rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: 4rem; }
      .top_guide .build_item .build_like span {
        font-size: 1.5rem;
        line-height: 2.1rem;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 2.1rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        text-align: center;
        font-weight: 600;
        font-family: Open Sans; }
    .top_guide .build_item a {
      position: unset; }
    .top_guide .build_item:hover .build_like .fas {
      -webkit-animation: like_click_anim2 1s infinite;
      animation: like_click_anim2 1s infinite; }
    .top_guide .build_item a:hover h4, .top_guide .build_item a:hover h2 {
      color: white; }

#build {
  min-height: 1000px; }

.build_list {
  position: relative; }
  .build_list--head {
    position: absolute;
    left: 50%;
    top: -20px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    background-color: #0f1015;
    height: 40px;
    width: 50%;
    border-radius: 5px; }
    .build_list--head-none {
      display: none; }
  .build_list .build_item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 5rem;
    padding: .5rem 1rem .5rem 1rem;
    margin: 1rem 0;
    border-radius: .5rem;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    background-color: rgba(32, 34, 37, 0.23);
    cursor: default;
    will-change: transform, opacity;
    overflow: hidden;
    /*&[data-content='1']{
	    	position:relative;
	    	&:before{
	    		content: '';
	    		position: absolute;
	    		left: -.5rem;
	    		top: 50%;
	    		transform: translateY(-50%);
	    		font-size: 1rem;
	    		height: 1rem;
	    		line-height: 2rem;
	    		width: 1rem;
	    		padding: 0 .5rem;
	    		border-radius: 50%;
	    		animation: guide_reverse .3s forwards;
	    	}
	    	&:hover{
	    		&:before{
	    			font-weight: 900;
	    			box-shadow: unset;
	    			animation: guide .3s forwards;
	    		}

	    	}
	    }*/ }
    .build_list .build_item:hover .build_like .fas {
      -webkit-animation: like_click_anim2 1s infinite;
      animation: like_click_anim2 1s infinite; }
    .build_list .build_item:hover {
      background: rgba(3, 3, 3, 0.7); }
      .build_list .build_item:hover .build_title {
        color: white; }
      .build_list .build_item:hover .build_name {
        color: rgba(255, 255, 255, 0.8); }
      .build_list .build_item:hover .tag {
        background-color: black; }
    .build_list .build_item .build_left {
      display: block;
      width: 4rem;
      height: 4rem;
      margin-right: 2rem;
      display: none; }
      .build_list .build_item .build_left .build_type {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 2rem;
        width: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        font-size: 1.6rem; }
      .build_list .build_item .build_left .build_point {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 2rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 1.4rem;
        width: 100%;
        text-shadow: 0px 0px 2px #dfd350;
        text-align: center;
        font-weight: 600;
        color: #ffb32e;
        text-shadow: 0 0 6px #ecd549;
        color: #ffec87; }
    .build_list .build_item .build_like {
      width: 7rem;
      height: 4rem;
      margin-right: 2rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .build_list .build_item .build_like span {
        font-size: 1.5rem;
        line-height: 2.1rem;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 2.1rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        text-align: center;
        font-weight: 600;
        font-family: Open Sans; }
    .build_list .build_item a {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
      flex: 1 1 0%;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 4rem;
      font-family: Open Sans;
      line-height: 4rem;
      font-weight: 500;
      letter-spacing: .04em; }
      .build_list .build_item a > div {
        width: 300px;
        margin-right: 15px; }
      .build_list .build_item a .build_title {
        -webkit-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        max-width: 800px;
        white-space: nowrap;
        overflow: hidden;
        font-size: 18px;
        width: 350px;
        color: rgba(255, 255, 255, 0.8); }
    .build_list .build_item .build_name {
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
      margin-left: 25px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.45);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis; }
      .build_list .build_item .build_name .avatar {
        min-width: 30px; }
    .build_list .build_item .build_right {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 10rem;
      height: 4rem; }
      .build_list .build_item .build_right .build_date {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        line-height: 4rem;
        height: 4rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: end;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 500;
        font-family: Open Sans;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, 0.8); }
      .build_list .build_item .build_right .build_patch {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        display: none;
        width: 100%;
        line-height: 4rem;
        height: 4rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: end;
        font-size: 1.6rem; }
  .build_list .nav_links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.6rem;
    height: 3rem;
    font-weight: 600;
    font-family: Open Sans;
    position: absolute;
    bottom: 15px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .build_list .nav_links span {
      width: 3rem;
      height: 3rem;
      line-height: unset;
      margin-right: 4px;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      text-align: center;
      border-radius: .7rem;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
      cursor: pointer; }
      .build_list .nav_links span:hover {
        background-color: black;
        text-shadow: 0 0 8px #3c867e;
        color: #c4fff7; }
      .build_list .nav_links span.active {
        background-color: black; }
      .build_list .nav_links span.disabled {
        display: none; }

.avatar {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 15px;
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out 0s;
  -o-transition: opacity 1000ms ease-out 0s;
  transition: opacity 1000ms ease-out 0s;
  -webkit-animation: img_op 1s ease-out forwards .3s;
  animation: img_op 1s ease-out forwards .3s; }
  .avatar img {
    display: block;
    max-width: 100%;
    max-height: 100%; }

.skillTool {
  position: absolute;
  right: 2px;
  top: 2px; }
  .skillTool svg {
    cursor: pointer;
    opacity: .4;
    -webkit-transition: opacity 0.2s ease-in-out, fill .3s ease;
    -o-transition: opacity 0.2s ease-in-out, fill .3s ease;
    transition: opacity 0.2s ease-in-out, fill .3s ease; }
    .skillTool svg:hover {
      fill: #c4fff7;
      opacity: .8; }
  .skillTool #skillEmbed {
    opacity: .6;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); }

.skillEmbed label {
  color: #fff;
  cursor: pointer; }

.skillEmbed > div:nth-child(1) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }
  .skillEmbed > div:nth-child(1) > div:nth-child(1) {
    pointer-events: none; }

.skillEmbed .mdc-form-field {
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.skillEmbed .fieldOne {
  margin-top: 10px; }

.skillEmbed .field2 {
  margin-bottom: 10px; }

.skillEmbed .inputItem {
  position: relative; }
  .skillEmbed .inputItem .copied {
    right: 0;
    -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset; }
  .skillEmbed .inputItem input {
    background: transparent;
    border-radius: 3px;
    padding: .4rem 1rem;
    padding: .7rem 1.4rem;
    width: 100%;
    min-width: 250px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    height: 35px;
    border: unset;
    color: rgba(255, 255, 255, 0.9);
    -webkit-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    opacity: 1;
    background-image: -o-linear-gradient(73deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%);
    background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%);
    cursor: pointer; }
    .skillEmbed .inputItem input::-moz-selection {
      background-color: unset; }
    .skillEmbed .inputItem input::selection {
      background-color: unset; }
    .skillEmbed .inputItem input.animation {
      -webkit-animation: copied .3s ease forwards;
      animation: copied .3s ease forwards; }

@-webkit-keyframes copied {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes copied {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

.report .inputItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 14px;
  margin-left: 0 !important; }

.report > div:nth-child(1) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.report textarea {
  background: transparent;
  border-radius: 3px;
  padding: .4rem 1rem;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  min-width: 300px;
  min-height: 100px;
  border: unset;
  color: rgba(255, 255, 255, 0.9);
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  opacity: .8;
  background-image: -o-linear-gradient(73deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%);
  background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%); }
  .report textarea:hover {
    opacity: 1; }

#loadMore {
  width: 100%;
  --mdc-theme-primary:  rgba(255, 255, 255, 0.9);
  background: rgba(3, 3, 3, 0.9);
  --mdc-ripple-fg-opacity: 0.03;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  height: 50px;
  font-family: Open sans;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em; }
  #loadMore:hover {
    background: black; }
    #loadMore:hover:before {
      opacity: 0; }
  #loadMore:active:before {
    opacity: .04; }

.likeText {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  margin-right: 10px; }

.tagList {
  height: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-family: Open Sans;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1; }
  .tagList .tag {
    border-radius: 5px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color .1s ease;
    -o-transition: background-color .1s ease;
    transition: background-color .1s ease;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(3, 3, 3, 0.8);
    height: 22px;
    padding: 0 6px; }
    .tagList .tag i {
      line-height: 16px; }
      .tagList .tag i.fa-eye, .tagList .tag i.fa-comment {
        color: #72767d; }
    .tagList .tag .emoji {
      -o-object-fit: contain;
      object-fit: contain;
      width: 20px;
      height: 20px;
      margin-left: .05em;
      margin-right: .1em;
      vertical-align: -.4em;
      margin: 3px 0 !important;
      min-width: auto;
      min-height: auto;
      text-indent: -9999px;
      margin-left: 6px !important;
      display: none; }
    .tagList .tag .build_point {
      text-shadow: 0 0 6px #ecd549;
      color: #ffec87;
      letter-spacing: unset; }
    .tagList .tag div {
      min-width: 9px;
      color: rgba(255, 255, 255, 0.8);
      text-align: center; }
      .tagList .tag div:nth-child(2) {
        margin-left: 6px; }
      .tagList .tag div.build_point {
        margin-left: 0; }
      .tagList .tag div[data-type='PvP'] {
        color: #ff5157; }
    .tagList .tag .build_like {
      width: unset;
      height: unset;
      margin-right: unset; }
      .tagList .tag .build_like i {
        margin: 3px 0 !important;
        min-width: auto;
        min-height: auto; }
      .tagList .tag .build_like span {
        font-size: inherit;
        letter-spacing: 0.00813rem;
        margin-left: 7px;
        text-align: center;
        min-width: 9px; }

.content .icon, .content .icon_t, .comments .icon, .comments .icon_t {
  display: inline-block;
  width: 60px;
  height: 60px;
  vertical-align: sub;
  margin-right: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  font-family: Open Sans; }
  .content .icon img, .content .icon_t img, .comments .icon img, .comments .icon_t img {
    cursor: pointer;
    width: 100%;
    height: 100%; }

.icon.trip {
  width: 50px;
  height: 50px;
  border-radius: 50%; }

.trip img {
  width: 50px;
  border-radius: 50%; }

.icon_name {
  line-height: 3rem;
  color: #dfd350;
  display: inline-block;
  margin: 0 5px;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: .5rem;
  font-family: Open Sans; }
  .icon_name > img {
    height: 3rem;
    vertical-align: sub;
    border-radius: 2px;
    cursor: pointer; }
  .icon_name .rightskill {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: unset; }
  .icon_name.trip img {
    height: 3rem;
    width: 3rem;
    vertical-align: sub; }
  .icon_name.trip[data-grade='1'] {
    color: #c4fff7 !important; }
  .icon_name.trip[data-grade='2'] {
    color: #9ee0a3  !important; }
  .icon_name.trip[data-grade='3'] {
    color: #ffec87  !important; }

.icon .rightskill {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: unset; }

.icon.trip[data-grade='1'] {
  color: #c4fff7 !important; }

.icon.trip[data-grade='2'] {
  color: #9ee0a3  !important; }

.icon.trip[data-grade='3'] {
  color: #ffec87  !important; }

.tooltip_trip {
  background: rgba(3, 3, 3, 0.7);
  background: rgba(3, 3, 3, 0.9);
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  width: 500px;
  padding: 0.7rem 0.7rem 0.7rem 0.7rem;
  border-radius: 5px;
  padding: 5px 15px;
  font-family: Open Sans;
  font-size: 17px; }
  .tooltip_trip .head_line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    font-size: 2rem;
    font-size: 17px;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .08em;
    margin-bottom: .5rem; }
  .tooltip_trip .rightskill {
    line-height: 1.5; }
  .tooltip_trip .type_sk img {
    width: 3rem;
    border-radius: 5px;
    margin-right: 1rem; }
  .tooltip_trip img {
    border-radius: 50%;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    float: left;
    margin-right: 1rem; }
  .tooltip_trip[data-grade='1'] {
    border: 1px solid #0d1a28; }
    .tooltip_trip[data-grade='1'] .head_line {
      color: #00B0FA !important;
      color: #51d6ff !important;
      color: #c4fff7 !important;
      text-shadow: 0 0 8px #3c867e; }
  .tooltip_trip[data-grade='2'] {
    border: 1px solid #102010; }
    .tooltip_trip[data-grade='2'] .head_line {
      color: #8DF901 !important;
      color: #96c910 !important;
      text-shadow: 0 0 8px #4b863c  !important;
      color: #9ee0a3  !important; }
  .tooltip_trip[data-grade='3'] {
    border: 1px solid rgba(255, 234, 139, 0.2); }
    .tooltip_trip[data-grade='3'] .head_line {
      color: #F99200  !important;
      text-shadow: 0 0 6px #ecd549;
      color: #ffec87  !important; }

.embed {
  cursor: pointer;
  -webkit-transition: 2s all ease;
  -o-transition: 2s all ease;
  transition: 2s all ease;
  border-radius: 5px;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  background: rgba(3, 3, 3, 0.7);
  -webkit-box-shadow: inset rgba(3, 3, 3, 0.7) 0 0 100px -100px, inset rgba(3, 3, 3, 0.7) 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: inset rgba(3, 3, 3, 0.7) 0 0 100px -100px, inset rgba(3, 3, 3, 0.7) 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  width: 210px;
  display: inline-block;
  margin-bottom: 1rem;
  margin-right: .5rem;
  color: #dfecff;
  font-family: Open Sans; }
  .embed[data-grade='4'] {
    -webkit-box-shadow: inset #0f1f2fe6 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: inset #0f1f2fe6 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    .embed[data-grade='4'] .name span {
      color: #00B0FA !important;
      color: #51d6ff !important; }
  .embed[data-grade='7'] {
    -webkit-box-shadow: inset #112211 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: inset #112211 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    .embed[data-grade='7'] .name span {
      color: #8DF901 !important;
      color: #96c910 !important; }
    .embed[data-grade='7'].active:before {
      background-position: 0px -26px; }
    .embed[data-grade='7'].active:after {
      background-position: -94px -74px; }
  .embed[data-grade='10'] {
    -webkit-box-shadow: inset #412800 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: inset #412800 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset #73450480 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: inset #73450480 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    .embed[data-grade='10'] .name span {
      color: #F99200 !important; }
    .embed[data-grade='10'].active:before {
      background-position: 0px -52px; }
    .embed[data-grade='10'].active:after {
      background-position: -94px -148px; }

.button.mdc-button {
  --mdc-theme-primary: #fff; }

.trip_e {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12) !important;
  width: 400px;
  border-radius: 0px;
  background: rgba(0, 0, 0, 0.9); }
  .trip_e .skill_icon_head {
    padding: 1rem 1rem; }
  .trip_e .skill_icon_head img {
    border-radius: 50%;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
  .trip_e .rightskill {
    display: block; }
  .trip_e .rightskill .lvl {
    height: 17px !important; }
    .trip_e .rightskill .lvl p {
      text-align: unset !important;
      height: 17px !important;
      line-height: 17px !important; }
  .trip_e .rightskill div:nth-child(2) {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: unset;
    text-align: initial; }
  .trip_e[data-grade='4'] {
    border: 1px solid #0d1a28;
    border: 1px solid #0d1a28; }
    .trip_e[data-grade='4'] .name span {
      color: #00B0FA !important;
      color: #51d6ff !important;
      color: #c4fff7 !important;
      text-shadow: 0 0 8px #3c867e; }
  .trip_e[data-grade='7'] {
    border: 1px solid #102010; }
    .trip_e[data-grade='7'] .name span {
      color: #8DF901 !important;
      color: #96c910 !important;
      text-shadow: 0 0 8px #4b863c  !important;
      color: #9ee0a3  !important; }
  .trip_e[data-grade='10'] {
    border: 1px solid rgba(255, 234, 139, 0.2); }
    .trip_e[data-grade='10'] .name span {
      text-shadow: 0 0 6px #ecd549;
      color: #ffec87  !important; }

.tooltip_article {
  pointer-events: none; }

#des, .tooltip_article {
  position: absolute;
  width: 550px;
  max-width: 500px;
  display: none;
  z-index: 500;
  width: calc(100% - 4rem); }
  #des .des_skill, .tooltip_article .des_skill {
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 2.5rem;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    z-index: 100;
    max-width: 300px;
    color: #ddd;
    width: 350px;
    border-radius: 5px;
    background-color: rgba(3, 3, 3, 0.7);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(3, 3, 3, 0.7);
    width: 100%;
    padding: 5px 15px;
    width: 100%;
    max-width: 100%;
    left: 0;
    width: 100%;
    background-color: rgba(3, 3, 3, 0.9); }
    #des .des_skill .head_line, .tooltip_article .des_skill .head_line {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: baseline;
      -ms-flex-align: baseline;
      align-items: baseline;
      font-size: 2rem;
      line-height: 1.5;
      text-transform: capitalize;
      font-weight: 700;
      margin-bottom: .5rem;
      font-weight: 500;
      text-transform: uppercase;
      font-size: 17px;
      letter-spacing: .08em; }
      #des .des_skill .head_line .skill_name, .tooltip_article .des_skill .head_line .skill_name {
        color: #dfd350; }
      #des .des_skill .head_line .type_sk, .tooltip_article .des_skill .head_line .type_sk {
        font-size: 1.2rem; }
    #des .des_skill .head_tool, .tooltip_article .des_skill .head_tool {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: .2rem;
      overflow: hidden;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      #des .des_skill .head_tool .icon, .tooltip_article .des_skill .head_tool .icon {
        margin-right: 1rem;
        overflow: hidden;
        min-width: 64px;
        min-height: 64px;
        position: relative; }
        #des .des_skill .head_tool .icon img, .tooltip_article .des_skill .head_tool .icon img {
          position: relative;
          opacity: 0;
          -webkit-animation: imgIn .5s ease forwards;
          animation: imgIn .5s ease forwards; }
        #des .des_skill .head_tool .icon .ripple_hover, .tooltip_article .des_skill .head_tool .icon .ripple_hover {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          background: transparent; }
          #des .des_skill .head_tool .icon .ripple_hover .btn_plus, .tooltip_article .des_skill .head_tool .icon .ripple_hover .btn_plus {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            z-index: 1; }
            #des .des_skill .head_tool .icon .ripple_hover .btn_plus:before, #des .des_skill .head_tool .icon .ripple_hover .btn_plus:after, .tooltip_article .des_skill .head_tool .icon .ripple_hover .btn_plus:before, .tooltip_article .des_skill .head_tool .icon .ripple_hover .btn_plus:after {
              content: "";
              position: absolute;
              background-color: white;
              -webkit-transition: -webkit-transform 0.25s ease-out;
              transition: -webkit-transform 0.25s ease-out;
              -o-transition: transform 0.25s ease-out;
              transition: transform 0.25s ease-out;
              transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; }
            #des .des_skill .head_tool .icon .ripple_hover .btn_plus:before, .tooltip_article .des_skill .head_tool .icon .ripple_hover .btn_plus:before {
              top: 0;
              left: 50%;
              width: 4px;
              height: 100%;
              margin-left: -2px; }
            #des .des_skill .head_tool .icon .ripple_hover .btn_plus:after, .tooltip_article .des_skill .head_tool .icon .ripple_hover .btn_plus:after {
              top: 50%;
              left: 0;
              width: 100%;
              height: 4px;
              margin-top: -2px; }
      #des .des_skill .head_tool div, .tooltip_article .des_skill .head_tool div {
        line-height: 1.5; }
        #des .des_skill .head_tool div div:nth-child(3) br, .tooltip_article .des_skill .head_tool div div:nth-child(3) br {
          display: none; }
        #des .des_skill .head_tool div div:nth-child(3) span, .tooltip_article .des_skill .head_tool div div:nth-child(3) span {
          font-size: 1.2rem;
          margin-left: 0rem; }
    #des .des_skill div:nth-child(3), .tooltip_article .des_skill div:nth-child(3) {
      line-height: 1.5; }

.tripod_effect img {
  float: left;
  margin-right: 5px;
  width: 38px;
  opacity: 0;
  -webkit-animation: imgIn 1s ease forwards;
  animation: imgIn 1s ease forwards; }

.tripod_effect .trip_icon {
  width: 38px; }

.tripod_effect .trip_name {
  color: #c4fff7;
  font-size: 1.2rem;
  margin-bottom: -5px;
  text-shadow: 0 0 8px #3c867e;
  text-transform: uppercase;
  letter-spacing: .08em; }

.tripod_effect .trip_desc {
  font-size: 1.4rem;
  /*color: #fff;*/ }

.combo_skill_zone .tripod_effect .tripod_effect_blu:not(:empty),
.combo_skill_zone .tripod_effect .tripod_effect_green:not(:empty),
.combo_skill_zone .tripod_effect .tripod_effect_orange:not(:empty) {
  margin: 1rem 0; }

.tripod_effect .tripod_effect_blu:not(:empty) {
  border: 1px solid #0d1a28;
  background: rgba(0, 0, 0, 0.9);
  margin: 1rem;
  padding: .5rem .8rem; }

.tripod_effect .tripod_effect_green:not(:empty) {
  border: 1px solid #102010;
  background: rgba(0, 0, 0, 0.9);
  margin: 1rem;
  padding: .5rem .8rem; }
  .tripod_effect .tripod_effect_green:not(:empty) .trip_name {
    text-shadow: 0 0 8px #4b863c;
    color: #9ee0a3; }

.tripod_effect .tripod_effect_orange:not(:empty) {
  border: 1px solid rgba(255, 234, 139, 0.2);
  background: rgba(0, 0, 0, 0.9);
  margin: 1rem;
  padding: .5rem .8rem; }
  .tripod_effect .tripod_effect_orange:not(:empty) .trip_name {
    text-shadow: 0 0 6px #ecd549;
    color: #ffec87; }

.minus .btn_plus:before,
.minus .btn_plus:after {
  background-color: #e33b3b !important;
  -webkit-box-shadow: 0px 0px 5px #a10000;
  box-shadow: 0px 0px 5px #a10000; }

.minus .btn_plus:before {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); }

.minus .btn_plus:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg); }

.ripple_click {
  overflow: hidden; }

.ripple_circle_click {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.25); }
  .ripple_click.active .ripple_circle_click {
    -webkit-animation: ripple_click .3s ease-in forwards;
    animation: ripple_click .3s ease-in forwards; }

@-webkit-keyframes ripple_click {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); }
  25% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
    opacity: 1; } }

@keyframes ripple_click {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); }
  25% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
    opacity: 1; } }

.ripple_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  background: rgba(3, 3, 3, 0.7);
  /* animation: ripple_reverse .3s ease-in;*/ }
  .ripple_hover.active .ripple_circle {
    -webkit-animation: ripple .3s ease-in forwards !important;
    animation: ripple .3s ease-in forwards !important; }
  .ripple_hover.inactive .ripple_circle {
    -webkit-animation: ripple_reverse .3s  ease-out;
    animation: ripple_reverse .3s  ease-out; }

@-webkit-keyframes ripple {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    width: 300%;
    height: 300%;
    opacity: 1; } }

@keyframes ripple {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    width: 300%;
    height: 300%;
    opacity: 1; } }

@-webkit-keyframes ripple_reverse {
  0% {
    width: 300%;
    height: 300%;
    opacity: 1; }
  25% {
    opacity: 1; }
  70% {
    width: 0%;
    height: 0%;
    opacity: 0; } }

@keyframes ripple_reverse {
  0% {
    width: 300%;
    height: 300%;
    opacity: 1; }
  25% {
    opacity: 1; }
  70% {
    width: 0%;
    height: 0%;
    opacity: 0; } }

/*~~~~~~~~~~~~~~~~~~~skill_data~~~~~~~~~~~~~~~~~~~*/
.skill_data_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 20;
  padding: 0;
  color: #fff;
  font-family: "Noto Serif",serif;
  font-weight: 600;
  font-size: 4rem;
  line-height: 48px;
  margin-bottom: 50px; }

.class_choice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 50; }
  .class_choice .class_name {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 1rem;
    position: relative;
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 0px; }
    .class_choice .class_name #class_name_data {
      height: 36px;
      padding: 0px 16px;
      border-radius: 5px;
      -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .class_choice .class_name #class_name_data:hover {
        background-color: rgba(255, 255, 255, 0.05); }
    .class_choice .class_name i {
      margin-left: .5rem; }
    .class_choice .class_name .class_select {
      top: 0;
      margin-top: 4rem;
      min-width: 165px; }
      .class_choice .class_name .class_select a {
        color: #fff; }
      .class_choice .class_name .class_select .mdc-button {
        --mdc-theme-primary:rgba(255, 255, 255, 0.9); }
  .class_choice .gs_block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    line-height: 40px;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 1rem; }
    .class_choice .gs_block .gs_min, .class_choice .gs_block .gs_max {
      height: 36px;
      line-height: 36px;
      padding: 0px 10px;
      border-radius: 5px;
      cursor: pointer;
      min-width: 56px;
      text-align: center;
      -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .class_choice .gs_block .gs_min:hover, .class_choice .gs_block .gs_max:hover {
        background-color: rgba(255, 255, 255, 0.05); }
    .class_choice .gs_block span {
      cursor: default;
      margin: 0 .5rem; }
    .class_choice .gs_block .mousewheel {
      background: rgba(3, 3, 3, 0.9);
      padding: .8rem 1.5rem;
      position: absolute;
      z-index: 200;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      font-size: 1.7rem;
      white-space: nowrap; }

table {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: .5rem;
  border-spacing: 2px;
  border-collapse: separate; }
  table tr:nth-child(2n) {
    background-color: rgba(0, 0, 0, 0.5); }
  table thead {
    background: #0009; }
    table thead th {
      border-bottom: 2px solid #6678b1;
      padding: 12px 24px;
      font-weight: 600;
      color: #fff;
      font-size: 1.5rem;
      font-family: 'Open Sans', sans-serif;
      border-left: 0;
      border-left-color: inherit;
      border-left-style: none;
      border-left-width: medium;
      border-right: 0;
      border-right-color: inherit;
      border-right-style: none;
      border-right-width: medium; }
      table thead th:nth-child(1), table thead th:nth-child(2), table thead th:nth-child(5) {
        color: #8787b3; }
  table td {
    background-color: transparent;
    padding: 12px 24px;
    border-bottom: 0;
    font-size: 15px;
    color: #999;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; }
    table td:nth-child(1), table td:nth-child(2), table td:nth-child(5) {
      color: #8787b3;
      font-size: 18px;
      font-weight: 600; }
  table tr:hover td {
    cursor: default;
    color: #fff;
    color: #18bfef; }

.graph_stat .ct-chart {
  height: 100%;
  width: 30%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.graph_stat .ct-slice-pie {
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  opacity: .9; }
  .graph_stat .ct-slice-pie:hover {
    opacity: 1; }

.graph_stat .ct-series-a .ct-slice-pie {
  fill: #c4fff7; }

.graph_stat .ct-series-b .ct-slice-pie {
  fill: #20b2aa; }

.graph_stat .ct-series-c .ct-slice-pie {
  fill: #9ee0a3; }

.graph_stat .ct-label {
  font-size: unset;
  font-size: 1.3rem;
  cursor: default;
  fill: rgba(3, 3, 3, 0.5); }
  .graph_stat .ct-label:nth-child(3) {
    font-size: 1.3rem; }

.info {
  color: #fff;
  font-size: 2.1rem;
  font-family: unset;
  letter-spacing: unset;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  vertical-align: middle;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 12px;
  border-radius: 50%;
  position: absolute;
  left: 106px;
  z-index: 500;
  -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .info:hover {
    background: rgba(255, 255, 255, 0.05); }

.info_hide {
  /*opacity: 0;
	display:none;*/
  position: absolute;
  background: rgba(3, 3, 3, 0.9);
  padding: .8rem 1.5rem;
  position: absolute;
  z-index: 500;
  top: 40px;
  left: 50%;
  -webkit-transform: translateX(-16px);
  -ms-transform: translateX(-16px);
  transform: translateX(-16px);
  font-size: 1.5rem;
  white-space: nowrap; }

.private_build {
  position: relative; }

.info_private {
  /*opacity: 0;
	display:none;*/
  position: absolute;
  background: black;
  color: #fff;
  padding: .8rem 1.5rem;
  position: absolute;
  z-index: 500;
  top: 40px;
  left: 0;
  font-size: 1.7rem;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
  pointer-events: none;
  display: none;
  -webkit-transition: opacity 150ms linear, -webkit-transform 150ms ease;
  transition: opacity 150ms linear, -webkit-transform 150ms ease;
  -o-transition: opacity 150ms linear, transform 150ms ease;
  transition: opacity 150ms linear, transform 150ms ease;
  transition: opacity 150ms linear, transform 150ms ease, -webkit-transform 150ms ease; }
  .info_private.vis {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: translate(0) !important;
    -ms-transform: translate(0) !important;
    transform: translate(0) !important; }

.mdc-form-field {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase; }
  .mdc-form-field .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background,
  .mdc-form-field .mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
  .mdc-form-field .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
    border-color: rgba(255, 255, 255, 0.2); }
  .mdc-form-field .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__outer-circle, .mdc-form-field [aria-disabled="true"] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__outer-circle {
    border-color: rgba(255, 255, 255, 0.1); }
  .mdc-form-field .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
    border-color: rgba(255, 255, 255, 0.1); }
  .mdc-form-field .mdc-checkbox--disabled + label {
    opacity: .3; }
    .mdc-form-field .mdc-checkbox--disabled + label + label {
      opacity: .3; }
  .mdc-form-field .mdc-radio--disabled + label {
    opacity: .3; }
  .mdc-form-field label {
    opacity: 1;
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease; }

.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #191a1b; }

.mdc-button {
  color: #fff;
  font-size: 2.1rem;
  font-family: unset;
  letter-spacing: unset;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  vertical-align: middle;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 5px;
  -webkit-transition: background .3s ease;
  -o-transition: background .3s ease;
  transition: background .3s ease; }
  .mdc-button:before {
    -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .mdc-button.delete {
    --mdc-theme-primary: #ff5157 !important;
    color: #ff5157 !important; }
  .mdc-button.plus {
    --mdc-theme-primary:#20b2aa !important;
    color: #20b2aa !important; }
  .mdc-button.latree_button {
    --mdc-theme-primary:  rgba(255, 255, 255, 0.9);
    padding: 6px 8px; }
    .mdc-button.latree_button span {
      /*for this shit font*/
      height: 24px;
      line-height: 24px;
      width: 100%;
      display: inherit;
      -webkit-box-align: inherit;
      -ms-flex-align: inherit;
      align-items: inherit;
      -webkit-box-pack: inherit;
      -ms-flex-pack: inherit;
      justify-content: inherit;
      font-size: 16px; }
  .mdc-button.supporter {
    --mdc-theme-primary: #b88b58;
    background: black;
    background: rgba(3, 3, 3, 0.5);
    color: #b88b58 !important; }
    .mdc-button.supporter span {
      font-size: 14px;
      letter-spacing: .08em; }
  .mdc-button.mdc-button--outlined {
    border-color: rgba(255, 255, 255, 0.23); }
  .mdc-button.mdc-button--outlined.active {
    border-color: rgba(32, 178, 170, 0.4); }
  .mdc-button.active {
    --mdc-theme-primary:#20b2aa;
    color: #20b2aa !important; }
  .mdc-button.latree_button_back {
    --mdc-theme-primary:  rgba(255, 255, 255, 0.9);
    padding: 6px 8px;
    min-width: 100px;
    font-size: 1.4rem;
    background: black; }
    .mdc-button.latree_button_back:hover {
      background-color: rgba(255, 255, 255, 0.03); }
    .mdc-button.latree_button_back.min {
      --mdc-theme-primary: #ff5157;
      background: black;
      min-width: 40px;
      color: #ff5157 !important; }
      .mdc-button.latree_button_back.min:hover {
        background-color: rgba(255, 255, 255, 0.05);
        /*background:  #ff5157 !important;
				color: #fff !important;*/ }
    .mdc-button.latree_button_back.edit {
      --mdc-theme-primary:#20b2aa;
      color: #20b2aa !important; }
    .mdc-button.latree_button_back span {
      /*for this shit font*/
      height: 24px;
      line-height: 24px;
      width: 100%;
      display: inherit;
      -webkit-box-align: inherit;
      -ms-flex-align: inherit;
      align-items: inherit;
      -webkit-box-pack: inherit;
      -ms-flex-pack: inherit;
      justify-content: inherit; }
  .mdc-button.head_item {
    --mdc-theme-primary: rgba(150,20,20,.5);
    border-radius: 5px !important;
    height: unset; }
    .mdc-button.head_item:hover {
      background-color: rgba(150, 20, 20, 0.1); }
  #red .mdc-button.head_item {
    --mdc-theme-primary: rgba(150,20,20,.5);
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    height: unset; }
    #red .mdc-button.head_item:hover {
      background-color: rgba(150, 20, 20, 0.1); }
  #red .mdc-button.hidden_item {
    --mdc-theme-primary: rgba(150,20,20,.5);
    border-radius: 0px; }
  #blue .mdc-button.head_item {
    --mdc-theme-primary: rgba(52, 101, 199, 0.9);
    border-radius: 0px;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    height: unset; }
    #blue .mdc-button.head_item:hover {
      background-color: rgba(52, 101, 199, 0.1); }
  #blue .mdc-button.hidden_item {
    --mdc-theme-primary: rgba(52, 101, 199, 0.9);
    border-radius: 0px; }
    #blue .mdc-button.hidden_item:hover {
      background-color: rgba(52, 101, 199, 0.1); }

.apexcharts-yaxis-label,
.apexcharts-xaxis-label {
  font-weight: 500 !important; }

.apexcharts-toolbar {
  display: none !important; }

.apexcharts-tooltip.light,
.apexcharts-tooltip.apexcharts-theme-light {
  background: rgba(3, 3, 3, 0.9) !important;
  border: 1px solid rgba(3, 3, 3, 0.9) !important;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.apexcharts-tooltip-title,
.apexcharts-tooltip-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center; }

.apexcharts-tooltip.light .apexcharts-tooltip-title,
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: transparent !important;
  border-bottom: 3px solid  #490d10 !important;
  margin-bottom: 0; }
  #shipsSpeed .apexcharts-tooltip.light .apexcharts-tooltip-title, #shipsSpeed
  .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    border-bottom: 3px solid #00efff47 !important; }

.ranking {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0.5rem;
  margin-bottom: 10px;
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem; }

.rank_item {
  padding: unset;
  margin-bottom: unset;
  -ms-flex-item-align: start;
  align-self: start; }
  .rank_item .head_item {
    color: rgba(255, 255, 255, 0.9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 25px;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; }
    .rank_item .head_item span:nth-child(1) {
      padding: 0px 12px;
      margin-right: 10px;
      border-radius: 12px;
      text-align: center;
      color: #eee;
      font-size: 13px;
      background-color: #621bbf66;
      line-height: 26px;
      height: 26px;
      background-color: rgba(150, 20, 20, 0.5); }
    .rank_item .head_item span:nth-child(2) {
      font-size: 16px;
      line-height: 26px;
      height: 26px; }
  .rank_item .rank_right {
    color: #fff;
    float: right;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 178px;
    white-space: nowrap; }
  .rank_item .stat_item_hidden {
    height: 0;
    -webkit-transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    -o-transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    overflow: hidden; }
    .rank_item .stat_item_hidden.active {
      height: auto; }
    .rank_item .stat_item_hidden .hidden_stat {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .rank_item .stat_item_hidden .hidden_stat .hidden_item {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-gap: 1rem;
        padding: 6px 25px;
        width: 100%;
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.6rem; }
        .rank_item .stat_item_hidden .hidden_stat .hidden_item span {
          height: 24px;
          line-height: 24px; }
        .rank_item .stat_item_hidden .hidden_stat .hidden_item .rank_name {
          white-space: nowrap;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis; }
        .rank_item .stat_item_hidden .hidden_stat .hidden_item .rank_stat {
          text-align: end;
          color: rgba(255, 255, 255, 0.9);
          color: #00c5aa; }
        .rank_item .stat_item_hidden .hidden_stat .hidden_item:hover {
          color: unset !important;
          background-color: rgba(150, 20, 20, 0.1); }

.graph_stat .top_stat {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem; }

.graph_stat .chart {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem; }

.stat_graph {
  min-height: 300px !important; }

#blue .head_item span:nth-child(1) {
  background-color: rgba(52, 101, 199, 0.5); }

.skill_data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 1.5rem;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }
  @media screen and (max-width: 420px) {
    .skill_data {
      grid-template-columns: repeat(auto-fit, 100%); } }

.show_all {
  position: absolute;
  left: 16px;
  padding: 6px 10px;
  min-width: 80px;
  /*background-color: rgba(255,255,255,.1) !important;*/ }

.skill_data_item {
  width: 100%;
  -ms-flex-item-align: start;
  align-self: start;
  margin-bottom: 0;
  padding: 0.7rem 0.7rem 0.7rem 0.7rem;
  position: relative; }
  .skill_data_item .head {
    display: grid;
    grid-template-columns: 1fr 4fr;
    -webkit-transition: margin .6s ease;
    -o-transition: margin .6s ease;
    transition: margin .6s ease; }
  .skill_data_item .name {
    margin-right: 10px; }
  .skill_data_item .percent_s {
    /*color: #c4fff7;
		text-shadow: 0 0 15px #3c867e;
		font-size: 15px;
		position: absolute;
		top: 0;
		right: 10px;*/
    position: absolute;
    top: -.7rem;
    right: -1rem;
    z-index: 10;
    padding: 0 .5rem;
    line-height: 2.1rem;
    font-size: 12px;
    width: 5.5rem;
    border-radius: .5rem;
    height: 2.1rem;
    background: #c4fff7;
    -webkit-box-shadow: 0 0 8px #3c867e;
    box-shadow: 0 0 8px #3c867e;
    color: #000;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    -webkit-animation: percent_s 0.6s forwards cubic-bezier(0.4, 0, 0.2, 1);
    animation: percent_s 0.6s forwards cubic-bezier(0.4, 0, 0.2, 1); }

@-webkit-keyframes percent_s {
  0% {
    width: 0;
    opacity: 0; }
  100% {
    width: 5.5rem;
    opacity: 1; } }

@keyframes percent_s {
  0% {
    width: 0;
    opacity: 0; }
  100% {
    width: 5.5rem;
    opacity: 1; } }
  .skill_data_item .icon {
    height: 60px;
    -ms-flex-item-align: center;
    align-self: center;
    justify-self: center; }
    .skill_data_item .icon img {
      margin-right: 0; }
  .skill_data_item .right_skill {
    display: grid; }
    .skill_data_item .right_skill .name {
      font-weight: 500;
      margin: 0;
      font-size: 14px;
      text-align: center;
      text-transform: uppercase;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      line-height: 30px;
      height: 30px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-line-pack: center;
      align-content: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .skill_data_item .right_skill .trip_1 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 50px; }
      .skill_data_item .right_skill .trip_1 .trip_item {
        display: grid;
        margin-left: auto;
        margin-right: auto;
        width: 30%; }
        .skill_data_item .right_skill .trip_1 .trip_item > * {
          -ms-flex-item-align: center;
          align-self: center;
          justify-self: center;
          font-size: 14px; }
      .skill_data_item .right_skill .trip_1 img {
        width: 25px;
        height: 25px; }
  .skill_data_item .all_trip {
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0; }
    .skill_data_item .all_trip.active {
      opacity: 1; }
  .skill_data_item .tripod_1, .skill_data_item .tripod_2, .skill_data_item .tripod_3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; }
    .skill_data_item .tripod_1 .icon, .skill_data_item .tripod_2 .icon, .skill_data_item .tripod_3 .icon {
      display: grid;
      height: unset; }
      .skill_data_item .tripod_1 .icon img, .skill_data_item .tripod_2 .icon img, .skill_data_item .tripod_3 .icon img {
        width: 45px;
        height: 45px;
        border-radius: 50%; }
      .skill_data_item .tripod_1 .icon > *, .skill_data_item .tripod_2 .icon > *, .skill_data_item .tripod_3 .icon > * {
        -ms-flex-item-align: center;
        align-self: center;
        justify-self: center;
        font-size: 14px; }
      .skill_data_item .tripod_1 .icon.grey img, .skill_data_item .tripod_2 .icon.grey img, .skill_data_item .tripod_3 .icon.grey img {
        -webkit-transition: opacity 3s ease-in 0.3s, -webkit-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 3s ease-in 0.3s, -webkit-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: opacity 3s ease-in 0.3s, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 3s ease-in 0.3s, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 3s ease-in 0.3s, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-filter: grayscale(97%) brightness(50%);
        filter: grayscale(97%) brightness(50%); }
      .skill_data_item .tripod_1 .icon.grey .percent, .skill_data_item .tripod_2 .icon.grey .percent, .skill_data_item .tripod_3 .icon.grey .percent {
        -webkit-transition: opacity 3s ease-in 0.3s, -webkit-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 3s ease-in 0.3s, -webkit-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: opacity 3s ease-in 0.3s, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 3s ease-in 0.3s, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 3s ease-in 0.3s, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-filter: grayscale(80%) brightness(70%);
        filter: grayscale(80%) brightness(70%); }
  .skill_data_item:hover .active .grey img, .skill_data_item:hover .active .grey .percent {
    -webkit-filter: grayscale(0%) brightness(100%);
    filter: grayscale(0%) brightness(100%); }
  .skill_data_item .tripod_1 {
    color: #51d6ff !important;
    margin-bottom: 1rem; }
  .skill_data_item .tripod_2 {
    color: #96c910 !important;
    margin-bottom: 1rem; }
  .skill_data_item .tripod_3 {
    grid-template-columns: 1fr 1fr;
    color: #F99200 !important; }
  .skill_data_item .trip_item:nth-child(1) {
    color: #51d6ff !important; }
  .skill_data_item .trip_item:nth-child(2) {
    color: #96c910 !important; }
  .skill_data_item .trip_item:nth-child(3) {
    color: #F99200  !important; }
  .skill_data_item[data-grade='1'] {
    -webkit-box-shadow: inset #0f1f2fe6 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: inset #0f1f2fe6 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    .skill_data_item[data-grade='1'] .name {
      color: #00B0FA !important;
      color: #51d6ff !important; }
  .skill_data_item[data-grade='2'] {
    -webkit-box-shadow: inset #112211 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: inset #112211 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    .skill_data_item[data-grade='2'] .name {
      color: #8DF901 !important;
      color: #96c910 !important; }
  .skill_data_item[data-grade='3'] {
    -webkit-box-shadow: inset #412800 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: inset #412800 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset #73450480 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: inset #73450480 -150px 100px 100px -90px, inset #000 0 0 100px -100px, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    .skill_data_item[data-grade='3'] .name {
      color: #F99200  !important; }

#jstitle {
  background: black; }

.post_add_build {
  -webkit-transition: height .3s ease;
  -o-transition: height .3s ease;
  transition: height .3s ease;
  height: unset !important; }
  .post_add_build .input_item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: .5rem; }
    .post_add_build .input_item input {
      background: black;
      width: 110px;
      height: 36px;
      margin-right: 10px;
      font-size: 1.5rem; }
      .post_add_build .input_item input:hover, .post_add_build .input_item input:focus {
        border-bottom: 0.28rem solid rgba(0, 0, 0, 0.9); }
    .post_add_build .input_item div {
      margin-right: 10px; }

.build_tab_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -5px -5px 10px; }
  .build_tab_list .build_tab {
    padding: 8px 25px;
    width: 100%;
    white-space: nowrap;
    font-size: 14px;
    margin: 6px 5px 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: unset;
    height: unset; }

#add_tumbnail {
  cursor: pointer; }
  #add_tumbnail span {
    cursor: pointer;
    margin: 0; }
  #add_tumbnail input {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
    width: 100%; }

/*~~~~~~~~~~~~~~~~~~~skill_data~~~~~~~~~~~~~~~~~~~END*/
/*~~~~~~~~~~~~~~~~~~~dashboard~~~~~~~~~~~~~~~~~~~*/
.user_dashboard {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
  margin-bottom: 1rem; }
  .user_dashboard .user_info {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1rem;
    margin-bottom: 0rem; }
    .user_dashboard .user_info img {
      border-radius: .5rem; }
    .user_dashboard .user_info .info_right {
      display: grid; }
      .user_dashboard .user_info .info_right .user_nick {
        font-size: 2.5rem; }
      .user_dashboard .user_info .info_right .user_rating {
        color: #d05; }
  .user_dashboard .build_item_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .user_dashboard .build_item_item > div {
      -webkit-transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      -o-transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }
    .user_dashboard .build_item_item .min {
      height: 50px;
      min-width: 50px; }
  .user_dashboard .build_item {
    position: relative;
    width: 75%;
    /*&:before{
    		content: '';
    		position: absolute;
    		left: -.5rem;
    		top: 50%;
    		transform: translateY(-50%);
    		font-size: 1rem;
    		
    		height: 1rem;
    		line-height: 2rem;
    		width: 1rem;
    		padding: 0 .5rem;
    		border-radius: 50%;
    		
    		animation: guide_reverse_dash .3s forwards;
    	}
    	&:hover{
    		&:before{
    			
    			font-weight: 900;
    			box-shadow: unset;
    			animation: guide_dash .3s forwards;
	    		
    		}

    	}*/ }

@-webkit-keyframes guide_dash {
  0% {
    color: #3c867e;
    background: #c4fff7; }
  50% {
    height: 2.1rem;
    width: 3.5rem;
    background: #c4fff7;
    left: -2.5rem; }
  100% {
    content: 'EDIT';
    background: #c4fff7;
    height: 2rem;
    width: 3rem;
    border-radius: .5rem;
    left: -2rem;
    color: #000;
    -webkit-box-shadow: 0 0 15px #3c867e;
    box-shadow: 0 0 15px #3c867e; } }

@keyframes guide_dash {
  0% {
    color: #3c867e;
    background: #c4fff7; }
  50% {
    height: 2.1rem;
    width: 3.5rem;
    background: #c4fff7;
    left: -2.5rem; }
  100% {
    content: 'EDIT';
    background: #c4fff7;
    height: 2rem;
    width: 3rem;
    border-radius: .5rem;
    left: -2rem;
    color: #000;
    -webkit-box-shadow: 0 0 15px #3c867e;
    box-shadow: 0 0 15px #3c867e; } }

@-webkit-keyframes guide_reverse_dash {
  0% {
    content: '';
    height: 2rem;
    width: 3rem;
    border-radius: .5rem;
    left: -2rem;
    color: #000;
    -webkit-box-shadow: 0 0 23px #3c867e;
    box-shadow: 0 0 23px #3c867e;
    background: #c4fff7; }
  50% {
    background: #c4fff7;
    height: 1rem;
    width: 1rem;
    left: 0rem; }
  100% {
    background: #c4fff7;
    -webkit-box-shadow: 0 0 20px #3c867e;
    box-shadow: 0 0 20px #3c867e; } }

@keyframes guide_reverse_dash {
  0% {
    content: '';
    height: 2rem;
    width: 3rem;
    border-radius: .5rem;
    left: -2rem;
    color: #000;
    -webkit-box-shadow: 0 0 23px #3c867e;
    box-shadow: 0 0 23px #3c867e;
    background: #c4fff7; }
  50% {
    background: #c4fff7;
    height: 1rem;
    width: 1rem;
    left: 0rem; }
  100% {
    background: #c4fff7;
    -webkit-box-shadow: 0 0 20px #3c867e;
    box-shadow: 0 0 20px #3c867e; } }

.modal_o {
  background: rgba(3, 3, 3, 0.9);
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  z-index: 9999999;
  color: #fff;
  font-size: 18px; }
  .modal_o.preview {
    height: calc(100% - 50px);
    position: absolute;
    top: 15%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-10%);
    -ms-transform: translateX(-50%) translateY(-10%);
    transform: translateX(-50%) translateY(-10%);
    min-width: 1260px;
    padding: 0;
    background-color: #030303f2; }
    .modal_o.preview .head_modal {
      padding: 8px 10px;
      background-color: #0f1015;
      text-align: center;
      font-size: 19px;
      background-color: rgba(3, 3, 3, 0.9);
      color: rgba(255, 255, 255, 0.9); }
    .modal_o.preview .cont {
      height: calc(100% - 50px);
      padding: 5rem 7rem 2.8rem 7rem;
      color: rgba(255, 255, 255, 0.9) !important; }
  .modal_o .footer_modal {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 5; }
    .modal_o .footer_modal div:nth-child(1) {
      margin-right: 15px; }

/*~~~~~~~~~~~~~~~~~~~dashboard~~~~~~~~~~~~~~~~~~~END*/
.head_post_b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.left_post_build {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .left_post_build button {
    margin-right: 10px; }

/*~~~~~~~~~~~~~~~~~~edit-build~~~~~~~~~~~~~~~~~~~~*/
.edit_build {
  min-height: 100vh; }
  .edit_build .post_build {
    position: relative;
    opacity: 1;
    top: unset;
    height: 100%;
    -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset; }

/*~~~~~~~~~~~~~~~~~~ships page~~~~~~~~~~~~~~~~~~~~*/
.ship_list {
  min-height: 670px;
  display: grid;
  grid-template-areas: "a a a"
 "a a a"
 "b b b";
  margin-bottom: 6rem; }

.list-top {
  grid-area: a;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem; }
  @media screen and (max-width: 800px) {
    .list-top {
      grid-template-columns: 1fr 1fr; } }
  @media screen and (max-width: 400px) {
    .list-top {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(6, 150px); }
      .list-top a {
        overflow: hidden; } }

.list-end {
  grid-area: b;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem; }
  @media screen and (max-width: 400px) {
    .list-end {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, 150px); }
      .list-end a {
        overflow: hidden; } }

.ship {
  /*width: 100%;
	position:relative;*/ }
  .ship.animate {
    will-change: transform; }
  .ship.shadow {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    -webkit-transition: -webkit-box-shadow 1s ease;
    transition: -webkit-box-shadow 1s ease;
    -o-transition: box-shadow 1s ease;
    transition: box-shadow 1s ease;
    transition: box-shadow 1s ease, -webkit-box-shadow 1s ease; }
  .ship-img {
    overflow: hidden;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .ship-img img {
      width: 100%;
      height: 100%;
      -webkit-animation: shipsScale 15s ease-in-out infinite;
      animation: shipsScale 15s ease-in-out infinite;
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
      background-position: 50% 50%;
      background-size: cover;
      background-repeat: no-repeat;
      -o-object-fit: cover;
      object-fit: cover; }
    .ship-img--active img {
      -webkit-animation-play-state: running !important;
      animation-play-state: running !important; }
  .ship-footer {
    position: absolute;
    left: 0;
    bottom: 0px;
    padding: 0 10px;
    width: 100%;
    font-size: 30px;
    line-height: 1.3;
    z-index: 2;
    height: 39px;
    overflow: hidden;
    -webkit-transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    -o-transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }
  .ship-name {
    display: block;
    color: #20b2aa;
    color: #b2aea5;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-family: 'Noto Serif', serif;
    text-transform: capitalize;
    font-family: 'TrajanB'; }
  .ship-specialization {
    display: block;
    color: #fff;
    overflow: hidden;
    /*white-space: nowrap;*/
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 400; }
  .ship:before {
    content: "";
    display: block;
    position: absolute;
    top: 25%;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), to(transparent));
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent); }

.build_button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 100%;
  margin-top: 2.5rem;
  margin-bottom: 2rem; }
  .build_button div {
    margin-right: 15px; }

.ship-button {
  display: inline-block;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin-bottom: 2rem;
  opacity: 0;
  -webkit-transform: translateY(40px);
  -ms-transform: translateY(40px);
  transform: translateY(40px); }
  .ship-button .ship-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
    .ship-button .ship-head > div {
      margin-left: 15px; }

.ship_data {
  padding: 0;
  min-height: 500px;
  border-radius: 8px;
  position: relative;
  opacity: 0;
  -webkit-transform: translateY(60px);
  -ms-transform: translateY(60px);
  transform: translateY(60px);
  overflow: hidden; }
  .ship_data.animate {
    will-change: transform; }
  .ship_data .data_text {
    position: absolute;
    top: calc(50% + 30px);
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    color: #b2aea5;
    font-family: 'TrajanR'; }
    .ship_data .data_text span {
      font-family: 'TrajanB';
      color: #20b2aa;
      text-transform: uppercase; }

.ship-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.5);
  height: 66px; }
  .ship-select .latree_button {
    letter-spacing: .08em;
    font-family: El messiri;
    border-radius: 0;
    width: 100%;
    height: 100%; }
    .ship-select .latree_button[data-click='1'] {
      --mdc-theme-primary: #ff5157;
      color: #ff5157 !important;
      text-decoration: line-through; }
  .ship-select .mdc-button__ripple {
    border-radius: 0; }

@media screen and (max-width: 400px) {
  .ship-select {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: unset; }
    .ship-select .latree_button {
      width: unset; }
  .data_text {
    font-size: 16px;
    width: 100%;
    text-align: center; } }

.upgrade_item.chek .item {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.3) !important; }
  .upgrade_item.chek .item .slotData {
    background: -o-linear-gradient(315deg, #232323, #575757) !important;
    background: linear-gradient(135deg, #232323, #575757) !important; }
    .upgrade_item.chek .item .slotData img {
      -webkit-filter: grayscale(95%);
      filter: grayscale(95%); }

.upgrade_item .item {
  margin-bottom: 3px; }
  .upgrade_item .item .slotText {
    max-width: 200px; }
    .upgrade_item .item .slotText.maxw {
      max-width: unset; }
  .upgrade_item .item .slotName {
    padding-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 160px; }
    .upgrade_item .item .slotName.maxw {
      max-width: unset; }

.upgrade_item.last {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .upgrade_item.last .item {
    margin: 0 20px 10px 0;
    width: 330px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase; }
    .upgrade_item.last .item .slotText {
      max-width: unset; }
      .upgrade_item.last .item .slotText .slotName {
        max-width: unset; }

.item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: color .4s ease;
  -o-transition: color .4s ease;
  transition: color .4s ease; }
  .item .slotText {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 300px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .item .slotName {
    padding-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis; }
    .item .slotName.none {
      display: none; }
  .item .slotData {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 1rem; }
    .item .slotData img {
      width: 28px;
      height: 28px;
      border: 0;
      vertical-align: top; }
  .item[data-grade='0'] {
    color: #FFFFFF; }
    .item[data-grade='0'] .slotData {
      background: -o-linear-gradient(315deg, #232323, #575757);
      background: linear-gradient(135deg, #232323, #575757); }
    .item[data-grade='0'].mdc-button {
      --mdc-theme-primary: #FFFFFF !important;
      color: #FFFFFF !important; }
  .item[data-grade='1'] {
    color: #8DF901; }
    .item[data-grade='1'] .slotData {
      background: -o-linear-gradient(315deg, #18220b, #304911);
      background: linear-gradient(135deg, #18220b, #304911); }
    .item[data-grade='1'].mdc-button {
      --mdc-theme-primary: #8DF901 !important;
      color: #8DF901 !important; }
  .item[data-grade='2'] {
    color: #00B0FA; }
    .item[data-grade='2'] .slotData {
      background: -o-linear-gradient(315deg, #111f2c, #113d5d);
      background: linear-gradient(135deg, #111f2c, #113d5d); }
    .item[data-grade='2'].mdc-button {
      --mdc-theme-primary: #00B0FA !important;
      color: #00B0FA !important; }
  .item[data-grade='3'] {
    color: #ce43fc; }
    .item[data-grade='3'] .slotData {
      background: -o-linear-gradient(315deg, #261331, #480d5d);
      background: linear-gradient(135deg, #261331, #480d5d); }
    .item[data-grade='3'].mdc-button {
      --mdc-theme-primary: #ce43fc !important;
      color: #ce43fc !important; }
  .item[data-grade='4'] {
    color: #F99200; }
    .item[data-grade='4'] .slotData {
      background: -o-linear-gradient(315deg, #362003, #9e5f04);
      background: linear-gradient(135deg, #362003, #9e5f04); }
    .item[data-grade='4'].mdc-button {
      --mdc-theme-primary: #F99200 !important;
      color: #F99200 !important; }
  .item[data-grade='5'] {
    color: #FA5D00; }
    .item[data-grade='5'] .slotData {
      background: -o-linear-gradient(315deg, #341a09, #a24006);
      background: linear-gradient(135deg, #341a09, #a24006); }
    .item[data-grade='5'].mdc-button {
      --mdc-theme-primary: #FA5D00 !important;
      color: #FA5D00 !important; }
  .item[data-grade='6'] {
    color: #a00c80; }
    .item[data-grade='6'] .slotData {
      background: -o-linear-gradient(315deg, #3d173e, #a00c80);
      background: linear-gradient(135deg, #3d173e, #a00c80); }
    .item[data-grade='6'].mdc-button {
      --mdc-theme-primary: #a00c80 !important;
      color: #a00c80 !important; }
  .item[data-grade='7'] {
    color: #FFFFFF; }
    .item[data-grade='7'] .slotData {
      background: -o-linear-gradient(315deg, #232323, #575757);
      background: linear-gradient(135deg, #232323, #575757); }
    .item[data-grade='7'].mdc-button {
      --mdc-theme-primary: #FFFFFF !important;
      color: #FFFFFF !important; }

.equpTable .upgrade_item {
  line-height: 1.5; }
  .equpTable .upgrade_item .slotName {
    white-space: unset; }
  .equpTable .upgrade_item .item .slotName.none {
    display: none; }
  .equpTable .upgrade_item .item .slotData {
    width: 34px;
    height: 34px; }
    .equpTable .upgrade_item .item .slotData img {
      width: 30px;
      height: 30px; }

.equpTable .chek .item {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.3) !important; }
  .equpTable .chek .item .slotData {
    background: -o-linear-gradient(315deg, #232323, #575757) !important;
    background: linear-gradient(135deg, #232323, #575757) !important; }
    .equpTable .chek .item .slotData img {
      -webkit-filter: grayscale(95%);
      filter: grayscale(95%); }

#res, #statsShips {
  background: unset;
  margin: unset;
  max-width: 1260px; }
  #res thead th, #statsShips thead th {
    font-family: TrajanB;
    color: rgba(255, 255, 255, 0.9);
    padding: 12px 20px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis; }
  #res tbody th, #statsShips tbody th {
    font-family: TrajanB;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center; }
  #res #specialization th, #res #obtain th, #statsShips #specialization th, #statsShips #obtain th {
    font-family: El Messiri;
    color: rgba(255, 255, 255, 0.9); }
  #res th:nth-child(1), #statsShips th:nth-child(1) {
    max-width: 128.6px; }
  #res td, #statsShips td {
    color: #b2aea5;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 20px; }
  @media screen and (max-width: 800px) {
    #res thead, #statsShips thead {
      display: none; }
    #res tr, #statsShips tr {
      display: block;
      margin-bottom: .5rem; }
    #res tr:nth-child(2n), #statsShips tr:nth-child(2n) {
      background-color: rgba(0, 0, 0, 0); }
    #res td, #statsShips td {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.5);
      margin-bottom: 1rem; }
    #res #specialization td, #statsShips #specialization td {
      display: block; }
    #res td:before, #statsShips td:before {
      content: attr(aria-label);
      float: left;
      font-weight: bold;
      width: 150px;
      text-transform: capitalize; }
    table .slotName #res.maxw, table .slotName #statsShips.maxw {
      max-width: unset; }
    #res .upgrade_item .item .slotName.none, #statsShips .upgrade_item .item .slotName.none {
      display: -webkit-box !important;
      display: -ms-flexbox !important;
      display: flex !important; } }

#statsShips .slotName {
  color: rgba(255, 255, 255, 0.78); }

#statsShips .value {
  color: rgba(0, 176, 240, 0.9);
  color: #20b2aa; }
  #statsShips .value span {
    color: rgba(11, 229, 68, 0.7);
    color: rgba(32, 178, 170, 0.6); }

#statsShips .consumption, #statsShips .repair {
  color: rgba(206, 0, 0, 0.9);
  color: #ff5157;
  border-color: rgba(32, 178, 170, 0.4); }

#shipsSpeed, .chartbg {
  margin-top: 20px;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  position: relative;
  height: 330px;
  min-height: 315px !important; }
  #shipsSpeed .bg, .chartbg .bg {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute; }
    #shipsSpeed .bg .chartBackground, .chartbg .bg .chartBackground {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url(../../assets/img/7.jpg);
      background-position: 50% 50%;
      background-size: cover;
      background-repeat: no-repeat;
      -webkit-animation: shipsScale 30s ease-in-out infinite;
      animation: shipsScale 30s ease-in-out infinite; }
    #shipsSpeed .bg .ratingchart, .chartbg .bg .ratingchart {
      background-image: url(../../assets/img/21.jpg); }

.marginchart {
  margin-top: 0; }

.apexcharts-xaxistooltip {
  border: 1px solid rgba(3, 3, 3, 0.9) !important;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  padding: 0px 5px !important; }
  .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {
    min-width: 10px !important; }

.oneShip {
  position: relative; }
  .oneShip-img {
    width: 230px;
    overflow: hidden;
    display: block;
    height: 230px;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border-radius: 8px; }
    .oneShip-img img {
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover; }
  .oneShip .shipHead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: 20px; }
  .oneShip-right {
    margin-left: 2rem;
    font-family: TrajanR;
    font-size: 18px;
    text-shadow: rgba(3, 3, 3, 0.7) 0px 0.1rem 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    margin-right: 20px;
    min-width: 520px;
    max-width: 600px; }
  .oneShip-name {
    color: white;
    font-size: 40px;
    line-height: 1.4;
    font-family: TrajanB;
    text-shadow: rgba(3, 3, 3, 0.7) 0px 0.1rem 0.5rem; }
  .oneShip-immuneList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    background: rgba(3, 3, 3, 0.7);
    border-radius: 8px;
    padding: 10px 15px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: center;
    align-content: center; }
  .oneShip-slot {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    background: rgba(3, 3, 3, 0.7);
    border-radius: 8px;
    padding: 10px 15px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-pack: distribute;
    justify-content: space-around; }
    .oneShip-slot .item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-flow: column;
      flex-flow: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-right: 5px;
      width: 60px; }
      .oneShip-slot .item .inlineSquare {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
      .oneShip-slot .item .square {
        background: rgba(3, 3, 3, 0.5);
        height: 45px;
        width: 45px;
        position: relative;
        padding: 20px; }
        .oneShip-slot .item .square:before, .oneShip-slot .item .square:after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 40%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          border-bottom: 5px solid #b2aea5;
          -webkit-transition: -webkit-transform 0.25s ease-out;
          transition: -webkit-transform 0.25s ease-out;
          -o-transition: transform 0.25s ease-out;
          transition: transform 0.25s ease-out;
          transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; }
        .oneShip-slot .item .square:before {
          -webkit-transform: translate(-50%, -50%) rotate(90deg);
          -ms-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg); }
  .oneShip .immuneVal, .oneShip .lvl {
    line-height: 1.5;
    font-size: 14px;
    font-family: 'Open sans';
    font-weight: 400;
    text-transform: capitalize;
    text-align: center; }

.immuneItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 5px;
  width: 60px;
  cursor: pointer;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em; }
  .immuneItem .immuneImg {
    width: 44px;
    height: 43px;
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    margin-bottom: 2px; }
  .immuneItem .img {
    width: 44px;
    height: 43px;
    background: url(/images/icon.png);
    display: block; }
    .immuneItem .img.weed {
      background-position: 0px 0px; }
    .immuneItem .img.sandstorm {
      background-position: -44px 0px; }
    .immuneItem .img.siren {
      background-position: -88px 0px; }
    .immuneItem .img.cold {
      background-position: -132px 0px; }
    .immuneItem .img.storm {
      background-position: -176px 0px; }
    .immuneItem .img.death {
      background-position: -220px 0px; }

.weed {
  color: #0ed0de; }

.sandstorm {
  color: #d5c88a; }

.siren {
  color: #ef4ed0; }

.cold {
  color: #bcf1f9; }

.storm {
  color: #4073cc; }

.sandstorm {
  color: #d5c88a; }

.underwater {
  color: #d05; }

.treasure {
  color: #d05; }

.wrecks {
  color: #d05; }

.shipwrecks {
  color: #d05; }

.crewListName {
  color: white;
  font-size: 30px;
  line-height: 1.6;
  font-family: TrajanB;
  text-shadow: rgba(3, 3, 3, 0.7) 0px 0.1rem 0.5rem;
  margin-bottom: 5px; }

.crewList {
  height: 500px;
  position: relative; }
  .crewList .soon {
    position: absolute;
    top: calc(50% + 30px);
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    color: #b2aea5;
    font-size: 30px;
    font-family: 'TrajanR';
    text-transform: uppercase; }

.tooltip {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #ddd;
  opacity: 1;
  display: none;
  z-index: 999; }
  .tooltip:hover {
    color: var(--a-color); }
  .tooltip .penalty {
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 2.5rem;
    max-width: 400px;
    color: #ddd;
    border-radius: 8px;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(3, 3, 3, 0.7);
    padding: 5px 15px;
    background-color: rgba(3, 3, 3, 0.9); }
    .tooltip .penalty .penaltyItem {
      border: 1px solid #d03423ab;
      background: rgba(0, 0, 0, 0.9);
      margin: 1rem 0rem;
      padding: .5rem .8rem; }
      .tooltip .penalty .penaltyItem-name {
        text-transform: uppercase;
        font-weight: 600;
        color: #d03423; }
      .tooltip .penalty .penaltyItem.normal {
        border: 1px solid rgba(255, 255, 255, 0.5); }
        .tooltip .penalty .penaltyItem.normal .penaltyItem-name {
          color: #e0e0e0; }
      .tooltip .penalty .penaltyItem.high {
        border: 1px solid #17a4b3cc; }
        .tooltip .penalty .penaltyItem.high .penaltyItem-name {
          color: #17a4b3; }
    .tooltip .penalty .toolHead {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: baseline;
      -ms-flex-align: baseline;
      align-items: baseline;
      font-size: 1.8rem;
      line-height: 1.5;
      text-transform: capitalize;
      font-weight: 600;
      margin-bottom: .2rem; }
  .tooltip_lifeData {
    max-width: 300px;
    color: #ddd;
    width: 350px;
    border-radius: 4px;
    background-color: rgba(3, 3, 3, 0.8);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(3, 3, 3, 0.7);
    width: 100%;
    line-height: 1.5;
    font-size: 14px;
    background-color: #0a0a11; }
  .tooltip_lifeName {
    line-height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    white-space: nowrap;
    text-transform: uppercase;
    color: #dfd350;
    font-weight: 500;
    letter-spacing: .04em;
    font-size: 17px;
    background: black; }
  .tooltip_lifeInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.7);
    padding: 5px 15px; }
    .tooltip_lifeInfo img {
      border: 1px solid rgba(29, 29, 29, 0.7);
      border-radius: 3px;
      height: 60px;
      width: 60px;
      opacity: 0;
      -webkit-animation: img_op .3s ease-out forwards;
      animation: img_op .3s ease-out forwards; }
    .tooltip_lifeInfo > div {
      margin-left: 10px;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 12px; }
      .tooltip_lifeInfo > div div:first-child {
        color: rgba(255, 255, 255, 0.9);
        color: #b88b58;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: .06em;
        margin-bottom: 2px; }
  .tooltip_lifeDesc {
    padding: 5px 15px; }

@-webkit-keyframes shipsScale {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.16);
    transform: scale(1.16); } }

@keyframes shipsScale {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.16);
    transform: scale(1.16); } }

/*~~~~~~~~~~~~~~~~~~ships page~~~~~~~~~~~~~~~~~~~~END*/
/*~~~~~~~~~~~~~~~~~~Classselect page~~~~~~~~~~~~~~~~~~~~*/
.archetypeName {
  color: white;
  font-size: 30px;
  line-height: 1.6;
  font-family: TrajanB;
  text-shadow: rgba(3, 3, 3, 0.7) 0px 0.1rem 0.5rem;
  margin-bottom: 5px; }

.archetype {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 30px;
  margin-bottom: 60px; }
  .archetype .classitem {
    position: relative;
    height: 175px; }
    .archetype .classitem .classIcon {
      z-index: 11;
      position: absolute;
      top: 10px;
      left: 20px; }
    .archetype .classitem .className {
      font-family: TrajanB;
      color: #fff !important;
      position: absolute;
      bottom: 10px;
      left: 20px;
      z-index: 11; }
    .archetype .classitem .classImg {
      position: absolute;
      top: -100px;
      right: -50px;
      width: 490px;
      height: 275px;
      z-index: 10;
      pointer-events: none; }
      .archetype .classitem .classImg img {
        height: 100%;
        width: 100%; }
  .archetype-large {
    grid-template-columns: 1fr 1fr; }
    .archetype-large .classitem .classIcon {
      left: 25%;
      -webkit-transform: translateX(-25%);
      -ms-transform: translateX(-25%);
      transform: translateX(-25%); }
    .archetype-large .classitem .className {
      left: 23%;
      -webkit-transform: translateX(-23%);
      -ms-transform: translateX(-23%);
      transform: translateX(-23%); }

.imgOv {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120%;
  height: 300px;
  pointer-events: none; }

#summoner .classImg {
  top: -150px;
  right: -100px;
  width: 350px;
  height: 395px; }

#blaster .classImg {
  top: -100px;
  right: -76px;
  width: 490px;
  height: 275px;
  top: 0;
  right: 0px;
  width: 312px;
  height: 175px; }

#hawkeye .classImg {
  top: -50px;
  right: -1px;
  width: 400px;
  height: 225px; }

#bard .classImg {
  top: 0;
  right: 30px;
  width: 350px;
  height: 395px; }

#warlord .classImg {
  top: -100px;
  right: -76px;
  width: 490px;
  height: 275px;
  top: 0;
  right: 0px;
  width: 312px;
  height: 175px; }

#berserker .classImg {
  top: -50px;
  right: -76px;
  width: 490px;
  height: 275px;
  right: 0px;
  width: 400px;
  height: 225px; }

#destroyer .classImg {
  top: -50px;
  right: -76px;
  width: 490px;
  height: 275px;
  right: 0px;
  width: 400px;
  height: 225px; }

#bard .className, #bard .classIcon {
  margin-left: 10px; }

#infighter .classImg {
  top: -100px;
  right: -1px; }

#lancemaster .classImg {
  top: -100px;
  left: 0; }

#lancemaster .classIcon {
  left: unset;
  right: 25%;
  -webkit-transform: translateX(25%);
  -ms-transform: translateX(25%);
  transform: translateX(25%); }

#lancemaster .className {
  left: unset;
  right: 23%;
  -webkit-transform: translateX(23%);
  -ms-transform: translateX(23%);
  transform: translateX(23%); }

#soulmaster .classImg {
  top: -100px;
  left: 0; }

#soulmaster .classIcon {
  left: unset;
  right: 25%;
  -webkit-transform: translateX(25%);
  -ms-transform: translateX(25%);
  transform: translateX(25%); }

#soulmaster .className {
  left: unset;
  right: 23%;
  -webkit-transform: translateX(23%);
  -ms-transform: translateX(23%);
  transform: translateX(23%); }

.sparkList {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 130%;
  height: 150%;
  pointer-events: none; }

.sparkList > div {
  position: absolute;
  display: inline-block;
  bottom: -100px;
  -webkit-animation: square ease infinite;
  animation: square ease infinite;
  z-index: 0;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  opacity: 0; }
  .sparkList > div .item {
    display: block;
    -webkit-animation: scale-spark 2s infinite;
    animation: scale-spark 2s infinite;
    background-repeat: no-repeat;
    width: 72px;
    height: 102px; }

.sparkList .animationSpark {
  left: 70%;
  -webkit-animation-duration: 5441ms;
  animation-duration: 5441ms;
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }
  .sparkList .animationSpark .item {
    background-image: url(/images/builder/arcana/death.png); }

.sparkList .animationSpark2 {
  left: 50%;
  -webkit-animation-duration: 2101ms;
  animation-duration: 2101ms;
  -webkit-animation-delay: 5s;
  animation-delay: 5s; }
  .sparkList .animationSpark2 .item {
    background-image: url(/images/builder/arcana/twistedfate.png); }

.sparkList .animationSpark3 {
  left: 65%;
  -webkit-animation: squarenew ease infinite;
  animation: squarenew ease infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-animation-duration: 3801ms;
  animation-duration: 3801ms;
  -webkit-animation-delay: 1s;
  animation-delay: 1s; }
  .sparkList .animationSpark3 .item {
    background-image: url(/images/builder/arcana/mania.png); }

.sparkList .animationSpark4 {
  left: 40%;
  -webkit-animation: squarenew ease infinite;
  animation: squarenew ease infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-animation-duration: 2801ms;
  animation-duration: 2801ms;
  -webkit-animation-delay: 2s;
  animation-delay: 2s; }
  .sparkList .animationSpark4 .item {
    background-image: url(/images/builder/arcana/balance.png); }

.sparkList.active > div {
  -webkit-animation-play-state: running !important;
  animation-play-state: running !important; }

.sparkList.visible > div {
  -webkit-animation: square ease infinite;
  animation: square ease infinite; }

.title {
  width: 990px;
  margin: 0 auto; }
  .title input {
    background: transparent;
    border-radius: 3px;
    padding: .7rem 1.4rem;
    width: 100%;
    font-size: 38px;
    font-weight: 500;
    line-height: 41px;
    height: 65px;
    border: unset;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    color: rgba(255, 255, 255, 0.9);
    -webkit-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease; }
    .title input:hover, .title input:focus {
      background-image: -o-linear-gradient(73deg, rgba(243, 248, 255, 0.03) 63.45%, rgba(207, 214, 229, 0.27) 98%);
      background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.03) 63.45%, rgba(207, 214, 229, 0.27) 98%);
      background-image: -o-linear-gradient(73deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%);
      background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%); }
    .title input::-webkit-input-placeholder {
      -webkit-transition: color 0.2s ease;
      transition: color 0.2s ease; }
    .title input::-moz-placeholder {
      -moz-transition: color 0.2s ease;
      transition: color 0.2s ease; }
    .title input:-ms-input-placeholder {
      -ms-transition: color 0.2s ease;
      transition: color 0.2s ease; }
    .title input::-ms-input-placeholder {
      -ms-transition: color 0.2s ease;
      transition: color 0.2s ease; }
    .title input::placeholder {
      -webkit-transition: color 0.2s ease;
      -o-transition: color 0.2s ease;
      transition: color 0.2s ease; }
    .title input.empty {
      color: #ff5157;
      -webkit-animation-name: empty;
      animation-name: empty;
      -webkit-animation-duration: .4s;
      animation-duration: .4s; }
      .title input.empty::-webkit-input-placeholder {
        color: #ff5157 !important; }
      .title input.empty::-moz-placeholder {
        color: #ff5157 !important; }
      .title input.empty:-ms-input-placeholder {
        color: #ff5157 !important; }
      .title input.empty::-ms-input-placeholder {
        color: #ff5157 !important; }
      .title input.empty::placeholder {
        color: #ff5157 !important; }

@-webkit-keyframes empty {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  15% {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-1deg);
    transform: translate3d(-1px, 0, 0) rotate(-1deg); }
  30% {
    -webkit-transform: translate3d(2px, 0, 0) rotate(1deg);
    transform: translate3d(2px, 0, 0) rotate(1deg); }
  45% {
    -webkit-transform: translate3d(-4px, 0, 0) rotate(-1deg);
    transform: translate3d(-4px, 0, 0) rotate(-1deg); }
  60% {
    -webkit-transform: translate3d(4px, 0, 0) rotate(0deg);
    transform: translate3d(4px, 0, 0) rotate(0deg); }
  75% {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-1deg);
    transform: translate3d(-1px, 0, 0) rotate(-1deg); }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }

@keyframes empty {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  15% {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-1deg);
    transform: translate3d(-1px, 0, 0) rotate(-1deg); }
  30% {
    -webkit-transform: translate3d(2px, 0, 0) rotate(1deg);
    transform: translate3d(2px, 0, 0) rotate(1deg); }
  45% {
    -webkit-transform: translate3d(-4px, 0, 0) rotate(-1deg);
    transform: translate3d(-4px, 0, 0) rotate(-1deg); }
  60% {
    -webkit-transform: translate3d(4px, 0, 0) rotate(0deg);
    transform: translate3d(4px, 0, 0) rotate(0deg); }
  75% {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-1deg);
    transform: translate3d(-1px, 0, 0) rotate(-1deg); }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }

#codex-editor {
  width: 990px;
  margin: 0 auto;
  margin-top: 10px; }
  #codex-editor .latree_button {
    margin-bottom: 20px; }
  #codex-editor .ce-toolbar__plus {
    color: #909498;
    -webkit-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out; }
    #codex-editor .ce-toolbar__plus:hover {
      color: #fff; }
  #codex-editor .ce-block--focused {
    background-image: -o-linear-gradient(73deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%);
    background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%); }
  #codex-editor .ce-block__content {
    padding: 0 1.4rem;
    max-width: 100% !important; }
    #codex-editor .ce-block__content h1, #codex-editor .ce-block__content h2, #codex-editor .ce-block__content h3, #codex-editor .ce-block__content h4, #codex-editor .ce-block__content h5, #codex-editor .ce-block__content h6 {
      color: #fff; }
    #codex-editor .ce-block__content .link-tool__input-holder .link-tool__input:before {
      top: -5px; }
    #codex-editor .ce-block__content table {
      margin: 0;
      border-collapse: separate; }
    #codex-editor .ce-block__content .tc-table__wrap, #codex-editor .ce-block__content .tc-table__cell {
      border: unset; }
    #codex-editor .ce-block__content .cdx-input {
      border: unset; }
    #codex-editor .ce-block__content .cdx-simple-image__caption,
    #codex-editor .ce-block__content .embed-tool__caption {
      display: none; }
    #codex-editor .ce-block__content blockquote {
      border: unset;
      font-style: unset; }
      #codex-editor .ce-block__content blockquote .cdx-input {
        border-radius: 5px;
        border: 1px solid rgba(243, 248, 255, 0.15);
        padding-top: 30px; }
        #codex-editor .ce-block__content blockquote .cdx-input.cdx-quote__caption {
          position: relative;
          padding-top: 10px; }
          #codex-editor .ce-block__content blockquote .cdx-input.cdx-quote__caption:before {
            top: 0; }
  #codex-editor .ce-block .ce-block__content .ce-header {
    padding: 22.5px 0; }
  #codex-editor .ce-block .ce-header {
    margin-bottom: 0em; }
  #codex-editor .ce-toolbar__content {
    max-width: 100% !important; }
  #codex-editor .ce-toolbox {
    display: none; }
  #codex-editor .ce-toolbox--opened {
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  #codex-editor .ce-toolbox__button {
    -webkit-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out; }
    #codex-editor .ce-toolbox__button--active, #codex-editor .ce-toolbox__button:hover {
      color: #fff; }
  #codex-editor .ce-toolbox__tooltip {
    -webkit-transform: translate3d(-50%, 37px, 0px) !important;
    transform: translate3d(-50%, 37px, 0px) !important;
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    #codex-editor .ce-toolbox__tooltip:before {
      background-color: rgba(0, 0, 0, 0.5); }
  #codex-editor .ce-toolbar__actions .ce-toolbar__settings-btn {
    color: #909498;
    -webkit-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out; }
    #codex-editor .ce-toolbar__actions .ce-toolbar__settings-btn:hover {
      color: #fff; }
  #codex-editor .ce-settings, #codex-editor .ce-conversion-toolbar {
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(3, 3, 3, 0.9); }
    #codex-editor .ce-settings:before, #codex-editor .ce-conversion-toolbar:before {
      background-color: rgba(0, 0, 0, 0.5); }
    #codex-editor .ce-settings .cdx-settings-button--active, #codex-editor .ce-conversion-toolbar .cdx-settings-button--active {
      color: #fff; }
  #codex-editor .ce-conversion-tool:hover {
    color: #fff !important; }
  #codex-editor .ce-conversion-tool--active {
    color: #fff !important; }
  #codex-editor .ce-settings__default-zone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  #codex-editor .ce-settings__button, #codex-editor .cdx-settings-button, #codex-editor .ce-conversion-tool {
    -webkit-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5); }
    #codex-editor .ce-settings__button:hover, #codex-editor .cdx-settings-button:hover, #codex-editor .ce-conversion-tool:hover {
      background: transparent;
      color: #fff; }
    #codex-editor .ce-settings__button.wobble, #codex-editor .cdx-settings-button.wobble, #codex-editor .ce-conversion-tool.wobble {
      color: #ff5157; }
  #codex-editor .cdx-settings-button[data-level="1"],
  #codex-editor .cdx-settings-button[data-level="5"],
  #codex-editor .cdx-settings-button[data-level="6"] {
    display: none; }
  #codex-editor .ce-inline-toolbar {
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    #codex-editor .ce-inline-toolbar:before {
      background-color: rgba(0, 0, 0, 0.5); }
    #codex-editor .ce-inline-toolbar .ce-inline-tool {
      color: #707684 !important;
      -webkit-box-shadow: unset  !important;
      box-shadow: unset  !important;
      letter-spacing: unset;
      padding: unset;
      -webkit-transition: color 0.2s ease;
      -o-transition: color 0.2s ease;
      transition: color 0.2s ease; }
      #codex-editor .ce-inline-toolbar .ce-inline-tool--active {
        color: #fff !important; }
      #codex-editor .ce-inline-toolbar .ce-inline-tool:hover {
        background: transparent;
        color: #fff !important; }
    #codex-editor .ce-inline-toolbar .ce-inline-tool-input {
      background: transparent;
      color: #707684;
      -webkit-transition: color 0.2s ease;
      -o-transition: color 0.2s ease;
      transition: color 0.2s ease;
      background-image: -o-linear-gradient(73deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%);
      background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%); }
      #codex-editor .ce-inline-toolbar .ce-inline-tool-input:hover, #codex-editor .ce-inline-toolbar .ce-inline-tool-input:focus {
        color: #fff; }

.codex-editor--toolbox-opened .ce-toolbox__tooltip {
  -webkit-transform: unset;
  -ms-transform: unset;
  transform: unset; }

.ct {
  z-index: 9999; }

.publishModal {
  padding: 0;
  border-radius: 8px;
  position: absolute;
  min-width: 60px;
  z-index: 110;
  font-size: 18px;
  background: rgba(3, 3, 3, 0.95);
  opacity: 0;
  will-change: transform;
  -webkit-transform: translateY(16px);
  -ms-transform: translateY(16px);
  transform: translateY(16px);
  pointer-events: none;
  display: none;
  -webkit-transition: opacity 150ms linear, -webkit-transform 150ms ease;
  transition: opacity 150ms linear, -webkit-transform 150ms ease;
  -o-transition: opacity 150ms linear, transform 150ms ease;
  transition: opacity 150ms linear, transform 150ms ease;
  transition: opacity 150ms linear, transform 150ms ease, -webkit-transform 150ms ease; }
  .publishModal.vis {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: translate(0) !important;
    -ms-transform: translate(0) !important;
    transform: translate(0) !important; }
  .publishModal:before {
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    top: -7px;
    left: 50%;
    margin-left: -7px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.7);
    left: 25px; }
  .publishModal-content .contentLayer {
    width: 320px;
    padding: 10px 20px 10px; }
    .publishModal-content .contentLayer-header {
      font-size: 18px;
      padding: 3px 0 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .publishModal-content .contentLayer-type {
      padding: 15px 0 5px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
    .publishModal-content .contentLayer .post_add_build {
      padding: 5px 0 25px; }
      .publishModal-content .contentLayer .post_add_build #add_build {
        width: 100%;
        margin-bottom: 10px; }
    .publishModal-content .contentLayer button {
      min-width: 100px;
      font-size: 1.4rem;
      background: black; }
      .publishModal-content .contentLayer button:hover {
        background-color: rgba(255, 255, 255, 0.03); }
    .publishModal-content .contentLayer-subheader {
      color: #707684;
      font-size: 16px;
      padding: 26px 0 0px;
      line-height: 1.4;
      display: none; }
    .publishModal-content .contentLayer-img {
      display: none;
      font-size: 16px;
      line-height: 1.4; }
      .publishModal-content .contentLayer-img a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        cursor: pointer;
        -webkit-transition: color 0.2s ease;
        -o-transition: color 0.2s ease;
        transition: color 0.2s ease; }
        .publishModal-content .contentLayer-img a:hover {
          color: white; }
      .publishModal-content .contentLayer-img input {
        display: none; }
    .publishModal-content .contentLayer-imgLoaded {
      width: 100%;
      height: 180px;
      position: relative;
      background-size: cover;
      background-position: 50%;
      border-radius: 4px;
      display: none !important; }
      .publishModal-content .contentLayer-imgLoaded .imgLoadedClose {
        width: 100%;
        cursor: pointer;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 3px 0;
        display: none;
        display: block;
        text-align: center; }
        .publishModal-content .contentLayer-imgLoaded .imgLoadedClose:hover {
          background-color: rgba(0, 0, 0, 0.85); }
    .publishModal-content .contentLayer-save {
      margin-top: 26px; }
      .publishModal-content .contentLayer-save #saveButton, .publishModal-content .contentLayer-save #editButton {
        background: black;
        --mdc-theme-primary: #20b2aa;
        font-size: 18px;
        margin: 0; }

input[pattern]:invalid {
  color: #ff5157;
  -webkit-box-shadow: 0 0 0 1px  #ff5157;
  box-shadow: 0 0 0 1px  #ff5157;
  background: rgba(255, 81, 87, 0.1); }

@-webkit-keyframes square {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); }
  70% {
    opacity: .85; }
  100% {
    -webkit-transform: translate(-200px, -200px) rotate(200deg);
    transform: translate(-200px, -200px) rotate(200deg);
    opacity: 0; } }

@keyframes square {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); }
  70% {
    opacity: .85; }
  100% {
    -webkit-transform: translate(-200px, -200px) rotate(200deg);
    transform: translate(-200px, -200px) rotate(200deg);
    opacity: 0; } }

@-webkit-keyframes squarenew {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); }
  70% {
    opacity: .85; }
  100% {
    -webkit-transform: translate(-200px, -200px) rotate(360deg);
    transform: translate(-200px, -200px) rotate(360deg);
    opacity: 0; } }

@keyframes squarenew {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); }
  70% {
    opacity: .85; }
  100% {
    -webkit-transform: translate(-200px, -200px) rotate(360deg);
    transform: translate(-200px, -200px) rotate(360deg);
    opacity: 0; } }

@-webkit-keyframes scale-spark {
  0% {
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); }
  50% {
    -webkit-transform: scale3d(0.55, 0.55, 1);
    transform: scale3d(0.55, 0.55, 1); }
  100% {
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); } }

@keyframes scale-spark {
  0% {
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); }
  50% {
    -webkit-transform: scale3d(0.55, 0.55, 1);
    transform: scale3d(0.55, 0.55, 1); }
  100% {
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); } }

/*~~~~~~~~~~~~~~~~~~Classselect page~~~~~~~~~~~~~~~~~~~~END*/
.dropdownLogged {
  position: absolute;
  z-index: 2202;
  right: 0; }
  .dropdownLogged:before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: -5px;
    right: 21px;
    right: 10px;
    margin-left: -5px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #6e0406;
    z-index: 10; }
  .dropdownLogged-content {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    display: block;
    position: relative;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6rem;
    max-width: 350px;
    max-height: 150px;
    /*background-color: #950005;
		background-color: #fff2;
		background-color: rgb(23, 34, 43);
		background: #10171ec7;
		background: #10171e;
		background: rgba(16, 23, 30, .3);*/
    background: rgba(147, 0, 0, 0.73);
    color: rgba(255, 255, 255, 0.7); }
  .dropdownLogged-header {
    padding: 16px 16px 4px; }
    .dropdownLogged-header .head {
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 8px;
      font-size: 1.6rem;
      font-weight: 500;
      line-height: 1.8rem; }
  .dropdownLogged-button {
    padding: 8px 4px 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-transform: uppercase; }
    .dropdownLogged-button .mdc-button:not(:disabled) {
      font-size: 1.6rem;
      min-width: 50px; }

.editor_help {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  background-image: url("/images/baseline_help_outline_white_18dp.png");
  background-position: 50%;
  background-repeat: no-repeat;
  opacity: 0.3;
  cursor: pointer;
  z-index: 150;
  -webkit-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out; }
  .editor_help:hover {
    opacity: 0.5; }

.editor_guide {
  position: fixed;
  z-index: 99999;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 0 0;
  -webkit-transform: translateY(60%);
  -ms-transform: translateY(60%);
  transform: translateY(60%);
  border-top: 1px solid rgba(3, 3, 3, 0.9);
  opacity: 0;
  background-color: rgba(3, 3, 3, 0.95);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0, 0, 0.2, 1);
  transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0, 0, 0.2, 1);
  -o-transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1), opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1), opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1), opacity 0.3s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0, 0, 0.2, 1);
  color: #ddd;
  -webkit-animation: editor_guide 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation: editor_guide 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

@-webkit-keyframes editor_guide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60%);
    transform: translateY(60%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes editor_guide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60%);
    transform: translateY(60%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
  .editor_guide__close {
    width: 30px;
    height: 30px;
    background-image: url("../../assets/img/baseline_close_white_18dp.png");
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 30px;
    opacity: 0.4;
    -webkit-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out; }
    .editor_guide__close:hover {
      opacity: 0.8; }
  .editor_guide__left, .editor_guide__right {
    width: 100px;
    height: 230px;
    background-repeat: no-repeat;
    background-position: 50%;
    position: absolute;
    cursor: pointer;
    opacity: 0.5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out; }
    .editor_guide__left:hover, .editor_guide__right:hover {
      opacity: 1; }
  .editor_guide__left {
    background-image: url("../../assets/img/baseline_arrow_back_ios_white_18dp.png");
    left: -80px; }
  .editor_guide__right {
    background-image: url("../../assets/img/baseline_arrow_forward_ios_white_18dp.png");
    right: -80px; }
  .editor_guide__tabs {
    height: 40px;
    font-size: 17px;
    margin-top: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .editor_guide__tab {
    display: inline-block;
    margin: 0 15px;
    opacity: 0.4;
    cursor: pointer;
    -webkit-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out; }
    .editor_guide__tab:hover {
      opacity: 0.6; }
    .editor_guide__tab.active {
      opacity: 1; }
  .editor_guide__slides {
    width: 950px;
    white-space: nowrap;
    overflow: hidden;
    height: 220px;
    position: relative; }
    .editor_guide__slides_wrap {
      width: 950px;
      position: relative; }
  .editor_guide .editor_guide__tab_more {
    display: none; }
  .editor_guide__slide {
    width: 950px;
    position: absolute;
    top: 0;
    left: 0;
    white-space: normal; }
    .editor_guide__slide_title {
      font-size: 22px;
      font-weight: 600;
      line-height: 1.4;
      color: #ccc;
      text-align: center;
      height: 56px; }
    .editor_guide__slide_inner {
      height: 164px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
      justify-content: space-evenly; }
      #slide_4 .editor_guide__slide_inner {
        padding-left: 80px; }
    .editor_guide__slide_image {
      text-align: center;
      opacity: .9; }
      .editor_guide__slide_image img {
        border-radius: 8px; }
        #slide_0 .editor_guide__slide_image img {
          margin-top: 10px;
          width: 387px;
          height: 130px; }
    .editor_guide__slide_subtitle {
      font-size: 16px;
      color: #828282;
      line-height: 1.38;
      text-align: center; }
    .editor_guide__slide_text {
      height: 164px;
      text-align: center; }
      #slide_4 .editor_guide__slide_text {
        line-height: 47px;
        text-align: left;
        display: inline-block; }
      #slide_2 .editor_guide__slide_text, #slide_5 .editor_guide__slide_text {
        font-size: 18px;
        line-height: 1.5; }
      #slide_2 .editor_guide__slide_text, #slide_5 .editor_guide__slide_text {
        margin-top: 40px; }
    .editor_guide__slide_skill {
      display: inline-block;
      width: 30%; }
      .editor_guide__slide_skill .primer {
        font-size: 16px;
        color: #828282;
        line-height: 1.38;
        text-align: center; }
    .editor_guide__slide__btn {
      background-color: #ebedf0;
      padding: 12px;
      color: rgba(0, 0, 0, 0.75);
      color: #ccc;
      font-size: 12px;
      border-radius: 8px;
      text-transform: capitalize;
      min-width: 17px;
      display: inline-block;
      line-height: 4px;
      text-align: center;
      margin: 0 5px;
      background-color: rgba(3, 3, 3, 0.7);
      border-color: rgba(3, 3, 3, 0.5);
      -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
      .editor_guide__slide__btn_row {
        width: 49%;
        font-size: 17px;
        display: inline-block; }
      .editor_guide__slide__btn_combination {
        font-family: Roboto;
        font-weight: 500;
        width: 145px;
        font-size: 14px;
        display: inline-block;
        white-space: nowrap; }
      .editor_guide__slide__btn_desc {
        line-height: 47px;
        text-align: left; }

.mainBuild {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: unset;
  letter-spacing: unset;
  font-family: El Messiri;
  padding: .3rem 1.4rem .7rem 1.4rem;
  margin: 0 0 10px; }

/*.content div:first-child h2{
	margin-top: 0 !important;
}*/
.emojiBlock {
  height: 180px;
  max-width: 473px;
  overflow: scroll;
  border-radius: 8px;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(3, 3, 3, 0.7);
  padding: 5px 15px;
  background-color: rgba(3, 3, 3, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .emojiBlock .emoji {
    cursor: pointer;
    line-height: 28px;
    margin: 2px 0 2px 4px; }

.emoji {
  display: inline-block;
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
  object-fit: contain;
  vertical-align: bottom; }
  .emoji img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    opacity: 0;
    -webkit-animation: img_op 1s ease-out forwards .1s;
    animation: img_op 1s ease-out forwards .1s; }
    .emoji img[alt] {
      text-indent: -9999px; }

.anchor_block {
  position: absolute;
  top: 0;
  left: -260px;
  display: block;
  width: 250px;
  height: 100%; }
  @media screen and (max-width: 900px) {
    .anchor_block {
      display: none; } }

.anchor_list {
  position: -webkit-sticky;
  position: sticky;
  overflow-x: hidden;
  top: 20px;
  padding: 20px 15px 19px;
  list-style: none;
  counter-reset: list 0;
  border-radius: 8px;
  margin: 0 !important;
  background: var(--post-bg-color);
  border-top: 2px solid #171f39; }

.anchor_item {
  font-family: Open sans;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin: 0 !important;
  margin-bottom: 9px !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
  color: var(--main-color);
  -webkit-transition: opacity 0.2s ease-in-out, color .3s ease;
  -o-transition: opacity 0.2s ease-in-out, color .3s ease;
  transition: opacity 0.2s ease-in-out, color .3s ease; }
  .anchor_item:last-child {
    margin-bottom: 0px !important; }
  .anchor_item:before {
    min-width: 29px;
    content: counter(list) ". ";
    counter-increment: list;
    color: #51d6ff;
    color: #b88b58;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px; }
  .anchor_item:hover {
    color: #b88b58; }

.content {
  font-size: 20px;
  line-height: 1.7;
  word-wrap: break-word;
  width: 100%;
  background: rgba(3, 3, 3, 0.3);
  background: var(--post-bg-color);
  padding: 70px 0;
  font-family: Roboto;
  font-weight: 400;
  -webkit-transition: background .3s ease;
  -o-transition: background .3s ease;
  transition: background .3s ease;
  color: var(--main-color);
  max-width: calc(100% - 260px);
  margin-left: auto; }
  .content--center {
    margin: 0 auto 10px; }
  @media screen and (max-width: 900px) {
    .content {
      max-width: 100%; } }
  .content .layout {
    padding: 0 16px; }
  .content .layout, .content .layout_b {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin: 0 130px;
    max-width: 782px;
    margin: 0 auto; }
    .content .layout:first-child h2,
    .content .layout:first-child h3,
    .content .layout:first-child h4, .content .layout_b:first-child h2,
    .content .layout_b:first-child h3,
    .content .layout_b:first-child h4 {
      margin-top: 0 !important; }
  .content .layout_b {
    margin: 0;
    max-width: unset; }
  .content a {
    color: var(--a-color); }
    .content a:hover {
      color: var(--a-hover-color); }
  .content p {
    margin: 15px 0; }
  .content h2, .content h3, .content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-family: Roboto;
    font-size: 30px;
    line-height: 38px;
    font-weight: 700; }
  .content h3 {
    font-size: 24.5px;
    line-height: 30.5px; }
  .content h4 {
    font-size: 21px;
    line-height: 28px; }
  .content ul, .content ol {
    margin: 15px 0;
    list-style: disc;
    list-style-position: outside; }
    .content ul li, .content ol li {
      margin: 10px 0 10px 36px;
      word-wrap: break-word; }
  .content ol {
    list-style-type: decimal; }
  .content table {
    margin: 15px 0; }
    .content table tr:hover td {
      color: rgba(255, 255, 255, 0.9); }
    .content table thead th {
      color: rgba(255, 255, 255, 0.9);
      white-space: nowrap; }
    .content table td {
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      color: #8787b3; }
  .content .warning {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 15px 0;
    background: rgba(3, 3, 3, 0.7);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 15px 25px; }
    .content .warning i {
      color: #ff5157;
      display: none; }
    .content .warning_title {
      margin: 0;
      font-weight: 700;
      color: #ff5157; }
    .content .warning_message {
      -webkit-box-flex: 100%;
      -ms-flex: 100%;
      flex: 100%; }
  .content blockquote {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: rgba(3, 3, 3, 0.7);
    background: var(--blockquote-bg);
    -webkit-box-shadow: var(--blockquote-shadow);
    box-shadow: var(--blockquote-shadow);
    padding: 35px 0 40px; }
    .content blockquote .blockquote_content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      margin: auto;
      overflow: hidden;
      margin: 0 230px; }
      .content blockquote .blockquote_content .blockquote_text {
        font-size: 22px;
        font-weight: 400;
        line-height: 36px; }
        .content blockquote .blockquote_content .blockquote_text p {
          margin: 0; }
      .content blockquote .blockquote_content .blockquote_autor {
        margin: 10px 0; }
        .content blockquote .blockquote_content .blockquote_autor__name {
          font-weight: 600;
          font-size: 18px;
          line-height: 25px; }
  .content .link {
    display: block;
    background: rgba(3, 3, 3, 0.7);
    border: 1px solid rgba(3, 3, 3, 0.7);
    background: var(--link-bg-color);
    border: 1px solid var(--link-border-color);
    -webkit-box-shadow: var(--link-shadow);
    box-shadow: var(--link-shadow);
    border-radius: 8px;
    color: #000 !important;
    min-height: 68px;
    min-height: 105px;
    max-width: 1000px;
    padding: 11px 16px;
    -webkit-transition: all ease-in .2s;
    -o-transition: all ease-in .2s;
    transition: all ease-in .2s; }
    .content .link a {
      color: var(--link-text-color); }
    .content .link:hover {
      background: #030303;
      background: var(--link-bg-hover-color);
      -webkit-box-shadow: var(--link-shadow-hover);
      box-shadow: var(--link-shadow-hover); }
      .content .link:hover a {
        color: var(--link-text-color); }
    .content .link_content {
      color: rgba(255, 255, 255, 0.9);
      color: var(--link-text-color); }
    .content .link_image {
      background-position: center center;
      background-repeat: no-repeat;
      width: 65px;
      height: 65px;
      border-radius: 5px;
      float: right;
      margin-left: 30px;
      margin-top: 9px;
      background-color: transparent !important; }
    .content .link_title {
      font-size: 18px;
      line-height: 26px;
      font-weight: 600;
      margin-bottom: 2px;
      padding-right: 94px;
      word-wrap: break-word; }
    .content .link_description {
      font-size: 15px;
      line-height: 22px;
      overflow: hidden;
      padding-right: 94px;
      word-wrap: break-word;
      margin: 0 0 7px 0; }
    .content .link_hostname {
      display: block;
      font-size: 12px;
      line-height: 17px;
      color: #818181;
      text-transform: uppercase;
      border: 0 !important;
      padding: 0 !important;
      padding-right: 94px;
      word-wrap: break-word; }
  .content .block-delimiter:before {
    display: block;
    content: '***';
    font-size: 36px;
    line-height: 1;
    height: 21.6px;
    letter-spacing: .2em;
    text-align: center; }
  .content_image {
    position: relative; }
    .content_image img {
      overflow: hidden;
      display: block;
      max-width: 100%;
      margin: 0 auto; }
    .content_image--with-border {
      border: 1px solid #e8e8eb;
      padding: 1px;
      border: 1px solid rgba(3, 3, 3, 0.7); }
    .content_image--stretched img {
      max-width: none;
      width: 100%; }
    .content_image--with-background {
      background: rgba(3, 3, 3, 0.7);
      background: var(--blockquote-bg);
      padding: 10px;
      padding: 30px; }
      .content_image--with-background img {
        display: block;
        max-width: 60%; }
  .content .videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0; }
    .content .videoWrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .content figcaption {
    margin-top: 15px;
    font-size: 15px;
    line-height: 21.75px;
    display: block;
    margin: 0 auto;
    display: none; }
  .content figure {
    margin: 0;
    margin-bottom: 30px; }
    .content figure:not(:first-child) {
      margin-top: 30px; }

.comments {
  /*@extend %item_css;*/
  line-height: 1.7;
  width: 100%;
  background: rgba(3, 3, 3, 0.3);
  font-family: Roboto;
  font-weight: 400; }
  .comments .icon, .comments .embed, .comments .icon_name {
    pointer-events: none; }
  .comments_component {
    position: relative; }
  .comments_list {
    margin-bottom: 20px;
    padding: 0 25px;
    padding-top: 25px; }
    @media screen and (max-width: 515px) {
      .comments_list {
        padding: 20px 0 0; } }
  .comments_count {
    font-size: 24px;
    line-height: 33px;
    margin-bottom: 16px; }
    @media screen and (max-width: 515px) {
      .comments_count {
        padding: 0 10px; } }
  .comments .comment {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: rgba(3, 3, 3, 0.3);
    border-radius: 16px;
    padding: 15px 25px;
    margin-bottom: 10px; }
    @media screen and (max-width: 515px) {
      .comments .comment {
        padding: 15px 10px;
        border-radius: 0; } }
    .comments .comment:hover .reply {
      opacity: 1; }
    .comments .comment .user_avatar {
      position: relative;
      width: 64px;
      height: 64px;
      margin-right: 24px;
      border-radius: 4px;
      overflow: hidden; }
      .comments .comment .user_avatar img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover; }
    .comments .comment_content {
      position: relative;
      width: 100%;
      max-width: calc(100% - 88px); }
      .comments .comment_content .rate {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        display: none; }
    .comments .comment_head {
      margin-bottom: 4px;
      font-family: Open Sans;
      font-weight: 500;
      font-size: 14px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .comments .comment_head .reply {
        margin-left: 20px;
        opacity: 0;
        -webkit-transition: opacity .2s ease;
        -o-transition: opacity .2s ease;
        transition: opacity .2s ease;
        cursor: pointer; }
    .comments .comment_info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: baseline;
      -ms-flex-align: baseline;
      align-items: baseline; }
    .comments .comment_number {
      margin-right: 8px;
      color: #52709c;
      color: #b88b58;
      cursor: pointer; }
    .comments .comment_author {
      letter-spacing: .08em; }
      .comments .comment_author[data-supporter="1"] {
        color: #d0f4a1; }
    .comments .comment_date {
      color: #768ba9;
      margin-left: 12px;
      color: #9ca3af; }
    .comments .comment_body {
      word-wrap: break-word;
      font-size: 16px;
      line-height: 1.5;
      margin: 0; }
      .comments .comment_body .icon_name {
          margin-bottom: 0; }
      .comments .comment_body .icon_name br {
          display: none; }
      .comments .comment_body img:not(.emoji) {
        max-width: 500px;
        padding: 5px; }
        @media screen and (max-width: 675px) {
          .comments .comment_body img:not(.emoji) {
            max-width: 100%; } }
      .comments .comment_body p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0; }
      .comments .comment_body blockquote {
        position: relative;
        background: rgba(3, 3, 3, 0.7);
        background: var(--blockquote-bg);
        -webkit-box-shadow: var(--blockquote-shadow);
        box-shadow: var(--blockquote-shadow);
        padding: 0 8px 0 20px;
        margin-bottom: 6px; }
        .comments .comment_body blockquote:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          background: #fff;
          background: #4f545c;
          background: #b88b58;
          width: 4px;
          border-radius: 2px; }
  .comments_send {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 2;
    border-top: 2px solid #171f39;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background: rgba(3, 3, 3, 0.3);
    font-size: 16px;
    background: #060910; }
    .comments_send textarea {
      border-radius: 0px !important;
      font-family: Open sans;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      min-height: 125px;
      padding: unset;
      resize: vertical;
      padding: 15px 25px;
      border-bottom: unset;
      -webkit-transition: unset;
      -o-transition: unset;
      transition: unset;
      background: rgba(3, 3, 3, 0.4);
      background: #05060b; }
    .comments_send .rightBlock {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 8px; }
      .comments_send .rightBlock .controls {
        margin: 8px 0;
        width: 30px; }
        .comments_send .rightBlock .controls .active {
          opacity: 1;
          fill: rgba(255, 255, 255, 0.9); }
        .comments_send .rightBlock .controls div {
          width: 30px;
          height: 30px;
          background: no-repeat 50% / contain;
          opacity: 0.7;
          cursor: pointer;
          fill: #768ba9;
          margin-bottom: 8px;
          -webkit-transition: opacity .2s ease, fill .2s ease;
          -o-transition: opacity .2s ease, fill .2s ease;
          transition: opacity .2s ease, fill .2s ease; }
          .comments_send .rightBlock .controls div:hover {
            opacity: 1;
            fill: rgba(255, 255, 255, 0.9); }
        .comments_send .rightBlock .controls .image {
          display: none; }
    .comments_send .commentActions {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 10px 15px; }
      .comments_send .commentActions #gSignIn {
        margin-left: 20px; }
      .comments_send .commentActions .lengthCounter {
        font-family: Open Sans;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 15px;
        padding-top: 3px;
        padding: 6px 8px;
        height: 36px;
        min-width: 38px;
        text-align: center;
        display: block;
        line-height: 24px;
        border-radius: 5px;
        background: #506558;
        background: rgba(5, 85, 0, 0.36); }
        .comments_send .commentActions .lengthCounter.negative {
          background: rgba(117, 13, 13, 0.35); }
      .comments_send .commentActions .latree_button {
        font-family: Open Sans;
        font-weight: 500;
        text-transform: uppercase;
        background: rgba(3, 3, 3, 0.9);
        margin-left: 4px;
        letter-spacing: .05em; }
        .comments_send .commentActions .latree_button:disabled {
          background: black; }
        .comments_send .commentActions .latree_button span {
          padding-top: unset;
          font-size: 12px;
          color: var(--mdc-theme-primary, #6200ee) !important; }
      .comments_send .commentActions__help {
        margin-left: auto !important; }
        .comments_send .commentActions__help span {
          font-size: 12px !important; }

#next_bg {
  display: none; }

.home {
  margin: 0 auto;
  z-index: 2;
  position: relative; }

.la_container {
  max-width: 126rem;
  margin: 0 auto;
  margin-bottom: 20px; }
  .la_container__first {
    display: grid;
    grid-template-columns: 2fr 250px 1fr;
    grid-gap: 1rem;
    height: 254px; }

.squareLink {
  display: block; }
  .squareLink_item {
    width: 100%;
    background: rgba(3, 3, 3, 0.6);
    padding: 10px 16px;
    border-radius: 4px;
    -webkit-transition: background .3s ease;
    -o-transition: background .3s ease;
    transition: background .3s ease;
    height: 210px;
    position: relative; }
    .squareLink_item:hover {
      background: rgba(3, 3, 3, 0.9); }
  .squareLink a {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400; }
    .squareLink a .text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: absolute;
      top: 40%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-40%);
      -ms-transform: translateX(-50%) translateY(-40%);
      transform: translateX(-50%) translateY(-40%);
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%; }
    .squareLink a .f {
      display: block;
      color: #fcc500; }
    .squareLink a .a {
      font-weight: 400;
      margin-left: -8px; }
    .squareLink a .t {
      color: #fff;
      display: block;
      letter-spacing: .1em;
      margin-left: 4px; }
    .squareLink a .d {
      position: absolute;
      top: 60%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-60%);
      -ms-transform: translateX(-50%) translateY(-60%);
      transform: translateX(-50%) translateY(-60%);
      /*width: 150px;
			height: 51px;*/
      width: 130px;
      height: 32px; }
    .squareLink a span {
      text-transform: uppercase;
      text-align: center;
      font-size: 30px;
      font-weight: 700;
      line-height: 1; }

.friendLink {
  display: block;
  padding-top: 44px; }
  .friendLink .first {
    grid-area: first; }
  .friendLink .second {
    grid-area: second; }
  .friendLink_list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 45px 45px 45px 45px;
    grid-gap: 1rem;
    grid-template-areas: "first" 
 "first"
 "second" 
 "second"; }
  .friendLink span {
    text-transform: uppercase;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: center;
    width: 100%; }
  .friendLink .offsite span {
    color: #fcc500; }
  .friendLink .promotion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem; }
    .friendLink .promotion div {
      width: 100%;
      background: rgba(3, 3, 3, 0.6);
      padding: 10px 16px;
      border-radius: 4px; }
  .friendLink_item {
    width: 100%;
    background: rgba(3, 3, 3, 0.6);
    padding: 10px 16px;
    margin-bottom: 10px;
    border-radius: 4px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .friendLink_item:hover {
      background: rgba(3, 3, 3, 0.9); }
  .friendLink a {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400; }
  .friendLink img {
    height: 20px;
    vertical-align: middle;
    margin-right: 1rem; }

.lastBuild h3,
.la_container h3 {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 22px; }

.la_container .more {
  font-weight: 400;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 .5rem; }
  .la_container .more:hover {
    color: rgba(255, 255, 255, 0.9); }

.buildList {
  display: block; }
  .buildList_item {
    width: 100%;
    background: rgba(3, 3, 3, 0.6);
    padding: 10px 16px;
    margin-bottom: 10px;
    border-radius: 4px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .buildList_item:hover {
      background: rgba(3, 3, 3, 0.9); }
      .buildList_item:hover a {
        color: rgba(255, 255, 255, 0.9); }
    .buildList_item__title {
      white-space: nowrap;
      max-width: 500px;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis; }
    .buildList_item__img {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      height: 25px;
      width: 23px;
      margin-right: 1rem; }
    .buildList_item__name {
      color: rgba(255, 255, 255, 0.45); }
    .buildList_item__date {
      color: rgba(255, 255, 255, 0.45);
      text-transform: uppercase;
      font-weight: 500;
      font-family: Open Sans;
      letter-spacing: .08em;
      font-size: 14px;
      margin-left: 10px; }
    .buildList_item__left {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      overflow: hidden; }
    .buildList_item img {
      height: 23px; }
    .buildList_item a {
      font-size: 16px;
      line-height: 1.5;
      font-family: Open Sans;
      font-weight: 400;
      font-weight: 500;
      letter-spacing: .04em;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      color: rgba(255, 255, 255, 0.7);
      width: 100%;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }

.mailNews {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .mailNews_item {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: 0 1px 8px -4px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 8px -4px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    overflow: hidden;
    margin: 0 5px;
    display: block;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
    .mailNews_item:nth-child(1) {
      margin-left: 0; }
    .mailNews_item:nth-child(3) {
      margin-right: 0; }
  .mailNews_img {
    width: 100%;
    min-width: 100%;
    height: 160px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; }
  .mailNews_details {
    width: 100%;
    padding: 5px 5px 4px;
    display: block; }
  .mailNews_category {
    color: #fff;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 4px;
    position: absolute;
    background: rgba(3, 3, 3, 0.7);
    padding: 4px 8px;
    border-radius: 4px;
    top: 5px; }
  .mailNews_title {
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    line-height: 19px; }
  .mailNews_description {
    font-size: 13px;
    color: #1A1A1A;
    line-height: 17px;
    display: none; }
  .mailNews_date {
    font-size: 12px;
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
    line-height: 16px; }

.siteFunction {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem; }
  @media screen and (max-width: 800px) {
    .siteFunction {
      grid-template-columns: 1fr; } }
  .siteFunction_item {
    width: 100%;
    position: relative;
    border-radius: 8px;
    height: 300px;
    overflow: hidden; }
    @media screen and (max-width: 800px) {
      .siteFunction_item {
        height: 200px; } }
    .siteFunction_item:first-child {
      background: url(/images/bg/16.jpg);
      background-position-x: -116px;
      background-position-y: 2px;
      background-size: cover;
      background-repeat: no-repeat; }
      @media screen and (max-width: 800px) {
        .siteFunction_item:first-child {
          background-position: 50% 50%; } }
    .siteFunction_item:nth-child(2) {
      background: url(/images/bg/53.jpg);
      background-position: 50% 64%;
      background-size: cover;
      background-repeat: no-repeat; }
    .siteFunction_item:before {
      content: "";
      display: block;
      position: absolute;
      top: 25%;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      opacity: .5;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(transparent));
      background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.6), transparent);
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent); }
    .siteFunction_item:hover:before {
      opacity: 0; }
    .siteFunction_item .dataLink {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      position: absolute;
      left: 50%;
      top: 171px;
      z-index: 5;
      height: 130px;
      width: 100%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
      @media screen and (max-width: 400px) {
        .siteFunction_item .dataLink {
          top: 60%;
          height: 100px; }
          .siteFunction_item .dataLink a {
            height: 100px; } }
      .siteFunction_item .dataLink a {
        height: 130px;
        line-height: 130px;
        width: 100%;
        opacity: .7;
        position: relative;
        font-size: 20px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.9);
        padding-top: 40px;
        text-align: center;
        -webkit-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s;
        cursor: pointer;
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(transparent));
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.9), transparent);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent); }
        @media screen and (max-width: 400px) {
          .siteFunction_item .dataLink a {
            font-size: 15px; } }
        .siteFunction_item .dataLink a:hover {
          opacity: 1; }
        .siteFunction_item .dataLink a:before {
          content: "";
          position: absolute;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          top: 20px;
          width: 64px;
          height: 64px;
          display: inline-block;
          background: url(/images/data_analysis_icon.png) no-repeat 100% 0; }
        .siteFunction_item .dataLink a:nth-child(1):before {
          background-position: 0px -128px; }
        .siteFunction_item .dataLink a:nth-child(2):before {
          background-position: 0px 0px; }
        .siteFunction_item .dataLink a:nth-child(2):hover:before {
          background-position: -64px 0px; }
        .siteFunction_item .dataLink a:nth-child(3):before {
          background-position: 0px -64px; }
        .siteFunction_item .dataLink a:nth-child(3):hover:before {
          background-position: -64px -64px; }
    .siteFunction_item h3 {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      font-size: 50px;
      text-transform: uppercase;
      line-height: 50px;
      font-weight: 500;
      letter-spacing: .08em;
      z-index: 5;
      width: 100%;
      text-align: center;
      color: rgba(255, 255, 255, 0.9);
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      @media screen and (max-width: 400px) {
        .siteFunction_item h3 {
          font-size: 30px; } }
    .siteFunction_item img {
      width: 100%;
      height: 100%; }

.class_link {
  margin-top: 40px;
  margin-bottom: 30px;
  position: relative;
  height: 395px;
  background-color: #000;
  overflow: hidden; }
  .class_link:hover .class_link__background--active {
    opacity: 1 !important; }
  @media screen and (max-width: 1000px) {
    .class_link {
      display: none; } }
  .class_link h2 {
    position: absolute;
    left: 0;
    top: 80px;
    top: 50px;
    z-index: 5;
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: TrajanR;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.9); }
  .class_link__background {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-filter: blur(3px);
    filter: blur(3px); }
    .class_link__background--active {
      -webkit-transition: opacity 1s;
      -o-transition: opacity 1s;
      transition: opacity 1s;
      z-index: 3;
      opacity: .8;
      visibility: visible; }
  .class_link__background0 {
    background-image: url(../../assets/img/classesbg.jpg); }
  .class_link__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 210px;
    z-index: 5;
    width: 1260px;
    margin-left: -630px; }
    .class_link__items span {
      height: 185px;
      line-height: 185px;
      width: 100%;
      opacity: .5;
      position: relative;
      font-size: 30px;
      font-weight: 600;
      font-family: TrajanR;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, 0.9);
      padding-top: 40px;
      text-align: center;
      -webkit-transition: opacity .5s;
      -o-transition: opacity .5s;
      transition: opacity .5s;
      cursor: pointer; }
      .class_link__items span:before {
        content: "";
        position: absolute;
        left: 50%;
        display: inline-block;
        background: url(/images/sprite_information2.png) no-repeat 0 0;
        background-size: 1294px 1186px; }
      .class_link__items span:nth-child(1):before {
        top: 22px;
        margin-left: -51px;
        width: 103px;
        height: 76px;
        background-position: -754px -174px; }
      .class_link__items span:nth-child(2):before {
        top: 6px;
        margin-left: -45px;
        width: 89px;
        height: 89px;
        background-position: -1137px -203px; }
      .class_link__items span:nth-child(3):before {
        top: 0;
        margin-left: -47px;
        width: 94px;
        height: 92px;
        background-position: -781px -748px; }
      .class_link__items span:nth-child(4):before {
        top: 0;
        margin-left: -47px;
        width: 94px;
        height: 98px;
        background-position: -686px -748px; }
      .class_link__items span:nth-child(5):before {
        top: 0;
        margin-left: -52px;
        width: 101px;
        height: 95px;
        background-position: -778px -461px; }
    .class_link__items--active {
      opacity: 1 !important; }
  .class_link__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50px;
    width: 1260px;
    margin-left: -630px;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    -webkit-transition: opacity 330ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 330ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    -o-transition: opacity 330ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 330ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 330ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity, transform;
    -webkit-transform: translate3d(0, -60px, 0) rotate(0.001deg);
    transform: translate3d(0, -60px, 0) rotate(0.001deg); }
    .class_link__wrapper--active {
      opacity: 1;
      visibility: visible;
      z-index: 5;
      -webkit-transform: translateZ(0) rotate(0.001deg) !important;
      transform: translateZ(0) rotate(0.001deg) !important; }
    .class_link__wrapper a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 10px;
      text-align: center;
      -webkit-filter: grayscale(100%) brightness(80%);
      filter: grayscale(100%) brightness(80%);
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      border-bottom: unset;
      font-size: 17px;
      font-weight: 500;
      font-family: TrajanR;
      letter-spacing: .08em;
      min-width: 190px; }
      .class_link__wrapper a img {
        -webkit-animation: imgIn .5s ease forwards;
        animation: imgIn .5s ease forwards;
        opacity: 0;
        width: 65px;
        margin-bottom: 5px; }
      .class_link__wrapper a p {
        color: #ddd;
        margin: 0; }
      .class_link__wrapper a:hover {
        -webkit-filter: grayscale(0) brightness(100%);
        filter: grayscale(0) brightness(100%); }

#post_1 {
  grid-area: a; }

#post_2 {
  grid-area: b; }
  #post_2 h4 {
    font-size: 18px; }

#post_3 {
  grid-area: g; }
  #post_3 h4 {
    font-size: 18px; }

#post_4 {
  grid-area: d; }

#post_5 {
  grid-area: s; }

.postList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 170px 170px 130px 130px;
  grid-gap: 1rem;
  /*grid-template-areas: 
		"a a a b b" 
		"a a a b b" 
		"d d g g g" 
		"s s g g g";
	grid-template-areas: 
		"a a a b b" 
		"a a a b b" 
		"g g d d d" 
		"g g s s s";*/
  grid-template-areas: "a a a b b" 
 "a a a g g" 
 "d d s s s" 
 "d d s s s"; }
  .postList_item {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 100%;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 15px;
    border-radius: 8px; }
    .postList_item:before {
      content: "";
      display: block;
      position: absolute;
      top: 25%;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      opacity: .5;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(transparent));
      background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.9), transparent);
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent);
      pointer-events: none; }
    .postList_item:hover:before {
      opacity: .8; }
    .postList_item__thumbnail {
      height: 100%; }
      .postList_item__thumbnail img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover; }
    .postList_item__Info {
      position: absolute;
      left: 0;
      bottom: 0px;
      padding: 0 15px 15px;
      width: 100%;
      z-index: 2;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 400;
      max-height: 105px;
      overflow: hidden; }
      .postList_item__Info h4 {
        color: rgba(255, 255, 255, 0.8);
        font-size: 20px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1.3;
        word-wrap: break-word;
        -webkit-transition: color .2s ease;
        -o-transition: color .2s ease;
        transition: color .2s ease;
        margin-bottom: 5px;
        text-transform: unset; }
      .postList_item__Info .date {
        font-size: 12px;
        line-height: 1;
        font-weight: 400;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        color: rgba(255, 255, 255, 0.4);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
    .postList_item__tag {
      color: #fff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      margin-bottom: 6px;
      font-size: 12px;
      line-height: 14px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #b88b58;
      font-weight: 600; }

.bluepostButton {
  margin-bottom: 20px; }
  .bluepostButton .latree_button {
    background: rgba(255, 255, 255, 0.1); }
    .bluepostButton .latree_button img {
      width: 21px;
      height: 21px;
      margin-right: 10px; }

.bluepost_item {
  background: rgba(3, 3, 3, 0.6);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  -webkit-transition: border .3s ease;
  -o-transition: border .3s ease;
  transition: border .3s ease;
  border: 1px solid black;
  overflow: hidden; }
  .bluepost_item a {
    height: 100%;
    display: block; }
  .bluepost_item:hover {
    border: 1px solid rgba(0, 174, 255, 0.45); }
  .bluepost_item .bluepostHeader {
    padding: 15px 15px 0;
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    overflow: hidden;
    background: rgba(3, 3, 3, 0.8); }
    .bluepost_item .bluepostHeader h4 {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: .02em;
      line-height: 1.3;
      word-wrap: break-word;
      -webkit-transition: color .2s ease;
      -o-transition: color .2s ease;
      transition: color .2s ease;
      margin-bottom: 10px;
      text-transform: unset; }
    .bluepost_item .bluepostHeader .date {
      font-size: 12px;
      line-height: 1;
      font-weight: 400;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      color: rgba(255, 255, 255, 0.4);
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
  .bluepost_item__tag {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b88b58;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .bluepost_item__content {
    padding: 8px 015px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.56;
    word-wrap: break-word;
    margin-bottom: 10px;
    text-transform: unset;
    height: 100%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis; }

#postList_1 {
  grid-area: a; }

#postList_2 {
  grid-area: b; }

#postList_3 {
  grid-area: c; }

#postList_4 {
  grid-area: d; }

#postList_5 {
  grid-area: e; }

#postList_6 {
  grid-area: s; }

#postList_7 {
  grid-area: g; }

#postList_8 {
  grid-area: y; }

#postList_9 {
  grid-area: u; }

.newsList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 320px 360px 500px 360px;
  grid-gap: 1rem;
  grid-template-areas: "a a a a b b" 
 "c c c d d d" 
 "e e s s g g"
 "y y y u u u";
  margin-bottom: 10px; }

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 50px; }
  .pagination .pagination_item {
    border-radius: 5px;
    margin: 0 .3rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .pagination .pagination_item div {
      min-width: 36px; }
  .pagination .active div {
    background-color: rgba(3, 3, 3, 0.5);
    pointer-events: none; }
  .pagination .active {
    pointer-events: none; }
  .pagination_next div, .pagination_prev div {
    min-width: 40px; }
    .pagination_next div span, .pagination_prev div span {
      background-repeat: no-repeat;
      background-position: 50%;
      cursor: pointer;
      opacity: 0.5;
      -webkit-transition: opacity 0.2s ease-in-out;
      -o-transition: opacity 0.2s ease-in-out;
      transition: opacity 0.2s ease-in-out;
      width: 36px;
      height: 36px;
      background-size: contain; }
  .pagination_next:hover div span, .pagination_prev:hover div span {
    opacity: 1; }
  .pagination .disabled {
    display: none; }
  .pagination_prev div span {
    background-image: url("../../assets/img/baseline_arrow_back_ios_white_18dp.png");
    margin-left: 7px; }
  .pagination_next div span {
    background-image: url("../../assets/img/baseline_arrow_forward_ios_white_18dp.png");
    margin-right: 7px; }

.blockADS {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em; }
  .blockADS > div {
    width: 100%;
    padding: 10px 15px;
    text-align: center; }
    .blockADS > div:first-child {
      background: #1E439B;
      background: black;
      text-transform: uppercase; }
    .blockADS > div:nth-child(2) {
      background: #4f74c8;
      background: rgba(3, 3, 3, 0.1);
      color: #f6f6f6;
      font-size: 12px;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
  .blockADS a {
    width: 100%; }
  .blockADS .latree_button {
    width: 100%;
    --mdc-theme-primary:  rgba(255, 255, 255, 0.9);
    color: #555;
    color: #b2aea5;
    color: rgba(255, 255, 255, 0.6);
    font-size: 9px;
    text-transform: uppercase;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    -webkit-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease; }
    .blockADS .latree_button span {
      font-size: 14px; }
    .blockADS .latree_button:hover {
      color: rgba(255, 255, 255, 0.9); }

.supporter_form {
  position: relative;
  /*background-image: url(/images/supporter.png);
		background-repeat: no-repeat;
		border-radius: 20px;*/
  width: 100%;
  padding: 270px 400px 40px;
  padding: 270px 350px 40px 430px;
  margin: 0 0 20px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .supporter_form .mdc-form-field {
    --mdc-theme-secondary: #a82b2b;
    margin-bottom: 20px;
    width: 100%; }
  .supporter_form label {
    color: #fff;
    cursor: pointer; }
  .supporter_form:before {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background: url(/images/supporter.png) no-repeat 0 0;
    width: 1280px;
    height: 850px;
    top: -200px;
    z-index: -1; }

.supporter .tabs .tabsHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.supporter .tabs .tabContent {
  margin-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .supporter .tabs .tabContent .tab {
    display: none; }
  .supporter .tabs .tabContent .active {
    display: block; }

.supporter .tabs .mdc-button.active {
  --mdc-theme-primary: #a82b2b;
  color: #a82b2b !important; }

.supporter_text {
  max-width: 1000px;
  margin: 0 auto;
  font-family: Roboto; }
  .supporter_text h1 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-family: Roboto;
    font-size: 30px;
    line-height: 38px;
    font-weight: 700; }

.lifeskills {
  background: rgba(3, 3, 3, 0.5);
  background: #06070c;
  min-height: 850px;
  position: relative; }
  .lifeskills .tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.5);
    height: 66px;
    margin-bottom: 10px; }
    .lifeskills .tabs .tab {
      border-radius: 0;
      width: 100%;
      height: 100%; }
      .lifeskills .tabs .tab .number {
        width: 0px;
        -webkit-transition: width .2s ease;
        -o-transition: width .2s ease;
        transition: width .2s ease;
        opacity: 0; }
        .lifeskills .tabs .tab .number.anim {
          opacity: 1;
          width: 25px;
          -webkit-transition: width .4s ease, opacity .3s ease .2s;
          -o-transition: width .4s ease, opacity .3s ease .2s;
          transition: width .4s ease, opacity .3s ease .2s; }
      .lifeskills .tabs .tab span {
        width: unset;
        -webkit-transition: color .2s ease;
        -o-transition: color .2s ease;
        transition: color .2s ease; }
      .lifeskills .tabs .tab.active {
        color: #b88b58 !important;
        --mdc-theme-primary: #b88b58 !important; }
  .lifeskills_tool {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 75px;
    right: 0;
    padding: 0 15px;
    font-size: 15px;
    text-transform: uppercase;
    opacity: 0;
    -webkit-transform: translateY(16px);
    -ms-transform: translateY(16px);
    transform: translateY(16px); }
    .lifeskills_tool div {
      margin-right: 10px; }
      .lifeskills_tool div:last-child {
        margin-right: 0px; }
    .lifeskills_tool span {
      font-size: 15px !important; }
    .lifeskills_tool #lifeskills_point {
      color: #b88b58;
      font-weight: 700;
      margin-left: 5px; }
    .lifeskills_tool #lifeskills_reset {
      color: #b88b58 !important;
      --mdc-theme-primary: #b88b58 !important; }
    .lifeskills_tool #lifeskills_reset_all {
      color: #ff5157 !important;
      --mdc-theme-primary: #ff5157 !important; }
  .lifeskills_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    bottom: 5px;
    right: -5px;
    padding: 0 15px;
    font-size: 15px;
    text-transform: uppercase;
    opacity: 0;
    -webkit-transform: translateY(16px);
    -ms-transform: translateY(16px);
    transform: translateY(16px); }
    .lifeskills_link .copied {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%); }
    .lifeskills_link div {
      margin-right: 10px; }
      .lifeskills_link div:last-child {
        margin-right: 0px; }
    .lifeskills_link span {
      font-size: 15px !important; }
    .lifeskills_link #lifeskills_publish {
      display: none; }
  .lifeskills .tabItem {
    display: grid;
    grid-template-columns: 150px 150px 1fr 220px;
    grid-gap: 1rem;
    padding: 44px 15px;
    display: none; }
    .lifeskills .tabItem.active {
      display: grid; }
  .lifeskills .lvlList {
    background: rgba(3, 3, 3, 0.5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    /*&:before{
			display: block;
			content: '';
			position: absolute;
			top: 20px;
			left: 50%;
			transform: translateX(-50%);
			width: 2px;
			height: 90%;
			background: #56504e;
		}*/ }
    .lifeskills .lvlList_item {
      width: 42px;
      height: 42px;
      color: transparent;
      font-size: 25px;
      line-height: 42px;
      color: #fff;
      text-align: center;
      z-index: 100;
      position: absolute;
      color: rgba(255, 255, 255, 0.8);
      font-family: TrajanB;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      .lifeskills .lvlList_item:after {
        content: "";
        position: absolute;
        left: 21px;
        top: 9px;
        width: 42px;
        height: 42px;
        background: -o-radial-gradient(0 0, circle, #009cde, #003087);
        background: radial-gradient(circle at 0 0, #009cde, #003087);
        background: -o-radial-gradient(0 0, circle, #0080a7a3, #003087);
        background: radial-gradient(circle at 0 0, #0080a7a3, #003087);
        /*radial-gradient(circle at 0 0, #0080a7, #06070c)*/
        background: -o-linear-gradient(225deg, #0085af, #06070c 50px);
        background: linear-gradient(-135deg, #0085af, #06070c 50px);
        background: -o-radial-gradient(center, circle, #0085af, #06070c);
        background: radial-gradient(circle at center, #0085af, #06070c);
        background: -o-radial-gradient(center, circle, #0085af, #000d11);
        background: radial-gradient(circle at center, #0085af, #000d11);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        transform-origin: 0 100%;
        z-index: -10;
        -webkit-filter: grayscale(100%) brightness(80%);
        filter: grayscale(100%) brightness(80%);
        -webkit-transition: -webkit-filter .2s ease;
        transition: -webkit-filter .2s ease;
        -o-transition: filter .2s ease;
        transition: filter .2s ease;
        transition: filter .2s ease, -webkit-filter .2s ease; }
      .lifeskills .lvlList_item[data-lvlline="0"] {
        top: 17px; }
      .lifeskills .lvlList_item[data-lvlline="1"] {
        top: 103px; }
      .lifeskills .lvlList_item[data-lvlline="2"] {
        top: 189px; }
        .lifeskills .lvlList_item[data-lvlline="2"]:before {
          height: 172px; }
      .lifeskills .lvlList_item[data-lvlline="4"] {
        top: 361px; }
        .lifeskills .lvlList_item[data-lvlline="4"]:before {
          height: 258px; }
      .lifeskills .lvlList_item[data-lvlline="7"] {
        top: 619px; }
        .lifeskills .lvlList_item[data-lvlline="7"]:before {
          display: none; }
      .lifeskills .lvlList_item.active {
        background-position: -42px -42px; }
        .lifeskills .lvlList_item.active:before {
          background: #355872;
          background: #0080a7a3; }
        .lifeskills .lvlList_item.active:after {
          -webkit-filter: grayscale(0%) brightness(100%);
          filter: grayscale(0%) brightness(100%); }
      .lifeskills .lvlList_item:before {
        display: block;
        content: '';
        position: absolute;
        top: 20px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 2px;
        height: 100px;
        z-index: -10;
        background: #56504e;
        -webkit-transition: background .2s ease;
        -o-transition: background .2s ease;
        transition: background .2s ease; }
  .lifeskills .needPoints {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 14px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .lifeskills .needPoints_top {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .lifeskills .needPoints_num {
      color: #b88b58;
      font-weight: 700;
      font-size: 16px; }
    .lifeskills .needPoints_text {
      margin-bottom: 10px; }
    .lifeskills .needPoints_buttons {
      display: none;
      margin-bottom: 10px; }
      .lifeskills .needPoints_buttons div {
        background: black; }
        .lifeskills .needPoints_buttons div span {
          font-size: 21px; }
    .lifeskills .needPoints_list__item {
      text-align: center;
      color: #555;
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      font-size: 15px; }
      .lifeskills .needPoints_list__item[data-lvlline="1"] {
        top: 108px; }
      .lifeskills .needPoints_list__item[data-lvlline="2"] {
        top: 194px; }
      .lifeskills .needPoints_list__item[data-lvlline="3"] {
        top: 365px; }
      .lifeskills .needPoints_list__item[data-lvlline="4"] {
        top: 624px; }
      .lifeskills .needPoints_list__item.active {
        color: rgba(255, 255, 255, 0.9); }
      .lifeskills .needPoints_list__item .red {
        color: #ff5157; }
      .lifeskills .needPoints_list__item.none {
        opacity: 0; }
  .lifeskills_item {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    background: rgba(3, 3, 3, 0.7);
    background: black;
    border-radius: 5px;
    width: 300px;
    height: 76px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 0.7rem 0.7rem 0.7rem 0.7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .lifeskills_item[data-lvl="0.5"] {
      position: absolute;
      top: 96px;
      top: 120px;
      margin-left: 350px; }
      .lifeskills_item[data-lvl="0.5"] .lifeskills_item_right:before {
        width: 50px; }
    .lifeskills_item[data-lvl="2"], .lifeskills_item[data-lvl="4"], .lifeskills_item[data-lvl="6"] {
      margin-left: 350px; }
      .lifeskills_item[data-lvl="2"] .lifeskills_item_right:before, .lifeskills_item[data-lvl="4"] .lifeskills_item_right:before, .lifeskills_item[data-lvl="6"] .lifeskills_item_right:before {
        width: 435px; }
    .lifeskills_item[data-next="18"] .lifeskills_item_right:after {
      display: block;
      content: '';
      position: absolute;
      top: 30px;
      left: calc(100% + 7px);
      width: 380px;
      height: 2px;
      background: #355872;
      -webkit-box-shadow: 0 516px 0 #355872;
      box-shadow: 0 516px 0 #355872;
      background: #0080a7a3;
      -webkit-box-shadow: 0 516px 0 #0080a7a3;
      box-shadow: 0 516px 0 #0080a7a3; }
    .lifeskills_item[data-req="12"] .lifeskills_item_right:after {
      display: block;
      content: '';
      position: absolute;
      bottom: 30px;
      right: -387px;
      width: 2px;
      height: 516px;
      background: #355872;
      background: #0080a7a3; }
    .lifeskills_item[data-req="12"] .lifeskills_item__bottom {
      position: relative; }
      .lifeskills_item[data-req="12"] .lifeskills_item__bottom:before {
        display: block;
        content: '';
        position: absolute;
        top: -10px;
        left: calc(100% - 8px);
        width: 0;
        height: 0;
        border-width: 10px 14px;
        border-style: solid;
        border-color: transparent;
        border-right-color: #355872;
        border-right-color: #005873; }
    .lifeskills_item[data-req="14"] .lifeskills_item_right:after, .lifeskills_item[data-req="24"] .lifeskills_item_right:after, .lifeskills_item[data-req="42"] .lifeskills_item_right:after, .lifeskills_item[data-req="45"] .lifeskills_item_right:after, .lifeskills_item[data-req="53"] .lifeskills_item_right:after, .lifeskills_item[data-req="63"] .lifeskills_item_right:after {
      display: block;
      content: '';
      position: absolute;
      bottom: calc(100% + 7px);
      left: calc(150px - 67px);
      width: 2px;
      height: 96px;
      background: #56504e;
      -webkit-transition: background .2s ease;
      -o-transition: background .2s ease;
      transition: background .2s ease; }
    .lifeskills_item[data-req="14"] .lifeskills_item__type, .lifeskills_item[data-req="24"] .lifeskills_item__type, .lifeskills_item[data-req="42"] .lifeskills_item__type, .lifeskills_item[data-req="45"] .lifeskills_item__type, .lifeskills_item[data-req="53"] .lifeskills_item__type, .lifeskills_item[data-req="63"] .lifeskills_item__type {
      position: relative; }
      .lifeskills_item[data-req="14"] .lifeskills_item__type:before, .lifeskills_item[data-req="24"] .lifeskills_item__type:before, .lifeskills_item[data-req="42"] .lifeskills_item__type:before, .lifeskills_item[data-req="45"] .lifeskills_item__type:before, .lifeskills_item[data-req="53"] .lifeskills_item__type:before, .lifeskills_item[data-req="63"] .lifeskills_item__type:before {
        display: block;
        content: '';
        position: absolute;
        bottom: calc(100% + 22px);
        left: calc(150px - 86px);
        width: 0;
        height: 0;
        border-width: 14px 10px;
        border-style: solid;
        border-color: transparent;
        border-top-color: #56504e;
        -webkit-transition: border-top-color .2s ease;
        -o-transition: border-top-color .2s ease;
        transition: border-top-color .2s ease; }
    .lifeskills_item[data-req="14"].active .lifeskills_item_right:after, .lifeskills_item[data-req="24"].active .lifeskills_item_right:after, .lifeskills_item[data-req="42"].active .lifeskills_item_right:after, .lifeskills_item[data-req="45"].active .lifeskills_item_right:after, .lifeskills_item[data-req="53"].active .lifeskills_item_right:after, .lifeskills_item[data-req="63"].active .lifeskills_item_right:after {
      background: #355872;
      background: #0080a7a3; }
    .lifeskills_item[data-req="14"].active .lifeskills_item__type:before, .lifeskills_item[data-req="24"].active .lifeskills_item__type:before, .lifeskills_item[data-req="42"].active .lifeskills_item__type:before, .lifeskills_item[data-req="45"].active .lifeskills_item__type:before, .lifeskills_item[data-req="53"].active .lifeskills_item__type:before, .lifeskills_item[data-req="63"].active .lifeskills_item__type:before {
      border-top-color: #355872;
      border-top-color: #005873;
      z-index: 1; }
    .lifeskills_item:first-child .lifeskills_item__name, .lifeskills_item[data-lvl="0.5"] .lifeskills_item__name {
      color: #51d6ff !important; }
    .lifeskills_item:first-child:before, .lifeskills_item[data-lvl="0.5"]:before {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 94px;
      height: 26px;
      background: url(../../assets/img/activeSkill.png) no-repeat 100% 0;
      background-position: 0px 0px;
      opacity: 0;
      -webkit-animation: img_op .6s ease-out forwards;
      animation: img_op .6s ease-out forwards; }
    .lifeskills_item:first-child:after, .lifeskills_item[data-lvl="0.5"]:after {
      display: block;
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
      height: 74px;
      background: url(../../assets/img/activeSkill.png) no-repeat 100% 0;
      background-position: -94px 0px;
      -webkit-animation: img_op .6s ease-out forwards;
      animation: img_op .6s ease-out forwards; }
    .lifeskills_item.active .lifeskills_item__name {
      color: #51d6ff !important; }
    .lifeskills_item.active:before {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 94px;
      height: 26px;
      background: url(../../assets/img/activeSkill.png) no-repeat 100% 0;
      background-position: 0px 0px;
      opacity: 0;
      -webkit-animation: img_op .6s ease-out forwards;
      animation: img_op .6s ease-out forwards; }
    .lifeskills_item.active:after {
      display: block;
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
      height: 74px;
      background: url(../../assets/img/activeSkill.png) no-repeat 100% 0;
      background-position: -94px 0px;
      -webkit-animation: img_op .6s ease-out forwards;
      animation: img_op .6s ease-out forwards; }
    .lifeskills_item.active .lifeskills_item_right:before {
      background: #fff;
      background: #355872;
      background: #0080a7a3; }
    .lifeskills_item_right {
      display: grid;
      position: relative;
      grid-template-rows: 1fr 1fr;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      padding-left: 10px; }
      .lifeskills_item_right:before {
        display: block;
        content: '';
        position: absolute;
        top: 30px;
        right: calc(100% + 67px);
        width: 85px;
        margin-right: 1px;
        height: 2px;
        background: #56504e;
        -webkit-transition: background .2s ease;
        -o-transition: background .2s ease;
        transition: background .2s ease; }
        .lifeskills_item:first-child .lifeskills_item_right:before,
        .lifeskills_item[data-lvl="0.5"] .lifeskills_item_right:before {
          background: #355872;
          background: #0080a7a3; }
    .lifeskills_item__name {
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      white-space: nowrap;
      text-transform: uppercase;
      color: #dfd350;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      -webkit-transition: color .5s ease;
      -o-transition: color .5s ease;
      transition: color .5s ease;
      font-weight: 500;
      letter-spacing: .04em; }
    .lifeskills_item__bottom {
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      height: 31px;
      line-height: 31px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
    .lifeskills_item__point {
      color: rgba(255, 255, 255, 0.3); }
    .lifeskills_item img {
      border: 1px solid rgba(29, 29, 29, 0.7);
      border-radius: 3px;
      height: 60px;
      width: 60px;
      opacity: 0;
      -webkit-animation: img_op 1s ease-out forwards .3s;
      animation: img_op 1s ease-out forwards .3s; }
  .lifeskills .mastery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 5px;
    -ms-flex-item-align: center;
    align-self: center; }
    .lifeskills .masteryTitle {
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 17px;
      margin-bottom: 10px; }
    .lifeskills .masteryNote {
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 12px;
      margin-bottom: 10px;
      color: rgba(255, 255, 255, 0.5);
      text-align: center; }
      .lifeskills .masteryNote.animation {
        color: #ff5157;
        -webkit-animation-name: empty;
        animation-name: empty;
        -webkit-animation-duration: .4s;
        animation-duration: .4s; }
    .lifeskills .mastery_item {
      -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      background: rgba(3, 3, 3, 0.7);
      background: black;
      border-radius: 5px;
      width: 100%;
      height: 100px;
      cursor: pointer;
      margin-bottom: 20px;
      padding: 0.7rem 0.7rem 0rem 0.7rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 1.5rem;
      position: relative;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .lifeskills .mastery_item.active .mastery_item__name {
        color: #51d6ff !important; }
      .lifeskills .mastery_item.active .mastery_item__percent {
        opacity: 1; }
      .lifeskills .mastery_item.active:before {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 94px;
        height: 26px;
        background: url(../../assets/img/activeSkill.png) no-repeat 100% 0;
        background-position: 0px 0px;
        opacity: 0;
        -webkit-animation: img_op .6s ease-out forwards;
        animation: img_op .6s ease-out forwards;
        pointer-events: none; }
      .lifeskills .mastery_item.active:after {
        display: block;
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
        height: 74px;
        background: url(../../assets/img/activeSkill.png) no-repeat 100% 0;
        background-position: -94px 0px;
        -webkit-animation: img_op .6s ease-out forwards;
        animation: img_op .6s ease-out forwards;
        pointer-events: none; }
      .lifeskills .mastery_item_top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 60px; }
      .lifeskills .mastery_item_right {
        display: grid;
        position: relative;
        grid-template-rows: 1fr 1fr;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1; }
      .lifeskills .mastery_item__lvl {
        text-align: center;
        color: #b88b58;
        font-weight: 700; }
      .lifeskills .mastery_item__point {
        position: absolute;
        top: 0;
        right: 5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 9px;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.25);
        text-align: center;
        font-family: Roboto; }
      .lifeskills .mastery_item__buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 5px; }
        .lifeskills .mastery_item__buttons .mdc-button {
          height: 30px; }
      .lifeskills .mastery_item_bottom {
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        white-space: nowrap;
        font-weight: 500;
        letter-spacing: .04em;
        height: 33px;
        line-height: 33px;
        font-size: 14px; }
      .lifeskills .mastery_item__percent {
        -webkit-transition: opacity .2s ease;
        -o-transition: opacity .2s ease;
        transition: opacity .2s ease;
        opacity: 0; }
      .lifeskills .mastery_item__name {
        text-transform: uppercase;
        color: #dfd350;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -webkit-transition: color .5s ease;
        -o-transition: color .5s ease;
        transition: color .5s ease; }
      .lifeskills .mastery_item img {
        border: 1px solid rgba(29, 29, 29, 0.7);
        border-radius: 3px;
        height: 60px;
        width: 60px;
        opacity: 0;
        -webkit-animation: img_op 1s ease-out forwards .3s;
        animation: img_op 1s ease-out forwards .3s; }

.shipsArrow {
  position: fixed;
  width: 80px;
  height: 80px;
  bottom: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  fill: rgba(255, 255, 255, 0.6);
  will-change: transform;
  -webkit-animation: shipsArrow 1s ease 1s infinite;
  animation: shipsArrow 1s ease 1s infinite;
  opacity: 0; }
  .shipsArrow.second {
    width: 40px;
    height: 40px;
    bottom: 20px;
    -webkit-animation: shipsArrow2 1s ease 1s infinite;
    animation: shipsArrow2 1s ease 1s infinite; }

@-webkit-keyframes shipsArrow {
  0% {
    -webkit-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -o-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1;
    opacity: .95;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(0.001deg);
    transform: translate3d(-50%, 0, 0) rotate(0.001deg); }
  50% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 10px, 0) rotate(0.001deg);
    transform: translate3d(-50%, 10px, 0) rotate(0.001deg); }
  100% {
    opacity: 1;
    opacity: .95;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(0.001deg);
    transform: translate3d(-50%, 0, 0) rotate(0.001deg); } }

@keyframes shipsArrow {
  0% {
    -webkit-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -o-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1;
    opacity: .95;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(0.001deg);
    transform: translate3d(-50%, 0, 0) rotate(0.001deg); }
  50% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 10px, 0) rotate(0.001deg);
    transform: translate3d(-50%, 10px, 0) rotate(0.001deg); }
  100% {
    opacity: 1;
    opacity: .95;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(0.001deg);
    transform: translate3d(-50%, 0, 0) rotate(0.001deg); } }

@-webkit-keyframes shipsArrow2 {
  0% {
    opacity: 1;
    opacity: .4;
    -webkit-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -o-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(0.001deg);
    transform: translate3d(-50%, 0, 0) rotate(0.001deg); }
  50% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 10px, 0) rotate(0.001deg);
    transform: translate3d(-50%, 10px, 0) rotate(0.001deg); }
  100% {
    opacity: 1;
    opacity: .4;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(0.001deg);
    transform: translate3d(-50%, 0, 0) rotate(0.001deg); } }

@keyframes shipsArrow2 {
  0% {
    opacity: 1;
    opacity: .4;
    -webkit-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -o-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(0.001deg);
    transform: translate3d(-50%, 0, 0) rotate(0.001deg); }
  50% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 10px, 0) rotate(0.001deg);
    transform: translate3d(-50%, 10px, 0) rotate(0.001deg); }
  100% {
    opacity: 1;
    opacity: .4;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(0.001deg);
    transform: translate3d(-50%, 0, 0) rotate(0.001deg); } }

#tooltip {
  pointer-events: none; }
  #tooltip.itemT {
    background: rgba(3, 3, 3, 0.9);
    border: 2px solid #000;
    padding: 10px;
    max-width: 450px; }
    #tooltip.itemT .item {
      margin: 0;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase; }
      #tooltip.itemT .item img {
        width: 30px;
        height: 30px;
        border: unset; }
      #tooltip.itemT .item .slotText {
        max-width: unset; }
    #tooltip.itemT .obtain {
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      margin-top: 10px; }
      #tooltip.itemT .obtain h1 {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
        line-height: 1.4; }
      #tooltip.itemT .obtain img {
        margin-top: 5px;
        width: 100%;
        height: 100%;
        border: unset;
        opacity: 0;
        -webkit-transition: opacity 1000ms ease-out 0s;
        -o-transition: opacity 1000ms ease-out 0s;
        transition: opacity 1000ms ease-out 0s;
        -webkit-animation: img_op .3s ease-out forwards;
        animation: img_op .3s ease-out forwards; }
  #tooltip .upgrade-item {
    background: rgba(3, 3, 3, 0.9);
    border-radius: 5px; }

#tooltip > div:not(.upgrade-item) img {
  width: 350px;
  border: 2px solid #000; }

.equipments {
  background: rgba(3, 3, 3, 0.5);
  background: #06070c;
  min-height: 850px; }
  .equipments.collection {
    background: unset; }
    .equipments.collection .tabItem .type {
      background: rgba(3, 3, 3, 0.5);
      padding: 10px 14px;
      border-radius: 5px;
      margin-bottom: 20px; }
      .equipments.collection .tabItem .typeHead {
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
        margin-bottom: 15px; }
    .equipments.collection .tabItem img:hover {
      -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2); }
    .equipments.collection .tabItem .repute_item {
      margin-bottom: 10px; }
    .equipments.collection .tabItem .none {
      background: rgba(255, 255, 255, 0.1);
      background: rgba(66, 7, 7, 0.31);
      color: #000;
      color: #b54040;
      color: #ff515773 !important; }
      .equipments.collection .tabItem .none .name, .equipments.collection .tabItem .none .location, .equipments.collection .tabItem .none a {
        color: #ff515773 !important;
        text-decoration: line-through; }
    .equipments.collection .tabItem .new {
      background: rgba(16, 130, 251, 0.14);
      color: #1160c4 !important; }
      .equipments.collection .tabItem .new .name, .equipments.collection .tabItem .new .location, .equipments.collection .tabItem .new a {
        color: #1160c4 !important; }
  .equipments.collection .tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.5);
    height: 66px;
    margin-bottom: 10px; }
    .equipments.collection .tabs .tab .count {
      margin-left: 10px; }
      .equipments.collection .tabs .tab .count .complete {
        font-weight: 500;
        color: #b52; }
  .equipments .tabs {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    min-height: 66px; }
    .equipments .tabs svg {
      fill: #b88b58;
      width: 20px;
      z-index: 10;
      -webkit-transition: fill .3s ease;
      -o-transition: fill .3s ease;
      transition: fill .3s ease;
      margin-left: 5px; }
      .equipments .tabs svg:hover {
        fill: #eeb97e; }
    .equipments .tabs .guard {
      display: grid;
      grid-template-columns: repeat(4, 1fr); }
    .equipments .tabs .other {
      display: grid;
      grid-template-columns: repeat(6, 1fr); }
    .equipments .tabs .weekly {
      display: grid;
      grid-template-columns: repeat(3, 1fr); }
    .equipments .tabs .mdc-button .mdc-button__ripple {
      border-radius: 0; }
    .equipments .tabs .tab {
      border-radius: 0;
      width: 100%;
      height: 100%; }
      .equipments .tabs .tab .number {
        width: 0px;
        -webkit-transition: width .2s ease;
        -o-transition: width .2s ease;
        transition: width .2s ease;
        opacity: 0; }
        .equipments .tabs .tab .number.anim {
          opacity: 1;
          width: 25px;
          -webkit-transition: width .4s ease, opacity .3s ease .2s;
          -o-transition: width .4s ease, opacity .3s ease .2s;
          transition: width .4s ease, opacity .3s ease .2s; }
      .equipments .tabs .tab span {
        width: unset;
        -webkit-transition: color .2s ease;
        -o-transition: color .2s ease;
        transition: color .2s ease; }
      .equipments .tabs .tab.active {
        color: #b88b58 !important;
        --mdc-theme-primary: #b88b58 !important; }
  .equipments .tabItem {
    display: none; }
    .equipments .tabItem.active {
      display: block; }

.gs_check {
  display: none !important; }

.maintenance {
  background: -o-radial-gradient(0 0, circle, #003953, #000);
  background: radial-gradient(circle at 0 0, #003953, #000);
  color: #abe6ff;
  /*img{
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
	}*/ }
  .maintenance body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: unset;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .maintenance .text {
    margin: 0;
    padding: 0;
    font-family: Open Sans;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #000a0e;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .08em;
    width: 100%; }
    @media screen and (max-width: 600px) {
      .maintenance .text {
        font-size: 15px;
        line-height: 1.3;
        text-align: center;
        margin: 0; } }
  .maintenance .squareLink {
    width: 100%; }
    @media screen and (max-width: 600px) {
      .maintenance .squareLink {
        display: block !important; } }
  .maintenance .squareLink_item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .maintenance iframe {
    margin-top: 50px;
    opacity: .3;
    cursor: pointer;
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease; }
    @media screen and (max-width: 600px) {
      .maintenance iframe {
        padding: 10px;
        max-width: 100%; } }
    .maintenance iframe:hover {
      opacity: 1; }
  .maintenance h1 {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-weight: 500;
    font-family: Open Sans;
    letter-spacing: .08em; }
  .maintenance .blurimg {
    z-index: -50;
    left: -5px; }
    .maintenance .blurimg:before {
      display: none; }

.calendar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px; }
  .calendar_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100px;
    background: rgba(3, 3, 3, 0.5);
    padding: 10px 14px;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.5);
    position: relative; }
    .calendar_item img {
      margin-right: 15px;
      border-radius: 5px;
      min-width: 64px; }
    .calendar_item .type {
      position: absolute;
      top: 5px;
      right: 10px;
      font-size: 10px;
      text-transform: uppercase;
      color: #ffec87; }
    .calendar_item span {
      min-width: 50px;
      display: inline-block; }
    .calendar_item .krname {
      margin-left: 10px;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.4); }
    .calendar_item .dateKR, .calendar_item .dateYou {
      font-size: 13px; }
    .calendar_item .dateYou {
      color: rgba(255, 255, 255, 0.7); }
    .calendar_item .name {
      color: #c4fff7;
      font-size: 14px; }

.search {
  margin-bottom: 20px;
  z-index: 51 !important;
  position: relative; }
  .search_box {
    position: relative;
    height: 60px;
    z-index: 10; }
    .search_box svg {
      position: absolute;
      color: #818181;
      margin: 18px 0 0 18px;
      pointer-events: none;
      fill: currentColor; }
  .search svg {
    fill: currentColor; }
  .search input {
    background: transparent;
    background-image: -o-linear-gradient(73deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%);
    background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%);
    border-radius: 3px;
    padding: .7rem 1.4rem .7rem 60px;
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 500;
    line-height: 23px;
    border: unset;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    color: rgba(255, 255, 255, 0.9);
    -webkit-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease; }
    .search input:hover, .search input:focus {
      background-image: -o-linear-gradient(73deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%);
      background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.05) 63.45%, rgba(243, 248, 255, 0.1) 98%); }
  .search_button {
    margin-top: 20px; }
    .search_button .latree_button {
      letter-spacing: .04em;
      height: 40px;
      padding: 0 8px 0 8px; }
      .search_button .latree_button img {
        width: 40px;
        height: 40px;
        margin-right: 5px; }

.searchList {
  position: absolute;
  width: 100%;
  z-index: 999; }
  .searchList_inner {
    background: rgba(3, 3, 3, 0.97);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    .searchList_inner.anim {
      -webkit-animation: search .4s ease forwards;
      animation: search .4s ease forwards; }
  .searchList .selected .mdc-button__ripple::before {
    opacity: .07; }
  .searchList_item {
    letter-spacing: .08em;
    padding-left: 25px !important;
    height: 50px;
    margin: 0; }
    .searchList_item img {
      width: 45px; }
    .searchList_item span {
      margin-left: 10px;
      -webkit-box-pack: left !important;
      -ms-flex-pack: left !important;
      justify-content: left !important; }

.repute {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  opacity: 0;
  -webkit-transform: translateY(16px);
  -ms-transform: translateY(16px);
  transform: translateY(16px); }
  .repute_item {
    width: 100%;
    display: grid;
    grid-template-columns: 50px 2fr 3fr;
    grid-gap: 15px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    background: rgba(3, 3, 3, 0.5);
    padding: 10px 14px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; }
    .repute_item:before {
      content: '';
      position: absolute;
      left: 0;
      width: 79px;
      height: 100%;
      z-index: 0;
      background: unset;
      -webkit-transition: background .3s ease;
      -o-transition: background .3s ease;
      transition: background .3s ease; }
    .repute_item.completed:not(.collection_item):before {
      background: rgba(130, 191, 43, 0.6); }
    .repute_item:not(.collection_item) > img {
      width: 50px;
      z-index: 1;
      -webkit-transition: -webkit-transform .15s ease;
      transition: -webkit-transform .15s ease;
      -o-transition: transform .15s ease;
      transition: transform .15s ease;
      transition: transform .15s ease, -webkit-transform .15s ease;
      cursor: pointer; }
      .repute_item:not(.collection_item) > img:hover {
        -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5); }
      .repute_item:not(.collection_item) > img.anim {
        -webkit-animation-name: eponaS;
        animation-name: eponaS;
        -webkit-animation-duration: .6s;
        animation-duration: .6s; }
    .repute_item .i_checkbox {
      position: relative;
      width: 50px;
      height: 50px; }
      .repute_item .i_checkbox .mdc-checkbox {
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) scale(0);
        -ms-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        --mdc-theme-secondary: rgba(3,3,3,.5); }
        .repute_item .i_checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
          color: #82bf2b; }
        .repute_item .i_checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
          border-color: unset; }
      .repute_item .i_checkbox img {
        width: 50px;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: opacity 0.1s cubic-bezier(0.3, 0.3, 0.5, 1), -webkit-transform 0.1s cubic-bezier(0.3, 0.3, 0.5, 1);
        transition: opacity 0.1s cubic-bezier(0.3, 0.3, 0.5, 1), -webkit-transform 0.1s cubic-bezier(0.3, 0.3, 0.5, 1);
        -o-transition: opacity 0.1s cubic-bezier(0.3, 0.3, 0.5, 1), transform 0.1s cubic-bezier(0.3, 0.3, 0.5, 1);
        transition: opacity 0.1s cubic-bezier(0.3, 0.3, 0.5, 1), transform 0.1s cubic-bezier(0.3, 0.3, 0.5, 1);
        transition: opacity 0.1s cubic-bezier(0.3, 0.3, 0.5, 1), transform 0.1s cubic-bezier(0.3, 0.3, 0.5, 1), -webkit-transform 0.1s cubic-bezier(0.3, 0.3, 0.5, 1); }
    .repute_item.collection_item .name, .repute_item.collection_item .obtain {
      -webkit-transition: color 0.2s ease-in-out;
      -o-transition: color 0.2s ease-in-out;
      transition: color 0.2s ease-in-out; }
    .repute_item.collection_item.completed {
      color: rgba(130, 191, 43, 0.9); }
      .repute_item.collection_item.completed .name, .repute_item.collection_item.completed .location, .repute_item.collection_item.completed a {
        color: rgba(130, 191, 43, 0.9) !important; }
      .repute_item.collection_item.completed .location a:hover {
        color: rgba(90, 132, 31, 0.9) !important; }
    .repute_item.completed .i_checkbox img {
      opacity: 0;
      -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
      transform: scale(0.5); }
    .repute_item.completed .i_checkbox .mdc-checkbox {
      opacity: 1;
      -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
      transform: translate(-50%, -50%) scale(1);
      -webkit-transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1);
      transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1);
      -o-transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1);
      transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1);
      transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1); }
    .repute_item:hover .i_checkbox img {
      opacity: 0;
      -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
      transform: scale(0.5); }
    .repute_item:hover .i_checkbox .mdc-checkbox {
      opacity: 1;
      -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
      transform: translate(-50%, -50%) scale(1);
      -webkit-transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1);
      transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1);
      -o-transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1);
      transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1);
      transition: opacity 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.3, 0.3, 0.5, 1); }
    .repute_item .noData {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, 0.9);
      text-transform: uppercase; }
    .repute_item .name, .repute_item .location {
      font-size: 17px;
      font-weight: 500;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, 0.9);
      text-transform: uppercase;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative; }
      .repute_item .name a, .repute_item .location a {
        color: rgba(255, 255, 255, 0.9); }
        .repute_item .name a:hover, .repute_item .location a:hover {
          color: #b88b58; }
      .repute_item .name svg, .repute_item .location svg {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-left: 3px;
        fill: #b88b58;
        width: 20px; }
    .repute_item .name {
      display: block; }
    .repute_item .left {
      /*display: grid;
			grid-template-rows: 5fr 3fr;*/
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
    .repute_item__info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .repute_item__reward {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
    .repute_item .reputeLvl {
      width: 100%;
      margin-bottom: 10px;
      background: rgba(3, 3, 3, 0.5);
      padding: 10px 14px;
      border-radius: 5px;
      position: relative; }
      .repute_item .reputeLvl:last-child {
        margin-bottom: 0; }
      .repute_item .reputeLvl .upgrade_item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: -10px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between; }
        .repute_item .reputeLvl .upgrade_item .item {
          cursor: auto;
          width: 49%;
          margin-bottom: 10px; }
        .repute_item .reputeLvl .upgrade_item .slotText {
          max-width: 300px;
          font-size: 12px;
          font-weight: 500;
          letter-spacing: .08em;
          overflow: hidden;
          text-transform: uppercase; }
        .repute_item .reputeLvl .upgrade_item .slotName {
          max-width: unset; }
      .repute_item .reputeLvl .reputeLvl_text {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
        margin-bottom: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between; }
      .repute_item .reputeLvl .rewardLvl {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .repute_item .reputeLvl .rewardLvl .lvl {
          color: #b88b58; }
      .repute_item .reputeLvl .reputeCount {
        /*position: absolute;
				right: 10px;
				bottom: 0;*/
        font-size: 12px;
        letter-spacing: .03em;
        color: rgba(255, 255, 255, 0.7); }
    .repute_item .eponaList {
      margin-top: 20px; }
      .repute_item .eponaList_text {
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        margin-bottom: 5px; }
    .repute_item .epona {
      background: unset;
      border-radius: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1); }
      .repute_item .epona_name {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, 0.85);
        text-transform: uppercase;
        margin-bottom: 5px; }
      .repute_item .epona .upgrade_item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: -10px; }
        .repute_item .epona .upgrade_item .item {
          cursor: auto;
          width: 100%;
          margin-bottom: 10px; }
    .repute_item .eponaHide {
      display: none; }
    .repute_item.completed .reputeLvl, .repute_item.completed .eponaList {
      display: none; }
    .repute_item.completed .repute_item__reward {
      display: none; }
    .repute_item.completed .eponaHide {
      display: block; }
      .repute_item.completed .eponaHide .eponaList {
        display: block;
        margin-top: unset; }
        .repute_item.completed .eponaHide .eponaList > div {
          display: none; }
        .repute_item.completed .eponaHide .eponaList .epona:last-child {
          display: block !important;
          border-top: unset; }

.repute_item.new .name:after {
  content: ' new';
  color: #b88b58;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase; }

video {
  max-width: unset; }

.bg_video {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-filter: opacity(0.8);
  filter: opacity(0.8);
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: hidden;
  min-height: 100%;
  top: 0; }

.oldgs {
  background: rgba(3, 3, 3, 0.9);
  border: 2px solid #000;
  padding: 0;
  max-width: 450px;
  min-width: 200px;
  color: rgba(255, 255, 255, 0.9); }
  .oldgs_title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    background: black;
    color: white;
    color: #b88b58;
    line-height: 30px;
    white-space: nowrap;
    background: black; }
  .oldgs_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 1px 15px; }
    .oldgs_item .gs {
      margin-right: 20px; }

.rating_choice {
  background: -o-radial-gradient(50% 125px, 50% 80%, rgba(0, 0, 0, 0.35), #02010100);
  background: radial-gradient(50% 80% at 50% 125px, rgba(0, 0, 0, 0.35), #02010100);
  -webkit-box-shadow: unset;
  box-shadow: unset;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }
  .rating_choice .server_select {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 0 10px; }
    .rating_choice .server_select .mdc-button:disabled {
      color: #b88b58;
      --mdc-theme-primary: #b88b58; }
    .rating_choice .server_select button {
      margin: 0 5px; }
    .rating_choice .server_select button[data-id="Кратос"] {
      --mdc-theme-primary: #f7bd0b; }
    .rating_choice .server_select button[data-id="Сирион"],
    .rating_choice .server_select button[data-id="Антарес"],
    .rating_choice .server_select button[data-id="Альдеран"] {
      --mdc-theme-primary: #76cc00; }
    .rating_choice .server_select .class_selectIcon__item {
      padding: 5px 10px; }

.class_selectIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 100%; }
  .class_selectIcon__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px;
    text-align: center;
    -webkit-filter: grayscale(100%) brightness(80%);
    filter: grayscale(100%) brightness(80%);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    text-shadow: .1rem .1rem #000;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 13px;
    letter-spacing: .08em; }
    .class_selectIcon__item:hover, .class_selectIcon__item.active {
      -webkit-filter: grayscale(0) brightness(100%);
      filter: grayscale(0) brightness(100%);
      color: white; }
    .class_selectIcon__item img, .class_selectIcon__item svg {
      width: 50px;
      margin-bottom: .5rem; }
    .class_selectIcon__item svg {
      height: 50px;
      fill: rgba(255, 103, 118, 0.9);
      fill: white; }
    .class_selectIcon__item p {
      margin: unset; }

.rating table small {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  color: #8787b3b0; }

.rating table td:nth-child(4),
.rating table td:nth-child(3),
.rating table td:nth-child(6) {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase; }

.rating table tr, .rating table tr td {
  cursor: pointer; }

.rating table tr:hover td {
  color: #b88b58;
  color: #8787b3; }

.rating table a {
  color: inherit;
  display: block;
  height: 100%;
  width: 100%; }

@media screen and (max-width: 800px) {
  .rating table thead {
    display: none; }
  .rating table tr {
    display: block;
    margin-bottom: .5rem; }
  .rating table tr:nth-child(2n) {
    background-color: rgba(0, 0, 0, 0); }
  .rating table td {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem; }
  .rating table td:before {
    content: attr(aria-label);
    float: left;
    font-weight: bold;
    width: 150px;
    text-transform: capitalize;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase; }
  .rating table td:nth-child(2) {
    display: none; }
  .rating table tr:before {
    content: attr(aria-label);
    float: left;
    font-weight: bold;
    width: 100%;
    text-align: center;
    text-transform: capitalize; } }

.profile_character {
  padding: 15px 25px;
  margin-top: -10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-position: center -50px; }
  .profile_character .profile_head {
    /*display: grid;
	    grid-template-columns: 2fr 1fr;
	    grid-gap: 1rem;*/ }
  .profile_character .profile_name {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0.2rem 1rem rgba(3, 3, 3, 0.85); }
    .profile_character .profile_name .nickname {
      color: #fff;
      line-height: 1;
      margin: 0;
      font-family: "Noto Serif",serif;
      font-size: 4rem;
      font-weight: 600;
      margin-bottom: .5rem !important; }
    .profile_character .profile_name .update {
      font-size: 1.4rem;
      margin: 0;
      font-weight: 400;
      line-height: unset; }
  .profile_character .profile_info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
    margin-bottom: 10px;
    background-color: rgba(3, 3, 3, 0.9);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    padding: 15px 25px 10px;
    border-radius: 5px; }
    .profile_character .profile_info .game_info {
      /*display: grid;
		    grid-template-columns: 1fr 1fr;
		    grid-gap: 0.5rem;*/
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      padding-bottom: 5px; }
      .profile_character .profile_info .game_info > div {
        width: 200px;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9); }
        .profile_character .profile_info .game_info > div span:first-of-type {
          display: inline-block;
          width: 70px;
          height: 26px;
          line-height: 26px;
          margin-right: 10px;
          border-radius: 12px;
          text-align: center;
          font-size: 13px;
          background-color: rgba(77, 77, 77, 0.15);
          color: rgba(146, 146, 146, 0.9); }
        .profile_character .profile_info .game_info > div span:nth-of-type(2) {
          font-size: 13px;
          font-weight: 500;
          letter-spacing: .08em;
          text-transform: uppercase; }
    .profile_character .profile_info .level_info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .profile_character .profile_info .level_info > div {
        width: 200px;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 65px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between; }
        .profile_character .profile_info .level_info > div span:first-of-type {
          display: block;
          width: 70px;
          height: 26px;
          line-height: 26px;
          border-radius: 12px;
          text-align: center;
          font-size: 13px;
          margin: 0 auto 4px;
          background-color: rgba(77, 77, 77, 0.15);
          color: rgba(146, 146, 146, 0.9); }
        .profile_character .profile_info .level_info > div span:nth-of-type(2) {
          font-size: 22px;
          font-weight: 700;
          color: #fff;
          white-space: nowrap;
          color: rgba(255, 255, 255, 0.9);
          line-height: 30px;
          height: 30px; }
          .profile_character .profile_info .level_info > div span:nth-of-type(2) small {
            font-size: 14px;
            font-weight: 400;
            font-family: 'Raleway', sans-serif; }
      .profile_character .profile_info .level_info .update span:nth-of-type(2) {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase; }
  .profile_character .ranking {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
    margin-bottom: 10px; }
    .profile_character .ranking_item {
      padding: 10px 25px;
      background-color: rgba(3, 3, 3, 0.9);
      -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      border-radius: 5px;
      -ms-flex-item-align: start;
      align-self: start;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .profile_character .ranking_item a {
        height: 26px;
        line-height: 26px; }
      .profile_character .ranking_item span {
        display: inline-block;
        padding: 0px 12px;
        border-radius: 12px;
        text-align: center;
        font-size: 13px;
        background-color: #621bbf66;
        background-color: rgba(66, 7, 7, 0.61);
        color: rgba(255, 255, 255, 0.9);
        height: 26px;
        line-height: 26px; }
      .profile_character .ranking_item p {
        margin: 0;
        color: rgba(255, 255, 255, 0.9);
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        max-width: 178px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase; }

@-webkit-keyframes eponaS {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  15% {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-1deg);
    transform: translate3d(-1px, 0, 0) rotate(-1deg); }
  30% {
    -webkit-transform: translate3d(2px, 0, 0) rotate(1deg);
    transform: translate3d(2px, 0, 0) rotate(1deg); }
  45% {
    -webkit-transform: translate3d(-3px, 0, 0) rotate(-3deg);
    transform: translate3d(-3px, 0, 0) rotate(-3deg); }
  60% {
    -webkit-transform: translate3d(3px, 0, 0) rotate(1deg);
    transform: translate3d(3px, 0, 0) rotate(1deg); }
  75% {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-1deg);
    transform: translate3d(-1px, 0, 0) rotate(-1deg); }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }

@keyframes eponaS {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  15% {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-1deg);
    transform: translate3d(-1px, 0, 0) rotate(-1deg); }
  30% {
    -webkit-transform: translate3d(2px, 0, 0) rotate(1deg);
    transform: translate3d(2px, 0, 0) rotate(1deg); }
  45% {
    -webkit-transform: translate3d(-3px, 0, 0) rotate(-3deg);
    transform: translate3d(-3px, 0, 0) rotate(-3deg); }
  60% {
    -webkit-transform: translate3d(3px, 0, 0) rotate(1deg);
    transform: translate3d(3px, 0, 0) rotate(1deg); }
  75% {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-1deg);
    transform: translate3d(-1px, 0, 0) rotate(-1deg); }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }

@-webkit-keyframes classScale2 {
  0%, 100% {
    -webkit-transform: scale(1) translateX(10px);
    transform: scale(1) translateX(10px); }
  50% {
    -webkit-transform: scale(1.3) translateX(-10px);
    transform: scale(1.3) translateX(-10px); } }

@keyframes classScale2 {
  0%, 100% {
    -webkit-transform: scale(1) translateX(10px);
    transform: scale(1) translateX(10px); }
  50% {
    -webkit-transform: scale(1.3) translateX(-10px);
    transform: scale(1.3) translateX(-10px); } }

@-webkit-keyframes search {
  0% {
    -webkit-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -o-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0;
    will-change: opacity, transform;
    -webkit-transform: translate3d(0, 16px, 0) rotate(0.001deg);
    transform: translate3d(0, 16px, 0) rotate(0.001deg); }
  100% {
    opacity: 1 !important;
    -webkit-transform: translateZ(0) rotate(0.001deg) !important;
    transform: translateZ(0) rotate(0.001deg) !important;
    will-change: unset; } }

@keyframes search {
  0% {
    -webkit-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -o-transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0;
    will-change: opacity, transform;
    -webkit-transform: translate3d(0, 16px, 0) rotate(0.001deg);
    transform: translate3d(0, 16px, 0) rotate(0.001deg); }
  100% {
    opacity: 1 !important;
    -webkit-transform: translateZ(0) rotate(0.001deg) !important;
    transform: translateZ(0) rotate(0.001deg) !important;
    will-change: unset; } }

@-webkit-keyframes guide {
  0% {
    color: #3c867e;
    background: #c4fff7; }
  50% {
    height: 2.1rem;
    width: 4.1rem;
    background: #c4fff7;
    left: -4rem; }
  100% {
    content: 'GUIDE';
    background: #c4fff7;
    height: 2rem;
    width: 4rem;
    border-radius: .5rem;
    left: -3.5rem;
    color: #000;
    -webkit-box-shadow: 0 0 15px #3c867e;
    box-shadow: 0 0 15px #3c867e; } }

@keyframes guide {
  0% {
    color: #3c867e;
    background: #c4fff7; }
  50% {
    height: 2.1rem;
    width: 4.1rem;
    background: #c4fff7;
    left: -4rem; }
  100% {
    content: 'GUIDE';
    background: #c4fff7;
    height: 2rem;
    width: 4rem;
    border-radius: .5rem;
    left: -3.5rem;
    color: #000;
    -webkit-box-shadow: 0 0 15px #3c867e;
    box-shadow: 0 0 15px #3c867e; } }

@-webkit-keyframes guide_reverse {
  0% {
    content: '';
    height: 2rem;
    width: 4rem;
    border-radius: .5rem;
    left: -3.5rem;
    color: #000;
    -webkit-box-shadow: 0 0 23px #3c867e;
    box-shadow: 0 0 23px #3c867e;
    background: #c4fff7; }
  50% {
    background: #c4fff7;
    height: 1rem;
    width: 1rem;
    left: 0rem; }
  100% {
    background: #c4fff7;
    -webkit-box-shadow: 0 0 20px #3c867e;
    box-shadow: 0 0 20px #3c867e; } }

@keyframes guide_reverse {
  0% {
    content: '';
    height: 2rem;
    width: 4rem;
    border-radius: .5rem;
    left: -3.5rem;
    color: #000;
    -webkit-box-shadow: 0 0 23px #3c867e;
    box-shadow: 0 0 23px #3c867e;
    background: #c4fff7; }
  50% {
    background: #c4fff7;
    height: 1rem;
    width: 1rem;
    left: 0rem; }
  100% {
    background: #c4fff7;
    -webkit-box-shadow: 0 0 20px #3c867e;
    box-shadow: 0 0 20px #3c867e; } }

.equipments-yorn__item {
  background: rgba(3, 3, 3, 0.3);
  padding: 10px 14px;
  border-radius: 0 0 5px 5px;
  opacity: 0;
  -webkit-transition: opacity .6s ease;
  -o-transition: opacity .6s ease;
  transition: opacity .6s ease; }
  .equipments-yorn__item--show {
    opacity: 1; }

.equipments-yorn__options, .equipments-yorn__reforge, .equipments-yorn__chanse {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 5px 15px;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .equipments-yorn__options:first-child, .equipments-yorn__reforge:first-child, .equipments-yorn__chanse:first-child {
    margin-left: 0; }
  .equipments-yorn__options:last-child, .equipments-yorn__reforge:last-child, .equipments-yorn__chanse:last-child {
    margin-right: 0; }
  .equipments-yorn__options:hover:not(.equipments-yorn__actions--disabled), .equipments-yorn__reforge:hover:not(.equipments-yorn__actions--disabled), .equipments-yorn__chanse:hover:not(.equipments-yorn__actions--disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.equipments-yorn__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .equipments-yorn__actions--disabled {
    color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.01); }

.equipments-yorn__name {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase; }

.equipments-yorn__gs {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase; }

.equipments-yorn__upgrade {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  @media screen and (max-width: 1100px) {
    .equipments-yorn__upgrade {
      -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse; }
      .equipments-yorn__upgrade .equipments-yorn__upgrade-row {
        -webkit-box-flex: 1;
        -ms-flex: 1 auto;
        flex: 1 auto; }
        .equipments-yorn__upgrade .equipments-yorn__upgrade-row:first-child {
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          margin-top: 30px;
          margin-right: 0px; }
        .equipments-yorn__upgrade .equipments-yorn__upgrade-row .equipments-yorn__tabs {
          grid-gap: 10px;
          background: transparent; }
          .equipments-yorn__upgrade .equipments-yorn__upgrade-row .equipments-yorn__tabs .tab {
            background: rgba(3, 3, 3, 0.65); }
      .equipments-yorn__upgrade .equipments-yorn__upgrade-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        grid-gap: 10px; }
        .equipments-yorn__upgrade .equipments-yorn__upgrade-list .upgrade-item {
          -webkit-box-flex: 1;
          -ms-flex: 1 auto;
          flex: 1 auto; } }

.equipments-yorn__upgrade-row {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1; }
  .equipments-yorn__upgrade-row:first-child {
    -webkit-box-flex: 0.5;
    -ms-flex: 0.5;
    flex: 0.5;
    margin-right: 50px; }

.equipments-yorn__tabs, .equipments-yorn__tabs-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: rgba(3, 3, 3, 0.65);
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around; }
  .equipments-yorn__tabs .tab, .equipments-yorn__tabs-head .tab {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 0;
    width: 100%;
    height: 100%; }
  .equipments-yorn__tabs .mdc-button .mdc-button__ripple, .equipments-yorn__tabs-head .mdc-button .mdc-button__ripple {
    border-radius: 0; }
  .equipments-yorn__tabs .active, .equipments-yorn__tabs-head .active {
    --mdc-theme-primary: #b88b58;
    color: #b88b58 !important; }

.equipments-yorn__tabs-head {
  height: 66px; }

.equipments-yorn__tab-item {
  display: none;
  overflow: hidden; }
  .equipments-yorn__tab-item--active {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    padding-bottom: 20px;
    height: calc(100vh - 20px); }

.upgrade-item {
  margin-bottom: 10px;
  background: rgba(3, 3, 3, 0.5);
  padding: 10px 14px;
  border-radius: 5px;
  position: relative; }
  .upgrade-item:first-child {
    border-radius: 0 0 5px 5px; }
  .upgrade-item--short {
    display: none; }
    .upgrade-item--short .upgrade-item__material,
    .upgrade-item--short .upgrade-item__price,
    .upgrade-item--short .upgrade-item__exp,
    .upgrade-item--short .upgrade-item__text {
      display: none; }
  .upgrade-item__text {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase; }
  .upgrade-item__img {
    width: 70px;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: .8; }
  .upgrade-item__rate[data-rate="75"] {
    color: #fbd38d; }
  .upgrade-item__rate[data-rate="60"] {
    color: #fbd38d; }
  .upgrade-item__rate[data-rate="50"] {
    color: #ed8936; }
  .upgrade-item__rate[data-rate="45"] {
    color: #ed8936; }
  .upgrade-item__rate[data-rate="30"] {
    color: #f56565; }
  .upgrade-item__rate[data-rate="25"] {
    color: #f56565; }
  .upgrade-item__rate[data-rate="15"] {
    color: #c53030; }
  .upgrade-item__rate[data-rate="10"] {
    color: #d05;
    color: #e53e3e; }
  .upgrade-item__rate[data-rate="5"] {
    color: #fd0505; }
  .upgrade-item__rate[data-rate="3"] {
    color: #fd0505; }
  .upgrade-item__rate[data-rate="1"] {
    color: #fd0505; }
  .upgrade-item__rate[data-rate="0.5"] {
    color: #c60000; }
  .upgrade-item__head {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 7px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .upgrade-item__gs {
    color: #b88b58;
    letter-spacing: .03em; }
    .upgrade-item__gs span {
      font-weight: 600; }
  .upgrade-item__stage {
    text-transform: uppercase; }
    .upgrade-item__stage span {
      color: #b88b58; }
  .upgrade-item__material {
    margin-bottom: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px; }
  .upgrade-item__material, .upgrade-item__price {
    /*display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;*/
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 10px 0; }
  .upgrade-item .slotText {
    max-width: 300px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    overflow: hidden;
    text-transform: uppercase; }
  .upgrade-item .item {
    margin-bottom: unset;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-flex: calc(50% - 10px);
    -ms-flex: calc(50% - 10px);
    flex: calc(50% - 10px); }
    .upgrade-item .item .value {
      padding-right: 2px; }

.equipments-yorn__upgrade-list .upgrade-item__material,
.equipments-yorn__upgrade-list .upgrade-item__price {
  grid-template-columns: 1fr; }

.stage-calc {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase; }
  .stage-calc__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: calc(50% - 10px);
    -ms-flex: calc(50% - 10px);
    flex: calc(50% - 10px);
    display: flex;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    padding: 5px 15px;
    border-radius: 3px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .stage-calc__item:hover {
      background-color: rgba(255, 255, 255, 0.1);
      -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    .stage-calc__item:nth-child(2), .stage-calc__item:nth-child(4), .stage-calc__item:nth-child(6), .stage-calc__item:nth-child(7) {
      margin-right: 0px; }
    .stage-calc__item:last-child .slider {
      top: unset;
      bottom: 100%; }
    @media screen and (max-width: 500px) {
      .stage-calc__item {
        margin-right: 0px; } }
  .stage-calc__item-name {
    -webkit-box-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
    font-size: 13px;
    letter-spacing: .08em;
    pointer-events: none; }
  .stage-calc__value {
    text-align: center;
    pointer-events: none; }
  .stage-calc span {
    margin: 0 1rem;
    pointer-events: none; }

.slider {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 100%;
  width: 100%;
  height: 0;
  padding: 0 15px;
  background-color: rgba(3, 3, 3, 0.99);
  -webkit-transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -o-transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }
  .slider--active {
    -webkit-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    -o-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    height: 62px; }
  .slider .noUi-target {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    -webkit-transition: opacity 3s ease 1s;
    -o-transition: opacity 3s ease 1s;
    transition: opacity 3s ease 1s;
    -webkit-animation: sliderIn .2s ease forwards .24s;
    animation: sliderIn .2s ease forwards .24s; }

.latree-slider.noUi-target {
  background: rgba(255, 255, 255, 0.1);
  border: 0px solid rgba(255, 255, 255, 0.05);
  -webkit-box-shadow: 0 3px 6px -5px rgba(255, 255, 255, 0.1);
  box-shadow: 0 3px 6px -5px rgba(255, 255, 255, 0.1);
  border-radius: 7px; }

.latree-slider.noUi-horizontal {
  height: 14px; }

.latree-slider.noUi-horizontal .noUi-handle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: unset;
  background-color: var(--mdc-theme-secondary, #018786);
  -webkit-box-shadow: unset;
  box-shadow: unset; }
  .latree-slider.noUi-horizontal .noUi-handle:before, .latree-slider.noUi-horizontal .noUi-handle:after {
    display: none; }

.latree-slider.noUi-horizontal .noUi-handle {
  right: -10px !important;
  top: -3px; }

.latree-slider .noUi-connect {
  opacity: .54;
  background-color: var(--mdc-theme-secondary, #018786); }

.latree-slider .noUi-value {
  line-height: 25px;
  color: #b88b58;
  font-weight: 600;
  cursor: pointer; }

.latree-slider .noUi-marker-large {
  -webkit-transition: height .3s ease;
  -o-transition: height .3s ease;
  transition: height .3s ease;
  background: #b88b58; }

@media screen and (max-width: 500px) {
  .equipments-yorn__tabs-head {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: unset; }
  .equipments-yorn__tabs .tab, .equipments-yorn__tabs-head .tab {
    width: unset;
    -webkit-box-flex: 1;
    -ms-flex: 1 auto;
    flex: 1 auto; }
  .upgrade-item .item {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 auto;
    flex: 1 auto; }
  .upgrade-item__img {
    width: 55px; }
  .equipments-yorn__upgrade .equipments-yorn__upgrade-row .equipments-yorn__tabs {
    grid-gap: unset;
    background: rgba(3, 3, 3, 0.65); }
  .upgrade-item__head {
    font-size: 13px; }
  .upgrade-item .slotText {
    font-size: 11px; }
  .stage-calc {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .stage-calc .slider {
    -webkit-transition: unset;
    -o-transition: unset;
    transition: unset; }
  .stage-calc .slider--active {
    -webkit-transition: unset;
    -o-transition: unset;
    transition: unset; }
  .stage-calc .noUi-target {
    -webkit-transition: unset;
    -o-transition: unset;
    transition: unset;
    -webkit-animation: unset;
    animation: unset;
    opacity: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
  .equipments-yorn__upgrade-row {
    width: 100%; } }

@-webkit-keyframes sliderIn {
  0% {
    opacity: 0;
    top: 15%; }
  100% {
    opacity: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); } }

@keyframes sliderIn {
  0% {
    opacity: 0;
    top: 15%; }
  100% {
    opacity: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); } }

.useful-links {
  grid-gap: 10px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 120px 120px;
  grid-template-areas: "a b" 
 "a s";
  margin-top: 80px; }
  @media screen and (max-width: 1000px) {
    .useful-links {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 130px 100px;
      grid-template-areas: "a a" 
 "b s"; } }
  @media screen and (max-width: 700px) {
    .useful-links {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      grid-gap: 0; }
      .useful-links__item {
        margin-bottom: 10px; } }
  .useful-links__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 8px;
    position: relative;
    max-height: 100%;
    min-height: 100px;
    overflow: hidden; }
    @media screen and (max-width: 700px) {
      .useful-links__item {
        border-radius: 0px; } }
    .useful-links__item--whales:after {
      content: '';
      position: absolute;
      left: 58px;
      top: 20px;
      background-image: url(/images/wha.png);
      background-size: cover;
      width: 300px;
      height: 230px; }
      @media screen and (max-width: 700px) {
        .useful-links__item--whales:after {
          right: 1px; } }
    .useful-links__item--collection {
      z-index: 100; }
      .useful-links__item--collection:after {
        content: '';
        position: absolute;
        right: -17px;
        bottom: -9px;
        background-image: url(/images/mokoko.png);
        background-size: cover;
        width: 64px;
        height: 64px;
        z-index: 999; }
        @media screen and (max-width: 700px) {
          .useful-links__item--collection:after {
            right: 1px; } }
    .useful-links__item--support {
      background: rgba(3, 3, 3, 0.5);
      -webkit-transition: background .4s ease;
      -o-transition: background .4s ease;
      transition: background .4s ease; }
      .useful-links__item--support:hover {
        background: rgba(221, 0, 85, 0.1); }
        .useful-links__item--support:hover .useful-links__title {
          color: #d05; }
          .useful-links__item--support:hover .useful-links__title svg {
            fill: #d05;
            -webkit-animation: svgHeart .8s ease infinite;
            animation: svgHeart .8s ease infinite; }
      .useful-links__item--support .useful-links__title {
        color: #b88b58;
        -webkit-transition: color .5s ease;
        -o-transition: color .5s ease;
        transition: color .5s ease; }
        .useful-links__item--support .useful-links__title svg {
          fill: #d05; }
      @media screen and (max-width: 700px) {
        .useful-links__item--support {
          display: none; } }
    @media screen and (max-width: 700px) {
      .useful-links__item {
        max-height: 100px;
        height: 100px;
        overflow: hidden; } }
    .useful-links__item:nth-child(1) {
      grid-area: a; }
      @media screen and (min-width: 701px) {
        .useful-links__item:nth-child(1) .useful-links__title {
          font-size: 45px; } }
    .useful-links__item:nth-child(2) {
      grid-area: b; }
    .useful-links__item:nth-child(4) {
      display: none;
      grid-area: g; }
    .useful-links__item:nth-child(3) {
      grid-area: s; }
    .useful-links__item:hover:before {
      opacity: 0; }
    .useful-links__item:before {
      content: "";
      display: block;
      position: absolute;
      border-radius: 8px;
      top: 25%;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      opacity: .5;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(transparent));
      background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.6), transparent);
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent); }
      @media screen and (max-width: 700px) {
        .useful-links__item:before {
          border-radius: 0px; } }
  .useful-links__title {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .08em;
    width: 100%;
    text-align: center;
    z-index: 5;
    color: rgba(255, 255, 255, 0.9);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    @media screen and (max-width: 1000px) {
      .useful-links__title {
        font-size: 25px; } }
    @media screen and (max-width: 400px) {
      .useful-links__title {
        font-size: 20px; } }
  .useful-links__img {
    border-radius: 8px;
    overflow: hidden;
    height: 100%; }
    @media screen and (max-width: 700px) {
      .useful-links__img {
        border-radius: 0px; } }
    .useful-links__img img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover; }

@-webkit-keyframes svgHeart {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  15% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes svgHeart {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  15% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

.hamburger {
  position: absolute;
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  z-index: 99999; }
  .hamburger:before, .hamburger:after {
    content: "";
    display: block;
    position: absolute;
    width: 28px;
    height: 2px;
    top: 13px;
    left: 0;
    -webkit-transition: -webkit-transform .15s ease;
    transition: -webkit-transform .15s ease;
    -o-transition: transform .15s ease;
    transition: transform .15s ease;
    transition: transform .15s ease, -webkit-transform .15s ease;
    transition: transform .15s ease;
    background-color: #eee; }
  .hamburger:before {
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px); }
  .hamburger:after {
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px); }
  .hamburger--active:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .hamburger--active:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); }

@media screen and (max-width: 980px) {
  .hamburger {
    display: block; }
  .header-right {
    display: none; } }

@media screen and (max-width: 736px) {
  .header {
    width: calc(100% - 1rem) !important; } }

.header .mobile-nav {
  background: rgba(3, 3, 3, 0.97);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  display: none; }
  .header .mobile-nav.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1; }
  .header .mobile-nav ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%; }
    .header .mobile-nav ul li {
      width: 100%;
      text-align: center;
      padding: 1rem 0 !important; }
      .header .mobile-nav ul li a {
        font-weight: 700; }
      .header .mobile-nav ul li ul {
        opacity: 1;
        visibility: visible;
        position: unset;
        display: none;
        max-height: unset; }
        .header .mobile-nav ul li ul li {
          margin: 0 !important; }
          .header .mobile-nav ul li ul li a {
            font-weight: 600; }
        .header .mobile-nav ul li ul #auth {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center; }
      .header .mobile-nav ul li .width {
        display: none;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row; }
        .header .mobile-nav ul li .width li {
          -webkit-box-flex: 30%;
          -ms-flex: 30%;
          flex: 30%; }
      .header .mobile-nav ul li.active ul {
        display: block; }
      .header .mobile-nav ul li.active .width {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
    .header .mobile-nav ul .new:after {
      display: none; }

.modal--equip {
  width: 70%;
  height: 90%;
  top: 5%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: hidden; }

.equip-reforge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 15px;
  line-height: 22px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-line-pack: start;
  align-content: flex-start; }
  .equip-reforge__type {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 50%; }
  .equip-reforge__head {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 50%;
    width: 100%;
    height: 80px;
    background: rgba(3, 3, 3, 0.9);
    position: fixed;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .08em;
    color: #b88b58;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 80px;
    margin-bottom: 80px; }
  .equip-reforge .equip-reforge__head + .equip-reforge__stage {
    margin-top: 80px; }
  .equip-reforge__stage {
    padding: 0 25px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .equip-reforge__stage:last-child {
      border-bottom: unset; }
  .equip-reforge__arrow {
    fill: #b88b58;
    width: 40px;
    height: 35px; }
  .equip-reforge__stage-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 25px;
    line-height: 35px;
    color: #b88b58;
    margin-bottom: 8px; }

.modal_inner {
  height: 100%;
  padding: 15px 25px; }
  .modal_inner--no-padding {
    padding: 0; }

.equip-options {
  height: 100%; }
  .equip-options .class_selectIcon__item--active {
    color: #b88b58;
    -webkit-filter: grayscale(0) brightness(100%);
    filter: grayscale(0) brightness(100%);
    color: white; }
  .equip-options__scroll {
    height: 80%; }
  .equip-options__types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 10px 0; }
  .equip-options__type.mdc-button {
    -webkit-box-flex: calc(50% - 10px);
    -ms-flex: calc(50% - 10px);
    flex: calc(50% - 10px);
    background-color: rgba(255, 255, 255, 0.05);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    padding: 5px 15px;
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    -webkit-transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .equip-options__type.mdc-button:last-child {
      margin: 0; }
    .equip-options__type.mdc-button.active {
      --mdc-theme-primary: #b88b58;
      color: #b88b58 !important; }
  .equip-options__stages {
    display: none; }
    .equip-options__stages--active {
      display: block; }
  .equip-options__stage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 0;
    padding-right: 15px; }
    .equip-options__stage:last-child {
      border-bottom: unset; }
  .equip-options__stage-name {
    min-width: 100px;
    font-size: 25px;
    text-align: center;
    margin-right: 10px;
    color: #b88b58; }
  .equip-options__stage-option {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 5px; }
    .equip-options__stage-option:last-child {
      margin-bottom: 0px; }
    .equip-options__stage-option img {
      width: 25px;
      height: 25px;
      vertical-align: sub;
      border-radius: 2px; }
  .equip-options .skill-name {
    color: #dfd350; }
  .equip-options .skill-bonus {
    color: #99ff99; }

.adaptation {
  background: rgba(3, 3, 3, 0.5);
  padding: 10px 0 0 0;
  border-radius: 5px;
  max-width: 630px;
  margin: 0 auto;
  min-height: 275px; }
  .adaptation__rate {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px; }
  .adaptation__result {
    background: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    background: rgba(3, 3, 3, 0.65);
    padding: 8px 8px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    text-align: center; }
    .adaptation__result img {
      border-radius: 3px; }
    .adaptation__result span {
      color: #b88b58; }

.guardian-choice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative; }
  .guardian-choice--coffin .guardian-choice__icon {
    -webkit-filter: grayscale(100%) brightness(70%);
    filter: grayscale(100%) brightness(70%);
    position: relative;
    overflow: hidden; }
    .guardian-choice--coffin .guardian-choice__icon:before {
      content: '';
      width: 80px;
      height: 20px;
      position: absolute;
      text-align: center;
      color: #f0f0f0;
      background-color: black;
      right: -20px;
      bottom: 10px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }
  .guardian-choice__item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .guardian-choice__name {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    -webkit-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .guardian-choice__slider {
    width: 120px;
    height: 120px;
    position: relative; }
    .guardian-choice__slider .editor_guide__left,
    .guardian-choice__slider .editor_guide__right {
      height: 100%; }
  .guardian-choice__icon {
    width: 120px;
    height: 120px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    -webkit-filter: grayscale(0%) brightness(100%);
    filter: grayscale(0%) brightness(100%);
    -webkit-transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 0.2s ease;
    transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 0.2s ease;
    -o-transition: filter 0.2s ease, border 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 0.2s ease, border 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 0.2s ease, border 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 0.2s ease;
    cursor: pointer; }
    .guardian-choice__icon img, .guardian-choice__icon video {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover; }
  .guardian-choice__list {
    position: absolute;
    top: 160px;
    width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 999; }
    .guardian-choice__list .active .mdc-button__ripple::before {
      opacity: .1; }
  .guardian-choice__list-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 130px; }
    .guardian-choice__list-item .guardian-choice__name {
      font-size: 11px; }
    .guardian-choice__list-item.active .guardian-choice__icon, .guardian-choice__list-item:hover .guardian-choice__icon {
      border: 3px solid #c4fff7; }
    .guardian-choice__list-item.active .guardian-choice__name, .guardian-choice__list-item:hover .guardian-choice__name {
      color: #c4fff7; }
  .guardian-choice__list-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 10px 8px;
    background: rgba(3, 3, 3, 0.9);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.accessories-choice {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 5px; }
  .accessories-choice__item {
    position: relative;
    width: 50px;
    height: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    -webkit-transition: -webkit-filter .15s ease;
    transition: -webkit-filter .15s ease;
    -o-transition: filter .15s ease;
    transition: filter .15s ease;
    transition: filter .15s ease, -webkit-filter .15s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 10px; }
    .accessories-choice__item:nth-child(5) {
      margin: 0; }
    .accessories-choice__item:hover {
      -webkit-filter: brightness(80%);
      filter: brightness(80%); }
    .accessories-choice__item[data-type='necklace'] {
      background: url(/images/adaptation/necklace.png) no-repeat 0 0; }
    .accessories-choice__item[data-type='earring'] {
      background: url(../../assets/img/earring.png) no-repeat 0 0; }
    .accessories-choice__item[data-type='ring'] {
      background: url(../../assets/img/ring.png) no-repeat 0 0; }
    .accessories-choice__item img {
      width: 44px;
      height: 44px; }
      .accessories-choice__item img[data-grade='3'] {
        background: -o-linear-gradient(315deg, #261331, #480d5d);
        background: linear-gradient(135deg, #261331, #480d5d); }
      .accessories-choice__item img[data-grade='4'] {
        background: -o-linear-gradient(315deg, #362003, #9e5f04);
        background: linear-gradient(135deg, #362003, #9e5f04); }
      .accessories-choice__item img[data-grade='5'] {
        background: -o-linear-gradient(315deg, #341a09, #a24006);
        background: linear-gradient(135deg, #341a09, #a24006); }
    .accessories-choice__item--active {
      -webkit-filter: brightness(80%);
      filter: brightness(80%); }
  .accessories-choice__list {
    position: absolute;
    top: 60px;
    left: 50%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 999; }
    .accessories-choice__list .active .mdc-button__ripple::before {
      opacity: .1; }
  .accessories-choice .searchList_item span {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important; }
  .accessories-choice .searchList_item .accessories-choice__gs {
    width: 60px; }
  .accessories-choice .searchList_item .accessories-choice__name {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  .accessories-choice .searchList_item .accessories-choice__adaptation {
    width: 70px; }
  .accessories-choice__list-inner {
    background: rgba(3, 3, 3, 0.9);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

@media screen and (max-width: 500px) {
  .accessories-choice__list-inner .searchList_item {
    padding-left: 10px !important; }
  .accessories-choice__list-inner .mdc-button.latree_button span {
    font-size: 11px; }
  .accessories-choice__list-inner .searchList_item img {
    width: 30px; }
  .adaptation__result {
    font-size: 14px; }
  .modal--equip {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset;
    padding: unset; }
    .modal--equip .equip-options {
      padding: 0 10px; }
    .modal--equip .class_selectIcon {
      height: 182px;
      overflow-y: scroll; }
    .modal--equip .class_selectIcon__item {
      -webkit-box-flex: 1;
      -ms-flex: 1 89px;
      flex: 1 89px; }
    .modal--equip .equip-options__types {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .modal--equip .equip-options__type {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      margin-bottom: 10px; }
    .modal--equip .equip-options__type.mdc-button:last-child {
      margin-right: 10px; }
    .modal--equip .equip-options__scroll {
      height: 64%; }
    .modal--equip .equip-options__stage {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 10px 0;
      -webkit-box-align: inherit;
      -ms-flex-align: inherit;
      align-items: inherit; } }

.avatar-list {
  margin: 0 auto;
  background: rgba(3, 3, 3, 0.5);
  padding: 10px 14px;
  border-radius: 5px; }
  .avatar-list .avatar-server {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 10px; }
    .avatar-list .avatar-server .mdc-button.active {
      --mdc-theme-primary: #b88b58;
      color: #b88b58 !important; }
  .avatar-list__class {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin-bottom: 15px; }
  .avatar-list .class_selectIcon__item img, .avatar-list .class_selectIcon__item svg {
    width: 50px; }
  .avatar-list .class_selectIcon__item p {
    font-size: 12px; }
  .avatar-list .class_selectIcon__item--active {
    -webkit-filter: grayscale(0) brightness(120%);
    filter: grayscale(0) brightness(120%);
    color: white; }
  .avatar-list__result {
    background: rgba(3, 3, 3, 0.3);
    padding: 10px 9px;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .avatar-list .result-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    -webkit-transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .avatar-list .result-item:hover {
      background: rgba(255, 255, 255, 0.1); }
    .avatar-list .result-item .copied {
      left: 50%;
      bottom: 0; }
    .avatar-list .result-item img {
      width: 100px;
      height: 100px; }

.avatar-type {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 5px; }
  .avatar-type__item {
    position: relative;
    width: 50px;
    height: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    -webkit-transition: -webkit-filter .15s ease;
    transition: -webkit-filter .15s ease;
    -o-transition: filter .15s ease;
    transition: filter .15s ease;
    transition: filter .15s ease, -webkit-filter .15s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 10px; }
    .avatar-type__item:nth-child(5) {
      margin: 0; }
    .avatar-type__item:hover {
      -webkit-filter: brightness(80%);
      filter: brightness(80%); }
    .avatar-type__item[data-type='face1'] {
      background: url(../../assets/img/face1.png) no-repeat 0 0; }
    .avatar-type__item[data-type='face2'] {
      background: url(../../assets/img/face2.png) no-repeat 0 0; }
    .avatar-type__item[data-type='helm'] {
      background: url(../../assets/img/helm.png) no-repeat 0 0; }
    .avatar-type__item[data-type='instrument'] {
      background: url(../../assets/img/instrument.png) no-repeat 0 0; }
    .avatar-type__item[data-type='pants'] {
      background: url(../../assets/img/pants.png) no-repeat 0 0; }
    .avatar-type__item[data-type='top'] {
      background: url(../../assets/img/top.png) no-repeat 0 0; }
    .avatar-type__item[data-type='topfull'] {
      background: url(../../assets/img/top.png) no-repeat 0 0; }
    .avatar-type__item[data-type='weapon'] {
      background: url(../../assets/img/weapon.png) no-repeat 0 0; }
    .avatar-type__item img {
      width: 44px;
      height: 44px; }
      .avatar-type__item img[data-grade='3'] {
        background: -o-linear-gradient(315deg, #261331, #480d5d);
        background: linear-gradient(135deg, #261331, #480d5d); }
      .avatar-type__item img[data-grade='4'] {
        background: -o-linear-gradient(315deg, #362003, #9e5f04);
        background: linear-gradient(135deg, #362003, #9e5f04); }
      .avatar-type__item img[data-grade='5'] {
        background: -o-linear-gradient(315deg, #341a09, #a24006);
        background: linear-gradient(135deg, #341a09, #a24006); }
    .avatar-type__item--active {
      -webkit-filter: brightness(200%);
      filter: brightness(200%); }

.marishop {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .marishop__inputs {
    max-width: 850px;
    width: 100%; }
  .marishop__inputs-auction {
    margin-top: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .marishop__input {
    position: relative;
    height: 60px;
    width: 350px;
    width: 100%;
    margin: 0 auto; }
    .marishop__input--auction {
      -webkit-box-flex: calc(33.33% - 10px);
      -ms-flex: calc(33.33% - 10px);
      flex: calc(33.33% - 10px);
      margin-right: 10px;
      margin-bottom: 10px; }
      .marishop__input--auction:nth-child(3n + 3), .marishop__input--auction:last-child {
        margin-right: 0px; }
    .marishop__input--crystal {
      opacity: 0;
      margin-bottom: 15px; }
    .marishop__input--crystal:before {
      content: "";
      width: 26px;
      height: 29px;
      background-image: url(/images/cash.png);
      position: absolute;
      left: 18px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      pointer-events: none; }
    .marishop__input:after {
      width: 35px;
      height: 35px;
      background-image: url(../../assets/img/gold.png);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      right: 18px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      pointer-events: none; }
    .marishop__input input {
      background: transparent;
      border-radius: 3px;
      padding: .7rem 1.4rem .7rem 60px;
      width: 100%;
      height: 100%;
      font-size: 20px;
      font-weight: 500;
      line-height: 46px;
      border: unset;
      -webkit-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      color: rgba(255, 255, 255, 0.9);
      -webkit-transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background-color: rgba(255, 255, 255, 0.05); }
      .marishop__input input:hover {
        background-color: rgba(255, 255, 255, 0.1);
        -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
  .marishop__input-img {
    width: 35px;
    height: 35px;
    position: absolute;
    left: 12.5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none; }
    .marishop__input-img img {
      opacity: 0;
      -webkit-animation: img_op 1s ease-out forwards .5s;
      animation: img_op 1s ease-out forwards .5s;
      height: 100%;
      width: 100%; }
  .marishop .select {
    width: 100%;
    max-width: 850px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; }
    .marishop .select__item {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 18px; }
  .marishop h3 {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 0 10px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: rgba(3, 3, 3, 0.9) 0px 0.1rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    opacity: .9;
    width: 100%;
    max-width: 785px;
    max-width: 835px;
    margin: 0 auto; }
  .marishop__tabs {
    width: 100%;
    max-width: 850px;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .marishop__tab {
    -webkit-transition: -webkit-transform .34s ease-out .04s;
    transition: -webkit-transform .34s ease-out .04s;
    -o-transition: transform .34s ease-out .04s;
    transition: transform .34s ease-out .04s;
    transition: transform .34s ease-out .04s, -webkit-transform .34s ease-out .04s;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0; }
    .marishop__tab.is-active {
      -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
      transform: translateX(0%); }
    .marishop__tab[data-tab="1"].is-active {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%); }
    .marishop__tab.in-active {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%); }
  .marishop__list {
    width: 100%;
    border-radius: 5px;
    background: rgba(3, 3, 3, 0.5);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.marishop-time,
.marishop__input--crystal,
.marishop__inputs-auction,
.marishop__list {
  opacity: 0;
  will-change: opacity, transform;
  -webkit-transform: translate3d(0, 16px, 0) rotate(0.001deg);
  transform: translate3d(0, 16px, 0) rotate(0.001deg); }

.marishop-time {
  text-align: center;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(3, 3, 3, 0.9) 0px 0.1rem 0.5rem; }

.marishop-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 90px;
  width: 100%; }
  .marishop-item__img {
    -ms-flex-preferred-size: 110px;
    flex-basis: 110px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 7px;
    margin-right: 10px; }
    .marishop-item__img img {
      opacity: 0;
      -webkit-animation: img_op 1s ease-out forwards .5s;
      animation: img_op 1s ease-out forwards .5s;
      width: 80px;
      height: 80px;
      -o-object-fit: cover;
      object-fit: cover; }
  .marishop-item__name {
    -ms-flex-preferred-size: 380px;
    flex-basis: 380px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-right: 10px; }
  .marishop-item__prices {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 300px;
    flex-basis: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .marishop-item__price {
    color: #b88b58;
    color: #73a1ff;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    white-space: nowrap;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex: 1;
    flex: 1; }
    .marishop-item__price:before {
      content: "";
      display: inline-block;
      margin: -3px 7px 0 0;
      vertical-align: middle;
      width: 26px;
      height: 29px; }
  .marishop-item__price-crystal:before {
    background-image: url(/images/cash.png); }
  .marishop-item__price-gold:before {
    background-image: url(../../assets/img/gold.png);
    background-size: contain;
    background-repeat: no-repeat; }
  .marishop-item__price-calc, .marishop-item__donat-price-calc {
    color: #8DF901;
    text-align: center; }
    .marishop-item__price-calc:before, .marishop-item__donat-price-calc:before {
      content: none; }
    .marishop-item__price-calc[data-sign="negative"], .marishop-item__donat-price-calc[data-sign="negative"] {
      color: #c53030; }
  .marishop-item[data-grade='Uncommon'], .marishop-item[data-grade='uncommon'] {
    color: #8DF901; }
  .marishop-item[data-grade='Rare'], .marishop-item[data-grade='rare'] {
    color: #00B0FA; }
  .marishop-item[data-grade='Epic'], .marishop-item[data-grade='epic'], .marishop-item[data-grade='heroic'] {
    color: #ce43fc; }
  .marishop-item[data-grade='Legendary'], .marishop-item[data-grade='legendary'] {
    color: #F99200; }

.marishop__input[data-grade='Uncommon'] input, .marishop__input[data-grade='uncommon'] input {
  color: #8DF901; }

.marishop__input[data-grade='Rare'], .marishop__input[data-grade='rare'] {
  color: #00B0FA; }
  .marishop__input[data-grade='Rare'] input, .marishop__input[data-grade='rare'] input {
    color: #00B0FA; }

.marishop__input[data-grade='Epic'], .marishop__input[data-grade='epic'], .marishop__input[data-grade='heroic'] {
  color: #ce43fc; }
  .marishop__input[data-grade='Epic'] input, .marishop__input[data-grade='epic'] input, .marishop__input[data-grade='heroic'] input {
    color: #ce43fc; }

.marishop__input[data-grade='Legendary'] .marishop__input[data-grade='legendary'] {
  color: #F99200; }
  .marishop__input[data-grade='Legendary'] .marishop__input[data-grade='legendary'] input {
    color: #F99200; }

@media screen and (max-width: 700px) {
  .marishop-time {
    font-size: 15px; }
  .marishop .select__item, .marishop h3 {
    font-size: 15px; }
  .marishop {
    margin: 0 10px; }
  .marishop__input {
    height: 40px; }
    .marishop__input input {
      font-size: 15px;
      line-height: 40px;
      padding: .7rem 1.4rem .7rem 40px; }
  .marishop__input--crystal:before {
    width: 20px;
    height: 23px;
    left: 10px;
    background-size: contain; }
  .marishop__input-img {
    width: 25px;
    height: 25px;
    left: 7.5px; }
  .marishop-item {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 110px; }
  .marishop-item__img {
    -ms-flex-preferred-size: 85px;
    flex-basis: 85px; }
    .marishop-item__img img {
      width: 45px;
      height: 45px; }
  .marishop-item__name {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    margin-right: 10px; }
  .marishop-item__prices {
    padding: 0 50px; }
  .marishop-item__price {
    font-size: 14px; }
  .marishop-item__price::before {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain; } }

.stage-select {
  width: 100%;
  height: 130px;
  background: rgba(3, 3, 3, 0.9);
  padding: 15px 25px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10; }
  .stage-select__title {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .08em;
    color: #b88b58;
    text-transform: uppercase;
    margin-bottom: 15px; }
  .stage-select .latree-slider.noUi-horizontal .noUi-handle {
    background-color: #b88b58c9; }
  .stage-select .noUi-value {
    cursor: pointer; }

.chance-calculator {
  width: 100%;
  margin-top: 130px;
  padding: 15px 25px; }
  .chance-calculator__successful-rate {
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase; }
  .chance-calculator__material {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .chance-calculator__material .catalyst__input-text {
      width: 130px; }
    .chance-calculator__material input {
      padding: .7rem 1.4rem .7rem 75px; }
    .chance-calculator__material .item {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -ms-flex-preferred-size: 300px;
      flex-basis: 300px;
      margin: 0; }
    .chance-calculator__material .item-input {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -ms-flex-preferred-size: 300px;
      flex-basis: 300px;
      -ms-flex-positive: 1;
      flex-grow: 1;
      margin: 0 5px; }
  .chance-calculator__material-result {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    grid-gap: unset; }
    .chance-calculator__material-result .catalyst__input {
      border-radius: 3px;
      transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background-color: rgba(255, 255, 255, 0.05); }
      .chance-calculator__material-result .catalyst__input:hover {
        background-color: rgba(255, 255, 255, 0.1);
        -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
    .chance-calculator__material-result input {
      padding: .7rem 1.4rem .7rem 75px;
      background-color: transparent; }
      .chance-calculator__material-result input:hover {
        -webkit-box-shadow: unset;
        box-shadow: unset;
        background-color: transparent; }
    .chance-calculator__material-result .item-input__texts {
      width: 100%; }
    .chance-calculator__material-result .catalyst__input-text {
      left: 0;
      padding: .7rem 10px .7rem 70px;
      width: 100%; }
    .chance-calculator__material-result .item {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -ms-flex-preferred-size: 300px;
      flex-basis: 300px; }
  .chance-calculator__catalyst {
    background: #000;
    padding-top: 10px;
    height: 247px;
    border-radius: 10px; }
  .chance-calculator__blessing {
    margin-bottom: 30px; }
  .chance-calculator__luck {
    margin: 0 auto;
    margin-bottom: 10px;
    min-height: 450px; }

.luck {
  color: rgba(255, 255, 255, 0.8); }
  .luck__title {
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    margin-bottom: 10px; }
  .luck__chanse {
    text-align: center;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    margin-bottom: 10px; }
  .luck__chanse-text {
    font-weight: 400; }
    .luck__chanse-text span {
      color: #b88b58; }
  .luck__chanse-result {
    font-weight: 600; }
  .luck__chanse-bless {
    margin-top: 5px; }
  .luck .equipments-actions {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 20px; }
  .luck .equipments-actions__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: unset;
    -ms-flex: unset;
    flex: unset;
    padding: 5px 35px;
    height: 55px;
    position: relative; }
  .luck .equipments-actions__item--disabled {
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.02); }
  .luck .blessing-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background-color: #b88b58;
    -webkit-transition: width .3s ease-out;
    -o-transition: width .3s ease-out;
    transition: width .3s ease-out;
    max-width: 100%; }
    .luck .blessing-bar--plus {
      z-index: -1;
      background-color: #e1cab0;
      -webkit-transition: width .3s ease .1s;
      -o-transition: width .3s ease .1s;
      transition: width .3s ease .1s; }
    .luck .blessing-bar--full {
      width: 100% !important;
      background-color: rgba(255, 255, 255, 0.1); }
  .luck .vahantur-anim {
    -webkit-animation: vahantur .5s ease forwards;
    animation: vahantur .5s ease forwards; }
  .luck .vahantur-anim-full {
    -webkit-animation: vahantur-full .5s ease forwards;
    animation: vahantur-full .5s ease forwards; }
  .luck .equipments-actions__item-reset {
    padding: 5px 15px;
    height: 55px;
    fill: #c53030; }
  .luck .equipments-actions__img {
    width: 35px;
    height: 35px;
    margin: 0 5px;
    -webkit-transition: -webkit-filter .3s ease;
    transition: -webkit-filter .3s ease;
    -o-transition: filter .3s ease;
    transition: filter .3s ease;
    transition: filter .3s ease, -webkit-filter .3s ease;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); }
    .luck .equipments-actions__img img {
      width: 100%;
      height: 100%; }
  .luck__result {
    text-align: center;
    font-size: 13px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase; }

.blessing__title {
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  margin-bottom: 10px; }

.blessing__successful-rate {
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase; }
  .blessing__successful-rate span {
    color: #b88b58; }

.blessing__result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .blessing__result .blessing__result-item {
    margin: 0 5px; }
    .blessing__result .blessing__result-item:first-child {
      margin-left: 0; }
    .blessing__result .blessing__result-item:last-child {
      margin-right: 0; }

.blessing__result-img {
  width: 35px;
  height: 35px;
  position: absolute;
  left: 12.5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none; }
  .blessing__result-img img {
    opacity: 0;
    -webkit-animation: img_op 1s ease-out forwards .5s;
    animation: img_op 1s ease-out forwards .5s;
    height: 100%;
    width: 100%; }

.blessing__result-text {
  padding: 0 0 0 60px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 46px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase; }

.blessing__result-item {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 60px;
  padding: 5px 15px;
  border-radius: 3px;
  transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(255, 255, 255, 0.05);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex: 1;
  -ms-flex-preferred-size: 300px;
  flex-basis: 300px; }
  .blessing__result-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.catalyst {
  margin-bottom: 30px; }
  .catalyst__title {
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    margin-bottom: 10px; }
  .catalyst__preset {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 5px; }
  .catalyst__preset-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 2px 10px;
    border-radius: 15px;
    margin: 0 4px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    opacity: .9;
    position: relative; }
    .catalyst__preset-item:hover {
      opacity: 1; }
    .catalyst__preset-item--active {
      opacity: 1; }
      .catalyst__preset-item--active:before {
        content: "\00d7";
        font-weight: 300;
        font-family: Arial, sans-serif;
        font-size: 22px;
        line-height: 22px;
        display: block;
        position: absolute;
        top: 0;
        right: 3px;
        bottom: 0;
        right: 0;
        z-index: 1;
        opacity: .9;
        display: none; }
    .catalyst__preset-item--none {
      background: #dbdbdb;
      color: #4f4f4f; }
      .catalyst__preset-item--none:hover {
        background: #f4f4f4; }
    .catalyst__preset-item--green {
      background: #dbffae;
      color: #1b4230; }
      .catalyst__preset-item--green:hover {
        background: #d0ff94; }
    .catalyst__preset-item--blue {
      color: #094067;
      background: #93cdf6; }
      .catalyst__preset-item--blue:hover {
        background: #aad8f8; }
    .catalyst__preset-item--epic {
      background: #e8a7fe;
      color: #480d5d; }
      .catalyst__preset-item--epic:hover {
        background: #f5d9ff; }
    .catalyst__preset-item--full {
      background: #d0c2e9;
      color: #311B92; }
      .catalyst__preset-item--full:hover {
        background: #ede7f7; }
    .catalyst__preset-item--green-blue {
      color: #1b4230;
      background: #93cdf6;
      background: -o-linear-gradient(315deg, #dbffae 0%, #dbffae 50%, #93cdf6 50%, #93cdf6 100%);
      background: linear-gradient(135deg, #dbffae 0%, #dbffae 50%, #93cdf6 50%, #93cdf6 100%);
      background: -o-linear-gradient(315deg, #dbffae, #93cdf6);
      background: linear-gradient(135deg, #dbffae, #93cdf6); }
      .catalyst__preset-item--green-blue:hover {
        opacity: 1; }
  .catalyst__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .catalyst__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 10px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .catalyst__input-text {
    padding: .7rem 0 .7rem 0;
    text-align: center;
    height: 100%;
    font-size: 20px;
    font-weight: 500;
    line-height: 46px;
    position: absolute;
    right: 12.5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    width: 190px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase; }
  .catalyst .latree-slider {
    margin-top: 10px; }
  .catalyst .catalyst__item:first-child .latree-slider.noUi-target {
    background-color: #dbffae40; }
  .catalyst .catalyst__item:first-child .latree-slider.noUi-horizontal .noUi-handle {
    background-color: #dbffae; }
  .catalyst .catalyst__item:first-child .latree-slider .noUi-marker-large {
    background: #dbffae; }
  .catalyst .catalyst__item:first-child .latree-slider .noUi-value {
    color: #dbffae; }
  .catalyst .catalyst__item:first-child .catalyst__value {
    color: #dbffae; }
  .catalyst .catalyst__item:nth-child(2) .latree-slider.noUi-target {
    background-color: #93cdf638; }
  .catalyst .catalyst__item:nth-child(2) .latree-slider.noUi-horizontal .noUi-handle {
    background-color: #93cdf6; }
  .catalyst .catalyst__item:nth-child(2) .latree-slider .noUi-marker-large {
    background: #93cdf6; }
  .catalyst .catalyst__item:nth-child(2) .latree-slider .noUi-value {
    color: #93cdf6; }
  .catalyst .catalyst__item:nth-child(2) .catalyst__value {
    color: #93cdf6; }
  .catalyst .catalyst__item:last-child .latree-slider.noUi-target {
    background-color: #e8a7fe1c; }
  .catalyst .catalyst__item:last-child .latree-slider.noUi-horizontal .noUi-handle {
    background-color: #e8a7fe; }
  .catalyst .catalyst__item:last-child .latree-slider .noUi-marker-large {
    background: #e8a7fe; }
  .catalyst .catalyst__item:last-child .latree-slider .noUi-value {
    color: #e8a7fe; }
  .catalyst .catalyst__item:last-child .catalyst__value {
    color: #e8a7fe; }
  .catalyst .latree-slider.noUi-horizontal .noUi-handle {
    background-color: #b88b58c9; }
  .catalyst .noUi-value {
    cursor: pointer; }
  .catalyst__text-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .catalyst__value {
    color: #b88b58; }
  .catalyst .latree-slider {
    width: 100%; }

.quick-menu {
  position: absolute;
  right: 20px;
  top: calc(100vh + 50px);
  z-index: 100;
  position: fixed;
  top: 50%;
  margin-top: -110px; }
  .quick-menu a {
    display: block;
    position: relative;
    height: 40px;
    color: var(--primary); }
  .quick-menu span {
    opacity: .8;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s; }
  .quick-menu--active, .quick-menu a:hover {
    color: #fff !important;
    opacity: 1; }
    .quick-menu--active span, .quick-menu a:hover span {
      right: 5px;
      opacity: 1; }

.raid--mystic {
  --primary: #88f;
  --primary-light: #b8b8fe; }
  .raid--mystic .intro__bg {
    background-image: url(/images/mystic/1.jpg); }

.intro__bg {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  opacity: .5;
  background-size: contain;
  background-repeat: no-repeat; }

.raid-content {
  padding: 30px 0px;
  background: rgba(3, 3, 3, 0.5);
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  font-size: 20px;
  color: #dfecff; }
  .raid-content .block-delimiter {
    margin: 30px 0; }
  .raid-content .block-delimiter::before {
    display: block;
    content: '***';
    color: var(--primary);
    font-size: 36px;
    line-height: 1;
    height: 21.6px;
    letter-spacing: .2em;
    text-align: center; }
  .raid-content__title {
    margin: 30px auto 15px;
    line-height: 38px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary); }
  .raid-content .layout {
    max-width: 1000px;
    margin: 0 130px;
    margin: 0 auto; }
  .raid-content__image {
    margin: 30px 0; }
  .raid-content__video video {
    width: 100%; }
  .raid-content .layout_b--flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .raid-content .layout_b--flex .raid-content__video {
      margin: 0 10px; }
      .raid-content .layout_b--flex .raid-content__video:first-child {
        margin-left: 0; }
      .raid-content .layout_b--flex .raid-content__video:last-child {
        margin-right: 0; }
  .raid-content .layout_b img {
    width: 100%; }
  .raid-content p {
    margin: 15px 0; }
    .raid-content p:first-child {
      margin-top: 0; }
  .raid-content .important {
    background-color: rgba(245, 101, 101, 0.15);
    color: #e53e3e;
    border-radius: 3px;
    padding: 0 4px; }
  .raid-content .warning {
    background-color: rgba(254, 252, 191, 0.15);
    background-color: rgba(254, 252, 191, 0.15);
    color: #d69e2e;
    border-radius: 3px;
    padding: 0 4px; }
  .raid-content b {
    font-weight: 600;
    color: var(--primary); }
  .raid-content h3 {
    margin: 30px auto 10px;
    line-height: 38px;
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-light); }
  .raid-content a {
    color: var(--primary);
    border-bottom: 1px solid var(--primary); }
    .raid-content a:hover {
      color: var(--primary-light);
      border-bottom: 1px solid var(--primary-light); }
  .raid-content .requirements {
    max-width: 600px;
    margin: 30px auto; }

.border-dashed {
  max-width: 1000px;
  margin: 15px auto;
  list-style: inside;
  border: 3px dashed var(--primary);
  background: rgba(3, 3, 3, 0.7);
  padding: 5px 25px 10px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease; }
  .border-dashed ::marker {
    color: var(--primary); }
  .border-dashed li[data-mark="2"]::marker {
    content: "2 части: "; }
  .border-dashed li[data-mark="4"]::marker {
    content: "4 части: "; }
  .border-dashed li[data-mark="5"]::marker {
    content: "5 частей: "; }
  .border-dashed:hover {
    border: 3px dashed #bbbbda; }
  .border-dashed li {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase; }
  .border-dashed__title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    color: var(--primary);
    text-align: center; }

.reward-equipments__obtain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px; }
  .reward-equipments__obtain img {
    -webkit-box-flex: 450px;
    -ms-flex: 450px;
    flex: 450px; }

.reward-equipments__set-bonus {
  margin: 30px auto; }

.icon-name img {
  width: 50px;
  height: 50px;
  vertical-align: text-bottom; }

.phase {
  margin-top: 40px; }

.phase-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 40px; }
  .phase-tabs__item {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 8px;
    height: 70px;
    overflow: hidden;
    margin: 0 5px;
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat; }
    .phase-tabs__item:first-child {
      margin-left: 0; }
    .phase-tabs__item:last-child {
      margin-right: 0; }
    .phase-tabs__item:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      opacity: .6;
      -webkit-transition: opacity .3s ease;
      -o-transition: opacity .3s ease;
      transition: opacity .3s ease;
      background: rgba(0, 0, 0, 0.9); }
    .phase-tabs__item:hover:before, .phase-tabs__item--active:before {
      opacity: .3; }
    .phase-tabs__item:hover .phase__text, .phase-tabs__item--active .phase__text {
      color: #fff;
      color: var(--primary); }
  .phase-tabs__text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 30px;
    text-transform: uppercase;
    line-height: 50px;
    font-weight: 500;
    letter-spacing: .08em;
    z-index: 5;
    width: 100%;
    text-align: center;
    color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
    text-shadow: 0 0 14px var(--primary); }
  .phase-tabs--mystic .phase-tabs__item--one {
    background-image: url(/images/mystic/1.jpg); }
  .phase-tabs--mystic .phase-tabs__item--two {
    background-image: url(/images/mystic/7.jpg); }
  .phase-tabs--mystic .phase-tabs__item--three {
    background-image: url(/images/mystic/4.jpg); }

.battle-items__list {
  padding: 15px 25px;
  width: auto;
  max-width: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .battle-items__list .battle-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }

.battle-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 110px;
  margin: 5px; }
  .battle-item:first-child {
    margin-left: 0; }
  .battle-item:last-child {
    margin-right: 0; }
  .battle-item__name {
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center; }
  .battle-item__img {
    width: 64px;
    height: 64px; }
    .battle-item__img img {
      width: 100%;
      height: 100%; }
  .battle-item[data-grade='0'] {
    color: #FFFFFF; }
    .battle-item[data-grade='0'] .battle-item__img {
      background: -o-linear-gradient(315deg, #232323, #575757);
      background: linear-gradient(135deg, #232323, #575757); }
  .battle-item[data-grade='1'] {
    color: #8DF901; }
    .battle-item[data-grade='1'] .battle-item__img {
      background: -o-linear-gradient(315deg, #18220b, #304911);
      background: linear-gradient(135deg, #18220b, #304911); }
  .battle-item[data-grade='2'] {
    color: #00B0FA; }
    .battle-item[data-grade='2'] .battle-item__img {
      background: -o-linear-gradient(315deg, #111f2c, #113d5d);
      background: linear-gradient(135deg, #111f2c, #113d5d); }
  .battle-item[data-grade='3'] {
    color: #ce43fc; }
    .battle-item[data-grade='3'] .battle-item__img {
      background: -o-linear-gradient(315deg, #261331, #480d5d);
      background: linear-gradient(135deg, #261331, #480d5d); }
  .battle-item[data-grade='4'] {
    color: #F99200; }
    .battle-item[data-grade='4'] .battle-item__img {
      background: -o-linear-gradient(315deg, #362003, #9e5f04);
      background: linear-gradient(135deg, #362003, #9e5f04); }
  .battle-item[data-grade='5'] {
    color: #FA5D00; }
    .battle-item[data-grade='5'] .battle-item__img {
      background: -o-linear-gradient(315deg, #341a09, #a24006);
      background: linear-gradient(135deg, #341a09, #a24006); }
  .battle-item[data-grade='6'] {
    color: #a00c80; }
    .battle-item[data-grade='6'] .battle-item__img {
      background: -o-linear-gradient(315deg, #3d173e, #a00c80);
      background: linear-gradient(135deg, #3d173e, #a00c80); }

.mechanics__item {
  padding-top: 3px;
  background: transparent;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  position: relative; }
  .mechanics__item:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--primary-light);
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease; }
  .mechanics__item--active {
    background: rgba(3, 3, 3, 0.5);
    height: auto; }
    .mechanics__item--active:before {
      left: 0;
      width: 100%; }
    .mechanics__item--active .mechanics-item__title {
      background: transparent; }

.mechanics-item__title {
  background: rgba(184, 184, 254, 0.12);
  background: rgba(3, 3, 3, 0.5);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 0;
  font-size: 18px;
  font-width: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary-light);
  text-align: center;
  position: relative;
  -webkit-transition: background-color .2s ease;
  -o-transition: background-color .2s ease;
  transition: background-color .2s ease; }
  .mechanics-item__title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-light); }

.mechanics-item__content {
  padding-top: 15px;
  display: none; }

.build-list {
  max-width: 600px;
  margin: 30px auto 0; }
  .build-list__latest {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    margin-bottom: 4px; }

.build-list--shrink {
  max-width: 100%; }
  .build-list--shrink .build {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .build-list--shrink .build .build__content > *:not(.build__title) {
      display: none; }
    .build-list--shrink .build__header {
      margin: 0; }
      @media screen and (max-width: 700px) {
        .build-list--shrink .build__header {
          margin: 7px; } }
    .build-list--shrink .build__content {
      -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
      order: -1; }
      @media screen and (max-width: 700px) {
        .build-list--shrink .build__content {
          min-width: 100%; } }
    .build-list--shrink .build__footer {
      margin: 0 0 0 auto; }
      @media screen and (max-width: 700px) {
        .build-list--shrink .build__footer {
          min-width: 100%;
          margin: 0 auto; } }
    .build-list--shrink .build .like-counter {
      margin-left: 15px; }
    .build-list--shrink .build .build__title {
      font-size: 16px;
      margin-bottom: 0; }
    .build-list--shrink .build .build__type {
      display: none; }
    .build-list--shrink .build .build__header {
      white-space: nowrap; }

.build-comments {
  padding: 11px 0; }
  .build-comments .build__header {
    margin-bottom: 8px; }
  .build-comments .build__title {
    font-size: 17px;
    padding: 0;
    margin-bottom: 0; }
  .build-comments__content {
    padding: 0 18px; }
    .build-comments__content img:not(.emoji) {
      max-width: 100%;
      padding: 5px; }
  .build-comments .emoji {
    width: 24px;
    height: 24px; }
  .build-comments__content-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    font-size: 15px;
    line-height: 1.2;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 7px;
    padding: 0 18px; }

.build {
  position: relative;
  max-width: 600px;
  padding: 8px 0;
  margin: 0 auto;
  margin-bottom: 15px;
  background: rgba(3, 3, 3, 0.5);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px; }
  .build__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    font-size: 15px;
    line-height: 1.2;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 10px;
    padding: 0 18px; }
  .build__date {
    color: rgba(255, 255, 255, 0.4);
    text-transform: lowercase; }
  .build__author {
    color: rgba(255, 255, 255, 0.65);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 20px; }
    .build__author .avatar {
      margin-right: 10px;
      width: 24px;
      height: 24px; }
    .build__author[data-supporter="1"] {
      color: #d0f4a1; }
  .build__type {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .08em; }
  .build__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    word-wrap: break-word;
    font-family: Open Sans;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .03em;
    margin-bottom: 7px;
    padding: 0 18px; }
  .build__content {
    font-size: 16px;
    line-height: 1.5em;
    word-wrap: break-word; }
    .build__content figure {
      margin: 0;
      margin-bottom: 15px; }
      .build__content figure:not(:first-child) {
        margin-top: 12px; }
      .build__content figure:last-child {
        margin-bottom: 4px; }
    .build__content figcaption {
      display: none; }
    .build__content .layout {
      padding: 0 18px; }
    .build__content .content_image--with-background {
      padding: 15px; }
      .build__content .content_image--with-background img {
        max-width: 80%; }
    .build__content p {
      margin: 0; }
  .build__link {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%; }
  .build:hover .build__link {
    display: block; }
  .build__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 11px;
    padding: 0 18px; }
  .build .like-counter {
    margin-left: auto; }
  .build .views-counter {
    margin-left: 15px; }

.comments-counter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.35); }
  .comments-counter__icon svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor; }
  .comments-counter__value {
    line-height: 20px;
    font-size: 15px;
    font-weight: 500;
    margin-left: 4px; }

.like-counter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #b92525; }
  .like-counter__icon svg {
    display: block;
    fill: currentColor;
    width: 20px;
    height: 20px; }
  .like-counter__value {
    line-height: 20px;
    font-size: 15px;
    font-weight: 500;
    margin-left: 4px; }
    .like-counter__value i {
      display: none; }

.views-counter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.35); }
  .views-counter__icon svg {
    display: block;
    fill: currentColor;
    width: 20px;
    height: 20px; }
  .views-counter__value {
    line-height: 20px;
    font-size: 15px;
    font-weight: 500;
    margin-left: 4px; }
    .views-counter__value i {
      display: none; }

.search-compensation .latree_button svg {
  margin-right: 2px; }

.compensation-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.compensation-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background-color: rgba(3, 3, 3, 0.3);
  border-radius: 5px;
  padding: 10px 14px;
  margin-bottom: 15px; }
  .compensation-items svg {
    fill: #fff;
    width: 35px;
    height: 35px;
    -ms-flex-item-align: center;
    align-self: center;
    margin: 0 20px; }
    .compensation-items svg:last-child {
      display: none; }

@media screen and (max-width: 1000px) {
  .compensation-items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .compensation-items .compensation-item {
      margin-bottom: 10px; }
      .compensation-items .compensation-item:last-child {
        margin: 0; }
    .compensation-items svg {
      display: none; }
  .compensation-item {
    padding: 0px 14px; } }

.compensation-item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 400px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 5px; }
  .compensation-item:nth-child(3) {
    padding: 8px 14px;
    background: rgba(3, 3, 3, 0.45); }
  .compensation-item__img {
    width: 65px;
    height: 65px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 7px;
    margin-right: 10px; }
    .compensation-item__img img {
      opacity: 0;
      -webkit-animation: img_op 1s ease-out forwards .5s;
      animation: img_op 1s ease-out forwards .5s;
      width: 100%;
      height: 100%; }
  .compensation-item__name {
    -ms-flex-preferred-size: 380px;
    flex-basis: 380px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  .compensation-item--delete {
    -webkit-filter: grayscale(100);
    filter: grayscale(100);
    text-decoration: line-through;
    color: #ff515773 !important; }
  .compensation-item[data-grade='0'] {
    color: #FFFFFF; }
  .compensation-item[data-grade='1'] {
    color: #8DF901; }
  .compensation-item[data-grade='2'] {
    color: #00B0FA; }
  .compensation-item[data-grade='3'] {
    color: #ce43fc; }
  .compensation-item[data-grade='4'] {
    color: #F99200; }
  .compensation-item[data-grade='5'] {
    color: #FA5D00; }
  .compensation-item[data-grade='6'] {
    color: #a00c80; }
  .compensation-item[data-grade='7'] {
    color: #FFFFFF; }

@media screen and (max-width: 600px) {
  .skill_data_title {
    font-size: 30px;
    line-height: 1.4;
    margin-bottom: 50px !important; }
  .search-compensation .mdc-button.latree_button span {
    font-size: 12px; }
  .search-compensation .latree_button img {
    width: 25px;
    height: 25px; }
  .compensation-item {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 12px;
    min-width: unset; }
  .compensation-item__img {
    width: 40px;
    height: 40px; } }

@media screen and (max-width: 736px) {
  .compensation-list, .search {
    padding: 0 10px; } }

.rune-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.rune {
  -ms-flex-preferred-size: 300px;
  flex-basis: 300px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background: rgba(3, 3, 3, 0.3);
  padding: 8px 14px;
  border-radius: 5px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 10px 20px 10px; }
  .rune__id {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px; }
  .rune__img {
    position: absolute;
    right: 0;
    top: 0;
    width: 65px;
    height: 65px; }
    .rune__img img {
      opacity: 0;
      -webkit-animation: img_op 1s ease-out forwards .5s;
      animation: img_op 1s ease-out forwards .5s;
      width: 100%;
      height: 100%; }
  .rune__name {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase; }
  .rune__desc {
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .rune_acq {
    margin-top: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    color: rgba(255, 255, 255, 0.7); }
  .rune[data-grade='0'] {
    color: #FFFFFF; }
  .rune[data-grade='1'] {
    color: #8DF901; }
  .rune[data-grade='2'] {
    color: #00B0FA; }
  .rune[data-grade='3'] {
    color: #ce43fc; }
  .rune[data-grade='4'] {
    color: #F99200; }
  .rune[data-grade='5'] {
    color: #FA5D00; }
  .rune[data-grade='6'] {
    color: #a00c80; }
  .rune[data-grade='7'] {
    color: #FFFFFF; }

.tripod-lvl {
  display: none; }
  .tripod-lvl--active {
    display: block !important; }
  .tripod-lvl > span {
    display: block;
    color: #b88b58;
    width: 100%;
    text-align: center; }
  .tripod-lvl .pvp {
    margin-left: 2px;
    display: inline-block; }
  .tripod-lvl__pve, .tripod-lvl__pvp {
    display: none; }
  .tripod-lvl__pvp {
    color: #ffb5b5; }

.hotkeys {
  color: #ccc;
  background: rgba(3, 3, 3, 0.5);
  padding: 10px;
  padding: 10px 8px;
  border-radius: 5px;
  width: 100%;
  margin-top: 15px; }
  .hotkeys__pvp {
    color: #ffb5b5; }
    .hotkeys__pvp .hotkeys__combination {
      margin-top: 5px; }
  .hotkeys__combination {
    font-family: Roboto;
    font-weight: 500;
    width: 145px;
    font-size: 12px;
    display: inline-block;
    white-space: nowrap; }
  .hotkeys__desc {
    font-size: 9px;
    font-weight: 400; }
  .hotkeys__keys {
    background-color: #ebedf0;
    padding: 12px;
    border-radius: 8px;
    text-transform: capitalize;
    min-width: 17px;
    display: inline-block;
    line-height: 2px;
    text-align: center;
    margin: 0 3px;
    background-color: black;
    border-color: rgba(3, 3, 3, 0.5);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.head-pr {
  margin-top: 15px;
  margin-bottom: 30px;
  height: 100px;
  z-index: 1;
  position: relative; }
  .head-pr__inner {
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .head-pr__item {
    height: 100%;
    margin-right: 10px; }
    @media screen and (max-width: 1100px) {
      .head-pr__item {
        margin-right: 0; } }
    .head-pr__item:last-child {
      margin-right: 0; }

.exitlag {
  -ms-flex-preferred-size: 728px;
  flex-basis: 728px;
  height: 100px; }
  @media screen and (max-width: 600px) {
    .exitlag {
      height: unset; } }
  .exitlag img {
    border-radius: 5px;
    width: 100%;
    height: 100%; }
    @media screen and (max-width: 600px) {
      .exitlag img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover; } }

.raid-buy {
  background: rgba(3, 3, 3, 0.6);
  border-radius: 5px;
  padding: 10px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-preferred-size: 320px;
  flex-basis: 320px;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  height: 100px; }
  @media screen and (max-width: 1100px) {
    .raid-buy {
      -ms-flex-preferred-size: 728px;
      flex-basis: 728px;
      margin-top: 5px;
      height: 100%; } }
  .raid-buy__text {
    color: #fff;
    font-size: 16px;
    line-height: 1.4; }
  .raid-buy .emoji {
    width: 30px;
    height: 30px; }
  .raid-buy span {
    font-weight: 600;
    color: #7289da; }

.equipments-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /*.item {
		background: rgba(3, 3, 3, .5);
		flex-direction: column;
		align-items: center;
		margin: 15px;
		padding: 10px 14px;
		border-radius: 5px;
		&__gs {
			color: #b88b58;
		}
		&__title {
			max-width: 150px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}*/ }
  .equipments-list .item {
    background: rgba(3, 3, 3, 0.5);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 15px;
    padding: 10px 14px;
    border-radius: 5px;
    position: relative; }
    .equipments-list .item__gs {
      color: #b88b58; }
    .equipments-list .item__title {
      max-width: 300px;
      overflow: hidden;
      white-space: nowrap;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis; }
    .equipments-list .item__icon {
      width: 100%;
      -ms-flex-item-align: start;
      align-self: start;
      width: 64px;
      height: 64px; }
      .equipments-list .item__icon img {
        /*width: 64px;
				height: 64px;
				object-fit: contain;*/
        width: 100%;
        height: 100%; }
    .equipments-list .item__emblem {
      position: absolute;
      right: 14px;
      bottom: 10px;
      opacity: .05;
      width: 40px;
      height: 40px; }
      .equipments-list .item__emblem img {
        width: 100%;
        height: 100%; }
    .equipments-list .item:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.05);
      pointer-events: none;
      z-index: -1; }
    .equipments-list .item[data-grade="2"]:before {
      background: rgba(0, 176, 250, 0.05); }
    .equipments-list .item[data-grade="3"]:before {
      background: rgba(206, 67, 252, 0.05); }
    .equipments-list .item[data-grade="4"]:before {
      background: rgba(249, 146, 0, 0.05); }
    .equipments-list .item[data-grade="5"]:before {
      background: rgba(250, 93, 0, 0.05); }
    .equipments-list .item[data-grade="6"]:before {
      background: rgba(160, 12, 128, 0.05); }

.tier__gs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.equipments-new {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background: rgba(3, 3, 3, 0.3);
  padding: 10px 14px;
  border-radius: 5px; }
  @media screen and (max-width: 1100px) {
    .equipments-new {
      -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse; } }
  .equipments-new__col {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-color: dark;
    scrollbar-color: #b88b588a rgba(255, 255, 255, 0) !important;
    scrollbar-width: thin !important; }
    @media screen and (max-width: 1100px) {
      .equipments-new__col {
        -webkit-box-flex: 1;
        -ms-flex: 1 auto;
        flex: 1 auto;
        position: unset;
        height: 100%; } }
    .equipments-new__col::-webkit-scrollbar {
      width: 2px; }
    .equipments-new__col::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0); }
    .equipments-new__col::-webkit-scrollbar-thumb {
      background-color: #b88b588a; }
    .equipments-new__col > div {
      margin-bottom: 15px; }
      .equipments-new__col > div:last-child {
        margin-bottom: 0; }
  .equipments-new__upgrade-list {
    -webkit-box-flex: 0.6;
    -ms-flex: 0.6;
    flex: 0.6;
    margin-right: 30px; }
    @media screen and (max-width: 1100px) {
      .equipments-new__upgrade-list {
        -webkit-box-flex: 1;
        -ms-flex: 1 auto;
        flex: 1 auto;
        position: unset;
        height: 100%;
        margin-top: 30px;
        margin-right: 0; } }

.item--new {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: 200px;
  flex-basis: 200px;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 8px 14px;
  background: rgba(3, 3, 3, 0.45);
  background: rgba(3, 3, 3, 0.65);
  margin: 0 5px; }
  .item--new .item__img {
    width: 55px;
    height: 55px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 7px;
    margin-right: 10px; }
    .item--new .item__img img {
      opacity: 0;
      -webkit-animation: img_op 1s ease-out forwards .5s;
      animation: img_op 1s ease-out forwards .5s;
      width: 100%;
      height: 100%; }
  .item--new .item__name {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    margin-right: 10px; }

.blessing .blessing__result .item--new {
  margin: 5px; }

.blessing .item--new {
  height: 60px;
  margin: 5px; }

.blessing .item__img {
  width: unset;
  height: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .blessing .item__img img {
    max-width: 35px; }

.blessing .item__name {
  -ms-flex-preferred-size: unset;
  flex-basis: unset;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0; }

.blessing .item {
  -ms-flex-preferred-size: 300px;
  flex-basis: 300px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .blessing .item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.equipment-item {
  background: rgba(3, 3, 3, 0.5);
  padding: 10px 14px;
  border-radius: 5px 5px;
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1; }
  .equipment-item__id {
    position: absolute;
    right: 14px;
    top: 7px;
    color: rgba(255, 255, 255, 0.8);
    display: none; }
  .equipment-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: -1; }
  .equipment-item[data-grade="2"]:before {
    background: rgba(0, 176, 250, 0.05); }
  .equipment-item[data-grade="3"]:before {
    background: rgba(206, 67, 252, 0.05); }
  .equipment-item[data-grade="4"]:before {
    background: rgba(249, 146, 0, 0.05); }
  .equipment-item[data-grade="5"]:before {
    background: rgba(250, 93, 0, 0.05); }
  .equipment-item[data-grade="6"]:before {
    background: rgba(160, 12, 128, 0.05); }
  .equipment-item__name {
    text-align: start;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px; }
  .equipment-item__stage {
    display: inline-block;
    opacity: 0;
    -webkit-transition: margin .2s ease;
    -o-transition: margin .2s ease;
    transition: margin .2s ease; }
    .equipment-item__stage--active {
      margin-right: 5px;
      opacity: 1;
      -webkit-transition: margin .4s ease, opacity .3s ease;
      -o-transition: margin .4s ease, opacity .3s ease;
      transition: margin .4s ease, opacity .3s ease; }
  .equipment-item__head {
    margin-bottom: 10px; }
  .equipment-item__icon {
    width: 64px;
    height: 64px; }
    .equipment-item__icon img {
      opacity: 0;
      -webkit-animation: img_op 1s ease-out forwards .5s;
      animation: img_op 1s ease-out forwards .5s;
      width: 100%;
      height: 100%; }
  .equipment-item__stats {
    margin-bottom: 10px; }
  .equipment-item__sets {
    margin-bottom: 10px; }
  .equipment-item__gs {
    position: absolute;
    right: 14px;
    top: 7px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #b88b58;
    letter-spacing: .03em; }
    @media screen and (max-width: 1200px) {
      .equipment-item__gs {
        position: unset; } }
    .equipment-item__gs span {
      font-weight: 600; }
  .equipment-item__slider {
    padding: 0 10px;
    margin-bottom: 60px; }
    .equipment-item__slider .noUi-pips {
      pointer-events: none; }
  .equipment-item .latree-slider .noUi-connect {
    background-color: #48bb78; }
  .equipment-item .latree-slider.noUi-horizontal .noUi-handle {
    background-color: #48bb78; }
  .equipment-item .latree-slider .noUi-value-large {
    font-size: 15px; }
  .equipment-item .latree-slider .noUi-marker-large {
    background: #AAA; }
  .equipment-item .latree-slider .noUi-value {
    color: rgba(255, 255, 255, 0.9);
    color: #48bb78; }
  .equipment-item[data-grade='0'] {
    color: #FFFFFF; }
    .equipment-item[data-grade='0'] .latree-slider .noUi-connect {
      background: -o-linear-gradient(315deg, #232323, #575757);
      background: linear-gradient(135deg, #232323, #575757); }
    .equipment-item[data-grade='0'] .latree-slider .noUi-handle-lower {
      background-color: #232323; }
    .equipment-item[data-grade='0'] .latree-slider .noUi-handle-upper {
      background-color: #575757; }
  .equipment-item[data-grade='1'] {
    color: #8DF901; }
    .equipment-item[data-grade='1'] .latree-slider .noUi-connect {
      background: -o-linear-gradient(315deg, #18220b, #304911);
      background: linear-gradient(135deg, #18220b, #304911); }
    .equipment-item[data-grade='1'] .latree-slider .noUi-handle-lower {
      background-color: #18220b; }
    .equipment-item[data-grade='1'] .latree-slider .noUi-handle-upper {
      background-color: #304911; }
  .equipment-item[data-grade='2'] {
    color: #00B0FA; }
    .equipment-item[data-grade='2'] .latree-slider .noUi-connect {
      background: -o-linear-gradient(315deg, #111f2c, #113d5d);
      background: linear-gradient(135deg, #111f2c, #113d5d); }
    .equipment-item[data-grade='2'] .latree-slider .noUi-handle-lower {
      background-color: #111f2c; }
    .equipment-item[data-grade='2'] .latree-slider .noUi-handle-upper {
      background-color: #113d5d; }
  .equipment-item[data-grade='3'] {
    color: #ce43fc; }
    .equipment-item[data-grade='3'] .latree-slider .noUi-connect {
      background: -o-linear-gradient(315deg, #261331, #480d5d);
      background: linear-gradient(135deg, #261331, #480d5d); }
    .equipment-item[data-grade='3'] .latree-slider .noUi-handle-lower {
      background-color: #261331; }
    .equipment-item[data-grade='3'] .latree-slider .noUi-handle-upper {
      background-color: #480d5d; }
  .equipment-item[data-grade='4'] {
    color: #F99200; }
    .equipment-item[data-grade='4'] .latree-slider .noUi-connect {
      background: -o-linear-gradient(315deg, #362003, #9e5f04);
      background: linear-gradient(135deg, #362003, #9e5f04); }
    .equipment-item[data-grade='4'] .latree-slider .noUi-handle-lower {
      background-color: #362003; }
    .equipment-item[data-grade='4'] .latree-slider .noUi-handle-upper {
      background-color: #9e5f04; }
  .equipment-item[data-grade='5'] {
    color: #FA5D00; }
    .equipment-item[data-grade='5'] .latree-slider .noUi-connect {
      background: -o-linear-gradient(315deg, #341a09, #a24006);
      background: linear-gradient(135deg, #341a09, #a24006); }
    .equipment-item[data-grade='5'] .latree-slider .noUi-handle-lower {
      background-color: #341a09; }
    .equipment-item[data-grade='5'] .latree-slider .noUi-handle-upper {
      background-color: #a24006; }
  .equipment-item[data-grade='6'] {
    color: #a00c80; }
    .equipment-item[data-grade='6'] .latree-slider .noUi-connect {
      background: -o-linear-gradient(315deg, #3d173e, #a00c80);
      background: linear-gradient(135deg, #3d173e, #a00c80); }
    .equipment-item[data-grade='6'] .latree-slider .noUi-handle-lower {
      background-color: #3d173e; }
    .equipment-item[data-grade='6'] .latree-slider .noUi-handle-upper {
      background-color: #a00c80; }
  .equipment-item[data-grade='7'] {
    color: #FFFFFF; }
    .equipment-item[data-grade='7'] .latree-slider .noUi-connect {
      background: -o-linear-gradient(315deg, #232323, #575757);
      background: linear-gradient(135deg, #232323, #575757); }
    .equipment-item[data-grade='7'] .latree-slider .noUi-handle-lower {
      background-color: #232323; }
    .equipment-item[data-grade='7'] .latree-slider .noUi-handle-upper {
      background-color: #575757; }

.noUi-touch-area {
  cursor: pointer; }

.equipments-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .equipments-actions__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
    margin: 0 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .equipments-actions__item:hover {
      background-color: rgba(255, 255, 255, 0.1);
      -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.upgrade-list {
  display: block;
  /*position: sticky;
	top: 20px;
	//padding-right: 5px;
	padding-bottom: 20px;
	height: calc(100vh - 20px);
	overflow: hidden;
	overflow-y: scroll;
	scrollbar-color: dark;
	scrollbar-color: #b88b588a rgba(255,255,255,.04) !important;
	scrollbar-width: thin !important;*/ }
  .upgrade-list__title {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .08em;
    color: #b88b58;
    text-transform: uppercase;
    background: rgba(3, 3, 3, 0.65);
    border-radius: 5px 5px 0 0;
    line-height: 40px;
    height: 40px; }
  .upgrade-list .upgrade-item__material {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    grid-gap: unset; }
    .upgrade-list .upgrade-item__material .item--new {
      margin: 5px; }
  .upgrade-list .upgrade-item:last-child {
    margin-bottom: 0; }
  .upgrade-list .upgrade-item:first-child {
    border-radius: 5px; }

.upgrade-item__stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 7px; }
  .upgrade-item__stats .equipments-stats__stat {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    margin: 0 5px;
    border-radius: 5px;
    padding: 8px 14px;
    background: rgba(3, 3, 3, 0.45); }

.upgrade-item--shrink .item {
  -ms-flex-preferred-size: unset;
  flex-basis: unset;
  font-size: 13px; }
  .upgrade-item--shrink .item__name {
    display: none; }
  .upgrade-item--shrink .item__img {
    width: 30px;
    height: 30px;
    margin-right: 10px; }

.upgrade-item--new {
  padding: 10px 9px; }
  .upgrade-item--new .upgrade-item__exp {
    margin-bottom: 7px; }
  .upgrade-item--new .upgrade-item__head {
    padding: 0 5px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

.upgrade-item--result .item__img img {
  opacity: 1;
  -webkit-animation: unset;
  animation: unset; }

.upgrade-item--result .upgrade-item__material {
  grid-template-columns: 1fr 1fr; }

.equipments-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px; }
  .equipments-stats__col {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .equipments-stats__static {
    margin-right: 50px; }
  .equipments-stats__title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    color: #b88b58;
    text-transform: uppercase; }
  .equipments-stats__stat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 8px; }
  .equipments-stats__stat-name {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    white-space: nowrap;
    margin-right: 5px; }
  .equipments-stats__stat-value {
    white-space: nowrap;
    color: #48bb78; }

.equip-reforge--new {
  /*overflow: hidden;
	overflow-y: scroll;
	scrollbar-color: #b88b588a rgba(255,255,255,.04) !important;
	scrollbar-width: thin !important;
	height: 200px;
	position: sticky;
	top: 20px;
	height: 100%;*/ }
  .equip-reforge--new .equip-reforge__stage {
    -webkit-box-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
    padding: 0; }
  .equip-reforge--new .equip-reforge__material {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .equip-reforge--new .equip-reforge__material .item--new {
      margin: 5px;
      background-color: rgba(255, 255, 255, 0.045); }

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 900px;
  width: 1350px;
  max-width: 100%;
  height: 90%;
  max-height: 100%;
  background: rgba(3, 3, 3, 0.9); }
  @media screen and (max-width: 800px) {
    .modal {
      width: 100vw;
      height: 100vh; } }
  .modal__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px 14px;
    overflow: auto;
    scrollbar-color: #b88b588a rgba(255, 255, 255, 0.04) !important;
    scrollbar-width: thin !important; }
    .modal__inner::-webkit-scrollbar {
      width: 5px; }
    .modal__inner::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.04); }
    .modal__inner::-webkit-scrollbar-thumb {
      background-color: #b88b588a; }
  .modal__close {
    color: white;
    font-family: Open Sans;
    font-weight: 100;
    font-size: 65px;
    position: fixed;
    top: 5px;
    right: 15px;
    z-index: 1;
    text-align: center;
    width: 48px;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: opacity 150ms linear;
    -o-transition: opacity 150ms linear;
    transition: opacity 150ms linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: none;
    z-index: 999; }
    @media screen and (max-width: 800px) {
      .modal__close {
        display: block; } }
    .modal__close:hover {
      opacity: .9; }
  .modal.comment-helper {
    max-width: 700px;
    height: 500px; }
    @media screen and (max-width: 800px) {
      .modal.comment-helper {
        display: block; } }

.comment-helper-item {
  color: #ddd; }
  .comment-helper-item p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0; }
  .comment-helper-item blockquote {
    position: relative;
    background: rgba(3, 3, 3, 0.7);
    background: var(--blockquote-bg);
    -webkit-box-shadow: var(--blockquote-shadow);
    box-shadow: var(--blockquote-shadow);
    padding: 0 8px 0 20px; }
    .comment-helper-item blockquote:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: #fff;
      background: #4f545c;
      background: #b88b58;
      width: 4px;
      border-radius: 2px; }
  .comment-helper-item img {
    padding: 5px; }
  .comment-helper-item pre {
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: rgba(3, 3, 3, 0.5);
    border-radius: 6px;
    margin-bottom: 5px; }
    .comment-helper-item pre code {
      padding: 0;
      margin: 0;
      font-size: 100%;
      word-break: normal;
      white-space: pre;
      background: transparent !important;
      background-color: transparent;
      display: inline;
      max-width: auto;
      overflow: visible;
      line-height: inherit;
      word-wrap: normal;
      background-color: initial;
      border-radius: 6px;
      color: #f6f8fa; }

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 995;
  background-color: rgba(0, 0, 0, 0.5); }

.catalyst__item .item-input[data-grade="1"] .item-input__value {
  color: #dbffae; }

.catalyst__item .item-input[data-grade="2"] .item-input__value {
  color: #93cdf6; }

.catalyst__item .item-input[data-grade="3"] .item-input__value {
  color: #e8a7fe; }

.item-input {
  position: relative;
  height: 60px;
  width: 100%; }
  .item-input__img {
    width: 35px;
    height: 35px;
    position: absolute;
    left: 12.5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none; }
    .item-input__img img {
      height: 100%;
      width: 100%; }
  .item-input__texts {
    padding: .7rem 0 .7rem 0;
    text-align: center;
    height: 100%;
    font-size: 20px;
    font-weight: 500;
    line-height: 46px;
    position: absolute;
    right: 12.5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    max-width: 190px;
    font-size: 11.5px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase; }
  .item-input__text-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    white-space: nowrap; }
  .item-input__value {
    margin-left: 5px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    color: inherit;
    text-align: right; }
  .item-input[data-grade="0"] .item-input__value {
    color: #FFFFFF; }
  .item-input[data-grade="1"] .item-input__value {
    color: #8DF901; }
  .item-input[data-grade="2"] .item-input__value {
    color: #00B0FA; }
  .item-input[data-grade="3"] .item-input__value {
    color: #ce43fc; }
  .item-input[data-grade="4"] .item-input__value {
    color: #F99200; }
  .item-input[data-grade="5"] .item-input__value {
    color: #FA5D00; }
  .item-input[data-grade="6"] .item-input__value {
    color: #a00c80; }
  .item-input input {
    background: transparent;
    background-color: transparent;
    border-radius: 3px;
    padding: .7rem 1.4rem .7rem 60px;
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 500;
    line-height: 46px;
    border: unset;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    color: rgba(255, 255, 255, 0.9);
    -webkit-transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color 0.3s ease, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(255, 255, 255, 0.05); }
  .item-input input:-moz-read-only {
    cursor: pointer; }
  .item-input input:read-only {
    cursor: pointer; }
  .item-input:hover input {
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }

.catalyst__input .item-input__rate {
  min-width: 46px; }

@-webkit-keyframes vahantur {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  30% {
    -webkit-transform: translate3d(-2px, 0, 0) rotate(-1deg);
    transform: translate3d(-2px, 0, 0) rotate(-1deg);
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5); }
  50% {
    -webkit-transform: translate3d(2px, 0, 0) rotate(1deg);
    transform: translate3d(2px, 0, 0) rotate(1deg);
    -webkit-filter: brightness(2);
    filter: brightness(2); }
  80% {
    -webkit-transform: translate3d(-2px, 0, 0) rotate(-1deg);
    transform: translate3d(-2px, 0, 0) rotate(-1deg); }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-filter: brightness(1);
    filter: brightness(1); } }

@keyframes vahantur {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  30% {
    -webkit-transform: translate3d(-2px, 0, 0) rotate(-1deg);
    transform: translate3d(-2px, 0, 0) rotate(-1deg);
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5); }
  50% {
    -webkit-transform: translate3d(2px, 0, 0) rotate(1deg);
    transform: translate3d(2px, 0, 0) rotate(1deg);
    -webkit-filter: brightness(2);
    filter: brightness(2); }
  80% {
    -webkit-transform: translate3d(-2px, 0, 0) rotate(-1deg);
    transform: translate3d(-2px, 0, 0) rotate(-1deg); }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-filter: brightness(1);
    filter: brightness(1); } }

@-webkit-keyframes vahantur-full {
  30% {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5); }
  50% {
    -webkit-filter: brightness(2);
    filter: brightness(2); }
  to {
    -webkit-filter: brightness(1);
    filter: brightness(1); } }

@keyframes vahantur-full {
  30% {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5); }
  50% {
    -webkit-filter: brightness(2);
    filter: brightness(2); }
  to {
    -webkit-filter: brightness(1);
    filter: brightness(1); } }

.luck-animations {
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .luck-animations__wait {
    -webkit-animation: luck-animations .5s ease forwards;
    animation: luck-animations .5s ease forwards; }
  .luck-animations__result {
    opacity: 0;
    -webkit-animation: luck-animations-result .2s ease forwards .5s;
    animation: luck-animations-result .2s ease forwards .5s; }
    .luck-animations__result--fail {
      color: #c53030; }
    .luck-animations__result--successful {
      color: #dbffae; }
    .luck-animations__result--blessing {
      margin-top: 10px;
      width: 250px; }
      .luck-animations__result--blessing img {
        border-radius: 5px;
        max-width: 100%; }

@-webkit-keyframes luck-animations {
  30% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    color: #b88b58;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  to {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes luck-animations {
  30% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    color: #b88b58;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  to {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes luck-animations-result {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  to {
    opacity: 1; } }

@keyframes luck-animations-result {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  to {
    opacity: 1; } }

.search-filters {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.search-filter {
  margin: 10px 8px; }
  .search-filter span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    color: #b88b58;
    text-transform: uppercase;
    margin-right: 10px; }
  .search-filter .counter {
    font-weight: 600;
    margin-right: 0px; }

.select {
  font-size: 16px;
  line-height: 1.4; }
  .select__item {
    padding: 8px 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    z-index: 2; }
    .select__item--active {
      color: #b88b58;
      /*&[data-grade="1"] {
				background: #8DF9010F;
				background: rgba(141, 249, 1, .1);
			}
			&[data-grade="2"] {
				background: rgba(0, 176, 250, .1);
			}

			&[data-grade="3"] {
				background: rgba(206, 67, 252, .1);
			}

			&[data-grade="4"] {
				background: rgba(249, 146, 0, .1);
			}

			&[data-grade="5"] {
				background: rgba(250, 93, 0, .1);
			}

			&[data-grade="6"] {
				background: rgba(160, 12, 128, .1);
			}*/ }
    .select__item--active-background {
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      background: rgba(3, 3, 3, 0.5);
      -webkit-transform: translateX(-50px);
      -ms-transform: translateX(-50px);
      transform: translateX(-50px);
      -webkit-transition: background .2s ease, opacity .3s ease, width .3s ease, -webkit-transform .3s ease-out;
      transition: background .2s ease, opacity .3s ease, width .3s ease, -webkit-transform .3s ease-out;
      -o-transition: background .2s ease, opacity .3s ease, width .3s ease, transform .3s ease-out;
      transition: background .2s ease, opacity .3s ease, width .3s ease, transform .3s ease-out;
      transition: background .2s ease, opacity .3s ease, width .3s ease, transform .3s ease-out, -webkit-transform .3s ease-out;
      z-index: 1; }
    .select__item--active-hover {
      z-index: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      background: rgba(255, 255, 255, 0.05);
      -webkit-transition: background .2s ease, opacity .1s ease, width .3s ease, -webkit-transform .3s ease-out;
      transition: background .2s ease, opacity .1s ease, width .3s ease, -webkit-transform .3s ease-out;
      -o-transition: background .2s ease, opacity .1s ease, width .3s ease, transform .3s ease-out;
      transition: background .2s ease, opacity .1s ease, width .3s ease, transform .3s ease-out;
      transition: background .2s ease, opacity .1s ease, width .3s ease, transform .3s ease-out, -webkit-transform .3s ease-out; }
    .select__item--inactive {
      cursor: not-allowed;
      opacity: .3; }
      .select__item--inactive .select__item {
        cursor: not-allowed;
        pointer-events: none; }
    .select__item:last-child {
      margin: 0; }
    .select__item[data-grade="0"] {
      color: #FFFFFF; }
    .select__item[data-grade="1"] {
      color: #8DF901;
      /*&:hover  {
				background: #8DF9010F;
				background: rgba(141, 249, 1, .05);
			}*/ }
    .select__item[data-grade="2"] {
      color: #00B0FA;
      /*&:hover  {
				background: rgba(0, 176, 250, .05);
			}*/ }
    .select__item[data-grade="3"] {
      color: #ce43fc;
      /*&:hover  {
				background: rgba(206, 67, 252, .05);
			}*/ }
    .select__item[data-grade="4"] {
      color: #F99200;
      /*&:hover  {
				background: rgba(249, 146, 0, .05);
			}*/ }
    .select__item[data-grade="5"] {
      color: #FA5D00;
      /*&:hover  {
				background: rgba(250, 93, 0, .05);
			}*/ }
    .select__item[data-grade="6"] {
      color: #a00c80; }
      .select__item[data-grade="6"]:hover {
        background: rgba(160, 12, 128, 0.05); }
  .select--tabs {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    border-radius: 5px;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 3px;
    position: relative;
    overflow: hidden;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .select--tabs:before {
      /*content: '';
			position: absolute;
			top: 3px;
			left: 3px;
			width: 100px;
			height: calc(100% - 6px);
			padding: 3px;
			border-radius: 5px;
			background: rgba(3,3,3,.5);*/ }
  .select--class {
    width: 100%; }
    .select--class .select__item {
      padding: 8px 5px;
      font-size: 11px;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      white-space: nowrap; }
      .select--class .select__item--active {
        -webkit-filter: grayscale(0) brightness(100%);
        filter: grayscale(0) brightness(100%);
        color: white; }
    .select--class img {
      width: 50px; }
    .select--class p {
      display: none; }
  .select--column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .select--column .select__item {
      margin: 0 0 2px; }
  .select--scroll {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: unset;
    flex-wrap: unset;
    overflow-y: scroll;
    height: 188px;
    scrollbar-color: dark;
    scrollbar-color: #b88b588a rgba(255, 255, 255, 0) !important;
    scrollbar-width: thin !important; }
    .select--scroll::-webkit-scrollbar {
      width: 2px; }
    .select--scroll::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0); }
    .select--scroll::-webkit-scrollbar-thumb {
      background-color: #b88b588a; }
    .select--scroll .select__item {
      margin: 0 0 2px; }

.search-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.last-items {
  margin: 10px 8px; }
  .last-items__title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    color: #b88b58;
    text-transform: uppercase; }
  .last-items__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

.last-item {
  cursor: pointer;
  margin: 5px; }
  .last-item__img {
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    width: 65px;
    height: 65px;
    overflow: hidden;
    padding: 9px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    -webkit-transition: background .3s ease, border-color .3s ease;
    -o-transition: background .3s ease, border-color .3s ease;
    transition: background .3s ease, border-color .3s ease; }
    .last-item__img img {
      width: 100%;
      height: 100%; }
  .last-item:hover .last-item__img {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2); }
  .last-item[data-grade="1"] .last-item__img {
    background: rgba(141, 249, 1, 0.05);
    border-color: rgba(141, 249, 1, 0.2); }
  .last-item[data-grade="1"]:hover .last-item__img {
    background: rgba(141, 249, 1, 0.1);
    border-color: rgba(141, 249, 1, 0.4); }
  .last-item[data-grade="2"] .last-item__img {
    background: rgba(0, 176, 250, 0.05);
    border-color: rgba(0, 176, 250, 0.2); }
  .last-item[data-grade="2"]:hover .last-item__img {
    background: rgba(0, 176, 250, 0.1);
    border-color: rgba(0, 176, 250, 0.4); }
  .last-item[data-grade="3"] .last-item__img {
    background: rgba(206, 67, 252, 0.05);
    border-color: rgba(206, 67, 252, 0.2); }
  .last-item[data-grade="3"]:hover .last-item__img {
    background: rgba(206, 67, 252, 0.1);
    border-color: rgba(206, 67, 252, 0.4); }
  .last-item[data-grade="4"] .last-item__img {
    background: rgba(249, 146, 0, 0.05);
    border-color: rgba(249, 146, 0, 0.2); }
  .last-item[data-grade="4"]:hover .last-item__img {
    background: rgba(249, 146, 0, 0.1);
    border-color: rgba(249, 146, 0, 0.4); }
  .last-item[data-grade="5"] .last-item__img {
    background: rgba(250, 93, 0, 0.05);
    border-color: rgba(250, 93, 0, 0.2); }
  .last-item[data-grade="5"]:hover .last-item__img {
    background: rgba(250, 93, 0, 0.1);
    border-color: rgba(250, 93, 0, 0.4); }
  .last-item[data-grade="6"] .last-item__img {
    background: rgba(160, 12, 128, 0.05);
    border-color: rgba(160, 12, 128, 0.2); }
  .last-item[data-grade="6"]:hover .last-item__img {
    background: rgba(160, 12, 128, 0.1);
    border-color: rgba(160, 12, 128, 0.4); }

.equipments-set__title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #91fe02; }

.equipments-set__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 5px; }
  .equipments-set__items .last-item__img {
    width: 48px;
    height: 48px; }

.equipments-set__descriptions {
  color: rgba(255, 255, 255, 0.8);
  color: #d0f4a1;
  font-size: 14px; }

.set-description {
  padding: 3px 5px;
  line-height: 1.6; }
  .set-description__title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #91fe02; }
  .set-description__text {
    padding: 0 8px; }

.last-items-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .last-items-block .last-items {
    -ms-flex-preferred-size: 600px;
    flex-basis: 600px;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    overflow: hidden; }
    @media screen and (max-width: 1561px) {
      .last-items-block .last-items {
        -ms-flex-preferred-size: 450px;
        flex-basis: 450px; } }
    @media screen and (max-width: 995px) {
      .last-items-block .last-items {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%; } }

.proc {
  margin-bottom: 80px; }
  .proc__title {
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    margin-bottom: 20px; }
    .proc__title span {
      color: #b88b58; }
  .proc .latree-slider.noUi-horizontal .noUi-handle {
    background-color: #b88b58c9; }

@media screen and (max-width: 600px) {
  .select--class img {
    width: 40px; }
  .last-item__img {
    width: 50px;
    height: 50px; }
  .equipments-list .item {
    margin: 5px 10px; }
  .equipment-item__name {
    font-size: 15px; }
  .equipments-stats {
    font-size: 14px; }
  .equipments-actions__item {
    font-size: 12px; }
  .equip-reforge--new .equip-reforge__material .item--new {
    font-size: 12px;
    padding: 4px 8px; }
    .equip-reforge--new .equip-reforge__material .item--new .item__img {
      width: 35px;
      height: 35px; }
  .equip-reforge--new {
    margin-bottom: 40px; }
  .equip-reforge .latree-slider .noUi-value {
    font-size: 10px;
    line-height: 20px; }
  .equip-reforge .latree-slider .noUi-marker-horizontal.noUi-marker {
    width: 1px; }
  .equip-reforge .latree-slider .noUi-marker-large {
    width: 1px;
    height: 10px; }
  .equip-reforge .chance-calculator {
    margin-top: 110px; }
  .equip-reforge .chance-calculator__successful-rate {
    font-size: 14px; }
  .equip-reforge .item-input__texts {
    font-size: 10px; }
  .equip-reforge .item-input input::-webkit-input-placeholder {
    font-size: 16px; }
  .equip-reforge .item-input input::-moz-placeholder {
    font-size: 16px; }
  .equip-reforge .item-input input:-ms-input-placeholder {
    font-size: 16px; }
  .equip-reforge .item-input input::-ms-input-placeholder {
    font-size: 16px; }
  .equip-reforge .item-input input::placeholder {
    font-size: 16px; }
  .equip-reforge .catalyst__preset {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .equip-reforge .catalyst__preset-item {
    margin: 4px; }
  .equip-reforge .catalyst__list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .equip-reforge .catalyst__item {
    margin-bottom: 65px; }
  .equip-reforge .chance-calculator__catalyst {
    height: unset; }
  .equip-reforge .chance-calculator {
    padding: 15px 5px; } }

.upgrade_item .gs {
  margin-left: 5px;
  white-space: nowrap;
  color: #b88b58; }

.upgrade_item .slotName {
  display: none; }

.upgrade_item .item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 5px; }

.repute_item__reward .upgrade_item .slotName {
  display: block; }

.skill-data__title {
  text-align: center;
  margin: 20;
  padding: 0;
  color: #fff;
  font-family: "Noto Serif",serif;
  font-weight: 600;
  font-size: 4rem;
  line-height: 48px;
  margin-bottom: 50px; }

.skill-data-filter {
  padding: 8px 14px;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  background: rgba(3, 3, 3, 0.7);
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 15px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .skill-data-filter__filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .skill-data-filter__gs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative; }
    .skill-data-filter__gs .gs_min, .skill-data-filter__gs .gs_max {
      background: rgba(255, 255, 255, 0.04);
      height: 36px;
      line-height: 36px;
      padding: 0px 10px;
      border-radius: 5px;
      cursor: pointer;
      min-width: 56px;
      text-align: center;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .skill-data-filter__gs .gs_min:hover, .skill-data-filter__gs .gs_max:hover {
        background-color: rgba(255, 255, 255, 0.06); }
    .skill-data-filter__gs span {
      margin: 0 10px;
      font-size: 14px; }
    .skill-data-filter__gs .tooltip {
      position: absolute;
      left: 50%;
      top: 130%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      background: rgba(3, 3, 3, 0.9);
      padding: .8rem 1.5rem;
      z-index: 200;
      font-size: 1.7rem;
      max-width: 450px;
      min-width: 450px;
      text-align: center;
      pointer-events: none;
      color: #fff !important; }
    .skill-data-filter__gs .latree_button {
      margin-left: 15px; }
  .skill-data-filter .search-filter {
    width: 100%;
    margin: 0;
    margin-bottom: 20px; }
  .skill-data-filter .latree-slider {
    width: 700px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 50px; }
  .skill-data-filter .latree-slider.noUi-horizontal .noUi-handle {
    background-color: #b88b58; }
  .skill-data-filter .latree-slider .noUi-connect {
    background-color: #b88b58; }

.skill_data > * {
  min-width: 0; }

.skill {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  background: rgba(3, 3, 3, 0.7);
  border-radius: 5px;
  cursor: pointer; }
  .skill .icon {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 3px;
    -ms-flex-negative: 0;
    flex-shrink: 0; }
    .skill .icon:after {
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      -webkit-transition: color .2s,background-color .2s,border-color .2s;
      -o-transition: color .2s,background-color .2s,border-color .2s;
      transition: color .2s,background-color .2s,border-color .2s;
      pointer-events: none;
      z-index: 1; }
    .skill .icon img {
      width: 100%;
      height: 100%; }
  .skill__header {
    background: rgba(3, 3, 3, 0.7);
    font-size: 17px;
    line-height: 40px;
    height: 40px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 14px; }
  .skill__name {
    color: rgba(255, 255, 255, 0.7);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding-right: 2px; }
  .skill__shrink {
    padding: 10px 14px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .skill__expand {
    padding: 0 14px 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .skill__expand .tripod-list {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      margin: 0; }
      .skill__expand .tripod-list img {
        width: 40px;
        height: 40px; }
    .skill__expand .tripod_0 .tripod-list__item {
      color: #c4fff7; }
    .skill__expand .tripod_1 .tripod-list__item {
      color: #d0f4a1; }
    .skill__expand .tripod_2 .tripod-list__item {
      color: #FFB54C; }
    .skill__expand .tripod-line {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-bottom: 15px;
      width: 100%; }
    .skill__expand .percent {
      margin-top: 5px;
      white-space: nowrap; }
  .skill__tripod-list {
    margin-left: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .skill__jew .rune-list__item {
    margin-top: 2px;
    margin-bottom: 5px; }
    .skill__jew .rune-list__item:last-child {
      margin-top: 2px;
      margin-right: 0px; }
    .skill__jew .rune-list__item .rune__name {
      margin-top: 5px; }
  .skill[data-grade="1"] .skill__name {
    color: #51d6ff;
    color: #c4fff7; }
  .skill[data-grade="2"] .skill__name {
    color: #96c910;
    color: #91fe02;
    color: #d0f4a1; }
  .skill[data-grade="3"] .skill__name {
    color: #FFD540;
    color: #F99200;
    color: #FFB54C; }

.tripod-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%; }
  .tripod-list__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    -ms-flex-pack: distribute;
    justify-content: space-around; }
    .tripod-list__item:nth-child(1) {
      color: #51d6ff;
      color: #c4fff7; }
    .tripod-list__item:nth-child(2) {
      color: #96c910;
      color: #9ee0a3;
      color: #d0f4a1; }
    .tripod-list__item:nth-child(3) {
      color: #F99200;
      color: #ffec87;
      color: #FFB54C; }
  .tripod-list img {
    width: 32px;
    height: 32px; }
  .tripod-list .percent {
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 1; }

.last-update {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.7);
  display: none; }

.rune-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%; }
  .rune-list__item {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 30%;
    flex-basis: 30%;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1.3;
    margin: 3.5px 0;
    min-width: 0;
    background-color: rgba(255, 255, 255, 0.05);
    -webkit-transition: background .3s ease;
    -o-transition: background .3s ease;
    transition: background .3s ease;
    cursor: pointer;
    /*&:last-child() {
			margin: 5px 0 5px 7px;
		}
		&:first-child {
			margin: 5px 0;
		}*/ }
    .rune-list__item:nth-child(3n+2) {
      margin: 3.5px 7px; }
    .rune-list__item .rune__name {
      font-size: 12px;
      text-align: center;
      text-transform: unset;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      width: 100%; }
    .rune-list__item img {
      width: 40px;
      height: 40px; }
    .rune-list__item .percent {
      font-size: 12px;
      letter-spacing: .08em;
      line-height: 1;
      margin-bottom: 5px; }
    .rune-list__item:hover {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2); }
    .rune-list__item[data-grade="1"] {
      background: rgba(141, 249, 1, 0.05);
      border-color: rgba(141, 249, 1, 0.2); }
    .rune-list__item[data-grade="1"]:hover {
      background: rgba(141, 249, 1, 0.1);
      border-color: rgba(141, 249, 1, 0.4); }
    .rune-list__item[data-grade="2"] {
      background: rgba(0, 176, 250, 0.05);
      border-color: rgba(0, 176, 250, 0.2); }
    .rune-list__item[data-grade="2"]:hover {
      background: rgba(0, 176, 250, 0.1);
      border-color: rgba(0, 176, 250, 0.4); }
    .rune-list__item[data-grade="3"] {
      background: rgba(206, 67, 252, 0.05);
      border-color: rgba(206, 67, 252, 0.2); }
    .rune-list__item[data-grade="3"]:hover {
      background: rgba(206, 67, 252, 0.1);
      border-color: rgba(206, 67, 252, 0.4); }
    .rune-list__item[data-grade="4"] {
      background: rgba(249, 146, 0, 0.05);
      border-color: rgba(249, 146, 0, 0.2); }
    .rune-list__item[data-grade="4"]:hover {
      background: rgba(249, 146, 0, 0.1);
      border-color: rgba(249, 146, 0, 0.4); }
    .rune-list__item[data-grade="5"] {
      background: rgba(250, 93, 0, 0.05);
      border-color: rgba(250, 93, 0, 0.2); }
    .rune-list__item[data-grade="5"]:hover {
      background: rgba(250, 93, 0, 0.1);
      border-color: rgba(250, 93, 0, 0.4); }
    .rune-list__item[data-grade="6"] {
      background: rgba(160, 12, 128, 0.05);
      border-color: rgba(160, 12, 128, 0.2); }
    .rune-list__item[data-grade="6"]:hover {
      background: rgba(160, 12, 128, 0.1);
      border-color: rgba(160, 12, 128, 0.4); }
  .rune-list .tooltip {
    position: absolute;
    left: 50%;
    top: 130%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background: rgba(3, 3, 3, 0.9);
    padding: .8rem 1.5rem;
    z-index: 999;
    font-size: 1.7rem;
    max-width: 450px;
    min-width: 450px;
    text-align: center;
    pointer-events: none;
    color: #fff !important; }

.engrave-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin: 0 auto;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .engrave-data__column {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    background: rgba(3, 3, 3, 0.7);
    border-radius: 5px;
    max-width: 500px;
    margin: 0 10px 30px;
    width: 100%; }
    .engrave-data__column--all .engrave__lvl {
      display: none; }
  .engrave-data__wrapper {
    padding: 14px 19px; }

.search-filter__type {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 15px;
  margin: 15px auto 10px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.search-filter__type-item {
  position: relative;
  margin: 0 5px;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  cursor: pointer;
  padding: 0 14px;
  border-radius: 5px;
  -webkit-transition: color .3s ease, background .2s ease, opacity .1s ease, width .3s ease, -webkit-transform .3s ease-out;
  transition: color .3s ease, background .2s ease, opacity .1s ease, width .3s ease, -webkit-transform .3s ease-out;
  -o-transition: color .3s ease, background .2s ease, opacity .1s ease, width .3s ease, transform .3s ease-out;
  transition: color .3s ease, background .2s ease, opacity .1s ease, width .3s ease, transform .3s ease-out;
  transition: color .3s ease, background .2s ease, opacity .1s ease, width .3s ease, transform .3s ease-out, -webkit-transform .3s ease-out;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-width: 200px;
  margin-bottom: 10px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .search-filter__type-item:hover, .search-filter__type-item.is-active {
    color: white;
    background: rgba(255, 255, 255, 0.05); }
  .search-filter__type-item:before {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0;
    width: 64px;
    height: 64px;
    display: inline-block;
    background: url(/images/data_analysis_icon.png) no-repeat 100% 0;
    -webkit-transform: translateX(-50%) scale(0.85);
    -ms-transform: translateX(-50%) scale(0.85);
    transform: translateX(-50%) scale(0.85);
    -webkit-transition: -webkit-transform .25s ease;
    transition: -webkit-transform .25s ease;
    -o-transition: transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease; }
  .search-filter__type-item:hover:before {
    -webkit-transform: translateX(-50%) scale(0.85) translateY(-3px);
    -ms-transform: translateX(-50%) scale(0.85) translateY(-3px);
    transform: translateX(-50%) scale(0.85) translateY(-3px); }

.search-filter__skill:before {
  background-position: 0px -128px; }

.search-filter__engrave:before {
  background-position: 0px -64px; }

.search-filter__engrave:hover:before {
  background-position: -64px -64px; }

.search-filter__stats:before {
  background-position: 0px 0px; }

.search-filter__stats:hover:before {
  background-position: -64px 0px; }

.engrave {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 0;
  margin-bottom: 0px;
  cursor: default; }
  .engrave__icon {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 3px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background-color: rgba(3, 3, 3, 0.2); }
    .engrave__icon:after {
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      -webkit-transition: color .2s,background-color .2s,border-color .2s;
      -o-transition: color .2s,background-color .2s,border-color .2s;
      transition: color .2s,background-color .2s,border-color .2s;
      pointer-events: none;
      z-index: 1; }
    .engrave__icon img {
      width: 100%; }
  .engrave__desc {
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .engrave__supporter {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    padding: 0;
    color: #fff; }
    .engrave__supporter span {
      padding: 0 19px;
      display: block; }
    .engrave__supporter a {
      display: block;
      width: 100%; }
    .engrave__supporter .latree_button {
      width: 100%; }
  .engrave .tooltip {
    position: absolute;
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background: rgba(3, 3, 3, 0.9);
    padding: .8rem 1.5rem;
    z-index: 999;
    font-size: 1.7rem;
    line-height: 1.3;
    width: 100%;
    min-width: 450px;
    text-align: center;
    pointer-events: none;
    color: #fff !important; }
  .engrave[data-lvl="1"] .engrave__name {
    color: #c4fff7; }
  .engrave[data-lvl="1"] .blessing-bar {
    background-color: #c4fff7; }
  .engrave[data-lvl="2"] .engrave__name {
    color: #d0f4a1; }
  .engrave[data-lvl="2"] .blessing-bar {
    background-color: #d0f4a1; }
  .engrave[data-lvl="3"] .engrave__name {
    color: #FFB54C; }
  .engrave[data-lvl="3"] .blessing-bar {
    background-color: #FFB54C; }
  .engrave[data-penalty="1"] .engrave__name {
    color: #c53030; }
  .engrave[data-penalty="1"] .blessing-bar {
    background-color: #c53030; }
  .engrave__name {
    color: rgba(255, 255, 255, 0.7);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 14px; }
  .engrave__usage {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase; }
  .engrave .blessing-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 16px;
    height: 10px;
    background-color: #b88b58;
    -webkit-transition: width .3s ease-out;
    -o-transition: width .3s ease-out;
    transition: width .3s ease-out;
    max-width: 100%;
    z-index: -5;
    opacity: .5;
    -webkit-animation: animationProgress .8s ease;
    animation: animationProgress .8s ease; }
    .engrave .blessing-bar--plus {
      z-index: -1;
      background-color: #e1cab0;
      -webkit-transition: width .3s ease .1s;
      -o-transition: width .3s ease .1s;
      transition: width .3s ease .1s; }
    .engrave .blessing-bar--full {
      bottom: 0;
      width: 100% !important;
      background-color: rgba(255, 255, 255, 0.1) !important; }

.riddle {
  padding: 18px 20px; }
  .riddle__hide {
    -webkit-transition: background-color .3s ease, color .3s ease;
    -o-transition: background-color .3s ease, color .3s ease;
    transition: background-color .3s ease, color .3s ease;
    color: #000;
    background: #000;
    padding: 1px 4px;
    border-radius: 3px; }
  .riddle:hover .riddle__hide {
    background: transparent;
    color: inherit; }

.rating-stats-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin: 0 auto;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .rating-stats-data__column {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    background: rgba(3, 3, 3, 0.5);
    border-radius: 5px;
    max-width: 500px;
    margin: 0 10px 30px;
    width: 100%;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px); }
  .rating-stats-data h1 {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(3, 3, 3, 0.7);
    line-height: 40px;
    height: 40px;
    padding: 0 14px; }
  .rating-stats-data__wrapper {
    padding: 0 19px 14px; }
  .rating-stats-data__riddle {
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: .08em;
    text-align: center; }
    .rating-stats-data__riddle:hover:before, .rating-stats-data__riddle:hover:after {
      top: 50%;
      -webkit-transform: rotate(180deg) translateY(50%);
      -ms-transform: rotate(180deg) translateY(50%);
      transform: rotate(180deg) translateY(50%); }
    .rating-stats-data__riddle:before, .rating-stats-data__riddle:after {
      content: '?';
      position: absolute;
      top: 50%;
      left: 0;
      font-size: 16px;
      font-weight: 700;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
    .rating-stats-data__riddle:after {
      content: '?';
      left: unset;
      right: 0; }

.rating-stats {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 0;
  margin-bottom: 0px;
  cursor: default;
  min-height: 50px;
  max-height: 200px;
  height: 100%;
  cursor: pointer;
  overflow: hidden; }
  .rating-stats:hover {
    overflow: visible; }
    .rating-stats:hover .blessing-bar-class {
      opacity: 1; }
    .rating-stats:hover .blessing-bar {
      opacity: 1; }
  .rating-stats__icon {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 3px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background-color: rgba(3, 3, 3, 0.2); }
    .rating-stats__icon:after {
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      -webkit-transition: color .2s,background-color .2s,border-color .2s;
      -o-transition: color .2s,background-color .2s,border-color .2s;
      transition: color .2s,background-color .2s,border-color .2s;
      pointer-events: none;
      z-index: 1; }
  .rating-stats__name {
    color: rgba(255, 255, 255, 0.7);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 14px; }
  .rating-stats__usage {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 14px;
    display: inl; }
  .rating-stats .blessing-bar-class {
    position: absolute;
    left: 105%;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: wrap;
    -ms-flex: wrap;
    flex: wrap;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    min-width: 400px;
    height: 140px;
    opacity: 0;
    background: rgba(3, 3, 3, 0.2);
    z-index: 0;
    padding: 10px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px); }
    .rating-stats .blessing-bar-class .blessing-bar {
      position: relative !important;
      bottom: unset !important;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      opacity: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      max-height: 100%;
      top: unset;
      -webkit-transform: unset;
      -ms-transform: unset;
      transform: unset; }
  .rating-stats .blessing-bar {
    position: absolute;
    left: 0;
    width: 0;
    height: 16px;
    height: 30px;
    background-color: #b88b58;
    -webkit-transition: width .3s ease-out, opacity .3s ease;
    -o-transition: width .3s ease-out, opacity .3s ease;
    transition: width .3s ease-out, opacity .3s ease;
    max-width: 100%;
    z-index: -5;
    opacity: .5;
    -webkit-animation: animationProgress .8s ease;
    animation: animationProgress .8s ease;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
    .rating-stats .blessing-bar--plus {
      z-index: -1;
      background-color: #e1cab0;
      -webkit-transition: width .3s ease .1s, opacity .3s ease;
      -o-transition: width .3s ease .1s, opacity .3s ease;
      transition: width .3s ease .1s, opacity .3s ease; }
    .rating-stats .blessing-bar--full {
      width: 100% !important;
      background-color: rgba(255, 255, 255, 0.1) !important; }
    .rating-stats .blessing-bar--class {
      position: relative;
      bottom: unset; }
      .rating-stats .blessing-bar--class img {
        width: 80%;
        max-width: 50px;
        z-index: 10;
        -webkit-filter: invert(100);
        filter: invert(100); }
    .rating-stats .blessing-bar[data-class='102'] {
      background-color: #fca5a5; }
    .rating-stats .blessing-bar[data-class='103'] {
      background-color: #fef3c7; }
    .rating-stats .blessing-bar[data-class='104'] {
      background-color: #b45309; }
    .rating-stats .blessing-bar[data-class='105'] {
      background-color: #6ee7b7; }
    .rating-stats .blessing-bar[data-class='202'] {
      background-color: #bfdbfe; }
    .rating-stats .blessing-bar[data-class='203'] {
      background-color: #a5b4fc; }
    .rating-stats .blessing-bar[data-class='204'] {
      background-color: #3730a3; }
    .rating-stats .blessing-bar[data-class='302'] {
      background-color: #c4b5fd; }
    .rating-stats .blessing-bar[data-class='303'] {
      background-color: #065f46; }
    .rating-stats .blessing-bar[data-class='304'] {
      background-color: #2563eb; }
    .rating-stats .blessing-bar[data-class='402'] {
      background-color: #34d399; }
    .rating-stats .blessing-bar[data-class='403'] {
      background-color: #a78bfa; }
    .rating-stats .blessing-bar[data-class='404'] {
      background-color: #c4b5fd; }
    .rating-stats .blessing-bar[data-class='502'] {
      background-color: #8b5cf6; }
    .rating-stats .blessing-bar[data-class='503'] {
      background-color: #fbcfe8; }
    .rating-stats .blessing-bar[data-class='504'] {
      background-color: #f472b6; }
    .rating-stats .blessing-bar[data-class='505'] {
      background-color: #c4b5fd; }

@-webkit-keyframes animationProgress {
  from {
    width: 0; } }

@keyframes animationProgress {
  from {
    width: 0; } }

.chart-stats {
  margin-top: 20px;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  position: relative;
  height: 330px;
  min-height: 315px !important;
  width: 100%; }
  .chart-stats svg path {
    -webkit-filter: none;
    filter: none; }
  .chart-stats .bg {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute; }
  .chart-stats .chartBackground {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/images/bg/66.jpg);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-animation: shipsScale 30s ease-in-out infinite;
    animation: shipsScale 30s ease-in-out infinite; }

.stats-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin: 0 auto; }
  .stats-data__column {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    background: rgba(3, 3, 3, 0.7);
    border-radius: 5px;
    max-width: 500px; }
  .stats-data__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .stats-data .bars {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 16px;
    height: 100%;
    background-color: #b88b58;
    -webkit-transition: width .3s ease-out;
    -o-transition: width .3s ease-out;
    transition: width .3s ease-out;
    max-width: 100%;
    z-index: -5;
    opacity: .5;
    left: 5px;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .stats-data .blessing-bar {
    width: 4px;
    -webkit-animation: animationProgress .8s ease;
    animation: animationProgress .8s ease;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    .stats-data .blessing-bar--plus {
      z-index: -1;
      background-color: #e1cab0;
      -webkit-transition: width .3s ease .1s;
      -o-transition: width .3s ease .1s;
      transition: width .3s ease .1s; }
    .stats-data .blessing-bar--full {
      display: none;
      width: 100% !important;
      background-color: rgba(255, 255, 255, 0.1) !important; }
    .stats-data .blessing-bar[data-stat="crit"] {
      background-color: #c53030; }
    .stats-data .blessing-bar[data-stat="speciality"] {
      background-color: #fbd38d; }
    .stats-data .blessing-bar[data-stat="agility"] {
      background-color: #68d391; }
    .stats-data .blessing-bar[data-stat="endurance"] {
      background-color: #000; }
    .stats-data .blessing-bar[data-stat="proficiency"] {
      background-color: #000; }
    .stats-data .blessing-bar[data-stat="subdue"] {
      background-color: #000; }

.top-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .top-stats .stats-data__column {
    -ms-flex-preferred-size: 300px;
    flex-basis: 300px;
    min-width: 250px;
    max-width: calc(50% - 10px);
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex: 1;
    flex: 1;
    margin: 0 5px 10px;
    overflow: hidden; }
  .top-stats .stats-data__title {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background: rgba(3, 3, 3, 0.7);
    font-size: 17px;
    line-height: 40px;
    height: 40px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 14px; }

.top-stat {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 14px;
  margin-bottom: 0px;
  --mdc-theme-primary: #b88b58;
  --mdc-shape-small: 0;
  border-radius: 0; }
  .top-stat .rank {
    color: #b88b58;
    -ms-flex-preferred-size: 20px;
    flex-basis: 20px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em; }
  .top-stat__name {
    color: rgba(255, 255, 255, 0.8);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 14px; }
  .top-stat__usage {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e6bc8e; }

.supporter-alert {
  color: #c53030;
  height: 100%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.skill-modal {
  background: black;
  color: #c53030;
  text-align: center;
  max-width: 600px;
  margin: auto; }
  .skill-modal .skill__shrink {
    margin-bottom: 10px; }
  .skill-modal .skill__name {
    text-align: start; }
  .skill-modal .skill {
    cursor: default; }

.tooltip-new {
  margin: 0;
  background: rgba(3, 3, 3, 0.9);
  padding: 0;
  font-size: 1.7rem;
  line-height: 1.3;
  max-width: 450px;
  pointer-events: none; }
  .tooltip-new__header {
    background: rgba(3, 3, 3, 0.4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    padding: .8rem .5rem 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .tooltip-new__header img {
      width: 35px;
      height: 35px; }
  .tooltip-new__name {
    font-size: 17px;
    line-height: 40px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-left: 10px; }
  .tooltip-new__desc {
    padding: 2px 14px 10px;
    font-size: 16px; }
    .tooltip-new__desc .rune_acq {
      font-size: 14px; }
  .tooltip-new[data-grade="0"] .tooltip-new__name {
    color: #FFFFFF; }
  .tooltip-new[data-grade="1"] .tooltip-new__name {
    color: #8DF901; }
  .tooltip-new[data-grade="2"] .tooltip-new__name {
    color: #00B0FA; }
  .tooltip-new[data-grade="3"] .tooltip-new__name {
    color: #ce43fc; }
  .tooltip-new[data-grade="4"] .tooltip-new__name {
    color: #F99200; }
  .tooltip-new[data-grade="5"] .tooltip-new__name {
    color: #FA5D00; }
  .tooltip-new[data-grade="6"] .tooltip-new__name {
    color: #a00c80; }
  .tooltip-new[data-grade="1"] .tooltip-new__wrapper {
    background: rgba(141, 249, 1, 0.05);
    border-color: rgba(141, 249, 1, 0.2); }
  .tooltip-new[data-grade="2"] .tooltip-new__wrapper {
    background: rgba(0, 176, 250, 0.05);
    border-color: rgba(0, 176, 250, 0.2); }
  .tooltip-new[data-grade="3"] .tooltip-new__wrapper {
    background: rgba(206, 67, 252, 0.05);
    border-color: rgba(206, 67, 252, 0.2); }
  .tooltip-new[data-grade="4"] .tooltip-new__wrapper {
    background: rgba(249, 146, 0, 0.05);
    border-color: rgba(249, 146, 0, 0.2); }
  .tooltip-new[data-grade="5"] .tooltip-new__wrapper {
    background: rgba(250, 93, 0, 0.05);
    border-color: rgba(250, 93, 0, 0.2); }
  .tooltip-new[data-grade="6"] .tooltip-new__wrapper {
    background: rgba(160, 12, 128, 0.05);
    border-color: rgba(160, 12, 128, 0.2); }

.market-user {
  background: rgba(3, 3, 3, 0.5);
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 5px; }
  .market-user__back {
    fill: #fff;
    font-weight: 600;
    letter-spacing: .03em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    padding: 2px 25px;
    border-radius: 5px;
    -webkit-transition: background .3s ease;
    -o-transition: background .3s ease;
    transition: background .3s ease;
    background: rgba(255, 255, 255, 0.02);
    height: 55px;
    margin-right: 15px; }
    .market-user__back svg {
      opacity: .7;
      -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
      transition: opacity .3s ease, -webkit-transform .3s ease;
      -o-transition: opacity .3s ease, transform .3s ease;
      transition: opacity .3s ease, transform .3s ease;
      transition: opacity .3s ease, transform .3s ease, -webkit-transform .3s ease; }
    .market-user__back:hover {
      background: rgba(255, 255, 255, 0.05); }
      .market-user__back:hover svg {
        opacity: 1;
        -webkit-transform: translateX(-4px);
        -ms-transform: translateX(-4px);
        transform: translateX(-4px); }
  .market-user__avatar {
    position: relative;
    width: 55px;
    height: 55px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px; }
    .market-user__avatar:after {
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      -webkit-transition: color .2s,background-color .2s,border-color .2s;
      -o-transition: color .2s,background-color .2s,border-color .2s;
      transition: color .2s,background-color .2s,border-color .2s;
      pointer-events: none;
      z-index: 1; }
    .market-user__avatar img {
      width: 100%;
      height: 100%; }
  .market-user .supporter-icon {
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-bottom: 0; }
  .market-user__nickname {
    font-size: 32px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .08em;
    font-family: El Messiri;
    white-space: nowrap;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%; }
  .market-user__product-count {
    letter-spacing: 0;
    font-weight: 400;
    font-size: 19px; }

.search-filters .market-filters__item {
  max-width: 60%;
  min-width: 300px; }
  @media screen and (max-width: 530px) {
    .search-filters .market-filters__item {
      max-width: 100% !important; } }
  .search-filters .market-filters__item:first-child {
    max-width: 40%;
    min-width: 210px; }
  .search-filters .market-filters__item .search {
    width: 100%; }
    @media screen and (max-width: 736px) {
      .search-filters .market-filters__item .search {
        padding: 0; } }
  @media screen and (max-width: 500px) {
    .search-filters .market-filters__item .select__item {
      padding: 10px 14px;
      font-size: 13px; } }

.search-filters .engrave-lvl {
  display: none; }

.search-filters .search-filter--engrave-negative .select {
  padding-right: 3px !important; }

.grade-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: 20px;
  margin-bottom: 10px;
  min-width: 550px;
  border-radius: 20px;
  overflow: hidden;
  /*&__item {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background-color: #b88b58;
		transition: width .3s ease-out;
		max-width: 100%;
		
		width: 0;
		animation: animationProgress .8s ease;
		border-radius: 5px;
		
		opacity: .9;
		cursor: pointer;

		&:hover {
			opacity: 1;
		}

		&.q1 {
			z-index: 6;
			width: 9%;
			background: #ff6000;
		}

		&.q2 {
			z-index: 5;
			width: 29%;
			background: #ffd200;
		}

		&.q3 {
			z-index: 4;
			width: 69%;
			background: #91fe02;
		}

		&.q4 {
			z-index: 3;
			width: 89%;
			background: #00b5ff;
		}

		&.q5 {
			z-index: 2;
			width: 99%;
			background: #ce43fc;
		}

		&.q6 {
			z-index: 1;
			width: 100%;
			background: #fe9600;
		}
	}*/ }
  .grade-bar span {
    position: absolute;
    top: 50%;
    left: 3%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    z-index: 5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .grade-bar span.q1 {
      color: #ff6000; }
    .grade-bar span.q2 {
      color: #ffd200; }
    .grade-bar span.q3 {
      color: #91fe02; }
    .grade-bar span.q4 {
      color: #00b5ff; }
    .grade-bar span.q5 {
      color: #ce43fc; }
    .grade-bar span.q6 {
      color: #fe9600; }
  .grade-bar__item {
    height: 100%;
    background-color: #b88b58;
    -webkit-transition: opacity .3s ease, width .3s ease-out;
    -o-transition: opacity .3s ease, width .3s ease-out;
    transition: opacity .3s ease, width .3s ease-out;
    max-width: 100%;
    width: 0;
    -webkit-animation: animationProgress .8s ease;
    animation: animationProgress .8s ease;
    opacity: .8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: black; }
    .grade-bar__item:hover {
      opacity: 1; }
    .grade-bar__item.q1 {
      width: 9%;
      background: #ff6000; }
    .grade-bar__item.q2 {
      width: 19%;
      background: #ffd200; }
    .grade-bar__item.q3 {
      width: 39%;
      background: #91fe02;
      background: -webkit-gradient(linear, left top, right top, from(#4b9125), to(#c5fd43));
      background: -o-linear-gradient(left, #4b9125 0%, #c5fd43 100%);
      background: linear-gradient(90deg, #4b9125 0%, #c5fd43 100%); }
    .grade-bar__item.q4 {
      width: 19%;
      background: #00b5ff; }
    .grade-bar__item.q5 {
      width: 9%;
      background: #ce43fc; }
    .grade-bar__item.q6 {
      width: 5%;
      background: #fe9600; }

.add-new-product {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: 8px 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  -webkit-transition: color .3s ease, background .3s ease;
  -o-transition: color .3s ease, background .3s ease;
  transition: color .3s ease, background .3s ease;
  min-height: 50px;
  margin: 0 8px;
  line-height: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .add-new-product:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white; }

.egrave-reset {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: 8px 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  -webkit-transition: background .3s ease;
  -o-transition: background .3s ease;
  transition: background .3s ease;
  margin: 0 8px;
  line-height: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .egrave-reset:hover {
    background: rgba(255, 255, 255, 0.1); }

.market-filters__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

.market-filters .in-active {
  cursor: not-allowed;
  opacity: .3; }
  .market-filters .in-active .select__item {
    cursor: not-allowed;
    pointer-events: none; }

@media screen and (max-width: 500px) {
  .market-filters .select__item {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; } }

.market-filters .search-filter--engrave {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-bottom: 0px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1; }
  .market-filters .search-filter--engrave input {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; }
  .market-filters .search-filter--engrave .select--tabs {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    width: 100%; }
  .market-filters .search-filter--engrave .select__item {
    text-align: start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .market-filters .search-filter--engrave img {
    height: 20px;
    width: 20px;
    margin-right: 10px; }

.market-filters .search-filter--engrave-negative {
  margin-bottom: 8px;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%; }
  .market-filters .search-filter--engrave-negative .select {
    padding-right: 55px;
    border-radius: 5px; }
  .market-filters .search-filter--engrave-negative .select__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 12px; }
  .market-filters .search-filter--engrave-negative .engrave-lvl {
    background: #f4a1a117;
    color: #c53030;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; }
    .market-filters .search-filter--engrave-negative .engrave-lvl:hover {
      background: #f27e7e17; }
  .market-filters .search-filter--engrave-negative .negative {
    color: #c53030; }

.market-add {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(3, 3, 3, 0.5); }
  .market-add .search {
    padding: 0; }
  .market-add .select__item.negative[data-engrave-negative=""] {
    display: none; }
  .market-add__onSignIn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    line-height: 1.3;
    font-size: 17px; }
    .market-add__onSignIn .g-signin2 {
      margin-top: 30px; }
  .market-add__form-item-title {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 8px;
    width: 100%; }
  .market-add .latree-slider {
    width: 80%;
    margin-bottom: 20px; }
    .market-add .latree-slider.noUi-target {
      border-radius: 5px; }
    .market-add .latree-slider .noUi-connects {
      border-radius: 5px; }
    .market-add .latree-slider .noUi-handle {
      background: #b88b58;
      -webkit-transition: background .3s ease;
      -o-transition: background .3s ease;
      transition: background .3s ease; }
    .market-add .latree-slider .noUi-connect {
      background: #27ae60;
      -webkit-transition: background .3s ease;
      -o-transition: background .3s ease;
      transition: background .3s ease; }
    .market-add .latree-slider .noUi-tooltip {
      -webkit-transition: background .3s ease;
      -o-transition: background .3s ease;
      transition: background .3s ease; }
    .market-add .latree-slider.q1 .noUi-handle {
      background: #ff6000; }
    .market-add .latree-slider.q1 .noUi-connect {
      background: #ff6000; }
    .market-add .latree-slider.q1 .noUi-tooltip {
      background-color: #ff6000; }
    .market-add .latree-slider.q2 .noUi-handle {
      background: #ffd200; }
    .market-add .latree-slider.q2 .noUi-connect {
      background: #ffd200; }
    .market-add .latree-slider.q2 .noUi-tooltip {
      background-color: #ffd200; }
    .market-add .latree-slider.q3 .noUi-handle {
      background: #91fe02; }
    .market-add .latree-slider.q3 .noUi-connect {
      background: #91fe02; }
    .market-add .latree-slider.q3 .noUi-tooltip {
      background-color: #91fe02; }
    .market-add .latree-slider.q4 .noUi-handle {
      background: #00b5ff; }
    .market-add .latree-slider.q4 .noUi-connect {
      background: #00b5ff; }
    .market-add .latree-slider.q4 .noUi-tooltip {
      background-color: #00b5ff; }
    .market-add .latree-slider.q5 .noUi-handle {
      background: #ce43fc; }
    .market-add .latree-slider.q5 .noUi-connect {
      background: #ce43fc; }
    .market-add .latree-slider.q5 .noUi-tooltip {
      background-color: #ce43fc; }
    .market-add .latree-slider.q6 .noUi-handle {
      background: #fe9600; }
    .market-add .latree-slider.q6 .noUi-connect {
      background: #fe9600; }
    .market-add .latree-slider.q6 .noUi-tooltip {
      background-color: #fe9600; }
    .market-add .latree-slider .noUi-tooltip {
      display: none;
      border: none;
      font-size: 14px;
      line-height: 20px;
      line-height: 1;
      padding: 6px 8px;
      opacity: .85; }
    .market-add .latree-slider .noUi-active .noUi-tooltip {
      display: block; }
  .market-add #searchItem input {
    border-radius: 0; }
  .market-add__title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .08em;
    color: #b88b58;
    text-transform: uppercase;
    text-align: center;
    background: rgba(3, 3, 3, 0.5);
    height: 40px; }
  .market-add__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 10px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .market-add__item img {
      width: 55px;
      height: 55px; }
    .market-add__item[data-grade="0"] {
      color: #FFFFFF; }
    .market-add__item[data-grade="1"] {
      color: #8DF901; }
    .market-add__item[data-grade="2"] {
      color: #00B0FA; }
    .market-add__item[data-grade="3"] {
      color: #ce43fc; }
    .market-add__item[data-grade="4"] {
      color: #F99200; }
    .market-add__item[data-grade="5"] {
      color: #FA5D00; }
    .market-add__item[data-grade="6"] {
      color: #a00c80; }
  .market-add__item-name {
    margin-left: 20px;
    line-height: 1.2; }
  .market-add .search {
    opacity: 1;
    -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .market-add__form-item {
    margin-bottom: 10px; }
  .market-add__form-item--center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .market-add__form-item--price .select {
    max-width: 350px; }
  .market-add__form-item--price .select__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .market-add__form-item--price .select__item[data-deal="buy"] {
    margin-right: 0px; }
  .market-add__form-item--price .search {
    margin: 0;
    margin-top: 5px;
    z-index: 1 !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; }
    .market-add__form-item--price .search input {
      background: rgba(255, 255, 255, 0.05);
      padding: .7rem 1.4rem .7rem;
      font-size: 14px;
      border-radius: 5px;
      -webkit-transition: color 0.2s ease, background .3s ease;
      -o-transition: color 0.2s ease, background .3s ease;
      transition: color 0.2s ease, background .3s ease; }
      .market-add__form-item--price .search input:hover {
        background: rgba(255, 255, 255, 0.07); }
  .market-add__form-item--price .search_box {
    height: 40px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    .market-add__form-item--price .search_box:first-child {
      margin-right: 5px; }
  .market-add__form-item--stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .market-add__form-item--engrave {
    padding: 0 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .market-add .latree_button {
    width: 100%;
    background: rgba(3, 3, 3, 0.5);
    --mdc-theme-primary: #b88b58;
    --mdc-shape-small: 0;
    height: 40px; }
  .market-add__warning {
    padding: 0 20px;
    color: #c53030;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: start; }
  .market-add__success {
    padding: 0 20px;
    color: #d0f4a1;
    font-size: 15px;
    font-weight: 500;
    text-align: start; }

.search-filter--engrave .search {
  margin: 0; }
  .search-filter--engrave .search input {
    background: rgba(255, 255, 255, 0.05);
    background: rgba(3, 3, 3, 0.5);
    padding: .7rem 1.4rem .7rem 40px;
    font-size: 16px;
    -webkit-transition: color 0.2s ease, background .3s ease;
    -o-transition: color 0.2s ease, background .3s ease;
    transition: color 0.2s ease, background .3s ease; }
    .search-filter--engrave .search input:hover {
      background: rgba(3, 3, 3, 0.9); }

.search-filter--engrave .search_box {
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .search-filter--engrave .search_box svg {
    margin: 0 0 0 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 50%; }

.engrave-lvl {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.04);
  background: #d0f4a117;
  width: 50px;
  color: #d0f4a1;
  font-size: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: background .3s ease;
  -o-transition: background .3s ease;
  transition: background .3s ease;
  z-index: 5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-top-right-radius: 3px; }
  .engrave-lvl:hover {
    background: #d0f4a129; }

.product-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 0 -10px; }
  @media screen and (max-width: 730px) {
    .product-list {
      padding: 10px; } }

.product {
  padding: 10px 14px;
  border-radius: 5px;
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: 200px;
  flex-basis: 200px;
  border-radius: 5px;
  padding: 8px 14px;
  background: rgba(3, 3, 3, 0.65);
  margin: 10px;
  -ms-flex-item-align: start;
  align-self: flex-start; }
  .product__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 10px; }
  .product .user {
    font-size: 14px;
    margin: 0; }
  .product__date {
    color: rgba(255, 255, 255, 0.4);
    text-transform: lowercase;
    margin-left: 15px; }
  .product__deleted {
    margin-left: auto;
    font-family: Open Sans;
    font-weight: 100;
    font-size: 35px;
    text-align: center;
    width: 35px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    opacity: 0.7;
    -webkit-transition: opacity 150ms linear, background .3s ease;
    -o-transition: opacity 150ms linear, background .3s ease;
    transition: opacity 150ms linear, background .3s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #c53030;
    border-radius: 50%; }
    .product__deleted:hover {
      background: rgba(197, 48, 48, 0.04);
      opacity: 1; }
  .product__gs {
    color: #b88b58;
    display: none; }
  .product__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 15px 0; }
  .product__title {
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase; }
  .product__icon {
    width: 100%;
    -ms-flex-item-align: start;
    align-self: start;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0; }
    .product__icon img {
      width: 100%;
      height: 100%; }
  .product:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: -1;
    border-radius: 5px; }
  .product .blessing-bar-wrapper {
    position: relative;
    height: 15px;
    margin-bottom: 10px; }
    .product .blessing-bar-wrapper span {
      position: absolute;
      top: 50%;
      left: 3%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      font-size: 12px;
      font-weight: 600;
      line-height: 15px;
      z-index: 5;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      .product .blessing-bar-wrapper span.q1 {
        color: #ff6000; }
      .product .blessing-bar-wrapper span.q2 {
        color: #ffd200; }
      .product .blessing-bar-wrapper span.q3 {
        color: #91fe02; }
      .product .blessing-bar-wrapper span.q4 {
        color: #00b5ff; }
      .product .blessing-bar-wrapper span.q5 {
        color: #ce43fc; }
      .product .blessing-bar-wrapper span.q6 {
        color: #fe9600; }
  .product .blessing-bar {
    position: absolute;
    top: 0;
    height: 16px;
    height: 100%;
    background-color: #b88b58;
    -webkit-transition: width .3s ease-out;
    -o-transition: width .3s ease-out;
    transition: width .3s ease-out;
    max-width: 100%;
    z-index: 5;
    opacity: .5;
    opacity: .75;
    width: 0;
    -webkit-animation: animationProgress .8s ease;
    animation: animationProgress .8s ease;
    border-radius: 8px; }
    .product .blessing-bar--full {
      -webkit-animation: animationProgress 1s ease;
      animation: animationProgress 1s ease;
      width: 0;
      background-color: rgba(255, 255, 255, 0.1); }
    .product .blessing-bar.q1 {
      background: #ff6000;
      background: -webkit-gradient(linear, left top, right top, from(#8a1c04), to(#ea611c));
      background: -o-linear-gradient(left, #8a1c04 0%, #ea611c 100%);
      background: linear-gradient(90deg, #8a1c04 0%, #ea611c 100%); }
    .product .blessing-bar.q2 {
      background: #ffd200;
      background: -webkit-gradient(linear, left top, right top, from(#bfa301), to(#f7fc0d));
      background: -o-linear-gradient(left, #bfa301 0%, #f7fc0d 100%);
      background: linear-gradient(90deg, #bfa301 0%, #f7fc0d 100%); }
    .product .blessing-bar.q3 {
      background: #91fe02;
      background: -webkit-gradient(linear, left top, right top, from(#4b9125), to(#c5fd43));
      background: -o-linear-gradient(left, #4b9125 0%, #c5fd43 100%);
      background: linear-gradient(90deg, #4b9125 0%, #c5fd43 100%);
      background: -webkit-gradient(linear, left top, right top, from(#306f03), to(#c5fd43));
      background: -o-linear-gradient(left, #306f03 0%, #c5fd43 100%);
      background: linear-gradient(90deg, #306f03 0%, #c5fd43 100%); }
    .product .blessing-bar.q4 {
      background: #00b5ff;
      background: -webkit-gradient(linear, left top, right top, from(#023871), to(#15d4ed));
      background: -o-linear-gradient(left, #023871 0%, #15d4ed 100%);
      background: linear-gradient(90deg, #023871 0%, #15d4ed 100%); }
    .product .blessing-bar.q5 {
      background: #ce43fc;
      background: -webkit-gradient(linear, left top, right top, from(#520360), to(#c62cea));
      background: -o-linear-gradient(left, #520360 0%, #c62cea 100%);
      background: linear-gradient(90deg, #520360 0%, #c62cea 100%); }
    .product .blessing-bar.q6 {
      background: #fe9600;
      background: -webkit-gradient(linear, left top, right top, from(#d86c1f), to(#feca3f));
      background: -o-linear-gradient(left, #d86c1f 0%, #feca3f 100%);
      background: linear-gradient(90deg, #d86c1f 0%, #feca3f 100%); }
  .product__stats {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 15px; }
  .product__engrave {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9); }
  .product__engrave-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px;
    line-height: 1; }
    .product__engrave-item img {
      width: 35px;
      height: 35px;
      margin-right: 8px; }
    .product__engrave-item span {
      margin-left: 5px;
      color: #d0f4a1; }
    .product__engrave-item--negative {
      color: #c53030; }
      .product__engrave-item--negative span {
        color: #c53030; }
  .product__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap; }
  .product__deal {
    color: rgba(255, 255, 255, 0.7);
    margin-right: 5px;
    letter-spacing: 0; }
  .product__price {
    position: relative;
    color: #fee469;
    margin-right: 30px; }
    .product__price:after {
      content: "";
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      background: url(../../assets/img/gold_1.png) no-repeat 50% 50%;
      width: 20px;
      height: 20px;
      background-size: cover;
      margin-left: 2px; }
  .product__discord {
    position: relative;
    color: #fff;
    font-weight: 600;
    letter-spacing: .03em;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    padding: 2px 15px;
    border-radius: 5px;
    -webkit-transition: background .3s ease;
    -o-transition: background .3s ease;
    transition: background .3s ease;
    margin-left: auto; }
    .product__discord span {
      margin-left: 2px;
      color: #b9bbbe;
      font-size: 12px; }
    .product__discord:hover {
      background: rgba(255, 255, 255, 0.04); }
  .product .copied {
    position: absolute;
    bottom: 105%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 5;
    font-size: 11px;
    line-height: 1;
    margin: 0;
    color: #f6fbf9;
    background-color: #43b581;
    -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 16px 0px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 16px 0px;
    padding: 8px 12px;
    overflow: hidden; }
  .product[data-grade="2"]:before {
    background: rgba(0, 176, 250, 0.05); }
  .product[data-grade="3"]:before {
    background: rgba(206, 67, 252, 0.05); }
  .product[data-grade="4"]:before {
    background: rgba(249, 146, 0, 0.05); }
  .product[data-grade="5"]:before {
    background: rgba(250, 93, 0, 0.05); }
  .product[data-grade="6"]:before {
    background: rgba(160, 12, 128, 0.05); }
  .product[data-grade="0"] {
    color: #FFFFFF; }
  .product[data-grade="1"] {
    color: #8DF901; }
  .product[data-grade="2"] {
    color: #00B0FA; }
  .product[data-grade="3"] {
    color: #ce43fc; }
  .product[data-grade="4"] {
    color: #F99200; }
  .product[data-grade="5"] {
    color: #FA5D00; }
  .product[data-grade="6"] {
    color: #a00c80; }

.user {
  color: rgba(255, 255, 255, 0.65);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 15px;
  font-size: 12px; }
  .user .avatar {
    margin-right: 10px;
    width: 24px;
    height: 24px; }
  .user:hover {
    color: rgba(255, 255, 255, 0.85); }
  .user[data-supporter="1"] {
    color: #d0f4a1; }
    .user[data-supporter="1"]:hover {
      color: #d0f4a1; }

.supporter-icon {
  background: url(/images/supporter2.png) no-repeat 100% 0;
  background-position: 50% 50%;
  width: 13px;
  height: 13px;
  background-size: cover;
  margin-left: 3px;
  margin-bottom: 3px; }

.profile {
  background: rgba(3, 3, 3, 0.5);
  padding: 15px;
  border-radius: 5px;
  font-size: 17px;
  line-height: 1.3; }
  .profile__avatar {
    position: relative;
    width: 100px;
    height: 100px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    margin-right: 15px; }
    .profile__avatar:after {
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      -webkit-transition: color .2s,background-color .2s,border-color .2s;
      -o-transition: color .2s,background-color .2s,border-color .2s;
      transition: color .2s,background-color .2s,border-color .2s;
      pointer-events: none;
      z-index: 1;
      border-radius: 16px; }
    .profile__avatar img {
      width: 100%;
      height: 100%; }
  .profile .supporter-icon {
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-bottom: 0; }
  .profile__title {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .profile__nickname {
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
    font-family: El Messiri;
    white-space: nowrap; }
  .profile .in-active {
    display: none; }
  .profile__change-nick {
    font-size: 16px;
    line-height: 1;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
    font-family: Open Sans;
    margin-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .profile button {
    font-family: Open Sans;
    background: transparent;
    border: none;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 18px;
    border-radius: 5px;
    -webkit-transition: background .3s ease;
    -o-transition: background .3s ease;
    transition: background .3s ease;
    background: rgba(255, 255, 255, 0.02);
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer; }
    .profile button:hover {
      background: rgba(255, 255, 255, 0.05); }
    .profile button:disabled {
      opacity: .3;
      cursor: not-allowed; }
  .profile .input-field {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .profile .input-field button {
      border-radius: 0;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0; }
  .profile #nicknameExit {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    height: 41px; }
  .profile input {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    padding: .7rem 60px .7rem 1.5rem;
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 500;
    line-height: 23px;
    border: unset;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    color: rgba(255, 255, 255, 0.9);
    -webkit-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease; }
  .profile__change-nick-warning {
    margin-left: 10px;
    font-size: 14px;
    color: #ef4444; }
  .profile__stats {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
  .profile__stat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 8px; }
    .profile__stat:not(:last-child) {
      margin-right: 16px; }
  .profile__number {
    font-weight: 600;
    margin: 0 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .profile__number .like-counter__icon {
      margin-left: 5px; }
    .profile__number--positive {
      fill: #b92525;
      color: #b92525; }

.quiz-fixed {
  position: fixed;
  z-index: 100;
  left: 20px;
  top: 100%;
  max-width: 400px;
  color: #fff;
  background-color: rgba(3, 3, 3, 0.5);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  -webkit-transition: width .3s ease-in-out, -webkit-transform .4s ease-in-out;
  transition: width .3s ease-in-out, -webkit-transform .4s ease-in-out;
  -o-transition: transform .4s ease-in-out, width .3s ease-in-out;
  transition: transform .4s ease-in-out, width .3s ease-in-out;
  transition: transform .4s ease-in-out, width .3s ease-in-out, -webkit-transform .4s ease-in-out; }
  @media screen and (max-width: 500px) {
    .quiz-fixed {
      max-width: 100%;
      background-color: rgba(3, 3, 3, 0.9); } }
  .quiz-fixed--shrink {
    width: 200px;
    -webkit-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px); }
    @media screen and (max-width: 500px) {
      .quiz-fixed--shrink {
        left: 0;
        -webkit-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        transform: translateY(-40px); } }
  .quiz-fixed--expand {
    width: 400px;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%); }
    @media screen and (max-width: 500px) {
      .quiz-fixed--expand {
        left: 0;
        width: 100%; } }
    .quiz-fixed--expand .quiz-fixed__show {
      line-height: 25px;
      height: 25px; }
      .quiz-fixed--expand .quiz-fixed__show svg {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg); }
  .quiz-fixed__show {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    line-height: 50px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b88b58;
    font-weight: 500;
    cursor: pointer;
    height: 50px;
    -webkit-transition: height .4s ease;
    -o-transition: height .4s ease;
    transition: height .4s ease; }
    .quiz-fixed__show svg {
      fill: #b88b58; }
    @media screen and (max-width: 500px) {
      .quiz-fixed__show {
        line-height: 40px;
        height: 40px; } }

.quiz--error {
  border: 1px solid #860c0f; }

.quiz__name {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(3, 3, 3, 0.7);
  line-height: 40px;
  height: 40px;
  padding: 0 14px;
  margin-bottom: 10px; }
  @media screen and (max-width: 500px) {
    .quiz__name {
      font-size: 14px;
      height: 35px;
      line-height: 35px; } }

.quiz__desc {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 19px; }

.quiz__try {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 19px; }
  .quiz__try span {
    color: #b88b58; }

.quiz__date {
  display: none; }

.quiz .select {
  width: 100%;
  max-width: 850px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px; }
  .quiz .select__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 18px; }

.quiz__tabs {
  width: 100%;
  max-width: 850px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.quiz__tab {
  -webkit-transition: -webkit-transform .34s ease-out .04s;
  transition: -webkit-transform .34s ease-out .04s;
  -o-transition: transform .34s ease-out .04s;
  transition: transform .34s ease-out .04s;
  transition: transform .34s ease-out .04s, -webkit-transform .34s ease-out .04s;
  width: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0; }
  .quiz__tab.is-active {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); }
  .quiz__tab[data-tab="1"].is-active {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
  .quiz__tab.in-active {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }

.quiz__questions {
  padding: 0 19px; }

.quiz__message {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 19px; }
  @media screen and (max-width: 500px) {
    .quiz__message {
      font-size: 11px; } }
  .quiz__message--error {
    color: #ff5157; }
  .quiz__message--success {
    color: #dbffae; }

.quiz__sumbit .mdc-button {
  background: rgba(3, 3, 3, 0.7);
  width: 100%; }

.quiz__sumbit .mdc-button:disabled {
  color: rgba(255, 255, 255, 0.5); }

.question-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 3px 0;
  width: 100%; }
  @media screen and (max-width: 500px) {
    .question-item {
      margin: 0; } }
  .question-item label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer; }
  .question-item__icon {
    width: 20px;
    height: 20px;
    margin-right: 10px; }
    .question-item__icon img {
      width: 100%;
      height: 100%; }
  .question-item__name {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    color: inherit; }
    @media screen and (max-width: 500px) {
      .question-item__name {
        font-size: 12px; } }
  .question-item__input {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    --mdc-theme-secondary: #b88b58; }
  .question-item[data-grade='0'] {
    color: #FFFFFF; }
    .question-item[data-grade='0'] .slotData {
      background: -o-linear-gradient(315deg, #232323, #575757);
      background: linear-gradient(135deg, #232323, #575757); }
    .question-item[data-grade='0'] .mdc-radio {
      --mdc-theme-secondary: #FFFFFF !important; }
    .question-item[data-grade='0'] .question-item__name {
      color: #FFFFFF !important; }
  .question-item[data-grade='1'] {
    color: #8DF901; }
    .question-item[data-grade='1'] .slotData {
      background: -o-linear-gradient(315deg, #18220b, #304911);
      background: linear-gradient(135deg, #18220b, #304911); }
    .question-item[data-grade='1'] .mdc-radio {
      --mdc-theme-secondary: #8DF901 !important;
      color: #8DF901 !important; }
    .question-item[data-grade='1'] .question-item__name {
      color: #8DF901 !important; }
  .question-item[data-grade='2'] {
    color: #00B0FA; }
    .question-item[data-grade='2'] .slotData {
      background: -o-linear-gradient(315deg, #111f2c, #113d5d);
      background: linear-gradient(135deg, #111f2c, #113d5d); }
    .question-item[data-grade='2'] .mdc-radio {
      --mdc-theme-secondary: #00B0FA !important;
      color: #00B0FA !important; }
    .question-item[data-grade='2'] .question-item__name {
      color: #00B0FA !important; }
  .question-item[data-grade='3'] {
    color: #ce43fc; }
    .question-item[data-grade='3'] .slotData {
      background: -o-linear-gradient(315deg, #261331, #480d5d);
      background: linear-gradient(135deg, #261331, #480d5d); }
    .question-item[data-grade='3'] .mdc-radio {
      --mdc-theme-secondary: #ce43fc !important;
      color: #ce43fc !important; }
    .question-item[data-grade='3'] .question-item__name {
      color: #ce43fc !important; }
  .question-item[data-grade='4'] {
    color: #F99200; }
    .question-item[data-grade='4'] .slotData {
      background: -o-linear-gradient(315deg, #362003, #9e5f04);
      background: linear-gradient(135deg, #362003, #9e5f04); }
    .question-item[data-grade='4'] .mdc-radio {
      --mdc-theme-secondary: #F99200 !important;
      color: #F99200 !important; }
    .question-item[data-grade='4'] .question-item__name {
      color: #F99200 !important; }
  .question-item[data-grade='5'] {
    color: #FA5D00; }
    .question-item[data-grade='5'] .slotData {
      background: -o-linear-gradient(315deg, #341a09, #a24006);
      background: linear-gradient(135deg, #341a09, #a24006); }
    .question-item[data-grade='5'] .mdc-radio {
      --mdc-theme-secondary: #FA5D00 !important;
      color: #FA5D00 !important; }
    .question-item[data-grade='5'] .question-item__name {
      color: #FA5D00 !important; }
  .question-item[data-grade='6'] {
    color: #a00c80; }
    .question-item[data-grade='6'] .slotData {
      background: -o-linear-gradient(315deg, #3d173e, #a00c80);
      background: linear-gradient(135deg, #3d173e, #a00c80); }
    .question-item[data-grade='6'] .mdc-radio {
      --mdc-theme-secondary: #a00c80 !important;
      color: #a00c80 !important; }
    .question-item[data-grade='6'] .question-item__name {
      color: #a00c80 !important; }

.quiz-result-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 0;
  margin-bottom: 0px;
  cursor: default;
  min-height: 50px;
  max-height: 200px;
  height: 100%; }
  .quiz-result-item__name {
    color: rgba(255, 255, 255, 0.7);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .quiz-result-item__percent {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 14px; }
  .quiz-result-item .blessing-bar {
    position: absolute;
    left: 0;
    width: 0;
    height: 16px;
    height: 30px;
    background-color: #b88b58;
    -webkit-transition: width .3s ease-out, opacity .3s ease;
    -o-transition: width .3s ease-out, opacity .3s ease;
    transition: width .3s ease-out, opacity .3s ease;
    max-width: 100%;
    z-index: -5;
    opacity: .5;
    -webkit-animation: animationProgress .8s ease;
    animation: animationProgress .8s ease;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
    .quiz-result-item .blessing-bar--plus {
      z-index: -1;
      background-color: #e1cab0;
      -webkit-transition: width .3s ease .1s, opacity .3s ease;
      -o-transition: width .3s ease .1s, opacity .3s ease;
      transition: width .3s ease .1s, opacity .3s ease; }
    .quiz-result-item .blessing-bar--full {
      width: 100% !important;
      background-color: rgba(255, 255, 255, 0.1) !important; }

.cdx-notifies {
  font-family: Open Sans; }

.cdx-notifies .cdx-notify {
  width: 100%;
  max-width: 350px;
  font-size: 15px; }

.cdx-notifies .cdx-notify__cross {
  width: 20px;
  height: 20px; }

.cdx-notifies .cdx-notify--error {
  color: #f5c2c7 !important;
  color: #f4dddd  !important;
  background-color: rgba(3, 3, 3, 0.3) !important;
  border-color: #f5c2c71c !important;
  border: 1px solid;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); }

.cdx-notifies .cdx-notify::before {
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  left: 5px;
  width: 3px;
  height: 85%;
  margin: 0;
  border-radius: 10px;
  background: 0 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.cdx-notifies .cdx-notify--error::before {
  background: #fb5d5d4f !important; }