/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
.layer-label-white {
  color: white;
}

.layer-label-black {
  color: black;
}

.settings-button {
  width: 21px;
  height: 21px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: bottom;
  border: none;
}

.settings-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.mirrored {
  transform: scaleX(-1);
}

.rotated {
  transform: rotate(90deg);
}

.subtree-placer-settings {
  margin-top: 20px;
}

.option-element {
  width: 100%;
}

#layer-section {
  background-color: crimson;
  padding: 5px;
}

#rotation-buttons {
  display: flex;
  justify-content: space-between;
}

#rotation-buttons > .settings-button {
  width: 60px;
  height: 60px;
  margin: 0;
  font-size: 40px;
}

#layer-label {
  font-weight: bold;
  font-size: larger;
  margin-right: 10px;
}

#layer-index {
  width: 50px;
}

#select-subtree-placer {
  width: 100%;
  min-width: 270px;
}

#select-subtree-placer-label {
  width: 20%;
}

#previewComponent {
  height: 25%;
  background-color: white;
  margin-top: 20px;
}
.demo-properties__settings {
  margin: 10px 0 10px 0;
}
.center {
  display: flex;
  align-items: center;
}
.main-container .interaction-panel {
  flex: 0 1 382px;
  width: 382px;
}
.number-label {
  width: 3ch;
  text-align: right;
}