/* [project]/src/css/home.scss.css [client] (css) */
.home-comp {
  max-width: 920px;
  margin: 40px auto;
}

@media screen and (max-width: 779px) {
  .home-comp {
    padding: 20px;
  }
}

.home-comp .section {
  margin: 0 0 40px;
  padding: 40px;
}

@media screen and (max-width: 779px) {
  .home-comp .section {
    margin: 0 0 20px;
    padding: 20px;
  }
}

.home-comp .section {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px #00000040;
}

.home-comp .home-navi {
  display: flex;
}

.home-comp .home-navi ul {
  flex-flow: row;
  flex: 1;
  display: flex;
}

@media screen and (max-width: 779px) {
  .home-comp .home-navi ul {
    flex-flow: column;
  }
}

.home-comp .home-navi ul, .home-comp .home-navi ul li {
  justify-content: space-between;
  margin: 0;
}

@media screen and (max-width: 779px) {
  .home-comp .home-navi ul li {
    margin: 0 0 20px;
  }
}

.home-comp .home-navi ul li a {
  padding: 40px;
}

@media screen and (max-width: 779px) {
  .home-comp .home-navi ul li a {
    padding: 20px;
  }
}

.home-comp .home-navi ul li a {
  border-radius: 20px;
  box-shadow: 0 1px 3px #00000040;
}

.home-comp .home-navi ul li a:hover {
  box-shadow: 0 1px 3px #00000080;
}

.home-comp .home-navi ul li a:active {
  box-shadow: inset 0 1px 3px #00000080;
}

.home-comp .home-navi ul li a {
  background-color: #fff;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.home-comp .home-navi ul li a .icon svg {
  width: 120px;
  height: 120px;
}

.home-comp .home-navi ul li a .icon svg .real-path {
  fill: #1d6998;
}

.home-comp .home-navi ul li a .text {
  font-size: 20px;
}

.home-comp .mini-header {
  color: #1d6998;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
}

.home-comp .about-container {
  justify-content: space-between;
  width: 100%;
  display: flex;
}

@media screen and (max-width: 779px) {
  .home-comp .about-container {
    flex-flow: column-reverse;
  }

  .home-comp .about-container .right {
    justify-content: center;
    align-items: center;
    margin: 0 0 20px;
    display: flex;
  }
}

.home-comp .about-container img {
  border-radius: 20%;
  height: 140px;
  margin-left: 40px;
  box-shadow: 0 1px 3px #00000080;
}

.home-comp .data-point-obj {
  margin: 0 0 20px;
}

.home-comp .data-point-obj .header {
  align-items: center;
  display: flex;
}

.home-comp .data-point-obj .header .title {
  font-weight: 800;
}

.home-comp .data-point-obj .header .role {
  margin: 0 4px;
  font-weight: 800;
}

.home-comp .data-point-obj .header .location {
  margin: 0 12px;
  font-style: italic;
}

.home-comp .data-point-obj .header .dates {
  background-color: #dcdcdc;
  margin: 0 4px;
  padding: 4px;
  font-family: MedievalSharp, sans-serif;
}

.home-comp .skill-item {
  margin: 0 0 4px;
}

.home-comp .skill-item span {
  font-weight: 800;
}

.home-comp .trevor-coffee {
  justify-content: center;
  align-items: center;
  display: flex;
}

.home-comp .trevor-coffee .trevor-coffee-img {
  border-radius: 10%;
  max-height: 240px;
  box-shadow: 0 1px 3px #00000080;
}

/* [project]/src/components/common/carousel/carousel.scss.css [client] (css) */
.carousel {
  width: 100%;
  transition: height .5s cubic-bezier(.65, .22, .13, .93);
  position: relative;
  overflow: hidden;
}

.carousel .carousel-container {
  align-content: flex-start;
  align-items: flex-start;
  transition: left .5s cubic-bezier(.65, .22, .13, .93);
  display: flex;
  position: relative;
}

.carousel .carousel-container > * {
  float: left;
  opacity: 0;
  width: 100%;
  height: auto;
  transition: opacity .5s linear;
  overflow-y: hidden;
}

.carousel .carousel-container > .active {
  opacity: 1;
}

.carousel .side-slider {
  z-index: 100;
  opacity: 1;
  cursor: pointer;
  background-color: #00000026;
  width: 40px;
  height: 100%;
  transition: opacity .3s;
  position: absolute;
}

.carousel .side-slider.fade {
  opacity: 0;
}

.carousel .side-slider:hover {
  background-color: #0000004d;
}

.carousel .side-slider:active {
  background-color: #00000073;
}

.carousel .side-slider {
  justify-content: center;
  align-items: center;
  display: flex;
}

.carousel .side-slider > svg .real-path {
  fill: #fff;
}

/* [project]/src/components/views/home/story-selector.scss.css [client] (css) */
.story-selector-comp {
  color: #333;
  background-color: #e4edf6;
  border-radius: 12px;
  width: 100%;
  height: 88vh;
  margin: 12px 0;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px #000;
}

.story-selector-comp > .carousel-header.left-right {
  margin: 0;
}

.story-selector-comp > .carousel-header.left-right .items > div {
  height: 48px;
  line-height: 48px;
}

.story-selector-comp > .carousel-header.left-right .carousel-header-underline-container {
  overflow: visible;
}

.story-selector-comp > .simple-carousel {
  height: calc(100% - 40px);
}

.story-selector-comp > .simple-carousel .simple-carousel-container, .story-selector-comp > .simple-carousel .simple-carousel-container > div {
  height: 100%;
}

.story-selector-comp .image-tale-slide, .story-selector-comp .short-story-slide, .story-selector-comp .world-builder-slide {
  height: 100%;
  padding: 20px;
}

@media screen and (max-width: 779px) {
  .story-selector-comp .image-tale-slide, .story-selector-comp .short-story-slide, .story-selector-comp .world-builder-slide {
    padding: 20px 8px;
  }
}

.story-selector-comp .image-tale-slide, .story-selector-comp .short-story-slide, .story-selector-comp .world-builder-slide {
  overflow: auto;
}

.story-selector-comp .image-tale-slide h5, .story-selector-comp .short-story-slide h5, .story-selector-comp .world-builder-slide h5 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
}

.story-selector-comp .image-tale-slide {
  flex-flow: column;
  display: flex;
}

.story-selector-comp .new-world-container {
  flex-flow: column;
  height: 100%;
  display: flex;
}

.story-selector-comp .new-world-container .new-world-comp {
  flex: 1;
  position: relative;
}

.story-selector-comp .new-story-container {
  flex-flow: column;
  height: 100%;
  display: flex;
  position: relative;
}

/* [project]/src/components/common/carousel/carousel-header.scss.css [client] (css) */
.carousel-header {
  border: 0 solid #c8c8c8;
  border-bottom-width: 1px;
  max-width: 100%;
  position: relative;
}

