* {

}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.app {

  /*display: flex;
  flex-direction: column;*/
  height: 100%;
  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
  overflow: hidden;
}
.bar {
  box-sizing: border-box;
  background-color: #1c1c1c;
  height: 65px;

  touch-action: none;

  -webkit-touch-action: none;

  -webkit-user-select: none;
  -webkit-app-region: drag;


  -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none;
  /*flex: 0;*/
}
.no-app-drag {
  -webkit-app-region: no-drag;
}

.download-phantom {
  display: fixed;
  left: 200%;
  top: 200%;
  display: block;
}

.main {
  background: #222222;
  height: calc(100% - 130px);

  /*flex: 1;*/
}
.bar .bar-inner {
  display: flex;
  height: 100%;

}
body.electron:not(.fullscreen) .bar-inner {
  padding-left: 70px;
}

.bar-top {
  border-bottom: 1px solid #0b0b0b;
}
.bar-bottom {
  border-top: 1px solid #0b0b0b;
}
.bar .bar-inner .bar-area {
  flex: 1;
}
.bar .bar-inner .bar-area:before {
  content: " ";
  width: 0;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.bar .bar-inner .title {
  flex: none;
  color: #fff;
  padding: 10px 0;
}
.bar .bar-inner .title.hide {
  display: none;
}
.bar .bar-inner .title:before {
  display: inline-block;
  width: 0;
  height: 100%;
  content: " ";
  vertical-align: middle;
}
.bar .bar-inner .title h1 {
  margin: 0;
  vertical-align: middle;
  display: inline-block;
  font-weight: 200;
}
@media screen and (max-width: 650px) {
  .bar .bar-inner .title h1 {
    font-size: 1.4em;
  }
  .bar .bar-inner .title {

  }
}



.views {
  width: 100%;
  height: 100%;
  overflow: hidden;

}
.views .views-inner {
  height: 100%;
  white-space: nowrap;
  font-size: 0;
  position: relative;
  transition: 0.75s;

}
.views .views-inner .view {
  display: inline-block;
  font-size: 1rem;
  width: 100%;
  height: 100%;

}





.main .swiper-container {
  height: 100%;
  width: 100%;
  position: absolute;
}
.main .swiper-container .inner {

}
.swiper-edit .inner {

}


.view.splitted {

}
.view.view-edit {
  position: relative;
}
.view.view-edit .inner {
  position: absolute;
  width: 100%;
  height: 100%;
}
.view.view-edit .inner .view-header {
  flex: none;
}
.view.view-edit .inner .view-header .timeline-container {
  padding: 3px 10px;
}
.view.view-edit .inner .view-header .timeline-container .timeline-label {
  display: block;
  color: #fff;
}
.view.view-edit .inner .view-header .timeline-container .timeline-range {
  width: calc(100% - 40px);
  display: inline-block;
}
.timeline-range {
  margin: 20px 0;
  background-color: #fff;
  border-radius: 0;
  height: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  vertical-align: middle;
}
.timeline-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  height: 30px;
  border-radius: 2px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  width: 5px;
  background-color: #177d39;

}
.view.view-edit .inner .view-header .btn {
  width: 35px;
  display: inline-block;
  height: 35px;
  vertical-align: middle;
  padding: 9px;
  box-sizing: border-box;
  background-color: #2f8247;
  border-radius: 50%;
}
.view.view-edit .inner .view-header .btn .icon {
  width: 100%;
  height: 100%;
  position: relative;
}
.view.view-edit .inner .view-header .btn .icon svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.view.view-edit .inner .view-header .btn .icon svg * {
  fill: #fff;
}



