/* 1. vars */
/* color */
/* font-size & font-weight */
/* sizes */
/* padding */
/* border radius */
/* border width */
/* margin */
/* box shadow */
/* 2. mixin */
/* 3. global classes */
.left {
  text-align: left; }

.right {
  text-align: right; }

.ital {
  font-style: italic; }

.center {
  text-align: center; }

.bold {
  font-weight: bold; }

.delete {
  color: #ed1c24; }

.teaser {
  font-family: 'lobster', cursive; }

.inline_block {
  display: inline-block; }

.hidden_clipboard_value {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0; }

.gem {
  width: 30px;
  height: 30px;
  background-image: url("/assets/gems.png"); }
  .gem.star {
    background-position: -30px, 0; }
  .gem.heart {
    background-position: -60px, 0; }

/* 4. html basic elements */
* {
  box-sizing: border-box; }

input, select {
  font-family: 'roboto', sans-serif; }

span, img, i {
  display: inline-block; }

i {
  font-style: normal; }

s {
  text-decoration: none; }

a, a:visited, a:active {
  text-decoration: none;
  color: inherit; }

header {
  display: flex; }

code {
  font-family: "Lucida Console", Monaco, monospace; }

/* 5. ui_kit  (btns, headers, animations) */
.linq, .btn, .action, .float {
  text-align: center;
  display: inline-block; }
  .linq:not(.disabled):hover, .btn:not(.disabled):hover, .action:not(.disabled):hover, .float:not(.disabled):hover {
    cursor: pointer; }
  .linq > i, .btn > i, .action > i, .float > i {
    font-size: 12px;
    vertical-align: bottom; }
    .linq > i:not(:last-child), .btn > i:not(:last-child), .action > i:not(:last-child), .float > i:not(:last-child) {
      margin-right: 6px; }

.linq {
  padding: 0 6px;
  border-radius: 6px;
  margin: -6px;
  color: #9a499c;
  line-height: 18px; }
  .linq:hover {
    background: #f5f5f5;
    cursor: pointer; }
  .linq.down {
    color: #72368d; }
  .linq.disabled {
    color: #c4c4c4; }

.action, .btn {
  border-radius: 6px;
  height: 24px;
  padding: 0 6px; }
  .action.down, .btn.down {
    border: 3px solid #72368d; }

.action {
  font-size: 12px;
  font-weight: 400;
  color: #565656;
  line-height: 20px;
  line-height: 22px;
  color: #9a499c;
  border: 1px solid #9a499c; }
  .action:not(.disabled):hover {
    background-color: #f2ebf2; }
  .action.down {
    background-color: #f2ebf2; }
  .action.disabled {
    border-color: #c4c4c4;
    color: #c4c4c4; }

.btn {
  background: #9a499c;
  font-size: 14px;
  font-weight: 400;
  color: #565656;
  line-height: 22px;
  color: white;
  line-height: 24px; }
  .btn.pending {
    background-color: rgba(255, 220, 120, 0.6);
    color: #9a499c; }
  .btn:hover {
    background-color: #72368d; }
  .btn.down {
    background-color: #9a499c; }
  .btn.disabled {
    background-color: #e6e6e6; }
  .btn.big {
    line-height: 36px;
    font-weight: 500;
    height: 36px;
    padding: 0 12px; }

.float {
  position: fixed;
  z-index: 16;
  font-family: 'gix_icon_font' !important;
  text-align: center;
  width: 42px;
  height: 42px;
  border-radius: 21px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.19), 0 15px 15px rgba(0, 0, 0, 0.23); }
  .float::after {
    content: '';
    z-index: 17;
    position: relative; }
  .float:hover {
    background: #72368d; }
  .float.down {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.24); }
  .float.pender {
    top: 180px;
    right: 48px;
    background-color: #ffdc78;
    line-height: 42px;
    box-shadow: 0 0 0 1px #9a499c, 0 0 0 7px #ecdbeb, 0 0 0 1px #9a499c, 0 0 0 7px #ecdbeb, 5px 5px 19px 6px rgba(0, 0, 0, 0.19), 5px 15px 15px rgba(0, 0, 0, 0.18); }
    .float.pender::after {
      content: '\E90F';
      font-size: 26px;
      color: #9a499c; }
    .float.pender:hover {
      background-color: #9a499c;
      box-shadow: 0 0 0 1px #72368d, 0 0 0 7px #ecdbeb, 0 0 0 1px #9a499c, 0 0 0 7px #ecdbeb, 5px 5px 19px 6px rgba(0, 0, 0, 0.19), 5px 15px 15px rgba(0, 0, 0, 0.18); }
      .float.pender:hover::after {
        color: #ffdc78; }
    .float.pender.down {
      background-color: #9a499c;
      box-shadow: 0 0 0 1px #ffdc78, 0 0 0 7px #72368d, 0 0 0 1px #9a499c, 0 0 0 7px #ecdbeb, 5px 5px 19px 6px rgba(0, 0, 0, 0.19), 5px 15px 15px rgba(0, 0, 0, 0.18); }
      .float.pender.down::after {
        color: #ffdc78; }
    .float.pender.configs {
      top: 72px; }
    .float.pender.bg {
      background-color: white; }
      .float.pender.bg:hover {
        background-color: #e6e6e6; }
        .float.pender.bg:hover::after {
          color: #9a499c; }
      .float.pender.bg::after {
        content: '\E941'; }
      .float.pender.bg.dark_bg {
        box-shadow: 0 0 0 1px #9a499c, 0 0 0 7px #c4c4c4, 0 0 0 1px #9a499c, 0 0 0 7px #ecdbeb, 5px 5px 19px 6px rgba(0, 0, 0, 0.19), 5px 15px 15px rgba(0, 0, 0, 0.18); }
        .float.pender.bg.dark_bg::after {
          content: '\E942'; }

.list .item {
  font-size: 12px;
  font-weight: 400;
  color: #565656;
  line-height: 20px;
  line-height: 22px;
  padding: 0 6px;
  border-radius: 6px; }
  .list .item i:not(:last-child) {
    margin-right: 6px;
    vertical-align: baseline;
    font-size: 14px; }

.list.linqs > .item {
  display: block;
  color: #9a499c;
  font-weight: 500;
  border-radius: 6px; }
  .list.linqs > .item:hover {
    background: #f5f5f5;
    cursor: pointer; }
  .list.linqs > .item.disabled {
    color: #e6e6e6; }

.list.radio > .item:hover, .list.checkbox > .item:hover {
  background: #f5f5f5;
  cursor: pointer; }

.list.radio > .item::before, .list.checkbox > .item::before {
  content: "";
  display: inline-block;
  font-family: gix_icon_font;
  font-size: 14px;
  transform: translateY(1px);
  margin-right: 6px; }

.list.radio > .item.current::before, .list.checkbox > .item.current::before {
  color: #9a499c; }

.list.radio > .item::before {
  content: "\E936"; }

.list.radio > .item.current::before {
  content: "\E937"; }

.list.checkbox .item::before {
  content: "\E933"; }

.list.checkbox .item.current::before {
  content: "\E929"; }

.list.checkbox .total_box {
  font-size: 12px;
  font-weight: 500;
  color: #9a499c;
  font-weight: 300;
  margin-top: 6px;
  margin-left: 7px;
  margin-bottom: -24px; }

.list.object_list > .item {
  display: flex; }
  .list.object_list > .item .label {
    display: flex;
    flex-grow: 1; }
    .list.object_list > .item .label::after {
      content: '';
      flex-grow: 1;
      min-width: 10px;
      border-bottom: 1px dashed #c4c4c4;
      margin: 0 12px; }
  .list.object_list > .item .value {
    max-width: 200px;
    overflow-x: hidden;
    text-overflow: ellipsis; }

.list.collec_list {
  color: transparent; }
  .list.collec_list .item {
    overflow-y: hidden;
    font-weight: 700;
    line-height: 22px;
    color: transparent;
    height: 0;
    padding: 0 12px;
    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1); }
  .list.collec_list.open {
    padding: 12px 0;
    border-top: 1px solid #9a499c; }
    .list.collec_list.open .item {
      height: 22px;
      color: #9a499c; }
      .list.collec_list.open .item:hover, .list.collec_list.open .item.focused {
        background: #f5f5f5;
        cursor: pointer; }
      .list.collec_list.open .item.disabled {
        color: #c4c4c4; }
        .list.collec_list.open .item.disabled.focused {
          color: white; }

.search_box {
  height: 24px; }
  .search_box::before {
    width: 24px;
    display: inline-block;
    font-family: 'gix_icon_font' !important;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    content: '\E910';
    vertical-align: middle; }
  .search_box input {
    display: inline-block;
    font-size: 12px;
    border-width: 0;
    line-height: 18px;
    background-color: transparent; }
    .search_box input::placeholder {
      color: #a467aa; }

.popup_box {
  position: relative;
  display: inline-block; }

.popup {
  position: absolute;
  z-index: 20;
  top: calc(100% + 9px);
  right: calc(50% - 6px);
  background-color: white;
  font-size: 12px;
  font-weight: 400;
  color: #565656;
  line-height: 20px;
  text-align: left;
  min-width: 192px;
  min-height: 150px;
  padding: 24px 0 12px;
  border-top: 6px solid #9a499c;
  border-radius: 1px 1px 3px 3px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  /* go specific */ }
  .popup::before {
    z-index: 21;
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #9a499c;
    top: -12px;
    right: 12px; }
  .popup .ic_close {
    position: absolute;
    top: 12px;
    right: 6px;
    width: 24px;
    margin: 0;
    font-size: 12px;
    color: #9a499c; }
  .popup > .float.pender {
    z-index: 99;
    top: 160px;
    right: 96px; }
  .popup .top_tag {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #53be95;
    text-align: center; }
  .popup > .title {
    font-size: 14px;
    font-weight: 700;
    color: #565656;
    line-height: 18px;
    padding-left: 12px;
    margin-bottom: 12px;
    white-space: normal; }
    .popup > .title > i:first-child {
      font-size: 14px;
      margin: 0 6px 0 0;
      padding: 0;
      vertical-align: after-edge; }
    .popup > .title .list_sum {
      margin-left: 6px;
      font-size: 12px;
      font-weight: 500;
      color: #9a499c; }
  .popup .sub_title {
    font-weight: 500;
    padding: 0 24px;
    margin-bottom: 12px;
    word-wrap: break-word; }
    .popup .sub_title.linq {
      padding-left: 24px; }
    .popup .sub_title > i {
      margin-right: 6px; }
  .popup .sub_option {
    margin: 12px 12px 0;
    word-wrap: break-word;
    cursor: pointer; }
    .popup .sub_option i {
      vertical-align: middle; }
  .popup .list {
    padding: 0 12px;
    margin-bottom: 12px;
    overflow-scrolling: auto; }
  .popup p {
    padding: 0 12px; }
  .popup .input_box {
    padding: 0 24px;
    margin-bottom: 12px; }
    .popup .input_box input {
      font-weight: 300;
      border-width: 0;
      border-bottom: 1px solid #9a499c;
      outline: none; }
      .popup .input_box input::placeholder {
        color: #9a499c; }
  .popup .path_finder {
    padding: 0 12px; }
  .popup .sorry {
    font-size: 12px;
    text-align: center;
    margin-bottom: 12px; }
  .popup .main_btn_box {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    min-height: 48px;
    padding: 0 12px;
    margin: 12px 0 0; }
    .popup .main_btn_box > *:not(:first-child) {
      margin-left: 12px; }
  .popup .file_upload_area {
    height: 144px;
    padding: 0 12px;
    border: 1px solid #9a499c;
    border-radius: 6px;
    margin: 0 12px; }
    .popup .file_upload_area input[type=file] {
      position: absolute;
      z-index: 1;
      opacity: 0;
      overflow: hidden;
      cursor: pointer;
      width: 86%;
      height: 142px; }
    .popup .file_upload_area label {
      display: block;
      line-height: 142px;
      vertical-align: middle;
      text-align: center;
      color: #ecdbeb;
      font-size: 18px;
      width: 99%;
      height: 142px; }
  .popup.lefter {
    left: -10px; }
    .popup.lefter::before {
      left: 12px; }
  .popup.create_new {
    width: 220px; }
    .popup.create_new .main_btn_box {
      height: 70px; }
  .popup.live_oper {
    min-height: auto; }
  .popup.game_picker {
    width: 288px; }
  .popup.game_typer, .popup.verser {
    width: 240px; }
  .popup.player_util {
    width: 240px; }
  .popup.utiler:not(.jxonizer) {
    width: 288px;
    top: 30px; }
  .popup.informer, .popup.prester, .popup.rubricator, .popup.modest {
    width: 288px; }
    .popup.informer .main_btn_box, .popup.prester .main_btn_box, .popup.rubricator .main_btn_box, .popup.modest .main_btn_box {
      min-height: 70px; }
  .popup.iconizer {
    left: 0;
    top: 52px;
    min-height: 0; }
  .popup.arrayzer {
    min-height: initial; }
  .popup.rubricator {
    width: 192px; }
    .popup.rubricator .body {
      min-height: 96px; }
  .popup.subsetter .extra_margin {
    margin-top: 36px; }
  .popup.reformer, .popup.prester, .popup.game_servicer {
    width: 240px; }
  .popup.user_popup {
    right: -5px;
    top: 100%; }
    .popup.user_popup .main_btn_box {
      min-height: 27px; }
  .popup.zinput_tool {
    min-width: 288px;
    right: -11px; }
  .popup.select_input {
    right: calc(100% - 6px);
    top: calc(100% + 12px); }
    .popup.select_input .item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  .popup.datetime_popup {
    right: calc(100% - 3px);
    top: calc(100% + 12px);
    min-width: 288px;
    padding-bottom: 12px;
    text-align: center; }
  .popup.docu_picker {
    width: 192px;
    left: 6px; }
  .popup.file_popup {
    right: initial;
    left: -28px;
    top: calc(100% + 12px);
    padding: 36px 0 12px; }
  .popup.activator {
    min-height: auto; }
  .popup.docu_informer {
    width: 288px; }

.docu_utils .popup_box .popup {
  top: calc(100% - 3px); }
  .docu_utils .popup_box .popup .list {
    max-height: calc(90vh - 216px);
    overflow-y: auto; }

.tag {
  display: inline-block;
  line-height: 16px;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 8px;
  color: white; }
  .tag.pathos {
    background-color: #53be95; }
    .tag.pathos span:not(:first-child)::before {
      content: "\E93D";
      display: inline-block;
      font-family: gix_icon_font;
      font-size: 12px;
      margin-right: 6px; }

.qty_tag {
  background-color: #9a499c;
  font-size: 12px;
  font-weight: 500;
  color: #9a499c;
  color: #ecdbeb;
  line-height: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px 6px 1px 1px; }

.search_box {
  height: 24px; }
  .search_box::before {
    width: 24px;
    display: inline-block;
    font-family: 'gix_icon_font' !important;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    content: '\E910';
    vertical-align: middle; }
  .search_box input {
    display: inline-block;
    font-size: 12px;
    border-width: 0;
    line-height: 18px;
    background-color: transparent; }
    .search_box input::placeholder {
      color: #a467aa; }

@keyframes busy {
  0% {
    background-color: #f47142;
    color: white; }
  50% {
    background-color: #f7c6b4;
    color: #333; }
  100% {
    background-color: #f47142;
    color: white; } }

@keyframes building {
  0% {
    right: 12px;
    opacity: 1; }
  60% {
    opacity: 1; }
  70% {
    right: 100%;
    opacity: .6; }
  84% {
    right: 110%;
    opacity: 0; }
  92% {
    right: -72px;
    opacity: 0; }
  100% {
    right: 12px;
    opacity: 1; } }

/* fade in */
.fade-in-enter,
.fade-in-leave-to {
  opacity: 0; }

.fade-in-leave,
.fade-in-enter-to {
  opacity: 1; }

.fade-in-enter-active,
.fade-in-leave-active {
  transition: opacity .5s; }

/* flash intro */
.flash-enter,
.flash-leave-to {
  transform: translateX(100%);
  opacity: 0; }

.flash-enter-active,
.flash-leave-active {
  transition: all .5s ease-in-out; }

/* slide down */
.slide-down-enter,
.slide-down-leave-to {
  transform: translateY(calc(-100% + 36px));
  opacity: 0; }

.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); }

/* slide list */
.slide-list-enter,
.slide-list-leave-to {
  transform: translateY(calc(-100% + 36px));
  opacity: 0; }

.slide-list-enter-active,
.slide-list-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); }

/* 6. layout components */
body {
  margin: 0; }

.app_box {
  font-family: 'roboto', sans-serif;
  position: relative;
  background-color: white;
  height: 100vh;
  padding-left: 48px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #565656;
  line-height: 22px;
  overflow: hidden; }

.app_header {
  position: fixed;
  display: flex;
  z-index: 20;
  top: 0;
  left: 0;
  box-sizing: content-box;
  background: white;
  width: 100%;
  height: 48px;
  border-bottom: 6px solid #9a499c;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23); }
  .app_header > div {
    line-height: 48px;
    flex-grow: 1; }
  .app_header .left {
    position: relative; }
    .app_header .left .ilyon_span {
      position: absolute;
      z-index: 11;
      left: 0;
      height: 100%; }
      .app_header .left .ilyon_span .logo_box {
        background-color: #f5f5f5;
        width: 48px;
        position: relative;
        z-index: 9;
        text-align: center; }
        .app_header .left .ilyon_span .logo_box:hover {
          cursor: pointer;
          background-color: #f2ebf2; }
      .app_header .left .ilyon_span .slider {
        position: absolute;
        z-index: 8;
        top: 0;
        right: 0;
        width: 198px;
        height: 100%;
        padding-left: 6px;
        overflow: hidden;
        background-color: #f2ebf2;
        transition: transform .8s ease-in-out; }
      .app_header .left .ilyon_span img {
        display: inline-block; }
        .app_header .left .ilyon_span img.triangle {
          width: 24px;
          vertical-align: middle; }
      .app_header .left .ilyon_span span {
        font-size: 11px;
        font-weight: 400;
        color: #565656;
        line-height: 20px;
        padding-top: 18px;
        margin-left: 6px;
        vertical-align: top; }
      .app_header .left .ilyon_span.open .slider {
        transform: translateX(100%);
        cursor: pointer; }
      .app_header .left .ilyon_span.open .logo_box {
        background-color: #f2ebf2; }
    .app_header .left .gix_span {
      padding-left: 48px;
      position: relative; }
      .app_header .left .gix_span .gix_logo {
        height: 27px;
        margin-top: 12px;
        margin-left: 12px; }
      .app_header .left .gix_span .teaser {
        font-size: 16px;
        color: #565656;
        transform: translateX(6px); }
  .app_header .right {
    padding-right: 24px; }

.app_body {
  padding: 12px;
  margin-top: 54px; }

.rubricon_body {
  height: calc(100vh - 214px);
  padding: 24px 0 0 12px;
  margin-bottom: 24px;
  overflow-y: auto;
  overflow-x: hidden; }

.linker {
  position: fixed;
  z-index: 12;
  top: 48px;
  left: 0;
  background-color: #ecdbeb;
  max-width: 48px;
  transition: max-width .4s ease;
  height: calc(100vh - 48px); }
  .linker .slide_box {
    width: 100%;
    height: 100%;
    overflow: hidden; }
  .linker .zone_link {
    display: flex;
    width: 168px;
    height: 48px;
    font-size: 12px;
    font-weight: 500;
    color: #9a499c;
    background-color: #ecdbeb; }
    .linker .zone_link:first-child {
      margin-top: 6px; }
    .linker .zone_link i {
      display: block;
      width: 48px;
      text-align: center;
      font-size: 22px;
      line-height: 45px;
      color: inherit; }
    .linker .zone_link span {
      flex-grow: 1;
      display: block;
      line-height: 48px; }
    .linker .zone_link:hover {
      background-color: #f5f5f5;
      font-weight: 700; }
    .linker .zone_link.router-link-active {
      background-color: #9a499c;
      color: #ecdbeb;
      font-weight: 700; }
    .linker .zone_link.version {
      display: block;
      text-align: center;
      font-size: 11px;
      width: 48px;
      padding-top: 6px; }
  .linker .expender {
    position: absolute;
    top: 65vh;
    right: -15px;
    width: 24px;
    height: 48px;
    background-color: white;
    border: 1px solid #ecdbeb;
    border-radius: 0 6px 6px 0;
    line-height: 46px;
    font-size: 18px;
    text-align: center;
    color: #a467aa; }
    .linker .expender:hover {
      cursor: pointer;
      background-color: #f2ebf2;
      color: #72368d; }
  .linker.open {
    max-width: 166px; }
    .linker.open .expender i {
      transform: rotate(0); }

.user_span img.user_avatar {
  line-height: 1px;
  cursor: pointer;
  height: 28px;
  width: 28px;
  vertical-align: middle;
  border: 2px solid #9a499c;
  border-radius: 14px; }
  .user_span img.user_avatar:hover {
    box-shadow: 0 0 3px 3px #333; }

.user_span .popup {
  padding-bottom: 0; }
  .user_span .popup .actions {
    text-align: right; }
  .user_span .popup .title .avatar_box, .user_span .popup .title .name_box {
    display: inline-block;
    vertical-align: middle; }
  .user_span .popup .title img {
    height: 36px;
    width: 36px;
    vertical-align: middle;
    border: 3px solid #72368d;
    border-radius: 18px;
    margin-right: 6px; }
  .user_span .popup .sub_title {
    font-size: 12px;
    font-weight: 500;
    color: #9a499c;
    margin-bottom: 12px; }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 99; }
  .overlay::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ecdbeb;
    opacity: .8; }
  .overlay .overlay_body {
    position: absolute;
    background-color: white;
    width: 384px;
    min-height: 300px;
    max-height: 80vh;
    overflow-y: visible;
    padding: 24px 0 0;
    border-top: 6px solid #9a499c;
    text-align: center; }
    .overlay .overlay_body:not(.sub_rubricator) {
      transform: translateY(-36px); }
    .overlay .overlay_body .float {
      position: absolute;
      top: -20px;
      left: 24px; }
    .overlay .overlay_body .ic_close {
      display: block;
      position: absolute;
      top: 6px;
      right: 6px;
      width: 24px;
      margin: 0;
      font-size: 12px;
      color: #9a499c; }
    .overlay .overlay_body.sub_rubricator {
      width: 576px;
      min-height: 576px;
      height: 576px;
      text-align: left; }
      .overlay .overlay_body.sub_rubricator .ic_close {
        top: -48px; }
      .overlay .overlay_body.sub_rubricator .subset_box {
        height: 476px;
        padding-bottom: 12px;
        overflow-y: scroll; }
      .overlay .overlay_body.sub_rubricator .sub_rubricator_body {
        position: relative; }
        .overlay .overlay_body.sub_rubricator .sub_rubricator_body .float.pender {
          top: -80px;
          right: 24px; }
    .overlay .overlay_body.player {
      width: 800px;
      height: 749px; }
      .overlay .overlay_body.player .player {
        height: 66vh; }
    .overlay .overlay_body .main_image {
      margin-bottom: 12px;
      min-height: 90px; }
      .overlay .overlay_body .main_image i {
        font-size: 80px;
        line-height: 90px; }
      .overlay .overlay_body .main_image .gem_row {
        display: flex;
        flex-wrap: wrap;
        width: 90px;
        height: 90px;
        margin: 0 auto; }
    .overlay .overlay_body .title {
      font-size: 18px;
      font-weight: 700;
      color: #565656;
      margin-bottom: 12px; }
    .overlay .overlay_body .sub_title {
      font-size: 14px;
      font-weight: 500;
      color: #9a499c;
      margin-bottom: 12px; }
    .overlay .overlay_body .hill_box {
      height: 48px; }
      .overlay .overlay_body .hill_box img {
        height: 100%;
        width: 100%; }
    .overlay .overlay_body .list {
      text-align: left;
      padding: 0 12px;
      margin-bottom: 12px; }
      .overlay .overlay_body .list i {
        margin-right: 6px; }
    .overlay .overlay_body .btn_box {
      text-align: right;
      padding: 0 12px 12px; }
    .overlay .overlay_body .footer {
      position: relative;
      height: 60px;
      background: linear-gradient(#53be95, #2f8f6a); }
      .overlay .overlay_body .footer img {
        position: absolute;
        right: 12px;
        bottom: 12px;
        animation: building 6s cubic-bezier(1, 0.5, 0.8, 1) infinite; }
    .overlay .overlay_body.success {
      border-top-color: #53be95; }
      .overlay .overlay_body.success .sub_title {
        color: #53be95; }
    .overlay .overlay_body.errors {
      border-top-color: #ed1c24; }
      .overlay .overlay_body.errors .sub_title {
        color: #ed1c24; }
      .overlay .overlay_body.errors .error {
        overflow-wrap: break-word; }
    .overlay .overlay_body.warnings {
      border-top-color: #ffc000; }
      .overlay .overlay_body.warnings .sub_title {
        color: #ffc000; }
    .overlay .overlay_body.preview .preview_box img {
      width: 100%;
      max-height: 70vh; }
    .overlay .overlay_body.preview .preview_box.dark_bg {
      background-color: #565656; }

.flash {
  position: absolute;
  z-index: 98;
  top: 85vh;
  right: 24px;
  background-color: #ecdbeb;
  font-size: 12px;
  font-weight: 500;
  color: #9a499c;
  font-weight: 300;
  line-height: 48px;
  height: 48px;
  min-width: 192px;
  padding: 0 12px;
  border-left: 6px solid #9a499c;
  border-radius: 1px 3px 3px 1px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
  .flash.error, .flash.success {
    background-color: #e6e6e6; }
    .flash.error i, .flash.success i {
      font-size: 14px;
      margin-right: 6px; }
  .flash.error {
    border-color: #ed1c24;
    color: #ed1c24; }
  .flash.success {
    border-color: #53be95; }
    .flash.success i {
      color: #53be95; }

/* 7. gix elements */
.collec_header {
  background: #ecdbeb;
  display: flex;
  color: #9a499c;
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  margin-bottom: 6px;
  border-radius: 3px; }
  .collec_header > .left {
    flex-grow: 1; }
    .collec_header > .left i {
      font-size: 22px; }
    .collec_header > .left a {
      display: inline-block;
      font-size: 16px;
      font-weight: 500;
      color: #9a499c;
      line-height: inherit;
      height: 36px;
      vertical-align: top; }
      .collec_header > .left a, .collec_header > .left a:visited, .collec_header > .left a:active {
        color: #9a499c; }
      .collec_header > .left a:hover {
        cursor: pointer;
        color: #72368d; }
    .collec_header > .left span {
      margin-left: 6px;
      position: relative;
      top: -6px; }
  .collec_header > .center {
    width: 100px; }
    .collec_header > .center .readonly {
      color: #af073c; }
  .collec_header > .right {
    flex-grow: 1; }
    .collec_header > .right > * {
      display: inline-block;
      vertical-align: top; }
    .collec_header > .right > i {
      font-size: 22px;
      line-height: 22px;
      vertical-align: middle; }
    .collec_header > .right .collec_list_box {
      position: relative;
      z-index: 8;
      display: inline-block;
      text-align: left;
      background-color: white;
      width: 192px;
      border-radius: 6px;
      margin: 6px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23); }
      .collec_header > .right .collec_list_box .search_box {
        line-height: 22px; }
    .collec_header > .right .create_span {
      display: inline-block; }
      .collec_header > .right .create_span .action {
        position: relative;
        top: -1px; }
      .collec_header > .right .create_span .popup {
        right: -1px; }
        .collec_header > .right .create_span .popup::before {
          right: 8px; }

.docu_header {
  height: 48px;
  line-height: 48px;
  display: flex;
  margin-bottom: 3px; }
  .docu_header .docu_title .docu_icon {
    height: 36px;
    width: 36px;
    border: 1px solid #9a499c;
    border-radius: 18px;
    margin-right: 6px;
    vertical-align: middle;
    transform: translateY(-2px);
    overflow: hidden;
    text-align: center;
    font-size: 26px;
    line-height: 34px;
    color: #9a499c; }
  .docu_header .docu_title > .title {
    font-size: 18px;
    font-weight: 700;
    color: #565656; }
  .docu_header .docu_title .serial {
    margin-right: 6px; }
  .docu_header .docu_title > i:first-child {
    font-size: 22px;
    transform: translateY(2px); }
  .docu_header .docu_title .category {
    background-color: #53be95;
    transform: translateY(-3px);
    margin-left: 6px; }
  .docu_header .docu_title .iconizer_box {
    position: relative; }
  .docu_header .docu_title .popup_box.tipper {
    cursor: pointer;
    font-size: 14px; }
    .docu_header .docu_title .popup_box.tipper .tagi {
      top: -24px;
      transform: translateX(-11px); }
  .docu_header .right {
    padding-right: 12px;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end; }

.docu_util {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #565656;
  line-height: 20px;
  color: #9a499c;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  margin-right: 24px;
  cursor: pointer; }
  .docu_util:hover {
    background-color: #e6e6e6; }
  .docu_util .icon {
    font-size: 22px;
    line-height: 24px; }
  .docu_util .title {
    line-height: 18px;
    min-width: fit-content; }
  .docu_util .tag {
    position: absolute;
    top: 0;
    left: 60%;
    line-height: 16px;
    font-size: 11px;
    max-width: 66px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
    border-radius: 8px;
    background-color: #c4c4c4; }
    .docu_util .tag.error {
      background-color: #ed1c24; }
    .docu_util .tag.ok {
      background-color: #53be95;
      color: white; }
    .docu_util .tag.warning {
      background-color: #ffdc78;
      font-size: 14px;
      color: #9a499c; }
    .docu_util .tag.icon {
      background-color: transparent;
      left: 50%;
      font-size: 18px; }
      .docu_util .tag.icon .ic_valid {
        color: #2f8f6a; }

.tagon {
  position: relative;
  display: flex;
  background-color: #f5f5f5;
  font-size: 12px;
  color: #565656;
  line-height: 18px;
  height: 18px;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  margin-left: 12px;
  margin-bottom: 9px; }
  .tagon i {
    position: absolute;
    top: -3px;
    left: -12px;
    background-color: #9a499c;
    text-align: center;
    color: white;
    line-height: 17px;
    height: 24px;
    width: 24px;
    border: 3px solid #e6e6e6;
    border-radius: 6px; }
  .tagon.game .serial, .tagon.sale .serial {
    width: 48px; }
  .tagon .title {
    background-color: #f5f5f5;
    padding-left: 24px;
    flex-grow: 1;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px; }
  .tagon .serial {
    text-align: right;
    padding-right: 6px;
    background-color: #e6e6e6; }
    .tagon .serial + .title {
      padding-left: 6px; }
  .tagon:hover, .tagon.focused {
    box-shadow: 0 0 0 2px #838485; }
    .tagon:hover i, .tagon.focused i {
      box-shadow: 0 0 0 2px #838485; }
  .tagon.active {
    background: #9a499c; }
    .tagon.active .title {
      background: #9a499c;
      color: white; }
    .tagon.active .serial {
      background: #72368d;
      color: white; }
    .tagon.active i {
      background: white;
      color: #72368d;
      border-color: #72368d;
      font-size: 14px; }

.tabu {
  display: flex;
  border-bottom: 6px solid #ecdbeb; }
  .tabu > a {
    transform: translateY(6px);
    font-size: 14px;
    font-weight: 500;
    color: #9a499c;
    text-align: center;
    min-width: 60px;
    padding: 0 12px 12px;
    border-bottom: 6px solid transparent; }
    .tabu > a:hover {
      border-bottom-color: #9a499c;
      color: #72368d; }
    .tabu > a.router-link-active {
      position: relative;
      border-bottom-color: #72368d;
      color: #72368d; }
      .tabu > a.router-link-active::before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #72368d;
        bottom: -11px;
        right: calc(50% - 5px);
        z-index: 21; }
    .tabu > a .ic_invalid {
      transform: translate(-3px, -4px);
      font-size: 11px; }

.path_finder {
  line-height: 30px; }
  .path_finder .pathon {
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500; }
    .path_finder .pathon span {
      background-color: #2f8f6a;
      color: white;
      padding: 0 6px;
      border: 1px solid #2f8f6a;
      border-radius: 6px;
      margin-right: 6px; }
    .path_finder .pathon.placeholder {
      position: relative; }
      .path_finder .pathon.placeholder span {
        border-color: #9a499c;
        background-color: white;
        color: #a467aa;
        font-weight: 500; }
      .path_finder .pathon.placeholder .prop_picker {
        left: 0; }
      .path_finder .pathon.placeholder:not(:first-child) .prop_picker {
        left: 18px; }
    .path_finder .pathon:not(:first-child)::before {
      content: "\E93D";
      color: #2f8f6a;
      display: inline-block;
      font-family: gix_icon_font;
      font-size: 12px;
      margin-right: 6px; }

.verser_box {
  display: inline-block; }
  .verser_box .popup.verser {
    min-width: 288px;
    right: 24px; }
    .verser_box .popup.verser::before {
      right: 24px; }
    .verser_box .popup.verser .item.verser_item {
      display: flex; }
      .verser_box .popup.verser .item.verser_item .left {
        flex-grow: 1; }

.build_span.short .docu_util .tag {
  background: #c4c4c4;
  color: white; }

.build_span.error .docu_util .tag {
  background: #ba0e42;
  color: white; }

.build_span.public .docu_util .tag {
  background: #2f8f6a;
  color: white; }

.build_span.bundle .docu_util .tag {
  background: #53be95;
  color: white; }

.build_span.ready .docu_util .tag {
  background: #b3e3cf;
  color: white; }

.build_span.building {
  animation: busy 5s infinite; }

.build_span .popup {
  min-width: 292px;
  left: -256px; }

.verser_box {
  display: inline-block; }
  .verser_box .popup.verser {
    min-width: 288px;
    right: 24px; }
    .verser_box .popup.verser::before {
      right: 24px; }
    .verser_box .popup.verser .item.verser_item {
      display: flex; }
      .verser_box .popup.verser .item.verser_item .left {
        flex-grow: 1; }

.rubric {
  position: relative; }
  .rubric.level_1 header {
    padding-left: 36px; }
  .rubric.level_2 header {
    padding-left: 72px; }
  .rubric.level_3 header {
    padding-left: 108px; }
  .rubric.level_4 header {
    padding-left: 144px; }
  .rubric.level_5 header {
    padding-left: 180px; }
  .rubric.level_6 header {
    padding-left: 216px; }
  .rubric.level_7 header {
    padding-left: 252px; }
  .rubric.level_8 header {
    padding-left: 288px; }
  .rubric.level_9 header {
    padding-left: 324px; }
  .rubric.level_10 header {
    padding-left: 360px; }
  .rubric.level_11 header {
    padding-left: 396px; }
  .rubric.level_12 header {
    padding-left: 432px; }
  .rubric + .rubric {
    margin-top: 6px; }
  .rubric > header {
    width: 384px;
    height: 24px;
    line-height: 24px; }
    .rubric > header > .title {
      font-weight: bold; }
    .rubric > header .ic_etc {
      color: #9a499c;
      margin-right: 6px; }
      .rubric > header .ic_etc::before {
        height: 24px; }
  .rubric.leaf > header .ic_etc {
    transform: rotate(90deg); }
  .rubric.meta {
    display: flex; }
    .rubric.meta > header {
      margin-right: 12px; }
      .rubric.meta > header > .title {
        font-weight: normal;
        margin-right: 12px; }
      .rubric.meta > header::after {
        content: '';
        flex-grow: 1;
        border-bottom: 2px dotted #c4c4c4; }
    .rubric.meta:hover {
      border-radius: 6px;
      cursor: pointer;
      background: #f5f5f5; }

.toggler {
  position: relative;
  width: 36px;
  height: 12px;
  border-radius: 6px; }
  .toggler.active::before, .toggler.inactive::before {
    content: '';
    position: absolute;
    top: -3px;
    width: 18px;
    height: 18px;
    border-radius: 9px; }
  .toggler.active {
    background-color: #a467aa; }
    .toggler.active::before {
      background-color: #72368d; }
    .toggler.active:hover::before {
      background-color: #9a499c; }
    .toggler.active.down {
      border: 1px solid #72368d; }
  .toggler.inactive {
    background-color: #c4c4c4; }
    .toggler.inactive::before {
      background-color: #f5f5f5; }
    .toggler.inactive:hover::before {
      background-color: #838485; }
    .toggler.inactive.down {
      border: 1px solid #72368d; }

.tipper {
  position: relative;
  display: inline-block; }
  .tipper.zinput_tool .ic_info {
    background-color: #ffdc78; }
  .tipper .tagi {
    position: absolute;
    z-index: 99;
    top: calc(-100% - 5px);
    transform: translateX(calc(-50% + 6px));
    display: none;
    background-color: #9a499c;
    line-height: 18px;
    font-size: 12px;
    font-weight: 500;
    color: #9a499c;
    font-weight: 400;
    color: white;
    white-space: nowrap;
    height: 18px;
    padding: 0 6px;
    border-radius: 6px; }
    .tipper .tagi::before {
      z-index: 21;
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #9a499c;
      border-bottom: none;
      border-top: 6px solid #9a499c;
      bottom: -6px;
      left: calc(50% - 6px); }
  .tipper.zinput_tool .tagi {
    bottom: calc(-100% - 6px); }
    .tipper.zinput_tool .tagi::before {
      z-index: 21;
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #9a499c;
      left: calc(50% - 6px);
      border-top: 6px solid #9a499c;
      border-bottom-width: 0; }
  .tipper:hover .tagi {
    display: block; }

.rubric_subset {
  margin-left: 36px; }
  .rubric_subset > .ic_etc {
    color: #9a499c;
    margin-right: 12px; }
  .rubric_subset > .action.zino {
    margin-bottom: 6px;
    background-color: #ecdbeb; }
  .rubric_subset:not(.active) > .action.zino {
    color: #838485;
    border-color: #838485;
    background-color: initial; }
    .rubric_subset:not(.active) > .action.zino:hover {
      background-color: #e6e6e6; }
  .rubric_subset:not(.active) > .ic_etc {
    color: #838485; }

.copy_clipboard .icon_box {
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1); }
  .copy_clipboard .icon_box.ok {
    box-shadow: 0 0 5px 10px #53be95; }
  .copy_clipboard .icon_box.bad {
    box-shadow: 0 0 5px 10px #ed1c24; }

.zinode {
  position: relative; }
  .zinode.level_1 > header {
    padding-left: 24px; }
  .zinode.level_2 > header {
    padding-left: 48px; }
  .zinode.level_3 > header {
    padding-left: 72px; }
  .zinode.level_4 > header {
    padding-left: 96px; }
  .zinode.level_5 > header {
    padding-left: 120px; }
  .zinode.level_6 > header {
    padding-left: 144px; }
  .zinode.level_7 > header {
    padding-left: 168px; }
  .zinode.level_8 > header {
    padding-left: 192px; }
  .zinode.level_9 > header {
    padding-left: 216px; }
  .zinode.level_10 > header {
    padding-left: 240px; }
  .zinode.level_11 > header {
    padding-left: 264px; }
  .zinode.level_12 > header {
    padding-left: 288px; }
  .zinode + .zinode {
    margin-top: 6px; }
  .zinode.folder:not(.level_0) > header > div {
    border-top: 3px solid #f2ebf2; }
  .zinode.folder:not(.level_0) > header::after {
    content: '';
    flex-grow: 1;
    border-top: 3px solid #f2ebf2; }
  .zinode.folder:not(.level_0)::before {
    content: '';
    position: absolute;
    left: 420px;
    width: calc(96% - 420px);
    height: 3px;
    background-color: #f2ebf2; }
  .zinode > header {
    width: 420px;
    height: 24px;
    line-height: 24px; }
    .zinode > header > .title {
      font-size: 14px;
      font-weight: 700;
      color: #565656;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 6px; }
    .zinode > header .ic_etc {
      color: #9a499c;
      margin-right: 6px; }
      .zinode > header .ic_etc::before {
        height: 24px; }
      .zinode > header .ic_etc.invalid {
        color: #ed1c24; }
  .zinode.collapsed {
    height: 24px;
    overflow: hidden; }
  .zinode.ancestor > header > .title {
    color: #9a499c; }
  .zinode.leaf {
    display: flex; }
    .zinode.leaf > header {
      margin-right: 12px; }
      .zinode.leaf > header > .title {
        font-weight: normal; }
      .zinode.leaf > header::after {
        content: '';
        flex-grow: 1;
        border-bottom: 1px dashed #c4c4c4;
        margin-left: 6px; }
    .zinode.leaf:hover, .zinode.leaf.active {
      border-radius: 12px;
      cursor: pointer; }
    .zinode.leaf:hover {
      background: #f5f5f5; }
    .zinode.leaf.active {
      background: #f2ebf2; }
      .zinode.leaf.active > header {
        color: #9a499c;
        font-weight: bold; }
        .zinode.leaf.active > header::after {
          border-bottom-color: #9a499c; }
    .zinode.leaf > i.ic_close {
      position: absolute;
      top: 6px;
      right: 12px;
      line-height: 24px;
      color: #9a499c; }
  .zinode .indicator {
    position: relative;
    display: inline-block;
    color: #ffc000;
    cursor: pointer; }
    .zinode .indicator:not(:first-child) {
      margin-left: 6px; }
    .zinode .indicator .tag {
      display: none;
      position: absolute;
      z-index: 22;
      top: -3px;
      left: 12px;
      background-color: #53be95; }
    .zinode .indicator:hover .tag {
      display: block; }
  .zinode .zinode_utils_box > i.ic_etc {
    cursor: pointer; }
  .zinode.level_0 > header > .zinode_utils_box .popup {
    left: 9px; }
  .zinode .array_actions i {
    margin-left: 12px; }
  .zinode.default_mode i.ic_mode, .zinode.default_segment i.ic_segment {
    color: #53be95; }
  .zinode.hide {
    opacity: .2; }

.zinput {
  position: relative;
  display: flex;
  vertical-align: middle;
  line-height: 24px;
  height: 24px; }
  .zinput .zinput_body {
    display: inline-block;
    height: 24px;
    padding-left: 6px;
    margin-right: 12px;
    font-size: 12px;
    font-weight: 400;
    color: #565656;
    line-height: 20px;
    line-height: 22px;
    transition: width 0.2s cubic-bezier(1, 0.5, 0.8, 1);
    white-space: nowrap; }
    .zinput .zinput_body > i.type_icon {
      font-size: 14px;
      vertical-align: top; }
    .zinput .zinput_body > :not(i) {
      padding: 0;
      font-size: 12px; }
    .zinput .zinput_body .display {
      vertical-align: middle;
      line-height: 23px; }
    .zinput .zinput_body.is_string input, .zinput .zinput_body.is_number input, .zinput .zinput_body.is_object input {
      background: transparent;
      line-height: 23px;
      color: inherit;
      border-width: 0;
      outline-width: 0;
      display: inline-block;
      width: 100%; }
    .zinput .zinput_body.pending {
      background-color: rgba(255, 220, 120, 0.6); }
    .zinput .zinput_body.iconned > div {
      display: inline-block;
      vertical-align: middle; }
    .zinput .zinput_body.iconned > i.type_icon {
      margin-right: 6px;
      color: #a467aa;
      font-size: 18px; }
    .zinput .zinput_body.active {
      width: 300px;
      border-bottom: 1px solid #9a499c; }
      .zinput .zinput_body.active > i {
        color: #9a499c; }
      .zinput .zinput_body.active.invalid {
        border-color: #ed1c24;
        color: #ed1c24; }
      .zinput .zinput_body.active.is_boolean {
        border-color: transparent; }
    .zinput .zinput_body.inactive {
      width: 168px; }
      .zinput .zinput_body.inactive.empty {
        border-bottom: 1px solid #565656; }
      .zinput .zinput_body.inactive.invalid {
        border-bottom-color: #ed1c24;
        color: #ed1c24; }
      .zinput .zinput_body.inactive.is_boolean {
        border-color: transparent; }
  .zinput .zinput_tools > * {
    display: inline-block;
    margin-left: 12px;
    margin-right: 0;
    padding-top: 2px; }
    .zinput .zinput_tools > *.valider.valid .toggle {
      color: #53be95; }
    .zinput .zinput_tools > *.valider.valid .popup {
      border-top-color: #53be95; }
      .zinput .zinput_tools > *.valider.valid .popup::before {
        border-bottom-color: #53be95; }
    .zinput .zinput_tools > *.valider.invalid .popup {
      border-top-color: #ed1c24; }
      .zinput .zinput_tools > *.valider.invalid .popup::before {
        border-bottom-color: #ed1c24; }
    .zinput .zinput_tools > *.valider .popup .item::before {
      display: inline-block;
      vertical-align: middle;
      font-family: 'gix_icon_font' !important;
      color: #c4c4c4;
      content: "\E91F"; }
    .zinput .zinput_tools > *.valider .popup .item.valid::before {
      color: #53be95; }
    .zinput .zinput_tools > *.valider .popup .item.invalid::before {
      color: #ed1c24; }

.file_input {
  position: relative; }
  .file_input .btn.pending {
    background-color: #ffdc78;
    color: #565656; }
    .file_input .btn.pending:hover {
      background-color: #ffc000; }

.bool_input {
  width: 268px;
  height: 22px;
  vertical-align: middle; }

.datetime_input {
  position: relative; }

.date_picker {
  width: 252px;
  margin: 0 auto; }
  .date_picker .month_header {
    line-height: 36px; }
    .date_picker .month_header .current_month {
      font-weight: 500;
      font-size: 14px;
      width: 100px;
      margin: 0 12px; }
  .date_picker .days_box {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start; }
    .date_picker .days_box .cell {
      width: 36px;
      height: 36px;
      line-height: 36px;
      text-align: center; }
      .date_picker .days_box .cell.day {
        border-radius: 18px; }
        .date_picker .days_box .cell.day.today {
          background-color: #f5f5f5;
          font-weight: 700; }
        .date_picker .days_box .cell.day.current {
          background-color: #9a499c;
          color: white;
          font-weight: 700; }
        .date_picker .days_box .cell.day:not(.current):hover {
          background-color: #c4c4c4; }
      .date_picker .days_box .cell.week_day {
        font-weight: 700;
        color: #c4c4c4; }

.time_picker {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px; }
  .time_picker .minute_picker .linq i {
    font-size: 14px; }
  .time_picker .minute_picker .value.tipper {
    display: block;
    font-weight: 700; }
    .time_picker .minute_picker .value.tipper .tagi {
      top: calc(-100% - 20px);
      left: 1px; }
  .time_picker .time_separator::after {
    content: ':';
    display: inline-block;
    margin: 0 6px;
    font-size: 18px;
    font-weight: 500; }

.zinode_arr {
  flex-grow: 1; }
  .zinode_arr .zinput_box {
    display: flex; }
    .zinode_arr .zinput_box .array_actions {
      flex-grow: 2; }

/* 9. templates */
.login_template {
  margin: -12px; }
  .login_template .main_row {
    height: 252px;
    margin-top: 66px;
    text-align: center; }
  .login_template .drawing {
    display: inline-block;
    width: 0;
    height: 252px; }
    .login_template .drawing img {
      opacity: 0.2; }
    @media screen and (min-width: 896px) {
      .login_template .drawing {
        width: 400px; }
        .login_template .drawing img {
          opacity: 1;
          width: 400px;
          transform: translateY(30px); } }
  .login_template .text {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    max-width: 400px;
    height: 100%;
    padding-top: 72px; }
    .login_template .text .teaser {
      color: #9a499c;
      line-height: 48px;
      font-size: 36px;
      margin-bottom: 12px; }
      .login_template .text .teaser i {
        vertical-align: 30px;
        font-size: 12px; }
    .login_template .text .helper {
      position: absolute;
      bottom: -36px;
      right: -72px; }
      .login_template .text .helper .popup_box .toggle_popup {
        color: white; }
        .login_template .text .helper .popup_box .toggle_popup i {
          margin-right: 6px; }
        .login_template .text .helper .popup_box .toggle_popup:hover {
          color: #2f8f6a; }
        .login_template .text .helper .popup_box .toggle_popup s {
          letter-spacing: 1px; }
      .login_template .text .helper .popup_box .popup .title {
        text-align: center; }
      .login_template .text .helper .popup_box .popup p {
        margin: 6px 0 0; }
  .login_template .under_row {
    height: calc(100vh - 310px);
    background: linear-gradient(#53be95, #2f8f6a); }

.user_keys_form .permit_row {
  display: flex;
  margin-bottom: 12px; }
  .user_keys_form .permit_row .label {
    font-weight: 500;
    width: 168px; }
  .user_keys_form .permit_row .permits {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: flex-start; }
    .user_keys_form .permit_row .permits .permit_key.btn {
      font-size: 12px;
      font-weight: 500;
      margin-right: 6px;
      margin-bottom: 6px; }
      .user_keys_form .permit_row .permits .permit_key.btn:not(.active):not(.disabled) {
        background-color: #838485;
        color: white; }
        .user_keys_form .permit_row .permits .permit_key.btn:not(.active):not(.disabled):hover {
          background-color: #565656; }
      .user_keys_form .permit_row .permits .permit_key.btn.disabled {
        background-color: #ecdbeb;
        color: #a467aa; }
    .user_keys_form .permit_row .permits .delete_linq {
      margin-left: 6px; }

.collec_template .master_box {
  margin-bottom: 12px; }

.collec_template .master_header {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 700;
  color: #565656;
  white-space: nowrap;
  padding-left: 12px; }
  .collec_template .master_header .ic_etc {
    margin-right: 6px; }
    .collec_template .master_header .ic_etc::before {
      height: 24px; }

.collec_template .game_play_box .game_play_row {
  display: flex;
  line-height: 48px;
  background-color: #f5f5f5;
  margin: 12px 48px 0;
  padding: 0 12px;
  border-radius: 6px; }
  .collec_template .game_play_box .game_play_row .game_play_tag {
    font-weight: 500;
    min-width: 48px;
    margin-right: 24px; }
  .collec_template .game_play_box .game_play_row .game_play_games {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
  .collec_template .game_play_box .game_play_row .docu_tag_box {
    width: 226px;
    height: 48px; }
  .collec_template .game_play_box .game_play_row .docu_tag {
    position: relative;
    color: #9a499c;
    background-color: white;
    text-align: left;
    margin: 12px 0 3px 0; }
    .collec_template .game_play_box .game_play_row .docu_tag:hover {
      background-color: #f2ebf2; }
    .collec_template .game_play_box .game_play_row .docu_tag span {
      height: 22px;
      max-width: 163px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
    .collec_template .game_play_box .game_play_row .docu_tag.iconed {
      padding-left: 22px; }
      .collec_template .game_play_box .game_play_row .docu_tag.iconed .docu_tag_icon {
        position: absolute;
        top: -7px;
        left: -19px;
        width: 36px;
        height: 36px;
        text-align: center;
        font-size: 26px;
        line-height: 34px;
        background-color: white;
        border: 1px solid #9a499c;
        border-radius: 18px; }

.collec_template .docu_icon {
  height: 36px;
  width: 36px;
  border: 1px solid #9a499c;
  border-radius: 18px;
  margin-right: 6px;
  vertical-align: middle;
  transform: translateY(-2px);
  overflow: hidden;
  text-align: center;
  font-size: 26px;
  line-height: 34px;
  color: #9a499c; }

.player iframe {
  width: 100%;
  height: 100%; }