.carousel-header .carousel-header-buttons {
  background-color: red;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.carousel-header.left-right {
  margin: 24px 0;
  overflow: auto;
}

.carousel-header.up-down {
  margin: 12px;
  overflow: hidden auto;
}

.carousel-header.use-button > .items {
  padding-left: 60px;
}

.carousel-header > .items {
  display: flex;
}

.carousel-header > .items > div {
  color: #555;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  flex: 1;
  height: 40px;
  line-height: 40px;
}

.carousel-header > .items > div:hover {
  box-shadow: inset 0 0 250px #0000001a;
}

.carousel-header > .items > div:active {
  box-shadow: inset 0 0 250px #0003;
}

.carousel-header > .items > div.active {
  cursor: default;
  color: #1d6998;
}

.carousel-header > .items > div.active:hover, .carousel-header > .items > div.active:active {
  box-shadow: inset 0 0 250px #0000;
}

.carousel-header.up-down {
  min-width: 120px;
}

.carousel-header.up-down > .items {
  flex-flow: wrap;
  width: 120px;
}

.carousel-header.up-down > .items > div {
  flex: 50%;
}

.carousel-header .carousel-header-underline-container {
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

.carousel-header .carousel-header-underline-container .carousel-header-underline {
  background-color: #1d6998;
  border-radius: 100px 100px 0 0;
  width: 20px;
  height: 2px;
  transition: left .3s cubic-bezier(.65, .22, .13, .93), width .3s cubic-bezier(.65, .22, .13, .93);
  position: absolute;
  bottom: 0;
  left: 0;
}

.sandbox .carousel-header > .items > div.active {
  color: #22aaa1;
}

.sandbox .carousel-header .carousel-header-underline-container .carousel-header-underline {
  background-color: #22aaa1;
}

/* [project]/src/components/common/carousel/simple-carousel.scss.css [client] (css) */
.simple-carousel {
  width: 100%;
  transition: height .5s cubic-bezier(.65, .22, .13, .93);
  position: relative;
  overflow: hidden;
}

.simple-carousel .simple-carousel-container {
  align-content: flex-start;
  align-items: flex-start;
  transition: left .5s cubic-bezier(.65, .22, .13, .93);
  display: flex;
  position: relative;
}

.simple-carousel .simple-carousel-container > * {
  float: left;
  width: 100%;
  height: auto;
  display: none;
}

.simple-carousel .simple-carousel-container > .active {
  display: block;
}

/* [project]/src/components/views/dashboard/new-world.scss.css [client] (css) */
.new-world-comp .bold {
  font-weight: 800;
}

.new-world-comp {
  position: relative;
}

.new-world-comp .note {
  font-size: 14px;
}

.new-world-comp .table-element .left-block {
  display: none;
}

.new-world-comp .table-element {
  max-width: 100%;
}

.new-world-comp .table-element .search-block select, .new-world-comp .table-element .search-block .search-bar-buttons-left, .new-world-comp .table-element .search-block .search-bar-buttons-right, .new-world-comp .table-element .results-count, .new-world-comp .table-element .footer-block {
  display: none;
}

@media screen and (max-width: 779px) {
  .new-world-comp .table-element table td {
    display: block;
  }
}

.new-world-comp .new-world-name-div .top {
  text-align: left;
  cursor: pointer;
  align-items: center;
  padding: 4px;
  font-weight: 800;
  display: flex;
}

.new-world-comp .new-world-name-div .top:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.new-world-comp .new-world-name-div .top:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.new-world-comp .new-world-name-div .top .icon {
  border-radius: 4px;
  min-width: 60px;
  max-width: 60px;
  min-height: 60px;
  max-height: 60px;
  box-shadow: 0 1px 3px #00000059;
}

.new-world-comp .new-world-name-div .top .icon img, .new-world-comp .new-world-name-div .top .icon svg {
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

.new-world-comp .new-world-name-div .top .icon svg .real-path {
  fill: #555;
}

.new-world-comp .new-world-name-div .top .text {
  width: 100%;
  margin: 0 12px;
  font-size: 18px;
}

.new-world-comp .new-world-name-div.active {
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1d6998, inset 0 0 8px 3px #1d6998;
}

.new-world-comp .new-world-name-div .search-block {
  display: none;
}

.new-world-comp .new-world-name-div .center {
  justify-content: center;
  margin: 12px 2px;
  display: flex;
}

.new-world-comp .new-world-name-div .center .world-builder-comp {
  border-radius: 4px;
  max-width: 640px;
  box-shadow: 0 1px 3px #0000004d;
}

@media screen and (max-width: 779px) {
  .new-world-comp .new-world-name-div .center .world-builder-comp {
    max-width: 90vw;
  }
}

.new-world-comp .new-world-name-div .center .world-builder-comp {
  padding: 0;
}

.new-world-comp .new-world-name-div .center .world-builder-comp .world-main {
  width: 640px;
  min-height: 240px;
  max-height: 240px;
}

.new-world-comp .new-world-name-div .center .world-builder-comp .pointer {
  cursor: pointer !important;
}

.new-world-comp .new-world-name-div .center .world-builder-comp .mobile-toggles {
  display: none;
}

.new-world-comp .new-world-name-div .center .world-builder-comp .no-results {
  text-align: center;
}

.new-world-comp .new-world-name-div .center .world-builder-comp .world-container .world-main > .right {
  max-width: 1000px;
  padding: 0;
}

.new-world-comp .new-world-name-div .center .world-builder-comp .world-container .world-main > .right .search-conditions {
  display: none;
}

.new-world-comp .new-world-name-div .center .world-builder-comp .world-container .world-main > .right .content-block {
  padding: 0;
}

@media screen and (max-width: 779px) {
  .new-world-comp .new-world-name-div .center .world-builder-comp .world-container .world-main > .left {
    flex: 0;
    width: 60px;
    min-width: 60px;
  }

  .new-world-comp .new-world-name-div .center .world-builder-comp .world-container .world-main > .left .rows .row {
    justify-content: center;
    align-items: center;
    width: 48px;
    display: flex;
  }

  .new-world-comp .new-world-name-div .center .world-builder-comp .world-container .world-main > .left .rows .row .icon {
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .new-world-comp .new-world-name-div .center .world-builder-comp .world-container .world-main > .left .rows .row .text {
    display: none;
  }

  .new-world-comp .new-world-name-div .center .world-builder-comp .world-container .world-main > .right {
    width: calc(90vw - 60px);
    min-width: calc(90vw - 60px);
    max-width: calc(90vw - 60px);
  }
}

.new-world-comp .new-world-name-div .bottom {
  justify-content: space-between;
  padding: 0 12px 12px;
  display: flex;
}

.new-world-comp .new-world-name-div .bottom .button-element button {
  padding-right: 40px;
}

.new-world-comp .carousel-header {
  overflow: auto;
}

.new-world-comp .carousel-header .carousel-header-underline-container {
  overflow: visible;
}

.new-world-comp .carousel-header .items > div {
  padding: 0 12px;
}

.new-world-comp .loading-generate-world-overlay {
  z-index: 100;
  opacity: 0;
  z-index: 125;
  background-color: #00000040;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.new-world-comp .loading-generate-world-overlay.show {
  opacity: 1;
  transition: opacity .4s;
}

.new-world-comp .loading-generate-world-overlay.hide {
  opacity: 0;
  width: 0;
  height: 0;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner {
  background-color: #fff;
  border-radius: 12px;
  flex-flow: column;
  width: 75%;
  min-width: 240px;
  max-width: 600px;
  height: 75%;
  min-height: 240px;
  max-height: 600px;
  transition: transform .3s;
  display: flex;
  transform: scale(.5);
  box-shadow: 0 3px 8px #00000040;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner .loading-container {
  flex: 1;
  justify-content: center;
  align-items: center;
  max-height: calc(75vh - 120px);
  display: flex;
  position: relative;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner .loading-container .loading-wheel {
  border-radius: 50%;
  position: absolute;
  top: 20px;
  right: 20px;
  box-shadow: inset 0 0 20px 20px #ffffff80, 0 0 5px 5px #ffffff80;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner .loading-container .text-box {
  color: #fff;
  background-color: #333;
  border-radius: 12px 12px 0 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner .loading-text-container {
  text-align: center;
  height: 120px;
  padding: 20px;
  overflow: auto;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner .loading-text-container .main {
  font-weight: 800;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner .loading-text-container .sub {
  font-size: 12px;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner .loading-text-container .loading-bar {
  background-color: #1d69981a;
  border: 1px solid #1d6998;
  border-radius: 12px;
  width: 100%;
  height: 20px;
  margin: 8px 0;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner .loading-text-container .view-world-div .main {
  margin: 0 0 12px;
}

.new-world-comp .loading-generate-world-overlay .loading-generate-world-overlay-inner .loading-text-container .view-world-div .button svg {
  fill: #fff;
  width: 40px;
  height: 40px;
  padding: 8px;
  position: absolute;
  top: 0;
  right: 0;
}

.new-world-comp .loading-generate-world-overlay.show .loading-generate-world-overlay-inner {
  transform: scale(1);
}

.new-world-comp .new-world-header {
  background-color: #fff;
}

.new-world-comp .new-world-header.carousel-header.left-right {
  margin: 0;
}

.new-world-comp .new-world-header {
  border-radius: 12px 12px 0 0;
  box-shadow: 0 1px 5px #0000001a;
}

.new-world-comp .new-world-template-slide, .new-world-comp .new-blank-slide, .new-world-comp .new-world-slide, .new-world-comp .new-world-prompt-slide {
  padding: 20px;
}

.new-world-comp .new-world-template-slide {
  position: relative;
  overflow: hidden;
}

.new-world-comp .new-world-slide .switch-toggle, .new-world-comp .new-world-prompt-slide .switch-toggle {
  margin: 20px auto;
}

.new-world-comp .new-world-slide .switch-toggle .text, .new-world-comp .new-world-prompt-slide .switch-toggle .text {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 16px;
}

.new-world-comp .new-world-slide .label-item-input, .new-world-comp .new-world-prompt-slide .label-item-input {
  margin: 0 0 4px;
}

.new-world-comp .new-world-slide .label-item-input .input-box, .new-world-comp .new-world-prompt-slide .label-item-input .input-box {
  flex-flow: row;
  display: flex;
}

@media screen and (max-width: 779px) {
  .new-world-comp .new-world-slide .label-item-input .input-box, .new-world-comp .new-world-prompt-slide .label-item-input .input-box {
    flex-flow: column;
  }
}

.new-world-comp .new-world-slide .label-item-input .input-box, .new-world-comp .new-world-prompt-slide .label-item-input .input-box {
  justify-content: center;
}

.new-world-comp .new-world-slide .label-item-input .input-box label, .new-world-comp .new-world-prompt-slide .label-item-input .input-box label {
  text-align: right;
  flex: 8;
  line-height: 40px;
}

@media screen and (max-width: 779px) {
  .new-world-comp .new-world-slide .label-item-input .input-box label, .new-world-comp .new-world-prompt-slide .label-item-input .input-box label {
    text-align: left;
    line-height: 18px;
  }
}

.new-world-comp .new-world-slide .label-item-input .input-box .spacer, .new-world-comp .new-world-prompt-slide .label-item-input .input-box .spacer {
  flex: 1;
}

.new-world-comp .new-world-slide .label-item-input .input-box .inputs, .new-world-comp .new-world-prompt-slide .label-item-input .input-box .inputs {
  flex: 8;
}

.new-world-comp .new-world-slide .label-item-input .input-box .inputs select, .new-world-comp .new-world-prompt-slide .label-item-input .input-box .inputs select {
  width: 100%;
  margin: 0;
}

.new-world-comp .new-world-slide .label-item-input .input-box .custom-input-box, .new-world-comp .new-world-prompt-slide .label-item-input .input-box .custom-input-box {
  margin: 4px 0 0;
}

.new-world-comp .new-world-slide .label-item-input .input-box .custom-input-box input, .new-world-comp .new-world-prompt-slide .label-item-input .input-box .custom-input-box input {
  margin: 0;
  position: relative;
}

.new-world-comp .input-text-box-container {
  border: 0 solid #00000040;
  border-bottom-width: 1px;
  margin: 0 0 20px;
  padding: 0 0 8px;
}

.new-world-comp .input-text-box-container .input-text-box .inputs {
  display: flex;
}

.new-world-comp .input-text-box-container .input-text-box .inputs textarea, .new-world-comp .input-text-box-container .input-text-box .inputs input {
  flex: 1;
}

.new-world-comp .input-text-box-container .input-text-box .inputs .input-buttons {
  display: flex;
}

.new-world-comp .input-text-box-container .input-text-box .inputs .input-buttons .button-element {
  width: 40px;
  margin-left: 12px;
}

.new-world-comp .buttons {
  justify-content: space-between;
  display: flex;
}

.new-world-comp .buttons .right {
  flex-flow: column;
  display: flex;
}

.new-world-comp .buttons .right .button-inputs {
  display: flex;
}

.new-world-comp .buttons .right .button-inputs .creativity-div {
  min-width: 160px;
  max-height: 40px;
  margin-right: 12px;
}

.new-world-comp .buttons .right .button-inputs .creativity-div label {
  text-align: center;
}

.new-world-comp .buttons .right .note {
  justify-content: center;
  align-items: center;
  display: flex;
}

.new-world-comp .buttons .right .note span {
  font-size: 12px;
}

.new-world-comp .buttons .button-element {
  width: auto;
  margin-left: 12px;
}

.new-world-comp .buttons .button-element button, .new-world-comp .buttons .button-element input {
  padding-right: 40px;
}

.new-world-comp .new-world-prompt-slide .new-world-prompt-header {
  justify-content: space-between;
  display: flex;
}

.new-world-comp .new-world-prompt-slide .new-world-prompt-header .button-element button {
  padding-right: 40px;
}

/* [project]/src/components/elements/button/button.scss.css [client] (css) */
.button-element {
  border-radius: 3px;
  width: 100%;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.button-element .background {
  background-color: #1d6998;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  position: absolute;
  top: 0;
  left: 0;
}

.button-element.delete .background {
  background-color: #c80032;
}

.button-element.clear:hover {
  box-shadow: inset 0 0 250px #0000001a;
}

.button-element.clear:active {
  box-shadow: inset 0 0 250px #0003;
}

.button-element.clear .background {
  border: 1px solid rba(100, 100, 100, 1);
  background-color: #0000;
}

.button-element.clear button {
  color: #333;
  border: 1px solid #969696;
}

.button-element.clear svg .real-path {
  fill: #333;
}

.button-element.disabled .background {
  opacity: .5;
}

.button-element.cancel .background {
  background-color: #f0f0f0;
}

.button-element.cancel svg .real-path {
  fill: #333;
}

.button-element.cancel input, .button-element.cancel button {
  color: #333;
}

.button-element.cancel input:hover, .button-element.cancel button:hover {
  box-shadow: inset 0 0 250px #0000001a;
}

.button-element.cancel input:active, .button-element.cancel button:active {
  box-shadow: inset 0 0 250px #0003;
}

.button-element.no-image .button-status-image {
  opacity: 0;
  display: none;
}

.button-element .button-status-image {
  z-index: 10;
  opacity: 1;
  width: 24px;
  height: 24px;
  transition: display .3s, opacity .3s cubic-bezier(.21, .6, .47, .82);
  transition-delay: display .3s;
  display: block;
  position: absolute;
  top: 8px;
}

.button-element.icon-left .button-status-image {
  left: 8px;
}

.button-element.icon-right .button-status-image {
  right: 8px;
}

.button-element input, .button-element button {
  z-index: 15;
  background-color: #0000;
}

.button-element.loading .button-status-image {
  transform: translate(-100px, -100px)scale(1)translate(100px, 100px);
}

.button-element.loading .button-status-image div, .button-element.loading .button-status-image div:after {
  z-index: 11;
  width: inherit;
  height: inherit;
  border: 2px solid #fff;
  border-top-color: #555;
  border-radius: 50%;
  position: absolute;
}

.button-element.loading .button-status-image div {
  animation: .65s cubic-bezier(.75, .35, .34, .64) infinite lds-rolling;
  top: 50%;
  left: 50%;
}

.button-element.loading .button-status-image div:after {
  transform: rotate(90deg);
}

.button-element .coin-element {
  margin: 4px;
}

.sandbox .button-element .background {
  background-color: #22aaa1;
}

@keyframes lds-rolling {
  0% {
    transform: translate(-50%, -50%)rotate(0);
  }

  100% {
    transform: translate(-50%, -50%)rotate(360deg);
  }
}

/* [project]/src/components/common/loading/loading.scss.css [client] (css) */
.loading {
  background-color: #ffffff0d;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 5px #ffffff1a;
}

.loading div {
  width: 100%;
  height: 100%;
  animation: 1.1s cubic-bezier(.75, .35, .34, .64) infinite lds-roller;
  position: absolute;
}

.loading div:after {
  content: " ";
  background-color: #1d6998;
  border-radius: 50%;
  width: 12%;
  height: 16%;
  position: absolute;
  top: 0%;
  left: 44%;
}

.loading div:first-child {
  animation-delay: -.062s;
}

.loading div:nth-child(2) {
  animation-delay: -.124s;
}

.loading div:nth-child(3) {
  animation-delay: -.186s;
}

.loading div:nth-child(4) {
  animation-delay: -.248s;
}

.loading div:nth-child(5) {
  animation-delay: -.31s;
}

.loading div:nth-child(6) {
  animation-delay: -.372s;
}

.loading div:nth-child(7) {
  animation-delay: -.434s;
}

.loading div:nth-child(8) {
  animation-delay: -.496s;
}

.loading div:nth-child(9) {
  animation-delay: -.558s;
}

.loading div:nth-child(10) {
  animation-delay: -.62s;
}

.loading div:nth-child(11) {
  animation-delay: -.682s;
}

.loading div:nth-child(12) {
  animation-delay: -.744s;
}

.loading.secondary-color div:after {
  background-color: #4d5061;
}

.loading.accent-color div:after {
  background-color: #f2af29;
}

.loading.white div:after {
  background-color: #fff;
}

@keyframes lds-roller {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* [project]/src/components/elements/button/coin-button.scss.css [client] (css) */
.coin-button-element {
  border-radius: 3px;
  height: 40px;
  margin-left: 12px;
  position: relative;
}

.coin-button-element .button-tooltip {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.coin-button-element input, .coin-button-element button {
  z-index: 15;
  cursor: pointer;
  background-color: #0000;
  border: 0 solid #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.coin-button-element input:hover, .coin-button-element button:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.coin-button-element input:active, .coin-button-element button:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.coin-button-element .background {
  background-color: #1d6998;
  border-radius: 3px;
  transition: opacity .3s linear;
  display: flex;
  position: relative;
}

.coin-button-element .background .button-text, .coin-button-element .background .button-right-text {
  color: #fff;
  line-height: 40px;
}

.coin-button-element .background .button-text {
  padding: 0 8px 0 12px;
}

.coin-button-element .background .button-right-text {
  padding: 0 12px 0 0;
  font-size: 12px;
}

.coin-button-element .button-status-image {
  z-index: 10;
  opacity: 1;
  width: 24px;
  height: 40px;
  transition: display .3s, opacity .3s cubic-bezier(.21, .6, .47, .82);
  transition-delay: display .3s;
  padding: 8px 0;
  display: block;
}

.coin-button-element.disabled input, .coin-button-element.disabled button {
  cursor: not-allowed;
}

.coin-button-element.disabled input:hover, .coin-button-element.disabled button:hover {
  box-shadow: inset 0 0 #00000026;
}

.coin-button-element.disabled input:active, .coin-button-element.disabled button:active {
  box-shadow: inset 0 0 #0000004d;
}

.coin-button-element.disabled .background {
  background-color: #1d699880;
}

.coin-button-element .coin-element {
  margin: 4px;
}

.coin-button-element.loading .button-status-image {
  transform: translate(-100px, -100px)scale(1)translate(100px, 100px);
}

.coin-button-element.loading .button-status-image div, .coin-button-element.loading .button-status-image div:after {
  z-index: 11;
  width: inherit;
  height: inherit;
  border: 2px solid #fff;
  border-top-color: #555;
  border-radius: 50%;
  position: absolute;
}

.coin-button-element.loading .button-status-image div {
  animation: .65s cubic-bezier(.75, .35, .34, .64) infinite lds-rolling;
  top: 50%;
  left: 50%;
}

.coin-button-element.loading .button-status-image div:after {
  transform: rotate(90deg);
}

.sandbox .coin-button-element .background {
  background-color: #22aaa1;
}

@keyframes lds-rolling {
  0% {
    transform: translate(-50%, -50%)rotate(0);
  }

  100% {
    transform: translate(-50%, -50%)rotate(360deg);
  }
}

/* [project]/src/components/common/tooltip/tooltip.scss.css [client] (css) */
.tooltip {
  position: relative;
}

.tooltip .tip {
  z-index: 1250;
  opacity: 1;
  transition: opacity .3s;
  position: absolute;
}

.tooltip .tip.hide-fade {
  z-index: -1;
  opacity: 0;
}

.tooltip .tip .tip-child {
  color: #ddd;
  justify-content: center;
  display: flex;
  position: absolute;
}

.tooltip .tip .tip-child:before {
  content: "";
  width: 0;
  height: 0;
  margin-left: -10px;
  position: absolute;
  left: 50%;
}

.tooltip .tip .tip-child.bottom {
  bottom: 0;
}

.tooltip .tip .tip-child.bottom:before {
  border-top: 10px solid #323232;
  border-left: 10px solid #0000;
  border-right: 10px solid #0000;
  bottom: -10px;
}

.tooltip .tip .tip-child.top {
  top: 0;
}

.tooltip .tip .tip-child.top:before {
  border-bottom: 10px solid #323232;
  border-left: 10px solid #0000;
  border-right: 10px solid #0000;
  top: -10px;
}

.tooltip .tip .tip-child .tip-grandchild {
  background-color: #323232;
  border-radius: 5px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 24px;
  box-shadow: 0 3px 8px #00000040;
}

/* [project]/src/components/elements/switch-toggle/switch-toggle.scss.css [client] (css) */
.switch-toggle {
  cursor: pointer;
  background-color: #d2d2d2;
  margin: 0 8px;
  transition: background-color .3s cubic-bezier(.71, -.29, .12, .63);
  position: relative;
}

.switch-toggle .gray-cover {
  display: none;
}

.switch-toggle.disable {
  cursor: not-allowed;
}

.switch-toggle.disable .gray-cover {
  background-color: #00000026;
  border-radius: 25px;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.switch-toggle .dot {
  background-color: #fff;
  justify-content: center;
  align-items: center;
  transition: left .3s cubic-bezier(.71, -.29, .12, .63);
  display: flex;
  position: absolute;
  box-shadow: 0 1px 3px #00000080;
}

.switch-toggle .dot .text {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.switch-toggle .dot .text .text-on, .switch-toggle .dot .text .text-off {
  transition: opacity .6s;
  position: absolute;
}

.switch-toggle .dot .text .text-off {
  opacity: 1;
}

.switch-toggle .dot .text .text-on {
  opacity: 0;
}

.switch-toggle .line {
  background-color: #fff;
  border-radius: 5px;
  width: 1px;
  height: 40%;
  position: absolute;
  top: 30%;
}

.switch-toggle .circle {
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  transform: scale(.5);
}

.switch-toggle.on {
  background-color: #1d6998;
}

.switch-toggle.on .dot .text .text-off {
  opacity: 0;
}

.switch-toggle.on .dot .text .text-on {
  opacity: 1;
}

.sandbox .switch-toggle.on {
  background-color: #22aaa1;
}

/* [project]/src/components/common/progress-bar/progress-bar.scss.css [client] (css) */
.progress-bar-comp {
  background-color: #1d69981a;
  border: 1px solid #1d6998;
  border-radius: 12px;
  width: 100%;
  height: 20px;
  margin: 8px 0;
  overflow: hidden;
}

.progress-bar-comp .inner-bar {
  color: #fff;
  background-color: #1d6998;
  height: 100%;
}

/* [project]/src/components/elements/table/table.scss.css [client] (css) */
.table-element {
  display: flex;
}

.table-element .copy-input {
  margin: 0;
}

.table-element .toolbar {
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.table-element .toolbar .button-element {
  width: 40px;
}

.table-element .toolbar .button-element button {
  color: #0000;
}

.table-element .toolbar .mobile-toolbar-side-items {
  flex: 1;
  margin: 0;
  display: flex;
  overflow: auto;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item:not(.custom) {
  padding: 0 12px;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item {
  white-space: nowrap;
  border-radius: 3px;
  flex-shrink: 0;
  width: auto;
  height: 40px;
  line-height: 40px;
  position: relative;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item .text {
  white-space: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
  display: inline-block;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item:hover, .table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item.active {
  cursor: pointer;
  color: #fff;
  background-color: #1d6998;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item-add-new-item-button-div {
  margin-left: 12px;
  margin-right: 12px;
}

.table-element .pointer {
  cursor: pointer;
}

.table-element .clickable:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.table-element .clickable:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.table-element .left-block:not(.hide), .table-element .side-items-filter:not(.hide) {
  flex-flow: column;
  width: 140px;
  margin: 0 20px 0 0;
}

.table-element .left-block .left-block-item:not(.custom), .table-element .side-items-filter .left-block-item:not(.custom) {
  border-radius: 3px;
  height: 36px;
  margin: 0 0 8px;
  padding: 0 8px;
  line-height: 36px;
  position: relative;
}

.table-element .left-block .left-block-item:not(.custom):hover, .table-element .left-block .left-block-item:not(.custom).active, .table-element .side-items-filter .left-block-item:not(.custom):hover, .table-element .side-items-filter .left-block-item:not(.custom).active {
  cursor: pointer;
  color: #fff;
  background-color: #1d6998;
}

.table-element .side-item-add-new-item-button-div .side-item-add-new-item-button-line {
  background: linear-gradient(to right, #0000, #1d6998, #0000);
  width: 100%;
  height: 1px;
  margin: 4px 0 12px;
}

.table-element .side-item-add-new-item-button-div .side-item-add-new-item-button {
  height: 36px;
}

.table-element .side-item-add-new-item-button-div .side-item-add-new-item-button .button-status-image {
  top: 6px;
  right: 6px;
}

.table-element .side-item-add-new-item-button-div .side-item-add-new-item-button button {
  height: 36px;
  line-height: 36px;
}

.table-element .side-items-filter:not(.hide) {
  width: 100%;
  margin: 0;
}

.table-element .center-block {
  flex: 1;
  max-width: 100%;
  position: relative;
}

.table-element .center-block .loading-overlay:not(.hide) {
  display: flex;
}

.table-element .center-block .loading-overlay {
  z-index: 75;
  background-color: #0000001a;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 30px);
  position: absolute;
  top: 30px;
  left: 0;
}

.table-element .center-block .search-bar-buttons-left {
  display: flex;
}

.table-element .center-block .search-bar-container {
  flex: 1;
}

.table-element .center-block .search-bar-buttons-right {
  display: flex;
}

.table-element .center-block .search-block {
  margin: 0;
}

.table-element .center-block .search-block .results-count, .table-element .center-block .search-block .results-count-simple {
  padding: 8px;
  font-size: 12px;
}

.table-element .center-block .search-block .results-count-simple {
  display: none;
}

.table-element .center-block .search-block > form:not(.hide) {
  display: flex;
}

.table-element .center-block .search-block > form .search-conditions {
  flex: 1;
}

.table-element .center-block .search-block > form .search-conditions.singular:not(.hide) {
  display: flex;
}

.table-element .center-block .search-block > form .search-conditions.singular:not(.hide) input[type="text"] {
  flex: 1;
  margin: 0;
}

.table-element .center-block .search-block > form .search-conditions .data-range {
  flex: 1;
  display: flex;
}

.table-element .center-block .search-block > form .search-conditions .data-range .date-epoch-input {
  margin: 0;
}

.table-element .center-block .search-block > form .search-conditions .data-range .spacer {
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  display: flex;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  flex-wrap: wrap;
  height: 100%;
  max-height: 40px;
  padding: 1px;
  display: flex;
  overflow-y: auto;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide):hover {
  border-color: #c8c8c8;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide):active {
  border-color: #b4b4b4;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) .search-conditon-group {
  flex-wrap: wrap;
  display: flex;
  position: relative;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) .search-conditon-group:not(:first-of-type) {
  margin: 0 0 0 20px;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) .search-conditon-group:not(:first-of-type):before {
  text-align: center;
  content: "OR";
  width: 20px;
  height: 20px;
  font-size: 10px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: -20px;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) .search-conditon-group .search-condition {
  background-color: #c8c8c8;
  border-radius: 2px;
  height: 16px;
  margin: 1px;
  padding: 1px 2px;
  font-size: 12px;
}

.table-element .center-block .search-block > form select, .table-element .center-block .search-block > form .button-element {
  margin: 0 0 0 12px;
}

.table-element .center-block .search-block > form .button-element.filter {
  margin: 0 12px 0 0;
}

.table-element .center-block .search-block > form .button-element {
  width: 40px;
}

.table-element .center-block .search-block > form .button-element button, .table-element .center-block .search-block > form .button-element input {
  color: #0000;
}

.table-element .center-block .search-block > form .button-element.add-button {
  width: auto;
}

.table-element .center-block .search-block > form .button-element.add-button button, .table-element .center-block .search-block > form .button-element.add-button input {
  color: #fff;
  padding-right: 40px;
}

.table-element .center-block .main-block .content-block table {
  border-collapse: collapse;
  width: 100%;
}

.table-element .center-block .main-block .content-block table .header {
  z-index: 50;
  background-color: #f3f7fc;
  position: sticky;
  top: -20px;
  box-shadow: 0 8px 8px -4px #0000001a;
}

.table-element .center-block .main-block .content-block table .header th:not(.disabled-index-sort):not(.ignore) {
  cursor: pointer;
}

.table-element .center-block .main-block .content-block table .header th:not(.disabled-index-sort):not(.ignore):hover {
  box-shadow: inset 0 0 250px #00000026;
}

.table-element .center-block .main-block .content-block table .header th:not(.disabled-index-sort):not(.ignore):active {
  box-shadow: inset 0 0 250px #0000004d;
}

.table-element .center-block .main-block .content-block table .header th:not(.ignore).order-asc, .table-element .center-block .main-block .content-block table .header th:not(.ignore).order-desc {
  padding-right: 20px;
  position: relative;
}

.table-element .center-block .main-block .content-block table .header th:not(.ignore).order-asc:before {
  content: "";
  border: 10px solid #0000;
  border-bottom-color: #3c3c3c;
  width: 0;
  height: 0;
  position: absolute;
  top: calc(50% - 15px);
  right: 2px;
}

.table-element .center-block .main-block .content-block table .header th:not(.ignore).order-desc:before {
  content: "";
  border: 10px solid #0000;
  border-top-color: #3c3c3c;
  width: 0;
  height: 0;
  position: absolute;
  top: calc(50% - 5px);
  right: 2px;
}

.table-element .center-block .main-block .content-block table th, .table-element .center-block .main-block .content-block table td {
  padding: 2px 4px;
}

.table-element .center-block .main-block .content-block table th {
  height: 40px;
}

.table-element .center-block .main-block .content-block table td input {
  margin: 0;
}

.table-element .center-block .main-block .content-block table td {
  min-height: 28px;
}

.table-element .center-block .main-block .content-block table tr.disable-row-highlight .pointer {
  cursor: default;
}

.table-element .center-block .main-block .content-block table tr:not(.disable-row-highlight):hover:not(.header) {
  box-shadow: inset 0 0 250px #00000026;
}

.table-element .center-block .main-block .content-block.hide-header-row .header {
  display: none;
}

.table-element .center-block .main-block .content-block.hide-header-row .loading-overlay {
  height: 100%;
  top: 0;
}

.table-element .center-block .main-block .label-active, .table-element .center-block .main-block .label-inactive {
  color: #0000;
  background-color: #c8c8c8;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  padding: 8px;
  font-size: 0;
  display: inline-block;
}

.table-element .no-results {
  background-color: #fff;
  padding: 20px;
}

.table-element .footer-block {
  background-color: #f3f7fc;
  border-radius: 0 0 3px 3px;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  display: flex;
  position: sticky;
  bottom: 0;
  overflow: auto;
  box-shadow: 0 -8px 8px -4px #0000001a;
}

.table-element .footer-block .buttons .button-element button {
  padding-right: 40px;
}

.table-element .footer-block .buttons.right .button-element {
  margin-left: 12px;
}

.table-element .footer-block .buttons.left .button-element {
  margin-right: 12px;
}

.table-element .table-search-advanced-modal:first-child {
  max-width: 650px;
  max-height: 80vh;
  overflow: auto;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions {
  flex-flow: column;
  display: flex;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .action-lock {
  margin: 0 8px 0 0;
  line-height: 40px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group {
  flex-flow: column;
  display: flex;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div {
  flex-flow: row;
  justify-content: flex-start;
  margin: 0 0 12px;
  display: flex;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .button-element {
  max-width: 100px;
  margin: 0 20px 0 0;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .button-element button {
  padding-right: 40px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .or-div:not(.hide) {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .or-div:not(.hide) .line {
  background-color: #dcdcdc;
  flex: 1;
  height: 1px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .or-div:not(.hide) .text {
  padding: 0 12px;
  font-size: 10px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition {
  margin: 0 0 12px;
  display: flex;
  position: relative;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition:not(:first-of-type):before {
  text-align: center;
  content: "AND";
  color: #000000bf;
  width: 100%;
  height: 12px;
  font-size: 10px;
  line-height: 12px;
  position: absolute;
  top: -12px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition input {
  flex: 1;
  margin: 0 8px 0 0;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition select {
  margin: 0 8px 0 0;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition select.value-select {
  width: 100%;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition .button-element {
  max-width: 40px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition .button-element button {
  color: #0000;
}

.table-element .filter-order-by .filter-order-by-box {
  display: flex;
}

.table-element .filter-order-by .filter-order-by-box select {
  flex: 1;
}

.table-element .filter-order-by .filter-order-by-box .asc-desc {
  display: flex;
}

.table-element .filter-order-by .filter-order-by-box .asc-desc > span {
  border-radius: 4px;
  height: 40px;
  margin-left: 12px;
  padding: 0 12px;
  line-height: 40px;
  display: block;
}

.table-element .filter-order-by .filter-order-by-box .asc-desc > span:hover, .table-element .filter-order-by .filter-order-by-box .asc-desc > span.active {
  cursor: pointer;
  color: #fff;
  background-color: #1d6998;
}

.table-element .side-items-filter .line {
  background-color: #dcdcdc;
  width: 100%;
  height: 1px;
  margin: 12px 0;
}

.sandbox .table-element .left-block .left-block-item:not(.custom):hover, .sandbox .table-element .left-block .left-block-item:not(.custom).active, .sandbox .table-element .left-block .left-block-item:not(.custom) .filter-order-by .filter-order-by-box .asc-desc > span:hover, .sandbox .table-element .left-block .left-block-item:not(.custom) .filter-order-by .filter-order-by-box .asc-desc > span.active {
  background-color: #22aaa1;
}

.table-element.expand .center-block {
  flex-flow: column;
  display: flex;
}

.table-element.expand .center-block .main-block {
  flex-flow: column;
  flex: 1;
  display: flex;
}

.table-element.expand .center-block .main-block .content-block {
  flex: 1;
}

@media screen and (min-width: 780px) {
  .table-element .left-block {
    display: flex;
  }

  .table-element table {
    background-color: #fff;
  }

  .table-element table td {
    text-align: right;
  }

  .table-element .search-conditions select {
    max-width: 120px;
  }

  .table-element .search-bar-buttons-right .inner-search-bar-buttons-left {
    display: none;
  }
}

@media screen and (min-width: 779px) {
  .table-element .toolbar {
    display: none;
  }
}

@media screen and (max-width: 779px) {
  .table-element .left-block, .table-element thead {
    display: none;
  }

  .table-element table, .table-element table tbody, .table-element table tr, .table-element table td {
    width: 100%;
    display: block;
  }

  .table-element table tr {
    background-color: #fff;
    border-radius: 3px;
    margin-bottom: 8px;
  }

  .table-element table tr:last-of-type {
    margin-bottom: 0;
  }

  .table-element table td {
    text-align: right;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: relative;
  }

  .table-element table td:before {
    text-align: left;
    content: attr(data-label);
    max-width: 100px;
    margin: 0 0 2px;
    font-size: 12px;
    position: relative;
    left: 0;
  }

  .table-element .search-block .search-bar-buttons-left.desktop {
    display: none;
  }

  .table-element .search-block .search-bar-buttons-right {
    margin: 0 0 12px;
  }

  .table-element .search-block .search-bar-buttons-right .inner-search-bar-buttons-left {
    flex: 1;
    display: flex;
  }

  .table-element .search-block .search-bar-buttons-right .inner-search-bar-buttons-left select {
    flex: 1;
    margin: 0;
  }

  .table-element .search-block form {
    flex-flow: column-reverse;
  }

  .table-element .search-block form .search-bar-container select {
    display: none;
  }

  .table-element .search-conditions select {
    padding: 0;
  }
}

/* [project]/src/components/common/modal/modal.scss.css [client] (css) */
.center-div-outer .center-div-middle > :first-child.modal-main {
  padding: 0;
}

.modal {
  z-index: 210;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.modal.hide-modal {
  width: 0;
  height: 0;
}

.modal.hide-modal:not(.inside-another-modal) {
  transition: height 0s .35s, width 0s .35s, padding 0s .35s, overflow 0s .35s;
}

.modal.hide-modal .modal-gray-screen {
  opacity: 0;
}

.modal.hide-modal :first-child.modal-main {
  overflow: hidden;
}

.modal.show-modal {
  width: 100%;
  height: 100%;
}

.modal.show-modal .modal-gray-screen {
  opacity: 1;
}

.modal .modal-gray-screen {
  z-index: 205;
  opacity: 1;
  background: #000000a6;
  width: 100%;
  height: 100%;
  transition: opacity .35s;
  position: absolute;
}

.modal .modal-main {
  z-index: 208;
  background: #fff;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.modal .modal-main .modal-close-button {
  cursor: pointer;
  border-radius: 2px;
  width: 40px;
  height: 40px;
  padding: 4px;
  position: absolute;
  top: 0;
  right: 0;
}

.modal .modal-main .modal-close-button svg {
  width: 100%;
  height: 100%;
}

.modal .modal-main .modal-close-button svg .real-path {
  fill: #1d6998;
}

.modal .modal-main .modal-close-button {
  z-index: 150;
}

.modal .modal-main .modal-close-button:hover {
  box-shadow: inset 0 0 250px #0000001a;
}

.modal .modal-main .modal-close-button:active {
  box-shadow: inset 0 0 250px #0003;
}

.modal .modal-main .modal-content {
  max-height: calc(90vh - 48px);
  padding: 20px;
  position: relative;
}

@media screen and (max-width: 779px) {
  .modal .modal-main .modal-content {
    max-height: 80vh;
  }
}

.modal .modal-main .modal-content {
  overflow: auto;
}

@media screen and (max-width: 779px) {
  .center-div-outer .center-div-middle > :first-child.modal-main {
    max-width: 100vw;
  }

  .modal.hide-modal .modal-main:first-child {
    margin-top: 200vh;
    transition: margin-top .2s cubic-bezier(.95, .29, .59, .79), transform .2s cubic-bezier(.95, .29, .59, .79);
    transform: scale(.8);
  }

  .modal.show-modal {
    width: 100vw;
  }

  .modal.show-modal .modal-main:first-child {
    margin-top: 0;
    transition: margin-top .2s cubic-bezier(.95, .29, .59, .79), transform .2s cubic-bezier(.95, .29, .59, .79);
    transform: scale(1);
  }
}

@media screen and (min-width: 780px) {
  .modal.hide-modal .modal-main {
    opacity: 0;
    transition: transform .12s cubic-bezier(.65, .22, .13, .93), opacity .12s cubic-bezier(.65, .22, .13, .93);
    transform: scale(.8);
  }

  .modal.show-modal .modal-main {
    opacity: 1;
    transition: transform .2s cubic-bezier(.65, .22, .13, .93), opacity .2s cubic-bezier(.65, .22, .13, .93);
    transform: scale(1);
  }
}

.sandbox .modal .modal-main .modal-close-button svg .real-path {
  fill: #22aaa1;
}

/* [project]/src/components/common/center-div/center-div.scss.css [client] (css) */
.center-div-outer {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  top: 0;
  left: 0;
}

.center-div-outer .center-div-middle {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.center-div-outer .center-div-middle > :first-child {
  background-color: #fff;
  border-radius: 3px;
  flex: 1;
  max-width: 400px;
  margin: 60px auto;
  padding: 20px;
  position: relative;
}

@media screen and (max-width: 400px) {
  .center-div-outer .center-div-middle > :first-child {
    max-width: 100vw;
  }
}

/* [project]/src/components/common/pagination/pagination.scss.css [client] (css) */
.pagination ul {
  margin: 0;
  display: flex;
}

.pagination ul li {
  text-align: center;
  background-color: #fff;
  margin: 0 8px 0 0;
  position: relative;
}

.pagination ul li > div {
  cursor: pointer;
  border: 1px solid #1d6998;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: flex;
}

.pagination ul li > div:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.pagination ul li > div:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.pagination ul li.active > div {
  color: #fff;
  background-color: #1d6998;
}

.pagination ul li.first {
  margin-right: 32px;
}

.pagination ul li.first:after {
  content: "...";
  width: 24px;
  height: 8px;
  line-height: 8px;
  position: absolute;
  bottom: 8px;
  right: -28px;
}

.pagination ul li.last {
  margin-left: 24px;
}

.pagination ul li.last:before {
  content: "...";
  width: 24px;
  height: 8px;
  line-height: 8px;
  position: absolute;
  bottom: 8px;
  left: -28px;
}

.sandbox .pagination ul li > div {
  border-color: #22aaa1;
}

.sandbox .pagination ul li.active > div {
  background-color: #22aaa1;
}

/* [project]/src/components/elements/date-epoch-input/date-epoch-input.scss.css [client] (css) */
.date-epoch-input {
  flex: 1;
  margin: 0 8px 0 0;
  display: flex;
}

.date-epoch-input .input-div {
  flex: 1;
  height: 40px;
  margin: 0 8px 0 0;
  position: relative;
}

.date-epoch-input .input-div .active {
  z-index: 10;
  height: 30px;
  position: absolute;
  top: 0;
}

.date-epoch-input .input-div .sub {
  z-index: 10;
  height: 11px;
  margin: 0;
  font-size: 10px;
  line-height: 11px;
  position: absolute;
  bottom: 0;
}

.date-epoch-input .input-div .active:hover, .date-epoch-input .input-div .active:focus, .date-epoch-input .input-div .sub:hover, .date-epoch-input .input-div .sub:focus {
  z-index: 15;
}

.date-epoch-input .toggle-div {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  width: 40px;
  height: 40px;
  padding: 4px;
}

.date-epoch-input .toggle-div:hover {
  border-color: #c8c8c8;
  box-shadow: inset 0 0 250px #00000026;
}

.date-epoch-input .toggle-div:active {
  border-color: #b4b4b4;
  box-shadow: inset 0 0 250px #0000004d;
}

.date-epoch-input .toggle-div svg {
  width: 100%;
  height: 100%;
}

/* [project]/src/components/elements/copy-input/copy-input.scss.css [client] (css) */
.copy-input {
  background-color: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  margin: 12px 0;
  line-height: 40px;
  display: flex;
}

.copy-input .display {
  padding: 0 8px;
}

.copy-input input {
  border: 0;
  flex: 1;
}

.copy-input textarea {
  border: 0;
  margin: 0;
}

.copy-input .copy {
  cursor: pointer;
  color: #000;
  justify-content: center;
  align-items: center;
  width: 40px;
  font-size: 0;
  display: flex;
}

.copy-input .copy:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.copy-input .copy:active {
  box-shadow: inset 0 0 250px #0000004d;
}

/* [project]/src/components/views/world-builder/world-builder.scss.css [client] (css) */
.world-builder-comp {
  padding: 40px 20px;
  position: relative;
}

.world-builder-comp .mobile-toggles {
  display: none;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .mobile-toggles {
    display: block;
  }

  .world-builder-comp {
    padding: 20px 0;
  }
}

.world-builder-comp {
  margin: 0 auto;
}

.world-builder-comp.expand {
  padding: 4px;
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 779px) {
  .world-builder-comp.expand {
    padding: 0;
  }
}

.world-builder-comp.expand {
  z-index: 1500;
  background-color: #e4edf6;
  width: 100vw;
  height: 100vh;
}

.world-builder-comp .world-loading-overlay {
  z-index: 1000;
  background-color: #00000040;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.world-builder-comp .world-loading-overlay.show {
  opacity: 1;
  width: 100%;
  height: 100%;
  transition: opacity .3s;
}

.world-builder-comp .world-loading-overlay.show .world-loading-overlay-inner {
  min-width: 200px;
  min-height: 200px;
  transform: scale(1);
}

.world-builder-comp .world-loading-overlay.hide {
  opacity: 0;
  width: 0;
  height: 0;
  transition: opacity .15s, height 0s .15s, width 0s .15s;
}

.world-builder-comp .world-loading-overlay .world-loading-overlay-inner {
  background-color: #fff;
  border-radius: 24px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 25%;
  padding: 20px;
  transition: transform .2s;
  display: flex;
  transform: scale(.5);
  box-shadow: 0 3px 8px #00000080;
}

.world-builder-comp .world-loading-overlay .world-loading-overlay-inner .top {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.world-builder-comp .world-loading-overlay .world-loading-overlay-inner .bottom {
  height: 40px;
  line-height: 40px;
}

.world-builder-comp .world-container {
  flex-flow: column;
  display: flex;
  position: relative;
}

.world-builder-comp .world-container .top-bar {
  color: #fff;
  background-color: #323232;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 28px;
  display: flex;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .top-bar {
    border-radius: 0;
  }
}

.world-builder-comp .world-container .top-bar .text {
  padding: 0 4px;
  line-height: 14px;
}

.world-builder-comp .world-container .top-bar .right {
  display: flex;
}

.world-builder-comp .world-container .top-bar .right .button-element {
  width: 24px;
  height: 24px;
  margin: 0 2px 0 12px;
}

.world-builder-comp .world-container .top-bar .right .button-element .background {
  background-color: #fff;
}

.world-builder-comp .world-container .top-bar .right .button-element .button-status-image {
  width: 24px;
  height: 24px;
  top: 0;
  left: 0;
}

.world-builder-comp .world-container .top-bar .right .button-element .button-status-image svg .real-path {
  fill: #333 !important;
}

.world-builder-comp .world-container .top-bar .right .button-element button {
  height: inherit;
  width: inherit;
}

.world-builder-comp .world-container .top-bar .right .button-element button:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.world-builder-comp .world-container .top-bar .right .button-element button:active {
  box-shadow: inset 0 0 250px #0000004d;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .top-bar {
    height: 40px;
    padding: 0 4px;
  }

  .world-builder-comp .world-container .top-bar .right .button-element {
    width: 32px;
    height: 32px;
  }

  .world-builder-comp .world-container .top-bar .right .button-element .button-status-image {
    width: 32px;
    height: 32px;
    top: 4px;
    left: 4px;
  }

  .world-builder-comp .world-container .top-bar .right .button-element .button-status-image svg .real-path {
    fill: #333 !important;
  }

  .world-builder-comp .world-container .top-bar .right .button-element button {
    height: inherit;
    width: inherit;
  }

  .world-builder-comp .world-container .top-bar .right .button-element button:hover {
    box-shadow: inset 0 0 250px #00000026;
  }

  .world-builder-comp .world-container .top-bar .right .button-element button:active {
    box-shadow: inset 0 0 250px #0000004d;
  }
}

.world-builder-comp .world-container .mobile-toggles {
  height: 40px;
  margin: 4px 0;
  display: none;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .mobile-toggles {
    display: flex;
  }
}

.world-builder-comp .world-container .mobile-toggles .left-toggle, .world-builder-comp .world-container .mobile-toggles .center-toggle, .world-builder-comp .world-container .mobile-toggles .right-toggle {
  cursor: pointer;
  background-color: #0003;
  border-radius: 12px;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  margin: 0 4px;
  padding: 0 12px;
  display: flex;
}

.world-builder-comp .world-container .mobile-toggles .left-toggle:hover:not(.open), .world-builder-comp .world-container .mobile-toggles .center-toggle:hover:not(.open), .world-builder-comp .world-container .mobile-toggles .right-toggle:hover:not(.open) {
  background-color: #00000059;
}

.world-builder-comp .world-container .mobile-toggles .left-toggle:hover:not(.open) svg .real-path, .world-builder-comp .world-container .mobile-toggles .center-toggle:hover:not(.open) svg .real-path, .world-builder-comp .world-container .mobile-toggles .right-toggle:hover:not(.open) svg .real-path {
  fill: #fff;
}

.world-builder-comp .world-container .mobile-toggles .left-toggle:active:not(.open), .world-builder-comp .world-container .mobile-toggles .center-toggle:active:not(.open), .world-builder-comp .world-container .mobile-toggles .right-toggle:active:not(.open) {
  background-color: #000000b3;
}

.world-builder-comp .world-container .mobile-toggles .left-toggle:active:not(.open) svg .real-path, .world-builder-comp .world-container .mobile-toggles .center-toggle:active:not(.open) svg .real-path, .world-builder-comp .world-container .mobile-toggles .right-toggle:active:not(.open) svg .real-path {
  fill: #fff;
}

.world-builder-comp .world-container .mobile-toggles .left-toggle.open, .world-builder-comp .world-container .mobile-toggles .center-toggle.open, .world-builder-comp .world-container .mobile-toggles .right-toggle.open {
  background-color: #1d6998;
}

.world-builder-comp .world-container .mobile-toggles .left-toggle.open svg .real-path, .world-builder-comp .world-container .mobile-toggles .center-toggle.open svg .real-path, .world-builder-comp .world-container .mobile-toggles .right-toggle.open svg .real-path {
  fill: #fff;
}

.world-builder-comp .world-container .mobile-toggles .left-toggle.open:hover, .world-builder-comp .world-container .mobile-toggles .center-toggle.open:hover, .world-builder-comp .world-container .mobile-toggles .right-toggle.open:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.world-builder-comp .world-container .mobile-toggles .left-toggle.open:active, .world-builder-comp .world-container .mobile-toggles .center-toggle.open:active, .world-builder-comp .world-container .mobile-toggles .right-toggle.open:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.world-builder-comp .world-container .mobile-toggles .left-toggle .carrot, .world-builder-comp .world-container .mobile-toggles .center-toggle .carrot, .world-builder-comp .world-container .mobile-toggles .right-toggle .carrot {
  width: 24px;
  height: 24px;
}

.world-builder-comp .world-container .world-main {
  min-height: 80vh;
  max-height: 80vh;
  display: flex;
}

.world-builder-comp .world-container .world-main > .left, .world-builder-comp .world-container .world-main > .right {
  flex: 3;
  min-width: 120px;
  max-width: 280px;
  position: relative;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .world-main > .left, .world-builder-comp .world-container .world-main > .right {
    flex: auto;
  }
}

.world-builder-comp .world-container .world-main > .left, .world-builder-comp .world-container .world-main > .right {
  overflow: hidden;
}

.world-builder-comp .world-container .world-main > .left .toggle, .world-builder-comp .world-container .world-main > .right .toggle {
  cursor: pointer;
  background-color: #00000006;
  border-radius: 8px;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 20px;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .world-main > .left .toggle, .world-builder-comp .world-container .world-main > .right .toggle {
    display: none;
  }
}

.world-builder-comp .world-container .world-main > .left .toggle .carrot, .world-builder-comp .world-container .world-main > .right .toggle .carrot {
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  margin: 12px 0;
  display: flex;
}

.world-builder-comp .world-container .world-main > .left .toggle .carrot svg, .world-builder-comp .world-container .world-main > .right .toggle .carrot svg {
  transform: scale(1.5);
}

.world-builder-comp .world-container .world-main > .left .toggle:hover, .world-builder-comp .world-container .world-main > .right .toggle:hover {
  background-color: #00000059;
}

.world-builder-comp .world-container .world-main > .left .toggle:hover svg .real-path, .world-builder-comp .world-container .world-main > .right .toggle:hover svg .real-path {
  fill: #fff;
}

.world-builder-comp .world-container .world-main > .left .toggle:active, .world-builder-comp .world-container .world-main > .right .toggle:active {
  background-color: #000000b3;
}

.world-builder-comp .world-container .world-main > .left .toggle:active svg .real-path, .world-builder-comp .world-container .world-main > .right .toggle:active svg .real-path {
  fill: #fff;
}

.world-builder-comp .world-container .world-main > .left.toggled, .world-builder-comp .world-container .world-main > .right.toggled {
  flex: 0;
  width: 68px;
  min-width: 68px;
  max-width: 68px;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .world-main > .left.toggled, .world-builder-comp .world-container .world-main > .right.toggled {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
  }
}

.world-builder-comp .world-container .world-main > .left .rows {
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 100%;
  overflow-y: scroll;
}

.world-builder-comp .world-container .world-main > .left .rows::-webkit-scrollbar {
  display: none;
}

.world-builder-comp .world-container .world-main > .left {
  padding-right: 20px;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .world-main > .left {
    padding-right: 0;
  }
}

.world-builder-comp .world-container .world-main > .left .toggle {
  right: 0;
}

.world-builder-comp .world-container .world-main > .left.toggled .row {
  justify-content: center;
}

.world-builder-comp .world-container .world-main > .left.toggled .row .icon {
  margin-right: 0;
}

.world-builder-comp .world-container .world-main > .left.toggled .row .text {
  display: none;
}

.world-builder-comp .world-container .world-main > .right {
  padding-left: 20px;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .world-main > .right {
    padding-left: 0;
  }
}

.world-builder-comp .world-container .world-main > .right .world-settings-toggle-div {
  display: none;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-settings {
  justify-content: center;
  align-items: center;
  display: flex;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-settings form {
  display: none;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-settings-toggle-div {
  display: flex;
}

.world-builder-comp .world-container .world-main > .right.toggled .table-element .no-results {
  text-align: center;
  padding: 20px 0;
  font-size: 12px;
}

.world-builder-comp .world-container .world-main > .right.toggled .results-count {
  display: none;
}

.world-builder-comp .world-container .world-main > .right.toggled .results-count-simple {
  display: block;
}

.world-builder-comp .world-container .world-main > .right.toggled .pagination li:not(.active) {
  display: none;
}

.world-builder-comp .world-container .world-main > .right.toggled .content-block {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.world-builder-comp .world-container .world-main > .right.toggled .content-block::-webkit-scrollbar {
  display: none;
}

.world-builder-comp .world-container .world-main > .right.toggled .table-element .footer-block {
  padding: 8px 4px;
}

.world-builder-comp .world-container .world-main > .right.toggled .table-element .footer-block .pagination li {
  margin: 0;
}

.world-builder-comp .world-container .world-main > .right .toggle {
  left: 0;
}

.world-builder-comp .world-container .world-main > .right.hide-other {
  flex: 0;
  width: 0;
  max-width: 0;
  display: none;
  overflow: hidden;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .world-main > .right .world-builder-right-comp .inner-search-bar-buttons-left {
    display: none;
  }

  .world-builder-comp .world-container .world-main > .right .world-builder-right-comp .table-element table tr {
    margin: 0;
  }

  .world-builder-comp .world-container .world-main > .right .world-builder-right-comp .table-element td:before {
    display: none;
  }

  .world-builder-comp .world-container .world-main > .right .world-builder-right-comp .td-c, .world-builder-comp .world-container .world-main > .right .world-builder-right-comp .td-c .row-item {
    width: 100%;
  }
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .world-settings {
  overflow-x: hidden;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .world-settings label {
  white-space: nowrap;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .world-settings textarea {
  padding: 4px 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .world-settings select {
  padding: 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .world-settings .button-element {
  width: 40px;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .world-settings .button-element input {
  font-size: 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element .center-block .main-block .content-block {
  padding-bottom: 112px;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element .search-block .search-bar-buttons-right {
  margin: 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .carousel .carousel-container > * {
  overflow: hidden;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element .center-block .search-block form .button-element {
  width: 40px;
  margin: 8px 4px;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element .center-block .search-block form .button-element button {
  padding: 0;
  font-size: 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .search-bar-buttons-right {
  font-size: 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element table thead .header {
  height: 20px;
  font-size: 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element table thead .header th {
  margin-right: 28px;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element table thead .header th.order-desc {
  padding: 8px 2px 0 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element table thead .header th.order-asc {
  padding: 0 2px 8px 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element table thead .header th {
  width: 100%;
  padding: 0;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .table-element table thead .header th:before {
  position: relative;
}

.world-builder-comp .world-container .world-main > .right.toggled .world-builder-right-comp .row-item .text {
  display: none;
}

.world-builder-comp .world-container .world-main .left .row {
  color: #1d6998;
  background-color: #fff;
  border-radius: 8px;
  align-items: center;
  margin: 4px;
  padding: 8px;
  display: flex;
  box-shadow: 0 1px 3px #0000001a;
}

.world-builder-comp .world-container .world-main .left .row:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.world-builder-comp .world-container .world-main .left .row .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.world-builder-comp .world-container .world-main .left .row .icon.med {
  transform: scale(1.3);
}

.world-builder-comp .world-container .world-main .left .row .icon.big {
  transform: scale(1.4);
}

.world-builder-comp .world-container .world-main .left .row .icon svg {
  width: 100%;
  height: 100%;
}

.world-builder-comp .world-container .world-main .left .row .icon svg .real-path {
  fill: #1d6998;
}

.world-builder-comp .world-container .world-main .left .row:hover, .world-builder-comp .world-container .world-main .left .row.active {
  cursor: pointer;
  color: #fff;
  background-color: #1d6998;
}

.world-builder-comp .world-container .world-main .left .row:hover .icon svg .real-path, .world-builder-comp .world-container .world-main .left .row.active .icon svg .real-path {
  fill: #fff;
}

.world-builder-comp .world-container .world-main > .center {
  flex-flow: column;
  flex: 8;
  display: flex;
  overflow: hidden;
}

.world-builder-comp .world-container .world-main > .center .center-toggle {
  display: flex;
}

.world-builder-comp .world-container .world-main > .center .center-toggle.hide {
  display: none;
}

.world-builder-comp .world-container .world-main > .center .center-toggle {
  background-color: #00000006;
  width: 100%;
  height: 20px;
  position: relative;
}

@media screen and (max-width: 779px) {
  .world-builder-comp .world-container .world-main > .center .center-toggle {
    display: none;
  }
}

.world-builder-comp .world-container .world-main > .center .center-toggle {
  cursor: pointer;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
}

.world-builder-comp .world-container .world-main > .center .center-toggle .carrot {
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  margin: 0 12px;
  display: flex;
}

.world-builder-comp .world-container .world-main > .center .center-toggle .carrot svg {
  transform: scale(1.5);
}

.world-builder-comp .world-container .world-main > .center .center-toggle:hover {
  background-color: #00000059;
}

.world-builder-comp .world-container .world-main > .center .center-toggle:hover svg .real-path {
  fill: #fff;
}

.world-builder-comp .world-container .world-main > .center .center-toggle:active {
  background-color: #000000b3;
}

.world-builder-comp .world-container .world-main > .center .center-toggle:active svg .real-path {
  fill: #fff;
}

.world-builder-comp .world-container .world-main > .center .top {
  background-color: #333;
  border-radius: 4px;
  transition: transform .3s;
  box-shadow: 0 1px 3px #00000040;
}

.world-builder-comp .world-container .world-main > .center .top.hide-other {
  height: 0;
  display: none;
  overflow: hidden;
}

.world-builder-comp .world-container .world-main > .center.toggled .top .world-builder-image-carousel {
  height: 0;
}

.world-builder-comp .world-container .world-main > .center .bottom {
  flex: 6;
  overflow: auto;
}

.world-builder-comp.expand .world-container .world-main {
  min-height: calc(100vh - 28px);
  max-height: calc(100vh - 28px);
}

@media screen and (max-width: 779px) {
  .world-builder-comp.expand .world-container .world-main {
    min-height: calc(100vh - 88px);
    max-height: calc(100vh - 88px);
    min-height: calc(var(--vh, 1vh) * 100 - 40px - 48px);
    max-height: calc(var(--vh, 1vh) * 100 - 40px - 48px);
  }
}

/* [project]/src/components/views/world-builder/world-builder-right.scss.css [client] (css) */
@media screen and (max-width: 779px) {
  .right:not(.toggled) .world-builder-right-comp .carousel .slide .world-settings {
    padding: 4px 12px 12px;
  }
}

.world-builder-right-comp {
  height: 100%;
}

.world-builder-right-comp .table-element .center-block .main-block .content-block table td {
  padding: 0;
}

@media screen and (max-width: 779px) {
  .world-builder-right-comp .table-element .search-block .search-bar-buttons-right {
    margin: 0;
  }
}

.world-builder-right-comp .row-item {
  align-items: center;
  padding: 4px;
  display: flex;
}

@media screen and (max-width: 779px) {
  .world-builder-right-comp .row-item {
    padding: 4px 2px 4px 6px;
  }

  .world-builder-right-comp .row-item .text {
    margin: 0 4px;
  }
}

.world-builder-right-comp .row-item .icon {
  margin: 0 4px;
}

@media screen and (max-width: 779px) {
  .world-builder-right-comp .row-item .icon {
    margin: 0;
  }
}

.world-builder-right-comp .row-item .icon {
  border-radius: 3px;
  width: 40px;
  height: 40px;
  box-shadow: 0 1px 3px #00000040;
}

.world-builder-right-comp .row-item .icon img, .world-builder-right-comp .row-item .icon svg {
  border-radius: 3px;
  width: 100%;
  height: 100%;
}

.world-builder-right-comp .row-item .icon svg {
  fill: #555;
}

.world-builder-right-comp .row-item .text {
  text-align: left;
  flex: 1;
}

.world-builder-right-comp .td-c {
  position: relative;
}

.world-builder-right-comp .td-c .active {
  background-color: #1d699833;
}

.world-builder-right-comp .td-c .active:before {
  content: "h";
  color: #0000;
  background-color: #1d6998;
  width: 4px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.world-builder-right-comp .table-element .left-block:not(.hide) {
  display: none;
}

.world-builder-right-comp .table-element .center-block .main-block .content-block {
  padding-bottom: 100px;
  overflow: auto;
}

.world-builder-right-comp .table-element .center-block .main-block .content-block thead {
  z-index: 50;
  background-color: #fff;
  position: sticky;
  top: 0;
}

.world-builder-right-comp .table-element .center-block .main-block .content-block table th {
  height: auto;
}

.world-builder-right-comp .table-element .center-block .search-block .results-count, .world-builder-right-comp .table-element .center-block .search-block .results-count-simple {
  text-align: center;
  padding: 0;
  font-size: 10px;
}

.world-builder-right-comp .table-element .center-block .search-bar-buttons-left, .world-builder-right-comp .table-element .center-block .search-block > form .search-conditions.singular:not(.hide) select {
  display: none;
}

.world-builder-right-comp .table-element .center-block .search-block form {
  flex-flow: column-reverse;
  display: flex;
}

.world-builder-right-comp .table-element .center-block .search-block form .button-element {
  width: 100%;
  margin: 12px 0;
}

.world-builder-right-comp .table-element .center-block .search-block form .button-element button {
  padding: 0 28px 0 4px;
}

.world-builder-right-comp .table-element .center-block .search-bar-buttons-right {
  display: block;
}

.world-builder-right-comp .table-element .center-block .search-bar-buttons-right .advanced-search, .world-builder-right-comp .table-element .center-block .search-bar-buttons-right .search {
  display: none;
}

.world-builder-right-comp .table-element .center-block .loading-overlay {
  top: 0;
}

.world-builder-right-comp .search-conditions.singular input {
  height: 24px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 24px;
}

.world-builder-right-comp .carousel, .world-builder-right-comp .carousel .carousel-container, .world-builder-right-comp .carousel .slide {
  height: 100%;
}

.world-builder-right-comp .carousel .slide .world-settings {
  padding: 0 0 20px;
  overflow: auto;
}

.world-builder-right-comp .carousel .slide .world-settings .world-settings-toggle-div {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #fff;
  cursor: pointer;
  background-color: #1d6998;
  border-radius: 3px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 40px;
  margin: 4px;
  padding: 8px 0;
}

.world-builder-right-comp .carousel .slide .world-settings .world-settings-toggle-div span {
  display: block;
}

.world-builder-right-comp .carousel .slide .world-settings .world-settings-toggle-div span.icon {
  margin: 8px 0 0;
}

.world-builder-right-comp .carousel .slide .world-settings .world-settings-toggle-div span.icon svg {
  fill: #fff;
}

.world-builder-right-comp .carousel .slide .world-settings .world-settings-toggle-div:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.world-builder-right-comp .carousel .slide .world-settings .world-settings-toggle-div:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.world-builder-right-comp .carousel .slide .world-settings .button-element input {
  padding-right: 40px;
}

.world-builder-right-comp .carousel .slide > div, .world-builder-right-comp .carousel .slide > div .table-element {
  height: 100%;
}

.world-builder-right-comp .carousel .slide .main-block {
  flex-flow: column;
  height: 100%;
  display: flex;
}

.world-builder-right-comp .carousel .slide .main-block .content-block {
  background-color: #fff;
  flex: 1;
}

.world-builder-right-comp .label-item-input {
  margin: 8px 0;
}

.world-builder-right-comp .label-item-input .input-box {
  flex-flow: column;
  justify-content: center;
  display: flex;
}

.world-builder-right-comp .label-item-input .input-box label {
  text-align: left;
  flex: 8;
  line-height: 18px;
}

.world-builder-right-comp .label-item-input .input-box .spacer {
  flex: 1;
}

.world-builder-right-comp .label-item-input .input-box .inputs {
  flex: 8;
}

.world-builder-right-comp .label-item-input .input-box .inputs select {
  width: 100%;
  margin: 0;
}

.world-builder-right-comp .label-item-input .input-box .custom-input-box {
  margin: 4px 0 0;
}

.world-builder-right-comp .label-item-input .input-box .custom-input-box input {
  margin: 0;
  position: relative;
}

.world-builder-right-comp .hide-settings {
  margin: 12px 0 0;
}

.world-builder-right-comp .hide-settings button {
  padding-right: 40px;
}

/* [project]/src/components/views/world-builder/world-builder-center.scss.css [client] (css) */
.world-builder-center-comp {
  overflow: auto;
}

.world-builder-center-comp .slide {
  padding: 12px;
}

.world-builder-center-comp .slide .coming-soon-item, .world-builder-center-comp .slide .item-empty {
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  display: flex;
}

.world-builder-center-comp .slide .coming-soon-item > div, .world-builder-center-comp .slide .item-empty > div {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 3px #0000001a;
}

@media screen and (max-width: 779px) {
  .world-builder-center-comp .slide {
    padding: 4px;
  }
}

.world-builder-center-comp .form-builder .note {
  font-size: 12px;
}

.world-builder-center-comp .form-builder .buttons-top {
  justify-content: space-between;
  display: flex;
}

.world-builder-center-comp .form-builder .buttons-top .button-element input {
  padding-right: 40px;
}

.world-builder-center-comp .form-builder .buttons-top .right {
  margin: 0 0 12px;
  display: flex;
}

.world-builder-center-comp .form-builder .buttons-top .right .switch-toggle {
  text-align: center;
  margin: 0;
  font-size: 12px;
}

@media screen and (max-width: 320px) {
  .world-builder-center-comp .form-builder .buttons-top .right {
    flex-flow: column;
    align-items: end;
  }

  .world-builder-center-comp .form-builder .buttons-top .right .switch-toggle {
    margin-bottom: 12px;
  }
}

.world-builder-center-comp .form-builder .buttons {
  justify-content: space-between;
  display: flex;
}

.world-builder-center-comp .form-builder .buttons .left .delete {
  width: 40px;
}

.world-builder-center-comp .form-builder .buttons .button-element button, .world-builder-center-comp .form-builder .buttons .button-element input {
  padding-right: 40px;
}

.world-builder-center-comp .family-tree-button {
  padding: 0;
  display: flex;
}

.world-builder-center-comp .family-tree-button .text {
  margin: 0 0 0 12px;
  line-height: 40px;
}

@media screen and (max-width: 779px) {
  .world-builder-center-comp .family-tree-button .text {
    display: none;
  }
}

.world-builder-center-comp .family-tree-button .icon {
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.world-builder-center-comp .family-tree-button .icon svg .real-path {
  fill: #fff;
}

.world-builder-center-comp .name-gender-div {
  display: flex;
}

.world-builder-center-comp .name-gender-div .name-div {
  flex: 1;
}

.world-builder-center-comp .name-gender-div .gender-buttons {
  flex-flow: column;
  margin: 0 8px;
  display: flex;
}

.world-builder-center-comp .name-gender-div .gender-buttons label {
  color: #0000;
}

.world-builder-center-comp .name-gender-div .gender-buttons .gender-buttons-container {
  height: 40px;
  display: flex;
}

.world-builder-center-comp .name-gender-div .gender-buttons .gender-buttons-container .butonn-div {
  cursor: pointer;
  background-color: #c8c8c8;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  display: flex;
  box-shadow: 0 2px 5px #00000040;
}

.world-builder-center-comp .name-gender-div .gender-buttons .gender-buttons-container .butonn-div:hover {
  box-shadow: 0 2px 5px #00000080;
}

.world-builder-center-comp .name-gender-div .gender-buttons .gender-buttons-container .butonn-div.active {
  background-color: #1d6998;
  box-shadow: inset 0 2px 5px #000c;
}

.world-builder-center-comp .name-gender-div .gender-buttons .gender-buttons-container .butonn-div.active svg .real-path {
  fill: #fff;
}

.world-builder-center-comp .name-gender-div .gender-buttons .gender-buttons-container .butonn-div:active {
  box-shadow: inset 0 2px 5px 2px #000;
}

.world-builder-center-comp .name-gender-div .gender-buttons .gender-buttons-container .butonn-div:active svg {
  margin-top: -2px;
}

@media screen and (max-width: 420px) {
  .world-builder-center-comp .name-gender-div {
    flex-flow: column;
  }

  .world-builder-center-comp .name-gender-div .gender-buttons {
    margin: 0;
  }

  .world-builder-center-comp .name-gender-div .gender-buttons label {
    display: none;
  }

  .world-builder-center-comp .name-gender-div .gender-buttons .gender-buttons-container {
    justify-content: center;
    align-items: center;
    margin: 0 0 12px;
  }

  .world-builder-center-comp .name-gender-div .gender-buttons .gender-buttons-container .butonn-div {
    margin: 0 12px;
  }
}

/* [project]/src/components/views/world-builder/world-builder-images.scss.css [client] (css) */
.world-builder-image-comp {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.world-builder-image-comp .modal-content {
  padding: 0;
}

.world-builder-image-comp .world-builder-image-header.carousel-header {
  width: 100%;
  margin: 0;
}

.world-builder-image-comp .world-builder-image-header.carousel-header .carousel-header-underline-container {
  z-index: 90;
  height: 60px;
  overflow: visible;
}

.world-builder-image-comp .world-builder-image-header.carousel-header .carousel-header-underline-container .carousel-header-underline {
  background-color: #ffffff59;
  border-radius: 4px;
  height: 60px;
}

.world-builder-image-comp .world-builder-image-header.carousel-header .items {
  z-index: 100;
  position: relative;
}

.world-builder-image-comp .world-builder-image-header.carousel-header .items > div {
  min-width: 60px;
  min-height: 60px;
}

.world-builder-image-comp .world-builder-image-header.carousel-header .items > div:hover {
  background-color: #ffffff26;
}

.world-builder-image-comp .carousel.world-builder-image-carousel {
  width: 280px;
  height: 280px;
}

.world-builder-image-comp .add-div {
  justify-content: center;
  align-items: center;
  display: flex;
}

.world-builder-image-comp .add-div .button-element {
  width: 32px;
  height: 32px;
}

.world-builder-image-comp .add-div .button-element .button-status-image {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  top: 0;
  right: 0;
}

.world-builder-image-comp .add-div .button-element button {
  width: 100%;
  height: 100%;
}

.world-builder-image-comp .add-div.image {
  height: 280px;
}

.world-builder-image-comp .add-div.image .button-element {
  width: 50%;
  height: 50%;
}

.world-builder-image-comp .add-div.image .button-element .button-status-image svg {
  width: 60px;
  height: 60px;
}

.world-builder-image-comp .world-builder-image-header, .world-builder-image-comp .world-builder-image-header .items {
  transform: rotateX(180deg);
}

.world-builder-image-comp .world-builder-image-header {
  scrollbar-color: #ccc #333;
  overflow: auto;
}

.world-builder-image-comp .world-builder-image-header .header-slide {
  justify-content: center;
  align-items: center;
  max-width: 60px;
  max-height: 60px;
  padding: 8px;
  display: flex;
}

.world-builder-image-comp .world-builder-image-header .header-slide.active {
  cursor: pointer;
}

.world-builder-image-comp .world-builder-image-header .header-slide.active:active {
  box-shadow: inset 0 0 250px #ffffff80;
}

.world-builder-image-comp .world-builder-image-header .header-slide .aspect-ratio {
  border-radius: 12px;
  height: 40px;
  max-height: 40px;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio .test-div {
  z-index: 25;
  background-color: #fff;
  height: 20px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio img {
  object-fit: cover;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 1px 3px #0000001a;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.zoom img {
  width: 200%;
  height: 200%;
  display: block;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.top-left img {
  top: 0;
  left: 0;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.top-right img {
  top: 0;
  left: -100%;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.bottom-left img {
  top: -100%;
  left: 0;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.bottom-right img {
  top: -100%;
  left: -100%;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.aspect-ratio-1-1 {
  padding-top: 100%;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.aspect-ratio-4-5 {
  padding-top: 125%;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.aspect-ratio-2-3 {
  padding-top: 150%;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.aspect-ratio-4-7 {
  padding-top: 175%;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.aspect-ratio-5-4 {
  padding-top: 80%;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.aspect-ratio-3-2 {
  padding-top: 66.67%;
}

.world-builder-image-comp .world-builder-image-header .aspect-ratio.aspect-ratio-7-4 {
  padding-top: 57.14%;
}

.world-builder-image-comp .world-builder-image-carousel .slide {
  padding: 12px;
  position: relative;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio img {
  z-index: 50;
  object-fit: cover;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 1px 3px #0000001a;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio.zoom img {
  width: 200%;
  height: 200%;
  display: block;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio.top-left img {
  top: 0;
  left: 0;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio.top-right img {
  top: 0;
  left: -100%;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio.bottom-left img {
  top: -100%;
  left: 0;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio.bottom-right img {
  top: -100%;
  left: -100%;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio-1-1 {
  padding-top: 100%;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio-4-5 {
  padding-top: 125%;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio-2-3 {
  padding-top: 150%;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio-4-7 {
  padding-top: 175%;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio-5-4 {
  padding-top: 80%;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio-3-2 {
  padding-top: 66.67%;
}

.world-builder-image-comp .world-builder-image-carousel .slide .aspect-ratio-7-4 {
  padding-top: 57.14%;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable {
  z-index: 80;
  width: 100%;
  height: 100%;
  padding: 12px 52px;
  position: absolute;
  top: 0;
  left: 0;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container {
  flex-flow: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container .slide-clickable-top {
  cursor: pointer;
  flex: 1;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container .slide-clickable-top:hover {
  box-shadow: inset 0 0 250px #0003;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container .slide-clickable-top:active {
  box-shadow: inset 0 0 250px #0006;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container .slide-clickable-bottom {
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container .slide-clickable-bottom .button-element {
  width: 40px;
  margin: 0 12px;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container .slide-clickable-bottom .button-element.clearish .background {
  background-color: #0009;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container .slide-clickable-bottom .copy-button .copy-input {
  background-color: #0009;
  border-width: 0;
  width: 40px;
  height: 40px;
  margin: 0;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container .slide-clickable-bottom .copy-button .copy-input input {
  display: none;
}

.world-builder-image-comp .world-builder-image-carousel .slide .slide-clickable .slide-clickable-container .slide-clickable-bottom .copy-button .copy-input svg .real-path {
  fill: #fff;
}

.world-builder-image-comp .buttons {
  justify-content: space-between;
  padding: 0 12px 12px;
  display: flex;
}

.world-builder-image-comp .buttons > div {
  display: flex;
}

/* [project]/src/components/common/modal/confirm-modal.scss.css [client] (css) */
.center-div-outer .center-div-middle > :first-child.confirm-modal-main {
  padding: 0;
}

.confirm-modal {
  z-index: 210;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.confirm-modal.hide-confirm-modal {
  width: 0;
  height: 0;
  transition: height 0s .35s, width 0s .35s, padding 0s .35s, overflow 0s .35s;
}

.confirm-modal.hide-confirm-modal .confirm-modal-gray-screen {
  opacity: 0;
}

.confirm-modal.hide-confirm-modal :first-child.confirm-modal-main {
  overflow: hidden;
}

.confirm-modal.show-confirm-modal {
  width: 100%;
  height: 100%;
}

.confirm-modal.show-confirm-modal .confirm-modal-gray-screen {
  opacity: 1;
}

.confirm-modal .confirm-modal-header {
  background-color: #f0f0f0;
  padding: 8px;
  box-shadow: 0 1px 3px #0003;
}

.confirm-modal .confirm-modal-header h3 {
  margin: 0;
}

.confirm-modal .confirm-modal-buttons {
  background-color: #f0f0f0;
  justify-content: space-between;
  padding: 8px;
  display: flex;
  box-shadow: 0 -1px 3px #0003;
}

.confirm-modal .confirm-modal-buttons .button {
  width: auto;
}

.confirm-modal .confirm-modal-gray-screen {
  z-index: 205;
  opacity: 1;
  background: #000000a6;
  width: 100%;
  height: 100%;
  transition: opacity .35s;
  position: absolute;
}

.confirm-modal .confirm-modal-main {
  z-index: 208;
  background: #fff;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.confirm-modal .confirm-modal-main .confirm-modal-close-button {
  cursor: pointer;
  border-radius: 2px;
  width: 40px;
  height: 40px;
  padding: 4px;
  position: absolute;
  top: 0;
  right: 0;
}

.confirm-modal .confirm-modal-main .confirm-modal-close-button svg {
  width: 100%;
  height: 100%;
}

.confirm-modal .confirm-modal-main .confirm-modal-close-button svg .real-path {
  fill: #1d6998;
}

.confirm-modal .confirm-modal-main .confirm-modal-close-button {
  z-index: 150;
}

.confirm-modal .confirm-modal-main .confirm-modal-close-button:hover {
  box-shadow: inset 0 0 250px #0000001a;
}

.confirm-modal .confirm-modal-main .confirm-modal-close-button:active {
  box-shadow: inset 0 0 250px #0003;
}

.confirm-modal .confirm-modal-main .confirm-modal-content {
  max-height: calc(90vh - 48px);
  padding: 20px;
  position: relative;
}

@media screen and (max-width: 779px) {
  .confirm-modal .confirm-modal-main .confirm-modal-content {
    max-height: 80vh;
  }
}

.confirm-modal .confirm-modal-main .confirm-modal-content {
  overflow: auto;
}

@media screen and (max-width: 779px) {
  .confirm-modal.hide-confirm-modal .confirm-modal-main:first-child {
    margin-top: 100vh;
    transition: margin-top .2s cubic-bezier(.95, .29, .59, .79), transform .2s cubic-bezier(.95, .29, .59, .79);
    transform: scale(.9);
  }

  .confirm-modal.show-confirm-modal .confirm-modal-main:first-child {
    margin-top: 0;
    transition: margin-top .2s cubic-bezier(.95, .29, .59, .79), transform .2s cubic-bezier(.95, .29, .59, .79);
    transform: scale(1);
  }
}

@media screen and (min-width: 780px) {
  .confirm-modal.hide-confirm-modal .confirm-modal-main {
    opacity: 0;
    transition: transform .12s cubic-bezier(.65, .22, .13, .93), opacity .12s cubic-bezier(.65, .22, .13, .93);
    transform: scale(.8);
  }

  .confirm-modal.show-confirm-modal .confirm-modal-main {
    opacity: 1;
    transition: transform .2s cubic-bezier(.65, .22, .13, .93), opacity .2s cubic-bezier(.65, .22, .13, .93);
    transform: scale(1);
  }
}

.sandbox .confirm-modal .confirm-modal-main .confirm-modal-close-button svg .real-path {
  fill: #22aaa1;
}

/* [project]/src/components/views/world-builder/image-modal.scss.css [client] (css) */
.modal :first-child.modal-main.image-modal {
  max-width: 640px;
  max-height: calc(100vh - 40px);
}

@media screen and (max-width: 640px) {
  .modal :first-child.modal-main.image-modal {
    max-width: 100vw;
  }
}

.modal :first-child.modal-main.image-modal .modal-content {
  padding: 0;
}

.modal :first-child.modal-main.image-modal .carousel-header {
  margin: 0 0 8px;
  padding-right: 40px;
}

.modal :first-child.modal-main.image-modal .carousel-header .items > div {
  height: 60px;
  max-height: 60px;
}

.modal :first-child.modal-main.image-modal .image-modal-header {
  overflow: auto;
}

.modal :first-child.modal-main.image-modal .image-modal-header .carousel-header-underline-container {
  overflow: visible;
}

.modal :first-child.modal-main.image-modal .image-modal-header .header-slide {
  justify-content: center;
  align-items: center;
  min-width: 60px;
  max-width: 60px;
  max-height: 60px;
  padding: 8px;
  display: flex;
  overflow: hidden;
}

.modal :first-child.modal-main.image-modal .image-modal-header .header-slide .aspect-ratio {
  border-radius: 12px;
  height: 40px;
  max-height: 40px;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio img {
  object-fit: cover;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 1px 3px #0000001a;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.zoom img {
  width: 200%;
  height: 200%;
  display: block;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.top-left img {
  top: 0;
  left: 0;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.top-right img {
  top: 0;
  left: -100%;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.bottom-left img {
  top: -100%;
  left: 0;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.bottom-right img {
  top: -100%;
  left: -100%;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.aspect-ratio-1-1 {
  padding-top: 100%;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.aspect-ratio-4-5 {
  padding-top: 125%;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.aspect-ratio-2-3 {
  padding-top: 150%;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.aspect-ratio-4-7 {
  padding-top: 175%;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.aspect-ratio-5-4 {
  padding-top: 80%;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.aspect-ratio-3-2 {
  padding-top: 66.67%;
}

.modal :first-child.modal-main.image-modal .image-modal-header .aspect-ratio.aspect-ratio-7-4 {
  padding-top: 57.14%;
}

.modal :first-child.modal-main.image-modal .slide {
  padding: 12px;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio img {
  object-fit: cover;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 1px 3px #0000001a;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio.zoom img {
  width: 200%;
  height: 200%;
  display: block;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio.top-left img {
  top: 0;
  left: 0;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio.top-right img {
  top: 0;
  left: -100%;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio.bottom-left img {
  top: -100%;
  left: 0;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio.bottom-right img {
  top: -100%;
  left: -100%;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio-1-1 {
  padding-top: 100%;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio-4-5 {
  padding-top: 125%;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio-2-3 {
  padding-top: 150%;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio-4-7 {
  padding-top: 175%;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio-5-4 {
  padding-top: 80%;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio-3-2 {
  padding-top: 66.67%;
}

.modal :first-child.modal-main.image-modal .slide .aspect-ratio-7-4 {
  padding-top: 57.14%;
}

.modal :first-child.modal-main.image-modal .buttons {
  justify-content: space-between;
  padding: 0 12px 12px;
  display: flex;
}

.modal :first-child.modal-main.image-modal .buttons > div {
  display: flex;
}

/* [project]/src/components/views/world-builder/world-builder-new-item-modal.scss.css [client] (css) */
.center-div-outer .center-div-middle > :first-child.world-builder-new-item-modal {
  max-width: 720px;
}

@media screen and (max-width: 720px) {
  .center-div-outer .center-div-middle > :first-child.world-builder-new-item-modal {
    max-width: calc(100vw - 16px);
  }
}

.world-builder-new-item-modal .carousel-header {
  margin: 0;
  padding-right: 40px;
}

.world-builder-new-item-modal .note {
  font-size: 12px;
}

.world-builder-new-item-modal .buttons {
  justify-content: space-between;
  display: flex;
}

.world-builder-new-item-modal .buttons .button-element input {
  padding-right: 40px;
}

.world-builder-new-item-modal .buttons .right {
  margin: 0 0 12px;
  display: flex;
}

.world-builder-new-item-modal .buttons .right .switch-toggle {
  text-align: center;
  margin: 0;
  font-size: 12px;
}

@media screen and (max-width: 320px) {
  .world-builder-new-item-modal .buttons .right {
    flex-flow: column;
    align-items: end;
  }

  .world-builder-new-item-modal .buttons .right .switch-toggle {
    margin-bottom: 12px;
  }
}

.world-builder-new-item-modal .modal-content {
  padding: 0 !important;
}

.world-builder-new-item-modal .slide-content {
  padding: 20px;
}

.world-builder-new-item-modal .gen-results {
  border: 0 solid #969696;
  border-top-width: 1px;
  margin-top: 20px;
  padding-top: 20px;
}

.world-builder-new-item-modal .gen-results .header {
  justify-content: space-between;
  display: flex;
}

.world-builder-new-item-modal .gen-results .header h4 {
  margin: 0;
}

.world-builder-new-item-modal .gen-results .header .left, .world-builder-new-item-modal .gen-results .header .right {
  align-items: center;
  display: flex;
}

.world-builder-new-item-modal .gen-results .header .button-element button, .world-builder-new-item-modal .gen-results .header .button-element input {
  padding-right: 40px;
}

.world-builder-new-item-modal .gen-results .gen-item-results-list .gem-list-item {
  border-radius: 8px;
  margin: 12px;
  padding: 12px;
  display: flex;
  box-shadow: 0 3px 8px #000000bf;
}

.world-builder-new-item-modal .gen-results .gen-item-results-list .gem-list-item .details {
  flex: 1;
  margin-right: 12px;
}

.world-builder-new-item-modal .gen-results .gen-item-results-list .gem-list-item .details .detail:last-of-type input, .world-builder-new-item-modal .gen-results .gen-item-results-list .gem-list-item .details .detail:last-of-type textarea {
  margin-bottom: 0;
}

.world-builder-new-item-modal .gen-results .gen-item-results-list .gem-list-item .actions {
  justify-content: center;
  align-items: center;
  min-width: 40px;
  max-width: 40px;
  display: flex;
}

.world-builder-new-item-modal .gender-buttons {
  margin: 0 0 12px;
}

.world-builder-new-item-modal .gender-buttons .gender-buttons-container {
  display: flex;
}

.world-builder-new-item-modal .gender-buttons .gender-buttons-container > div {
  cursor: pointer;
  background-color: #c8c8c8;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin-right: 12px;
  padding: 0 16px 0 8px;
  line-height: 40px;
  display: flex;
  box-shadow: 0 2px 5px #00000040;
}

.world-builder-new-item-modal .gender-buttons .gender-buttons-container > div span {
  margin-left: 4px;
}

.world-builder-new-item-modal .gender-buttons .gender-buttons-container > div:hover {
  box-shadow: 0 2px 5px #00000080;
}

.world-builder-new-item-modal .gender-buttons .gender-buttons-container > div.active {
  background-color: #1d6998;
  box-shadow: inset 0 2px 5px #000c;
}

.world-builder-new-item-modal .gender-buttons .gender-buttons-container > div.active svg .real-path {
  fill: #fff;
}

.world-builder-new-item-modal .gender-buttons .gender-buttons-container > div.active span {
  color: #fff;
  margin-left: 4px;
}

.world-builder-new-item-modal .gender-buttons .gender-buttons-container > div:active {
  box-shadow: inset 0 2px 5px 2px #000;
}

.world-builder-new-item-modal .gender-buttons .gender-buttons-container > div:active svg, .world-builder-new-item-modal .gender-buttons .gender-buttons-container > div:active span {
  margin-top: -2px;
}

/* [project]/src/components/views/world-builder/world-builder-new-image-modal.scss.css [client] (css) */
.center-div-outer .center-div-middle > :first-child.world-builder-new-image-modal {
  max-width: 720px;
}

@media screen and (max-width: 720px) {
  .center-div-outer .center-div-middle > :first-child.world-builder-new-image-modal {
    max-width: 100vw;
  }
}

.world-builder-new-image-modal {
  background-color: #00f;
}

.world-builder-new-image-modal .carousel-header {
  margin: 0;
  padding-right: 40px;
}

.world-builder-new-image-modal .modal-content {
  padding: 0 !important;
}

.world-builder-new-image-modal .world-builder-image-modal-content {
  padding: 20px;
}

.world-builder-new-image-modal .button-element input {
  padding-right: 40px;
}

.world-builder-new-image-modal .buttons {
  justify-content: space-between;
  display: flex;
}

.world-builder-new-image-modal .buttons .right {
  display: flex;
}

@media screen and (max-width: 779px) {
  .world-builder-new-image-modal .buttons .right {
    flex-flow: column;
  }

  .world-builder-new-image-modal .buttons .right .coin-button-element {
    justify-content: flex-end;
    display: flex;
  }

  .world-builder-new-image-modal .buttons .right select {
    margin: 0 0 12px;
  }
}

.world-builder-new-image-modal .image-scene-box .label-header {
  align-items: center;
  display: flex;
}

/* [project]/src/components/views/world-builder/world-builder-image-queue-modal.scss.css [client] (css) */
.center-div-outer .center-div-middle > :first-child.world-builder-image-queue-modal {
  max-width: 820px;
}

.center-div-outer .center-div-middle > :first-child.world-builder-image-queue-modal .modal-content {
  padding: 20px 20px 0;
}

.center-div-outer .center-div-middle > :first-child.world-builder-image-queue-modal .left-block {
  padding-bottom: 20px;
}

.world-builder-image-queue-modal .prompt-div {
  font-size: 12px;
}

/* [project]/src/components/views/world-builder/family-tree-modal.scss.css [client] (css) */
.center-div-outer .center-div-middle > :first-child.family-tree-modal {
  max-width: 1020px;
}

@media screen and (max-width: 1020px) {
  .center-div-outer .center-div-middle > :first-child.family-tree-modal {
    max-width: 96vw;
  }
}

.center-div-outer .center-div-middle > :first-child.family-tree-modal .modal-content {
  padding: 0;
}

.family-tree-modal .family-tree-container {
  background-color: #bcaf9c;
  min-width: 720px;
  padding: 20px;
}

.family-tree-modal .family-tree-container .family-tree {
  height: 600px;
  display: flex;
}

.family-tree-modal .family-tree-container .family-tree .kids, .family-tree-modal .family-tree-container .family-tree .main-char, .family-tree-modal .family-tree-container .family-tree .parents, .family-tree-modal .family-tree-container .family-tree .grandparents, .family-tree-modal .family-tree-container .family-tree .greatgrandparents {
  flex-flow: column;
  flex: 2;
  display: flex;
}

.family-tree-modal .family-tree-container .family-tree .kids .top-label label, .family-tree-modal .family-tree-container .family-tree .main-char .top-label label, .family-tree-modal .family-tree-container .family-tree .parents .top-label label, .family-tree-modal .family-tree-container .family-tree .grandparents .top-label label, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .top-label label {
  text-align: center;
  margin: 4px;
  padding: 4px 0;
  display: block;
  box-shadow: 0 1px 3px 1px #00000080, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box, .family-tree-modal .family-tree-container .family-tree .main-char .content-box, .family-tree-modal .family-tree-container .family-tree .parents .content-box, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box {
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .grand-label-container, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .grand-label-container, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .grand-label-container, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .grand-label-container, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .grand-label-container {
  width: 100%;
  height: 100px;
  padding: 20px 20px 0;
  position: absolute;
  bottom: -32px;
  left: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .grand-label, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .grand-label, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .grand-label, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .grand-label, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .grand-label {
  background-color: #bcaf9c;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
  box-shadow: 0 1px 3px 1px #00000080, inset 0 0 10px 2px #00000080, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .grand-label span, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .grand-label span, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .grand-label span, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .grand-label span, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .grand-label span {
  text-align: center;
  font-size: 20px;
  display: block;
  position: relative;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-full, .family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-full, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-full, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-full, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-full, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-top-left {
  background-color: #333;
  width: 100%;
  height: 1px;
  position: absolute;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-top-left {
  width: 50%;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-left, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-left {
  left: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-right, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-right {
  right: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-top-left, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-top-left {
  top: 0;
  left: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-vertical-bottom, .family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-vertical-top, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-vertical-bottom, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-vertical-top, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-vertical-bottom, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-vertical-top, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-vertical-bottom, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-vertical-top, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-vertical-bottom, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-vertical-top {
  background-color: #333;
  width: 1px;
  height: 50%;
  position: absolute;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-vertical-top, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-vertical-top, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-vertical-top, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-vertical-top, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-vertical-top {
  top: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .line-vertical-bottom, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .line-vertical-bottom, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .line-vertical-bottom, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .line-vertical-bottom, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .line-vertical-bottom {
  bottom: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container.top-border-left:before, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container.top-border-left:before, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container.top-border-left:before, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container.top-border-left:before, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container.top-border-left:before {
  content: "";
  background-color: #333;
  width: 1px;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container.bottom-border-left:before, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container.bottom-border-left:before, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container.bottom-border-left:before, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container.bottom-border-left:before, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container.bottom-border-left:before {
  content: "";
  background-color: #333;
  width: 1px;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container.full-border-left:before, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container.full-border-left:before, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container.full-border-left:before, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container.full-border-left:before, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container.full-border-left:before {
  content: "";
  full: 0;
  background-color: #333;
  width: 1px;
  height: 100%;
  position: absolute;
  left: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container.top-border-right:before, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container.top-border-right:before, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container.top-border-right:before, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container.top-border-right:before, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container.top-border-right:before {
  content: "";
  background-color: #333;
  width: 1px;
  height: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container.bottom-border-right:before, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container.bottom-border-right:before, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container.bottom-border-right:before, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container.bottom-border-right:before, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container.bottom-border-right:before {
  content: "";
  background-color: #333;
  width: 1px;
  height: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container.full-border-right:before, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container.full-border-right:before, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container.full-border-right:before, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container.full-border-right:before, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container.full-border-right:before {
  content: "";
  full: 0;
  background-color: #333;
  width: 1px;
  height: 100%;
  position: absolute;
  right: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box {
  background-color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
  position: relative;
  box-shadow: 0 1px 3px 1px #00000080;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .remove-div, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .remove-div, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .remove-div, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .remove-div, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .remove-div {
  width: 28px;
  height: 28px;
  display: flex;
  position: absolute;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .remove-div.hide, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .remove-div.hide, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .remove-div.hide, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .remove-div.hide, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .remove-div.hide {
  display: none;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .remove-div, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .remove-div, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .remove-div, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .remove-div, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .remove-div {
  justify-content: center;
  align-items: center;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .remove-div .button-div, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .remove-div .button-div, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .remove-div .button-div, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .remove-div .button-div, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .remove-div .button-div {
  background-color: #6c5e4c;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 1px 3px 1px #00000080, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .remove-div .button-div svg, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .remove-div .button-div svg, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .remove-div .button-div svg, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .remove-div .button-div svg, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .remove-div .button-div svg {
  padding: 2px;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .remove-div .button-div.gray, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .remove-div .button-div.gray, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .remove-div .button-div.gray, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .remove-div .button-div.gray, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .remove-div .button-div.gray {
  opacity: .5;
  box-shadow: inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .remove-div .button-div:hover:not(.gray), .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .remove-div .button-div:hover:not(.gray), .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .remove-div .button-div:hover:not(.gray), .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .remove-div .button-div:hover:not(.gray), .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .remove-div .button-div:hover:not(.gray) {
  cursor: pointer;
  box-shadow: 0 1px 3px 1px #000000bf, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .remove-div .button-div:active:not(.gray), .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .remove-div .button-div:active:not(.gray), .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .remove-div .button-div:active:not(.gray), .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .remove-div .button-div:active:not(.gray), .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .remove-div .button-div:active:not(.gray) {
  cursor: pointer;
  box-shadow: inset 0 1px 3px 1px #000000bf, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .up-down-div, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .up-down-div, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .up-down-div, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .up-down-div, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .up-down-div {
  display: flex;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .up-down-div.hide, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .up-down-div.hide, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .up-down-div.hide, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .up-down-div.hide, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .up-down-div.hide {
  display: none;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .up-down-div, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .up-down-div, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .up-down-div, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .up-down-div, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .up-down-div {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 80%;
  position: absolute;
  left: -32px;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .up-down-div .button-div, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .up-down-div .button-div, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .up-down-div .button-div, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .up-down-div .button-div, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .up-down-div .button-div {
  background-color: #6c5e4c;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 40px;
  margin: 4px 0;
  display: flex;
  box-shadow: 0 1px 3px 1px #00000080, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .up-down-div .button-div svg, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .up-down-div .button-div svg, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .up-down-div .button-div svg, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .up-down-div .button-div svg, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .up-down-div .button-div svg {
  transform: scaleX(.5);
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .up-down-div .button-div.gray, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .up-down-div .button-div.gray, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .up-down-div .button-div.gray, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .up-down-div .button-div.gray, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .up-down-div .button-div.gray {
  opacity: .5;
  box-shadow: inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .up-down-div .button-div:hover:not(.gray), .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .up-down-div .button-div:hover:not(.gray), .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .up-down-div .button-div:hover:not(.gray), .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .up-down-div .button-div:hover:not(.gray), .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .up-down-div .button-div:hover:not(.gray) {
  cursor: pointer;
  box-shadow: 0 1px 3px 1px #000000bf, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .up-down-div .button-div:active:not(.gray), .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .up-down-div .button-div:active:not(.gray), .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .up-down-div .button-div:active:not(.gray), .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .up-down-div .button-div:active:not(.gray), .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .up-down-div .button-div:active:not(.gray) {
  cursor: pointer;
  box-shadow: inset 0 1px 3px 1px #000000bf, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .add-div, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .add-div, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .add-div, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .add-div, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .add-div {
  border-radius: 50%;
  display: flex;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .add-div.hide, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .add-div.hide, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .add-div.hide, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .add-div.hide, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .add-div.hide {
  display: none;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .add-div, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .add-div, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .add-div, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .add-div, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .add-div {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .add-div svg, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .add-div svg, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .add-div svg, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .add-div svg, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .add-div svg {
  width: 28px;
  height: 28px;
  margin: 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .add-div svg .real-path, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .add-div svg .real-path, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .add-div svg .real-path, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .add-div svg .real-path, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .add-div svg .real-path {
  fill: #bcaf9c;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .add-div:hover, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .add-div:hover, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .add-div:hover, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .add-div:hover, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .add-div:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .add-div:active, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .add-div:active, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .add-div:active, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .add-div:active, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .add-div:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .img, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .img, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .img, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .img, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .img {
  background-color: #6c5e4c;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 20px 10px #00000040;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .img.clickable, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .img.clickable, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .img.clickable, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .img.clickable, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .img.clickable {
  cursor: pointer;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .img.clickable:hover:after, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .img.clickable:hover:after, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .img.clickable:hover:after, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .img.clickable:hover:after, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .img.clickable:hover:after {
  content: "";
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  box-shadow: inset 0 0 250px #ffffff26;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .img.clickable:active:after, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .img.clickable:active:after, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .img.clickable:active:after, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .img.clickable:active:after, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .img.clickable:active:after {
  content: "";
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  box-shadow: inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .img svg, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .img svg, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .img svg, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .img svg, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .img svg {
  fill: #000;
  width: 70%;
  height: 70%;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .img img, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .img img, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .img img, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .img img, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .img img {
  width: 100%;
  height: 100%;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box label, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box label, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box label, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box label, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box label {
  z-index: 15;
  text-align: center;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  background-color: #bcaf9c;
  width: 120px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  position: absolute;
  bottom: -20px;
  overflow: hidden;
  box-shadow: 0 1px 3px 1px #00000080, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .relationship, .family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box .relationship, .family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .relationship, .family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .relationship, .family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .relationship {
  font-size: 12px;
  position: absolute;
  bottom: -32px;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box {
  padding: 20px 0;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container {
  height: 20%;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box {
  width: 72px;
  height: 72px;
}

.family-tree-modal .family-tree-container .family-tree .kids .content-box .box-container .box .remove-div {
  right: -40px;
}

.family-tree-modal .family-tree-container .family-tree .main-char {
  flex: 3;
}

.family-tree-modal .family-tree-container .family-tree .main-char .content-box {
  padding: 20px 0;
}

.family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container {
  height: 100%;
}

.family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box.char {
  width: 100px;
  height: 100px;
}

.family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box.partner {
  width: 80px;
  height: 80px;
}

.family-tree-modal .family-tree-container .family-tree .main-char .content-box .box-container .box.partner .remove-div {
  top: -40px;
}

.family-tree-modal .family-tree-container .family-tree .parents .content-box {
  padding: 20px 0;
}

.family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container {
  height: 50%;
  padding: 20px 0;
}

.family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box {
  width: 72px;
  height: 72px;
}

.family-tree-modal .family-tree-container .family-tree .parents .content-box .box-container .box .remove-div {
  left: -40px;
}

.family-tree-modal .family-tree-container .family-tree .grandparents .content-box {
  padding: 20px 0;
}

.family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container {
  height: 25%;
}

.family-tree-modal .family-tree-container .family-tree .grandparents .content-box .box-container .box .remove-div {
  left: -40px;
}

.family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box {
  padding: 20px 0;
}

.family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container {
  height: 12.5%;
}

.family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box {
  width: 44px;
  height: 44px;
}

.family-tree-modal .family-tree-container .family-tree .greatgrandparents .content-box .box-container .box .remove-div {
  left: -40px;
}

.family-tree-modal .partner-container {
  position: relative;
}

.family-tree-modal .partner-container .parter-button, .family-tree-modal .partner-container .child-button {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.family-tree-modal .partner-container .parter-button .vertical-line, .family-tree-modal .partner-container .child-button .vertical-line {
  background-color: #333;
  width: 1px;
  height: 20px;
  position: absolute;
}

.family-tree-modal .partner-container .parter-button .horizontal-line, .family-tree-modal .partner-container .child-button .horizontal-line {
  background-color: #333;
  width: 32px;
  height: 1px;
  position: absolute;
  top: 52px;
  right: 22px;
}

.family-tree-modal .partner-container .parter-button .unique-button, .family-tree-modal .partner-container .child-button .unique-button {
  z-index: 25;
  background-color: #6c5e4c;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin-top: 8px;
  display: flex;
  box-shadow: 0 1px 3px 1px #00000080, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .partner-container .parter-button .unique-button svg, .family-tree-modal .partner-container .child-button .unique-button svg {
  width: 36px;
  height: 36px;
}

.family-tree-modal .partner-container .parter-button .unique-button svg .real-path, .family-tree-modal .partner-container .child-button .unique-button svg .real-path {
  fill: #584c3d;
}

.family-tree-modal .partner-container .parter-button .unique-button.down, .family-tree-modal .partner-container .child-button .unique-button.down {
  padding: 4px 0 0;
}

.family-tree-modal .partner-container .parter-button .unique-button.gray, .family-tree-modal .partner-container .child-button .unique-button.gray {
  box-shadow: inset 0 0 250px #ffffff4d;
}

.family-tree-modal .partner-container .parter-button .unique-button.gray svg, .family-tree-modal .partner-container .child-button .unique-button.gray svg {
  display: none;
}

.family-tree-modal .partner-container .parter-button .unique-button:hover:not(.gray), .family-tree-modal .partner-container .child-button .unique-button:hover:not(.gray) {
  cursor: pointer;
  box-shadow: 0 1px 3px 1px #000000bf, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .partner-container .parter-button .unique-button:active:not(.gray), .family-tree-modal .partner-container .child-button .unique-button:active:not(.gray) {
  cursor: pointer;
  box-shadow: inset 0 1px 3px 1px #000000bf, inset 0 0 10px 2px #00000040, inset 0 0 250px #ffffff4d;
}

.family-tree-modal .partner-container .parter-button {
  padding: 4px;
  position: absolute;
  bottom: -4px;
  right: -52px;
}

.family-tree-modal .partner-container .child-button {
  padding: 4px;
  position: absolute;
  bottom: 16px;
  left: 0;
  overflow: hidden;
}

.family-tree-modal .add-char-modal .modal-content {
  max-height: 70vh;
}

.family-tree-modal .add-char-modal-content {
  flex-flow: column;
  padding: 20px;
  display: flex;
  overflow: auto;
}

.family-tree-modal .add-char-modal-content .add-char-modal-content-header {
  margin: 0 0 20px;
}

.family-tree-modal .add-char-modal-content .add-char-modal-content-header h2, .family-tree-modal .add-char-modal-content .add-char-modal-content-header h6 {
  margin: 0;
}

.family-tree-modal .add-char-modal-content .left-block {
  display: none;
}

.family-tree-modal .add-char-modal-content .table-element {
  flex: 1;
}

.family-tree-modal .add-char-modal-content .table-element .search-bar-buttons-left, .family-tree-modal .add-char-modal-content .table-element .search-conditions select, .family-tree-modal .add-char-modal-content .table-element .search-bar-buttons-right {
  display: none;
}

.family-tree-modal .add-char-modal-content .table-element .row-item {
  display: flex;
}

.family-tree-modal .add-char-modal-content .table-element .row-item .icon {
  width: 52px;
  height: 52px;
  padding: 4px;
}

.family-tree-modal .add-char-modal-content .table-element .row-item .icon img, .family-tree-modal .add-char-modal-content .table-element .row-item .icon svg {
  border-radius: 3px;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 3px #00000080;
}

.family-tree-modal .add-char-modal-content .table-element .row-item .text {
  margin-left: 8px;
  line-height: 52px;
}

@media screen and (max-width: 779px) {
  .family-tree-modal .add-char-modal-content .table-element table tr {
    margin: 0;
  }

  .family-tree-modal .add-char-modal-content .table-element td:before {
    display: none;
  }

  .family-tree-modal .add-char-modal-content .td-c, .family-tree-modal .add-char-modal-content .td-c .row-item {
    width: 100%;
  }
}

/* [project]/src/components/elements/slider/slider.scss.css [client] (css) */
.slider {
  width: 100%;
  margin: 0;
  position: relative;
}

.slider .percentage {
  color: #000000b3;
  height: 20px;
  margin: 0 8px;
  font-size: 14px;
  position: relative;
}

.slider .percentage > span {
  position: absolute;
}

.slider .percentage > span > span {
  text-align: center;
  width: 40px;
  margin-left: -21px;
  position: absolute;
}

.slider input {
  z-index: 30;
  cursor: pointer;
  appearance: none;
  background-color: #0000;
  border-radius: 2px;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  position: relative;
}

.slider input::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
  background-color: #000;
  border-radius: 4px 16px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  box-shadow: 0 1px 3px #0000004d;
}

.slider .slider-bg-container {
  width: 100%;
  height: 8px;
  padding: 0 10px;
  position: absolute;
  top: 8px;
}

.slider .slider-bg-container .slider-bg {
  width: 100%;
  height: 4px;
  position: relative;
}

.slider .slider-bg-container .slider-bg .diamond {
  cursor: pointer;
  z-index: 25;
  background-color: #b4b4b4;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  position: absolute;
  top: -2px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px #fff;
}

.slider .slider-bg-container .slider-bg .diamond.one {
  left: 0%;
}

.slider .slider-bg-container .slider-bg .diamond.two {
  left: 25%;
}

.slider .slider-bg-container .slider-bg .diamond.three {
  left: 50%;
}

.slider .slider-bg-container .slider-bg .diamond.four {
  left: 75%;
}

.slider .slider-bg-container .slider-bg .diamond.five {
  left: 100%;
}

.slider .slider-bg-container .slider-bg .diamond.toggle {
  background-color: #505050;
}

/* [project]/src/components/common/type-writer/type-writer.scss.css [client] (css) */
.type-writer {
  white-space: pre-wrap;
}

/* [project]/src/components/views/short-story/new-short-story.scss.css [client] (css) */
.center-div-outer .center-div-middle > :first-child.short-story-result-modal {
  max-width: 960px;
}

.center-div-outer .center-div-middle > :first-child.short-story-result-modal .modal-content {
  padding: 0;
}

.new-short-story-comp {
  flex-flow: column;
  flex: 1;
  align-items: center;
  display: flex;
}

.new-short-story-comp.page {
  max-width: 1120px;
  margin: 40px auto;
  padding: 40px;
}

@media screen and (max-width: 779px) {
  .new-short-story-comp.page {
    margin: 20px auto;
    padding: 20px;
  }
}

.new-short-story-comp .new-short-story-inner {
  background-color: #fff;
  border-radius: 12px;
  width: 100%;
  min-width: 320px;
  max-width: 600px;
  min-height: 100px;
  padding: 20px;
  box-shadow: 0 1px 3px #00000080;
}

.new-short-story-comp .new-short-story-inner form {
  margin: 20px 0 0;
}

.new-short-story-comp .new-short-story-inner .new-short-story-inner-top {
  justify-content: space-between;
  display: flex;
}

.new-short-story-comp .new-short-story-inner .new-short-story-inner-top .button-element button {
  padding-right: 40px;
}

.new-short-story-comp .new-short-story-inner .select-box {
  justify-content: center;
  margin: 12px 0;
  display: flex;
}

.new-short-story-comp .new-short-story-inner .select-box label {
  text-align: right;
  width: 100px;
  margin-right: 8px;
  line-height: 40px;
}

.new-short-story-comp .new-short-story-inner .select-box .slider, .new-short-story-comp .new-short-story-inner .select-box select {
  width: 240px;
}

.new-short-story-comp .new-short-story-inner .select-box .slider {
  margin: 8px 0 0;
}

.new-short-story-comp .short-story-result-modal .short-story-result-div .short-story {
  position: relative;
}

.new-short-story-comp .short-story-result-modal .short-story-result-div .short-story-main {
  border-radius: 3px;
  padding: 120px 60px;
  overflow: hidden;
  box-shadow: inset 0 0 2500px #ffffff40;
}

.new-short-story-comp .short-story-result-modal .short-story-result-div .short-story-main .wrapped-image {
  float: right;
  border: 1px solid #000;
  border-radius: 3px;
  height: 240px;
  margin: 0 0 40px 40px;
}

.new-short-story-comp .short-story-result-modal .short-story-result-div .short-story-main .tale {
  white-space: pre-wrap;
  text-align: justify;
  font-size: 24px;
  font-weight: 800;
}

.new-short-story-comp .short-story-result-modal .short-story-result-div .design-3 .tale {
  color: #ffffffd9;
}

.new-short-story-comp .jumo-button-container {
  z-index: 100;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 60px 0;
  display: flex;
  position: absolute;
  bottom: 0;
}

.new-short-story-comp .jumo-button-container .jump-button {
  width: 100%;
  max-width: 320px;
  position: relative;
}

.new-short-story-comp .jumo-button-container .jump-button .icon {
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

.new-short-story-comp .jumo-button-container .jump-button .icon svg .real-path {
  fill: #fff;
}

@media screen and (max-width: 779px) {
  .new-short-story-comp .jumo-button-container .jump-button {
    max-width: 240px;
  }
}

/* [project]/src/components/common/book-page/book-page.scss.css [client] (css) */
.book-page-comp {
  position: relative;
}

.book-page-comp .style-buttons, .book-page-comp .font-buttons {
  z-index: 125;
  opacity: .65;
  flex-flow: column;
  display: flex;
  position: absolute;
  top: 120px;
  right: 4px;
}

.book-page-comp .style-buttons button, .book-page-comp .font-buttons button {
  cursor: pointer;
  border: 1px solid #000;
  width: 40px;
  height: 40px;
  margin: 4px;
}

.book-page-comp .style-buttons button.active, .book-page-comp .font-buttons button.active {
  color: #fff;
  background-color: #1d6998;
  border: 0;
}

.book-page-comp .style-buttons:hover, .book-page-comp .font-buttons:hover {
  opacity: 1;
}

.book-page-comp .font-buttons {
  flex-flow: row;
  top: 60px;
  right: 80px;
}

.book-page-comp .font-buttons .font-2 {
  font-family: MedievalSharp;
}

.book-page-comp .background {
  z-index: 20;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.book-page-comp .background.design-1 {
  background-image: url("/imgs/page-bg/design-1/center.png");
}

.book-page-comp .background.design-1 .img {
  background-image: url("/imgs/page-bg/design-1/main.png");
}

.book-page-comp .background.design-1 .center .img {
  background-image: url("/imgs/page-bg/design-1/center.png");
}

.book-page-comp .background.design-1 .top-border .img {
  background-image: url("/imgs/page-bg/design-1/top.png");
}

.book-page-comp .background.design-1 .bottom-border .img {
  background-image: url("/imgs/page-bg/design-1/bottom.png");
}

.book-page-comp .background.design-1 .left-border .img {
  background-image: url("/imgs/page-bg/design-1/left.png");
}

.book-page-comp .background.design-1 .right-border .img {
  background-image: url("/imgs/page-bg/design-1/right.png");
}

.book-page-comp .background.design-2 {
  background-image: url("/imgs/page-bg/design-2/center.png");
}

.book-page-comp .background.design-2 .img {
  background-image: url("/imgs/page-bg/design-2/main.png");
}

.book-page-comp .background.design-2 .center .img {
  background-image: url("/imgs/page-bg/design-2/center.png");
}

.book-page-comp .background.design-2 .top-border .img {
  background-image: url("/imgs/page-bg/design-2/top.png");
}

.book-page-comp .background.design-2 .bottom-border .img {
  background-image: url("/imgs/page-bg/design-2/bottom.png");
}

.book-page-comp .background.design-2 .left-border .img {
  background-image: url("/imgs/page-bg/design-2/left.png");
}

.book-page-comp .background.design-2 .right-border .img {
  background-image: url("/imgs/page-bg/design-2/right.png");
}

.book-page-comp .background.design-3 {
  background-image: url("/imgs/page-bg/design-3/center.png");
}

.book-page-comp .background.design-3 .img {
  background-image: url("/imgs/page-bg/design-3/main.png");
}

.book-page-comp .background.design-3 .center .img {
  background-image: url("/imgs/page-bg/design-3/center.png");
}

.book-page-comp .background.design-3 .top-border .img {
  background-image: url("/imgs/page-bg/design-3/top.png");
}

.book-page-comp .background.design-3 .bottom-border .img {
  background-image: url("/imgs/page-bg/design-3/bottom.png");
}

.book-page-comp .background.design-3 .left-border .img {
  background-image: url("/imgs/page-bg/design-3/left.png");
}

.book-page-comp .background.design-3 .right-border .img {
  background-image: url("/imgs/page-bg/design-3/right.png");
}

.book-page-comp .background .img {
  background-repeat: repeat;
  background-size: 320px 480px;
  width: 100%;
  height: 100%;
  transition: background-image .3s ease-in-out;
}

.book-page-comp .background .top-left, .book-page-comp .background .top-middle, .book-page-comp .background .top-right, .book-page-comp .background .top-border, .book-page-comp .background .left-border, .book-page-comp .background .left-middle, .book-page-comp .background .right-border, .book-page-comp .background .right-middle, .book-page-comp .background .bottom-left, .book-page-comp .background .bottom-middle, .book-page-comp .background .bottom-right, .book-page-comp .background .bottom-border {
  z-index: 15;
  position: absolute;
}

.book-page-comp .background .top-left, .book-page-comp .background .top-middle, .book-page-comp .background .top-right, .book-page-comp .background .top-border {
  top: 0;
}

.book-page-comp .background .left-border, .book-page-comp .background .left-middle, .book-page-comp .background .top-left, .book-page-comp .background .bottom-left {
  left: 0;
}

.book-page-comp .background .right-border, .book-page-comp .background .right-middle, .book-page-comp .background .top-right, .book-page-comp .background .bottom-right {
  right: 0;
}

.book-page-comp .background .bottom-left, .book-page-comp .background .bottom-middle, .book-page-comp .background .bottom-right, .book-page-comp .background .bottom-border {
  bottom: 0;
}

.book-page-comp .background .left-border, .book-page-comp .background .right-border {
  width: 48px;
  height: 100%;
}

.book-page-comp .background .top-border, .book-page-comp .background .bottom-border {
  width: 100%;
  height: 48px;
}

.book-page-comp .background .center {
  z-index: 20;
  border-radius: 60px 60px 60px 120px;
  width: calc(100% - 96px);
  height: calc(100% - 96px);
  position: relative;
  overflow: hidden;
}

.book-page-comp .background .center .img {
  background-size: cover;
}

.book-page-comp .background .top-left, .book-page-comp .background .top-right, .book-page-comp .background .bottom-left, .book-page-comp .background .bottom-right {
  z-index: 20;
  width: 120px;
  height: 120px;
}

.book-page-comp .background .top-middle, .book-page-comp .background .bottom-middle {
  width: 100%;
  height: 60px;
}

.book-page-comp .background .left-middle, .book-page-comp .background .right-middle {
  width: 60px;
  height: 100%;
}

.book-page-comp .background .top-middle, .book-page-comp .background .left-middle, .book-page-comp .background .right-middle, .book-page-comp .background .bottom-middle {
  justify-content: center;
  align-items: center;
  display: flex;
}

.book-page-comp .background .top-middle .inner, .book-page-comp .background .left-middle .inner, .book-page-comp .background .right-middle .inner, .book-page-comp .background .bottom-middle .inner {
  z-index: 20;
  width: 60px;
  height: 60px;
  padding: 0;
}

.book-page-comp .background .top-left .img {
  background-position: 0 0;
}

.book-page-comp .background .top-right .img {
  background-position: 120px 0;
}

.book-page-comp .background .bottom-left .img {
  background-position: 0 120px;
}

.book-page-comp .background .bottom-right .img {
  background-position: 120px 120px;
}

.book-page-comp .background .top-middle .img {
  background-position: 190px 0;
}

.book-page-comp .background .bottom-middle .img {
  background-position: 190px 60px;
}

.book-page-comp .background .left-middle .img {
  background-position: 0 270px;
}

.book-page-comp .background .right-middle .img {
  background-position: 60px 270px;
}

.book-page-comp .background .top-border .img, .book-page-comp .background .bottom-border .img, .book-page-comp .background .left-border .img, .book-page-comp .background .right-border .img {
  background-size: 48px 48px;
}

.book-page-comp .background .top-border .img, .book-page-comp .background .left-border .img {
  background-position: 1px 1px;
}

.book-page-comp .background .right-border .img, .book-page-comp .background .bottom-border .img {
  background-position: -1px -1px;
}

.book-page-comp .content {
  z-index: 25;
  transition: font-family .3s;
  position: relative;
}

.book-page-comp.font-2 .content {
  font-family: MedievalSharp;
}

/* [project]/src/components/views/image-tale/new-image-tale.scss.css [client] (css) */
.center-div-outer .center-div-middle > :first-child.image-tale-result-modal {
  max-width: 960px;
}

.center-div-outer .center-div-middle > :first-child.image-tale-result-modal .modal-content {
  padding: 0;
}

.new-image-tale-comp.page {
  max-width: 1120px;
  margin: 40px auto;
  padding: 40px;
}

@media screen and (max-width: 779px) {
  .new-image-tale-comp.page {
    margin: 20px auto;
    padding: 20px;
  }
}

.new-image-tale-comp {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.new-image-tale-comp .carousel-header, .new-image-tale-comp .carousel-header.left-right {
  margin: 0;
  overflow: hidden;
}

.new-image-tale-comp .carousel-header .new-image-header-tab {
  flex-flow: row-reverse;
  justify-content: center;
  align-items: center;
  height: auto;
  display: flex;
}

.new-image-tale-comp .carousel-header .new-image-header-tab .icon {
  width: 40px;
  height: 40px;
}

.new-image-tale-comp .carousel-header .new-image-header-tab .icon svg {
  width: 100%;
  height: 100%;
}

.new-image-tale-comp .carousel-header .new-image-header-tab .icon svg .real-path {
  fill: #555;
}

.new-image-tale-comp .carousel-header .new-image-header-tab .text {
  margin-right: 12px;
}

.new-image-tale-comp .carousel-header .new-image-header-tab.active .icon svg .real-path {
  fill: #1d6998;
}

.new-image-tale-comp .new-image-tale-inner {
  background-color: #fff;
  border-radius: 12px;
  flex-flow: column;
  width: 100%;
  min-width: 320px;
  display: flex;
  box-shadow: 0 1px 3px #00000080;
}

.new-image-tale-comp .new-image-tale-inner .simple-carousel {
  flex: 1;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide {
  background-color: #ddd;
  flex-flow: column;
  height: calc(88vh - 172px);
  display: flex;
  overflow: auto;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-header {
  height: 40px;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-content {
  flex: 1;
  padding: 20px;
  display: flex;
}

@media screen and (max-width: 779px) {
  .new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-content {
    flex-flow: column-reverse;
    padding: 8px;
  }
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-content .new-image-slide-content-text {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: calc(88vh - 252px);
  margin-right: 8px;
  display: flex;
}

@media screen and (max-width: 779px) {
  .new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-content .new-image-slide-content-text {
    width: auto;
    height: auto;
    margin: 20px 0;
  }
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-content .new-image-slide-content-text {
  overflow: hidden;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-content .new-image-slide-content-main {
  border-radius: 3px;
  flex: 1;
  display: flex;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-content .new-image-slide-content-main.draw {
  position: relative;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-content .new-image-slide-content-main.draw .not-signed-in-block-draw {
  z-index: 1000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 2500px #00000080;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-content .new-image-slide-content-main.draw .not-signed-in-block-draw span {
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 1px 3px #000;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-footer {
  justify-content: space-between;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-footer textarea {
  margin: 0;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-footer .right, .new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-footer .left {
  flex: 1;
  display: flex;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-footer .right {
  justify-content: end;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-footer .coin-button-element {
  width: 100%;
  margin: 0;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-footer .coin-button-element .background {
  justify-content: center;
  display: flex;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide .new-image-slide-footer .button-element button {
  padding-right: 40px;
}

.new-image-tale-comp .image-tale-result-modal .image-tale-result-div .image-tale-main {
  border-radius: 3px;
  padding: 120px 60px;
  overflow: hidden;
  box-shadow: inset 0 0 2500px #ffffff40;
}

.new-image-tale-comp .image-tale-result-modal .image-tale-result-div .image-tale-main .wrapped-image {
  float: right;
  border: 1px solid #000;
  border-radius: 3px;
  height: 240px;
  margin: 0 0 40px 40px;
}

.new-image-tale-comp .image-tale-result-modal .image-tale-result-div .image-tale-main .tale {
  white-space: pre-wrap;
  text-align: justify;
  font-size: 24px;
  font-weight: 800;
}

.new-image-tale-comp .image-tale-result-modal .image-tale-result-div .design-3 .tale {
  color: #ffffffd9;
}

.new-image-tale-comp .new-image-tale-inner .new-image-slide {
  height: auto;
  min-height: calc(88vh - 172px);
}

.new-image-tale-comp .slider-bg .diamond {
  box-shadow: 0 0 0 2px #ddd !important;
}

.new-image-tale-comp .jumo-button-container {
  z-index: 100;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 60px 0;
  display: flex;
  position: absolute;
  bottom: 0;
}

.new-image-tale-comp .jumo-button-container .jump-button {
  width: 100%;
  max-width: 320px;
  position: relative;
}

.new-image-tale-comp .jumo-button-container .jump-button .icon {
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

.new-image-tale-comp .jumo-button-container .jump-button .icon svg .real-path {
  fill: #fff;
}

@media screen and (max-width: 779px) {
  .new-image-tale-comp .jumo-button-container .jump-button {
    max-width: 240px;
  }
}

/* [project]/src/components/common/image-drop-uploader/image-drop-uploader.scss.css [client] (css) */
.image-drop-uploader {
  flex: 1;
  display: flex;
  position: relative;
}

.image-drop-uploader input {
  display: none;
}

.image-drop-uploader .preview-div {
  flex: 1;
  justify-content: center;
  align-items: center;
  max-height: 100%;
  display: flex;
  position: relative;
}

.image-drop-uploader .preview-div img {
  max-width: 100%;
  max-height: 100%;
}

.image-drop-uploader .preview-div .remove-button {
  cursor: pointer;
  background-color: red;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  padding: 12px;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: 0 1px 3px #00000080;
}

.image-drop-uploader .preview-div .remove-button svg {
  width: 100%;
  height: 100%;
}

.image-drop-uploader .preview-div .remove-button svg .real-path {
  fill: #fff;
}

.image-drop-uploader .preview-div .remove-button:hover {
  box-shadow: 0 1px 3px 1px #000000bf;
}

.image-drop-uploader .preview-div .remove-button:active {
  box-shadow: inset 0 1px 3px 1px #000000bf;
}

.image-drop-uploader .drag-image-div {
  cursor: pointer;
  background-color: #fafafa;
  border: 5px dashed #aaa;
  border-radius: 12px;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.image-drop-uploader .drag-image-div .icon {
  width: 120px;
  height: 120px;
}

.image-drop-uploader .drag-image-div .icon svg {
  width: 100%;
  height: 100%;
}

.image-drop-uploader .drag-image-div .icon svg .real-path {
  fill: #555;
}

.image-drop-uploader .drag-image-div:hover:not(.dragging) {
  border-color: #555;
  box-shadow: inset 0 0 1000px #0000001a;
}

.image-drop-uploader .drag-image-div:active:not(.dragging) {
  border-color: #000;
  box-shadow: inset 0 0 1000px #00000040;
}

.image-drop-uploader .drag-image-div.dragging {
  background-color: #1d699826;
  border-color: #1d6998;
}

.image-drop-uploader .drag-image-div.dragging .icon svg .real-path {
  fill: #1d6998;
}

.image-drop-uploader .drag-image-div.dragging .text {
  color: #1d6998;
}

/* [project]/src/components/common/paint-tool/paint-tool.scss.css [client] (css) */
.paint-tool-comp {
  flex: 1;
  display: flex;
}

.paint-tool-comp .paint-tool-content {
  border-radius: 4px;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
  box-shadow: inset 0 0 1px 1px #00000080;
}

.paint-tool-comp .paint-tool-content canvas {
  touch-action: none;
  border: 1px solid #ccc;
  width: 100%;
  height: 100%;
  display: block;
}

.paint-tool-comp .paint-tool-bar {
  background-color: #555;
  border: 1px solid #555;
  border-radius: 4px;
  flex-flow: column;
  width: 88px;
  display: flex;
  overflow: hidden;
}

.paint-tool-comp .paint-tool-bar label {
  color: #fff;
  margin: 4px;
}

.paint-tool-comp .paint-tool-bar .draw-button, .paint-tool-comp .paint-tool-bar .click-button {
  cursor: pointer;
  margin: 0 4px 12px;
  padding: 4px 0;
  font-size: 14px;
}

.paint-tool-comp .paint-tool-bar .draw-button.active, .paint-tool-comp .paint-tool-bar .click-button.active {
  color: #fff;
  background-color: #1d6998;
}

.paint-tool-comp .paint-tool-bar .column {
  flex-flow: column;
  margin: 20px 0 0;
  display: flex;
}

.paint-tool-comp .paint-tool-bar .row {
  padding: 0 2px;
  display: flex;
}

.paint-tool-comp .paint-tool-bar .row .draw-button, .paint-tool-comp .paint-tool-bar .row .click-button {
  flex: 1;
  margin: 0 2px 12px;
}

/* [project]/src/components/common/timeline/timeline.scss.css [client] (css) */
.timeline-comp .dates {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px 20px 20px;
  display: flex;
  position: relative;
  overflow: auto;
  box-shadow: 0 1px 5px #0003;
}

.timeline-comp .dates .date-year {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 12px;
}

.timeline-comp .dates .date-year .line {
  background-color: #000;
  flex: 1;
  height: 1px;
  margin: 0 4px;
}

.timeline-comp .dates .date-year .line.before {
  background: linear-gradient(90deg, #1d6998, #1d6998, #1d6998, #1d6998, #1d6998, #1d6998, #fff);
}

.timeline-comp .dates .date-year .line.after {
  background: linear-gradient(90deg, #fff, #1d6998, #1d6998, #1d6998, #1d6998, #1d6998, #1d6998);
}

.timeline-comp .dates .date-year .text {
  background-color: #fff;
  padding: 0;
  font-size: 20px;
}

.timeline-comp .dates .date {
  text-align: center;
  justify-content: column;
  flex-flow: column;
  min-width: 40px;
  display: flex;
}

.timeline-comp .dates .date .vertical-line {
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin: 4px 0 0;
  display: flex;
}

.timeline-comp .dates .date .vertical-line .dot {
  background-color: #323232;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.timeline-comp .dates .date .vertical-line .line {
  background-color: #323232;
  flex: 1;
  width: 1px;
}

.timeline-comp .layers .layer {
  cursor: pointer;
  background-color: #ffffffe6;
  border-radius: 5px;
  padding: 8px;
  position: absolute;
  box-shadow: 0 1px 3px 1px #00000040;
}

.timeline-comp .layers .layer.work {
  border: 1px solid #007dff;
}

.timeline-comp .layers .layer.work:before {
  content: "h";
  background-color: #007dff1a;
  width: 100%;
  height: 100%;
  font-size: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.timeline-comp .layers .layer.education {
  border: 1px solid green;
}

.timeline-comp .layers .layer.education:before {
  content: "h";
  background-color: #0080001a;
  width: 100%;
  height: 100%;
  font-size: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.timeline-comp .layers .layer.project {
  border: 1px solid purple;
}

.timeline-comp .layers .layer.project:before {
  content: "h";
  background-color: #8000801a;
  width: 100%;
  height: 100%;
  font-size: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.timeline-comp .layers .layer:hover {
  box-shadow: 0 1px 5px #000000bf;
}

.timeline-comp .layers .layer:active {
  box-shadow: inset 0 1px 5px #000000bf;
}

/*# sourceMappingURL=src_d9a6b510._.css.map*/