.view.view-edit .inner .view-main {
  display: flex;
  height: 100%;
  flex: 1;
}
.view.view-edit .inner .view-main.has-timeline {
  height: calc(100% - 67px);
}
.view.view-edit .inner .view-main > div {
  flex: 1;
  height: 100%;
  white-space: normal;
}
@media screen and (max-width: 700px) {
  .view.view-edit .inner .view-main > div {
    display: none;
  }
  .view.view-edit .inner .view-main > div.show {
    display: block;
  }
}
.view.view-edit .inner .view-main .data-input {
  flex: none;
  width: 100%;
  max-width: 400px;
  overflow: scroll;
  padding: 6px 10px;
  box-sizing: border-box;
}
.view.view-edit .inner .view-main .data-input.show-full {
  max-width: none;
}
.view.view-edit .inner .view-main .data-input .components-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}
.view.view-edit .inner .view-main .data-input .components-list li {
  padding: 5px 5px;
  display: block;

}
.view.view-edit .inner .view-main .data-input .components-list li .description {
  font-size: 0.9em;
  font-weight: 300;

}
.view.view-edit .inner .view-main .data-input .components-list li .component {
  box-sizing: border-box;
  position: relative;
  margin: 0;
  width: calc(100%);
}
.view.view-edit .inner .view-main .data-input::-webkit-scrollbar {
  display: none;
}
.view.view-edit .inner .view-main .data-input {
  scrollbar-width: none;
}
.view.view-edit .inner .view-main .preview {
  position: relative;
  height: 100%;
  width: 100%;
  flex: 1;
  text-align: center;
  -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none;
}
.view.view-edit .inner .view-main .preview > * {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.view.view-edit .inner .view-main .preview .toolpic-context {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.view {
  position: relative;

}

.view-classic {

}
.view-classic .items-list {

  height: 100%;
  width: 100%;
}
.view .inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  white-space: normal;
  color: #fff;
  scrollbar-width: none;
}
.view .inner .view-content::-webkit-scrollbar {
  display: none;
}
.view .inner .view-content {
  overflow: scroll;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}
.view .inner .view-header {
  flex: none;
}
.view .inner .view-main {
  flex: 1;
}
.view .inner .view-main .swiper-container {
  position: relative;
  height: 100%;
}
.view .inner .view-main .swiper-container .pagination-bullet-custom {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #2f8247;
  border: none;
}
.view .inner .view-main .swiper-container .pagination-bullet-custom.swiper-pagination-bullet-active {
  background-color: #1b4226;
}
.view .inner .view-main .swiper-container .swiper-slide .inner {
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.view.view-render .inner {
  padding: 0;
}
.view .inner .view-main .render-result {
  width: 100%;
  height: 100%;
  display: none;
}
.view .inner .view-main .render-result.show {
  display: block;
}
.view .inner .view-main .swiper-container .swiper-slide .inner:before {
  display: inline-block;
  width: 0;
  height: 100%;
  content: " ";
  vertical-align: middle;
}
.view .inner .view-main .swiper-container .swiper-slide .inner .render-resource {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}


.view .inner .view-main .spinner-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.view .inner .view-main .spinner-container .loading-spinner {
  width: 200px;
  height: 200px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  position: relative;
}
.view .inner .view-main .spinner-container .loading-spinner .inner-image {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  border-radius: 50%;
  background-color: rgba(27, 115, 64, 1);
}
.view .inner .view-main .spinner-container .loading-spinner .progress-circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.view .inner .view-main .spinner-container .loading-spinner .progress-circle svg {
  width: 100%;
  height: 100%;
}
.view .inner .view-main .spinner-container .loading-spinner .progress-circle svg > path {
  fill: none;
  stroke: #fff;
  stroke-width: 5px;
}
.view .inner .view-main .spinner-container  {
  text-align: center;
}

.bar-area-left {
  padding:  0 0 0 10px;
}
.bar-area-right {
  text-align: right;
  padding:  0 10px 0 0;
}
.select-doc {
  display: inline-block;
}


.bar-area select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background-color: #2f8247;
  color: #fff;
  padding: 3px 6px 3px 30px;
  border: none;
  border-radius: 0;
  font-size: 16px;
  cursor: pointer;

  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+Cgk8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDogIzAwMDsgb3BhY2l0eTogMC4yOyIvPgo8L3N2Zz4K'),
                    url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEyOSAxMjkiPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Im0xMjEuMywzNC42Yy0xLjYtMS42LTQuMi0xLjYtNS44LDBsLTUxLDUxLjEtNTEuMS01MS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDUzLjksNTMuOWMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAxLDAgMi4xLTAuNCAyLjktMS4ybDUzLjktNTMuOWMxLjctMS42IDEuNy00LjIgMC4xLTUuOHoiLz4KPC9zdmc+Cg==');

  background-repeat: no-repeat;
  background-size: 26px 100%, auto 70%;
  background-position: 0 0, 5px center;
}
.bar-area select option {
  font-size: 0.5em;
}
.bar-area .select-proxy {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background-color: #2f8247;
  color: #fff;
  padding: 3px 6px 3px 30px;
  border: none;
  border-radius: 0;
  font-size: 0.9em;
  cursor: pointer;

  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+Cgk8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDogIzAwMDsgb3BhY2l0eTogMC4yOyIvPgo8L3N2Zz4K'),
                    url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEyOSAxMjkiPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Im0xMjEuMywzNC42Yy0xLjYtMS42LTQuMi0xLjYtNS44LDBsLTUxLDUxLjEtNTEuMS01MS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDUzLjksNTMuOWMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAxLDAgMi4xLTAuNCAyLjktMS4ybDUzLjktNTMuOWMxLjctMS42IDEuNy00LjIgMC4xLTUuOHoiLz4KPC9zdmc+Cg==');

  background-repeat: no-repeat;
  background-size: 26px 100%, auto 70%;
  background-position: 0 0, 5px center;
}

@media screen and (max-width: 360px) {
  .bar-area select {
    max-width: 100px;
  }
}