.editor-3d-container {
  background: black; }
  .editor-3d-container .hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end; }
    .editor-3d-container .hud #viewcube {
      display: block;
      position: absolute;
      outline: none;
      width: 150px;
      height: 150px;
      opacity: 1 !important;
      margin: 0;
      -webkit-transition: opacity 0.2s ease;
      -moz-transition: opacity 0.2s ease;
      -ms-transition: opacity 0.2s ease;
      -o-transition: opacity 0.2s ease;
      transition: opacity 0.2s ease; }
  .editor-3d-container .hud-element canvas {
    opacity: 0.5;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease; }
    .editor-3d-container .hud-element canvas:hover {
      opacity: 1; }
  .editor-3d-container .viewcube__button {
    display: block;
    position: absolute;
    outline: none;
    width: 32px;
    height: 32px;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    z-index: 1;
    background-color: white; }
  .editor-3d-container .button-container-svg {
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 30px;
    min-height: 30px;
    opacity: 0.65; }
    .editor-3d-container .button-container-svg:hover {
      opacity: 1; }
    .editor-3d-container .button-container-svg:active {
      opacity: 1; }
  .editor-3d-container .home-view-container {
    background: url('data:image/svg+xml;utf8,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><title>icons</title><path d="M18.5,21h-3a0.5,0.5,0,0,1-.5-0.5V16H13v4.5a0.5,0.5,0,0,1-.5.5h-3A0.5,0.5,0,0,1,9,20.5V15H7a0.5,0.5,0,0,1-.37-0.84l7-7.5a0.5,0.5,0,0,1,.8.09c0.36,0.47,4.32,4.66,6.93,7.4A0.5,0.5,0,0,1,21,15H19v5.5A0.5,0.5,0,0,1,18.5,21ZM16,20h2V14.5a0.5,0.5,0,0,1,.5-0.5h1.33C16.19,10.17,14.64,8.51,14,7.75L8.15,14H9.5a0.5,0.5,0,0,1,.5.5V20h2V15.5a0.5,0.5,0,0,1,.5-0.5h3a0.5,0.5,0,0,1,.5.5V20ZM14.5,7h0Z"/></svg>') no-repeat; }
    .editor-3d-container .home-view-container:hover {
      background: url('data:image/svg+xml;utf8,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><title>icons</title><path fill="%235C95DA" d="M18.5,21h-3a0.5,0.5,0,0,1-.5-0.5V16H13v4.5a0.5,0.5,0,0,1-.5.5h-3A0.5,0.5,0,0,1,9,20.5V15H7a0.5,0.5,0,0,1-.37-0.84l7-7.5a0.5,0.5,0,0,1,.8.09c0.36,0.47,4.32,4.66,6.93,7.4A0.5,0.5,0,0,1,21,15H19v5.5A0.5,0.5,0,0,1,18.5,21ZM16,20h2V14.5a0.5,0.5,0,0,1,.5-0.5h1.33C16.19,10.17,14.64,8.51,14,7.75L8.15,14H9.5a0.5,0.5,0,0,1,.5.5V20h2V15.5a0.5,0.5,0,0,1,.5-0.5h3a0.5,0.5,0,0,1,.5.5V20ZM14.5,7h0Z"/></svg>') no-repeat; }
  .editor-3d-container .ortho-view-container {
    background: url('data:image/svg+xml;utf8,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><title>icons</title><path d="M19.25,13H9.83L7.75,8h9.42ZM10.5,12h7.25L16.5,9H9.25Z"/><path d="M19,21H10V12h9v9Zm-8-1h7V13H11v7Z"/><path d="M8.5,16.5A0.5,0.5,0,0,1,8,16V9A0.5,0.5,0,0,1,9,9v7A0.5,0.5,0,0,1,8.5,16.5Z"/><path d="M10,20.5a0.5,0.5,0,0,1-.47-0.32l-1.5-4A0.5,0.5,0,1,1,9,15.82l1.5,4a0.5,0.5,0,0,1-.29.64A0.48,0.48,0,0,1,10,20.5Z"/><rect x="6" y="20" width="16.33" height="1.2" rx="0.59" ry="0.59"/></svg>') no-repeat; }
    .editor-3d-container .ortho-view-container:hover {
      background: url('data:image/svg+xml;utf8,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><title>icons</title><path fill="%235C95DA" d="M19.25,13H9.83L7.75,8h9.42ZM10.5,12h7.25L16.5,9H9.25Z"/><path fill="%235C95DA" d="M19,21H10V12h9v9Zm-8-1h7V13H11v7Z"/><path fill="%235C95DA" d="M8.5,16.5A0.5,0.5,0,0,1,8,16V9A0.5,0.5,0,0,1,9,9v7A0.5,0.5,0,0,1,8.5,16.5Z"/><path fill="%235C95DA" d="M10,20.5a0.5,0.5,0,0,1-.47-0.32l-1.5-4A0.5,0.5,0,1,1,9,15.82l1.5,4a0.5,0.5,0,0,1-.29.64A0.48,0.48,0,0,1,10,20.5Z"/><rect fill="%235C95DA" x="6" y="20" width="16.33" height="1.2" rx="0.59" ry="0.59"/></svg>') no-repeat; }
  .editor-3d-container .persp-view-container {
    background: url('data:image/svg+xml;utf8,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><defs><style>.cls-1,.cls-2{fill:none;stroke:%23000;stroke-miterlimit:10;}.cls-2{stroke-width:1.3px;}</style></defs><title>icons</title><polygon class="cls-1" points="18.5 17.03 13.5 21.39 8.5 17.03 8.5 9.42 13.5 6.61 18.5 9.42 18.5 17.03"/><polyline class="cls-1" points="8.44 9.31 13.5 13 13.5 21"/><line class="cls-1" x1="18.53" y1="9.42" x2="13.47" y2="13"/><line class="cls-2" x1="14" y1="21" x2="22.5" y2="13.5"/><line class="cls-2" x1="13" y1="21" x2="5" y2="14"/></svg>') no-repeat; }
    .editor-3d-container .persp-view-container:hover {
      background: url('data:image/svg+xml;utf8,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><defs><style>.cls-1,.cls-2{fill:none;stroke:%235C95DA;stroke-miterlimit:10;}.cls-2{stroke-width:1.3px;}</style></defs><title>icons</title><polygon class="cls-1" points="18.5 17.03 13.5 21.39 8.5 17.03 8.5 9.42 13.5 6.61 18.5 9.42 18.5 17.03"/><polyline class="cls-1" points="8.44 9.31 13.5 13 13.5 21"/><line class="cls-1" x1="18.53" y1="9.42" x2="13.47" y2="13"/><line class="cls-2" x1="14" y1="21" x2="22.5" y2="13.5"/><line class="cls-2" x1="13" y1="21" x2="5" y2="14"/></svg>') no-repeat; }
  .editor-3d-container .fit-view-container {
    background: url('data:image/svg+xml;utf8,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><title>icons</title><path d="M20.5,11.5A0.5,0.5,0,0,1,20,11V8H17a0.5,0.5,0,0,1,0-1h3.5a0.5,0.5,0,0,1,.5.5V11A0.5,0.5,0,0,1,20.5,11.5Z"/><path d="M20.5,21H17a0.5,0.5,0,0,1,0-1h3V17a0.5,0.5,0,0,1,1,0v3.5A0.5,0.5,0,0,1,20.5,21Z"/><path d="M7.5,11.5A0.5,0.5,0,0,1,7,11V7.5A0.5,0.5,0,0,1,7.5,7H11a0.5,0.5,0,0,1,0,1H8v3A0.5,0.5,0,0,1,7.5,11.5Z"/><path d="M11,21H7.5A0.5,0.5,0,0,1,7,20.5V17a0.5,0.5,0,0,1,1,0v3h3A0.5,0.5,0,0,1,11,21Z"/></svg>') no-repeat; }
    .editor-3d-container .fit-view-container:hover {
      background: url('data:image/svg+xml;utf8,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><title>icons</title><path fill="%235C95DA" d="M20.5,11.5A0.5,0.5,0,0,1,20,11V8H17a0.5,0.5,0,0,1,0-1h3.5a0.5,0.5,0,0,1,.5.5V11A0.5,0.5,0,0,1,20.5,11.5Z"/><path fill="%235C95DA" d="M20.5,21H17a0.5,0.5,0,0,1,0-1h3V17a0.5,0.5,0,0,1,1,0v3.5A0.5,0.5,0,0,1,20.5,21Z"/><path fill="%235C95DA" d="M7.5,11.5A0.5,0.5,0,0,1,7,11V7.5A0.5,0.5,0,0,1,7.5,7H11a0.5,0.5,0,0,1,0,1H8v3A0.5,0.5,0,0,1,7.5,11.5Z"/><path fill="%235C95DA" d="M11,21H7.5A0.5,0.5,0,0,1,7,20.5V17a0.5,0.5,0,0,1,1,0v3h3A0.5,0.5,0,0,1,11,21Z"/></svg>') no-repeat; }
  .editor-3d-container .zoomin-view-container {
    background: url('data:image/svg+xml;utf8,<svg id="final" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>icon-zoom-in</title><path d="M22,15H17V10a1,1,0,0,0-2,0v5H10a1,1,0,0,0,0,2h5v5a1,1,0,0,0,2,0V17h5a1,1,0,0,0,0-2Z"/></svg>') no-repeat; }
    .editor-3d-container .zoomin-view-container:hover {
      background: url('data:image/svg+xml;utf8,<svg id="final" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>icon-zoom-in</title><path fill="%235C95DA" d="M22,15H17V10a1,1,0,0,0-2,0v5H10a1,1,0,0,0,0,2h5v5a1,1,0,0,0,2,0V17h5a1,1,0,0,0,0-2Z"/></svg>') no-repeat; }
  .editor-3d-container .zoomout-view-container {
    background: url('data:image/svg+xml;utf8,<svg id="final" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>icon-zoom-out</title><path d="M23,17H9a1,1,0,0,1,0-2H23a1,1,0,0,1,0,2Z"/></svg>') no-repeat; }
    .editor-3d-container .zoomout-view-container:hover {
      background: url('data:image/svg+xml;utf8,<svg id="final" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>icon-zoom-out</title><path fill="%235C95DA" d="M23,17H9a1,1,0,0,1,0-2H23a1,1,0,0,1,0,2Z"/></svg>') no-repeat; }