@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
@import '@vue-flow/controls/dist/style.css';
@import '@vue-flow/minimap/dist/style.css';
@import '@vue-flow/node-resizer/dist/style.css';

html,
body,
#app {
  margin: 0;
  height: 100%;
}

#app {
  /* text-transform: uppercase; */
  font-family: 'JetBrains Mono', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.vue-flow__minimap {
  transform: scale(75%);
  transform-origin: bottom right;
}

.dnd-flow {
    flex-direction:column;
    display:flex;
    height:100%
}

.dnd-flow aside {
    color:#fff;
    font-weight:700;
    border-right:1px solid #eee;
    padding:15px 10px;
    font-size:12px;
    background:#10b981bf;
    -webkit-box-shadow:0px 5px 10px 0px rgba(0,0,0,.3);
    box-shadow:0 5px 10px #0000004d
}

.dnd-flow aside .nodes>* {
    margin-bottom:10px;
    cursor:grab;
    font-weight:500;
    -webkit-box-shadow:5px 5px 10px 2px rgba(0,0,0,.25);
    box-shadow:5px 5px 10px 2px #00000040
}

.dnd-flow aside .description {
    margin-bottom:10px
}

.dnd-flow .vue-flow-wrapper {
    flex-grow:1;
    height:100%
}

@media screen and (min-width: 640px) {
    .dnd-flow {
    flex-direction:row
}

.dnd-flow aside {
    min-width:25%
}


}

@media screen and (max-width: 639px) {
    .dnd-flow aside .nodes {
    display:flex;
    flex-direction:row;
    gap:5px
}


}

.dropzone-background {
    position:relative;
    height:100%;
    width:100%
}

.dropzone-background .overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1;
    pointer-events:none
}

.basic-flow.dark {
    background:#2d3748;
    color:#fffffb
}

.basic-flow.dark .vue-flow__node {
    background:#4a5568;
    color:#fffffb
}

.basic-flow.dark .vue-flow__node.selected {
    background:#333;
    box-shadow:0 0 0 2px #2563eb
}

.basic-flow .vue-flow__controls {
    display:flex;
    flex-wrap:wrap;
    justify-content:center
}

.basic-flow.dark .vue-flow__controls {
    border:1px solid #FFFFFB
}

.basic-flow .vue-flow__controls .vue-flow__controls-button {
    border:none;
    border-right:1px solid #eee
}

.basic-flow .vue-flow__controls .vue-flow__controls-button svg {
    height:100%;
    width:100%
}

.basic-flow.dark .vue-flow__controls .vue-flow__controls-button {
    background:#333;
    fill:#fffffb;
    border:none
}

.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
    background:#4d4d4d
}

.basic-flow.dark .vue-flow__edge-textbg {
width: 100px;
height: 30px;
    fill:#292524
}

.basic-flow.dark .vue-flow__edge-text {
    fill:#fffffb
}