.web-section
    position: relative
    display: flex
    align-items: center
    border-bottom: var(--editor-border-width) solid var(--editor-border-color)
    background: var(--editor-border-color)
    a
        &:link
            text-decoration: none

.align-buttons-right
    position: absolute
    right: 10px
.align-buttons-center
    display: flex
    position: absolute
    left: 50%

.statusbar
    background: var(--editor-border-color)
    border-top: var(--editor-border-width) solid var(--editor-border-color)
    display: flex
    justify-content: right

main
    height: 100% !important
    display: flex
    flex-direction: column
.screen
    background: var(--editor-border-color)
    flex: 1
    display: flex
.viewport
    display: flex
    border-right: solid calc(var(--editor-border-width)/1.5) var(--editor-border-color)
    border-radius: 20px
    flex: 1
    background: #444
    min-width: 600px
.sidepanel
    border-left: solid calc(var(--editor-border-width)/1.5) var(--editor-border-color)
    border-radius: 20px
    // background: var(--editor-header-bg)
    min-width: 300px
    display: flex
    flex-direction: column
.sidepanel-resize
    width: var(--editor-border-width)
    cursor: col-resize
    // background: blue
    top: 0
    bottom: 0
.outliner
    border-bottom: solid calc(var(--editor-border-width)/1.5) var(--editor-border-color)
    border-radius: 20px
    display: flex
    flex-direction: column
    // background: var(--editor-header-bg)
    height: 300px
    // max-height: 40%
.outliner-resize
    height: var(--editor-border-width)
    left: 0
    right: 0
    // background: green
    cursor: row-resize
.properties
    flex: 1
    border-top: solid calc(var(--editor-border-width)/1.5) var(--editor-border-color)
    border-radius: 20px
    background: var(--editor-header-bg)
    display: flex
    flex-direction: column

.editor-header
    border-top-left-radius: 20px
    border-top-right-radius: 20px
.canvas-editor
    border-radius: 20px
    box-sizing: border-box
    background-color: var(--node-editor-bg)
    position: relative
    display: flex
    flex-flow: column
    flex-grow: 1
.layout-editor
    position: relative
    box-sizing: border-box
    flex: 1
    // min-width: 300px
    width: 100%
    height: 100%
.canvas
    // preserveAspectRatio:
    cursor: crosshair
    position: absolute
    min-width: 100px
    width: 100%
    height: 100%

.axis
    vector-effect: non-scaling-stroke
    stroke-width: 1
.x-axis
    stroke: #597631
.y-axis
    stroke: #843d47
.grid
    stroke: #4f4f4f

.terminal
  z-index: 5
  box-sizing: border-box
  font-size: var(--font-size)
  border-radius: 10px 10px 0 0
  left: 50%
  transform: translate(-50%)
  background: rgba(.2,.2,.2,.8)
  position: absolute
  bottom: 0
  width: 600px
  height: 90px
.terminal-log
    display: flex
    flex-direction: column
    width: 100%
    height: 90px
    box-sizing: border-box
    position: absolute
    top: 0px
    padding: 10px 20px 20px 20px
    overflow: scroll
.terminal-input
  box-sizing: border-box
  border-radius: 5px
  padding: 4px
  display: flex
  align-items: center
  width: 100%
  height: 20px
  position: absolute
  bottom: 0
  background: rgb(10,10,10)
.align-right
  position: absolute
  right: 0
.terminal-input-field
  box-sizing: border-box
  margin-left: 10px
  width: 92%
  color: white
  background: rgba(0,0,0,0)
  border: 0
  outline: none
.newDrawing
    // vector-effect: non-scaling-stroke
    stroke: white
    stroke-width: .2
    stroke-linecap: round
    fill: transparent
    // &:hover
    //     stroke: red
.elementHover
    // stroke: orange
    opacity: .4
    stroke-width: .4    
.elementSelected
    // stroke: yellow
    opacity: .4
    // stroke-width: .4    

.svg_select_points_point
    vector-effect: non-scaling-stroke
    fill-opacity: .5
    // cursor: move
    stroke: orange
    fill: black
    stroke-width: 5

.selectionRectangle
    vector-effect: non-scaling-stroke
    stroke: white
    fill: white
    fill-opacity: .2
.selectionRectangleRight
    stroke-dasharray: 4

.outliner-root
    padding-left: 0px
    margin: 0
    width: 100%
    list-style-type: none
    box-sizing: border-box
    // padding: 10px 0px 0px 0px
    // background: #282828
    li
        cursor: default
        text-indent: 10px
        line-height: 22px

        // box-sizing: 
        // padding: 20px
        width: 100%
        padding-left: 0px
        box-sizing: border-box
        
.outliner-list  
    padding: 0
    ul
        padding-left: 15px
    li
        width: 100%
        cursor: pointer
        display: flex
        flex-direction: row
        // align-items: center
        // padding: 0px 20px
        // height: 22px
        // list-style-type: none
        // text-indent: 0
    li
        &:hover
            background: #464646


.outliner-container
    overflow-y: scroll !important
    flex: 1
    background: linear-gradient(to bottom,#282828,#282828 50%,#2b2b2b 50%,#2b2b2b)
    background-size: 100% 44px
    background-attachment: local
    border-radius: 0 0 20px 20px
    display: flex
    align-items: flex-start

.outliner-selected
    background: #334d80  !important
    &:hover
        background: #4d6490 !important

.properties-container
    flex: 1
    background: #303030
    display: flex
    border-radius: 0 0 20px 20px
    overflow: hidden

.properties-side-icons
    display: flex
    flex-direction: column
    align-items: center
    width: 27px
    background: #1d1d1d

.properties-icon-button
    border-radius: 5px 0px 0px 5px
    border: solid 3px #1d1d1d
    &.active
        background-color: #303030
        border-color: #303030
        opacity: 1

.properties-panel-container 
    flex: 1
    background-color: #303030
.properties-panel
    margin: 10px
    padding: 10px
    border-radius: 5px
    background-color: #3d3d3d

.dropdown-menu
    transition: opacity .5s
    border-radius: 7px
    // display: none
    opacity: 0
    position: absolute
    left: 30px
    top: 30px
    background: var(--editor-border-color)
    ul
        display: block
        padding: 5px
    li
        padding: 10px !important
        margin-left: 0 !important
        &:hover
            border-radius: 7px
            background: var(--editor-header-bg)

.overlay-menu
    border-top: 30px
    padding: 20px
    transition: opacity .5s
    border-radius: 7px
    // display: none
    opacity: 0
    position: absolute
    top: 35px
    right: -19px
    background: var(--editor-border-color)
    ul
        display: block
        padding: 5px
    li
        padding: 10px !important
        margin-left: 0 !important
        &:hover
            border-radius: 7px
            background: var(--editor-header-bg)

.show-menu
    opacity: 1
    // display: inline
    z-index: 10


/* Flip the vertical axis in <g> to emulate cartesian. */
svg.cartesian
  transform: scaleY(-1)

/* Re-flip all <text> element descendants to their original side up. */
svg.cartesian text
  transform: scaleY(-1)

.is-active
    background-color: var(--accent-color)
    opacity: 1