@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;800;900&display=swap');

/* Buttons transitions */
.btn-trans span {
    max-width: 0;
    -webkit-transition: max-width 1s;
    transition: max-width 1s;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
}
.btn-trans:hover span {
    max-width: 14rem;
}

body { 
    font-family: 'Inter' !important;
}

img.logo-icon {
    width: 200px;
}
button:focus {
    outline:0 !important;
}

#app-toolbar {
    position: absolute;
    top: 15px;
    right: 10px;
    z-index: 9999;
    opacity: 0.9;
}

#app-toolbar .glyphicon {
    font-size: small;
    margin-right: 2px;
}

#editor {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

#main-body {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
.node-text {
    color: #fff !important;
    stroke: #ffffffcf !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 200;
}
path.link {
    stroke: #272727;
}

#editor {
    margin: 20px !important;
}

.ace_scrollbar::-webkit-scrollbar {
    width: 1em;
}

.ace_scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
}

.ace_scrollbar::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}
.header {
    background: transparent !important;
    box-shadow: none;
}

.ace-merbivore-soft {
    background-color: rgb(24 24 27 / 0.5) !important;
    --tw-backdrop-blur: blur(64px) !important;
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
}
.ace_gutter {
    background-color: rgb(24 24 27 / 0.5) !important;
}
.ace-merbivore-soft .ace_print-margin {
    background: transparent !important;
}
.ace-merbivore-soft .ace_marker-layer .ace_active-line {
    opacity: 0.4 !important;
}