/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
Application CSS
*/

html {
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

*, *:before, *:after {
  box-sizing: inherit;
  -moz-user-select: inherit;
  -webkit-user-select: inherit;
  -ms-user-select: inherit;
  user-select: inherit;
}

body {
    overflow: hidden;
}

#app {
    position: absolute;
    width: 100%;
    height: 100%;
}

input, textarea {
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.fullscreen {
    position: absolute;
    width: 100%;
    height: 100%;
}

#page {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 16px;
}

input {
    background-color:rgba(0, 0, 0, 0);
}

#libfilter {
    width: 85%;
    margin-top: 10px;
    background-color: white;
}

#editorouter {
    position: absolute;
    height: 100%;
    background-color: #CCC;
    overflow: hidden;
}

#editor {
    position: absolute;
    overflow: visible;
    height: 100px;
    width: 100px;
}

#menubar {
    position: absolute;
    display: inline-block;
}

#library {
    position: absolute;
    width: 200px;
    height: 100%;
    right: 0px;
    top: 0px;
    background-color: #EEE;
}

#libtfdiv {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #EEE;
    padding: 10px;
    width: 100%;
}

#libmodulesdiv {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    padding-top: 60px;
}

.libmodule {
    padding: 10px;
}

.libelement {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    box-shadow: 0px 0px 0px 2px #888;
    padding: 1px;
}

.libelement:hover {
    box-shadow: 0px 0px 0px 2px #000;
}

.libelement-selected {
    box-shadow: 0px 0px 0px 2px #000;
    outline: 1px solid rgba(0, 0, 0, 0.4);
}

#output {
    position: absolute;
    width: 90%;
    height: 90%;
    background-color: white;
    left: 5%;
    top: 5%;
    overflow: scroll;
    font-family: monospace;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#compilediframe {
    width: 100%;
    height: 100%;
    position:absolute;
}

#compiledcode {
    width: 100%;
    height: 100%;
    position:absolute;
}

.element {
    position: absolute;
    display: inline-box;
    box-shadow: 0px 0px 0px 2px #888;
}

.element:hover {
    box-shadow: 0px 0px 0px 2px #000;
}

.inportOuter {
    position: relative;
}

.inportText {
    position: absolute;
    top: 50%;
    transform: translate(0%,-50%);
    padding-left: 15px;
    overflow: hidden;
    white-space: nowrap;
    border: 0px;
}

.outportText {
    position: absolute;
    top: 50%;
    transform: translate(0%,-50%);
    overflow: hidden;
    white-space: nowrap;
    border: 0px;
}

.inport {
    position: absolute;
    top: 50%;
    transform: translate(0%,-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #888;
}

.inport:hover {
    border-left: 10px solid #000;
}

.elementText {
    position: absolute;
    text-align: center;
    color: white;
    left: 0px;
    top: 0px;
    border-radius: 5px 5px 0px 0px;
    transform: translate(0,-100%);
    box-shadow: 0px 0px 0px 2px #888;
}

.elementText:hover {
    box-shadow: 0px 0px 0px 2px #000;
}

.outports {
    position: absolute;
    right: 0px;
    top: 0px;
}

.outportContainer {
    height: 20px;
    position: relative;
}

.outport {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translate(0%,-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #888;
}

.outport:hover {
    border-left: 10px solid #000;
}

.hline {
    position: absolute;
    height: 3px;
    background-color: #000;
}

.hline:hover {
    box-shadow: 0px 0px 5px #888888
}

.vline {
    position: absolute;
    width: 3px;
    background-color: #000;
}

.vline:hover {
    box-shadow: 0px 0px 5px #888888
}

.addinput {
    position: absolute;
    text-align: center;
    color: white;
    background-color: #444;
    height: 20px;
    left: 0px;
    bottom: -20px;
    border-radius: 0px 0px 5px 5px;
    box-shadow: 0px 0px 0px 2px #888;
}

.addinput:hover {
    box-shadow: 0px 0px 0px 2px #000;
}

.litValueInput {
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    border: 0px;
}

.elementTextInner {
    overflow: hidden;
    padding-top: 1px;
    padding-bottom: 3px;
}

.elementTextInput {
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    background-color: #AAA;
    margin: 0px;
    padding: 1px;
    border: 0px;
}

#dialogouter {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}

#dialoginner {
    position: absolute;
    background-color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 10px;
}

.share-link-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.share-link-input {
    width: 350px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.share-copy-btn {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    background-color: #4a90d9;
    color: white;
    border: none;
    border-radius: 4px;
}

.share-copy-btn:hover {
    background-color: #357abd;
}

.preferencediv {
    margin-top: 10px;
}

.typedescoutput {
    border: 1px solid black;
    background-color: white;
    position: relative;
    display: inline-block;
    top: -5px;
}

.typedescoutputerror {
    border: 1px solid black;
    background-color: red;
    position: relative;
    display: inline-block;
    top: -5px;
}

.outport div {
    opacity: 0.2;
}

.outport:hover div {
    opacity: 1;
}

.typedescinput {
    border: 1px solid black;
    background-color: white;
    position: absolute;
    display: inline-block;
    top: -8px;
    right: 15px;
}

.typedescinputerror {
    border: 1px solid black;
    background-color: red;
    position: absolute;
    display: inline-block;
    top: -8px;
    right: 15px;
}

.inport div {
    opacity: 0.2;
}

.inport:hover div {
    opacity: 1;
}

.topport {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #888;
}

.topport:hover {
    border-bottom: 10px solid #000;
}

.typedesctop {
    border: 1px solid black;
    background-color: white;
    position: absolute;
    display: inline-block;
    bottom: 0px;
    left: 15px;
    color: black;
}

.typedesctoperror {
    border: 1px solid black;
    background-color: red;
    position: absolute;
    display: inline-block;
    bottom: 0px;
    left: 15px;
    color: black;
}

.topport div {
    opacity: 0.2;
}

.topport:hover div {
    opacity: 1;
}

#select {
    position: absolute;
    background-color: rgba(0,0,0,0.1);
}

.resize {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 0;
	height: 0;
	border-bottom: 10px solid #888;
	border-left: 10px solid transparent;
}

.resize:hover {
    border-bottom: 10px solid #000;
}

.deleteport {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.typedesc {
    border: 1px solid black;
    background-color: white;
    position: absolute;
    display: inline-block;
    pointer-events: none;
    white-space: nowrap;
    padding-bottom: 3px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
}

.typeerror {
    border: 1px solid black;
    background-color: red;
    position: absolute;
    display: inline-block;
    pointer-events: none;
    white-space: nowrap;
    padding-bottom: 3px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
}

.ghost {
    position: absolute;
    opacity: 0.5;
    border: 1px solid black;
    background-color: white;
    min-width: 120px;
    min-height: 20px;
}

.elementError {
    border: 1px solid black;
    background-color: red;
    position: absolute;
    display: inline-block;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-100%,0);
}

#cross {
  background: red;
  height: 20px;
  position: absolute;
  width: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}
#cross:after {
  background: red;
  content: "";
  height: 2px;
  left: -9px;
  position: absolute;
  top: 9px;
  width: 20px;
  pointer-events: none;
}

#quickResults {
    position: absolute;
    width: 200px;
    pointer-events: auto;
}

#modelName {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 24px;
    font-style: italic;
    padding: 10px;
    color: rgba(0, 0, 0, 0.6);
}

.modelload {
    position: relative;
    margin-top: 10px;
}

.modelload h3 {
    display: inline-block;
}

.modelload h3:hover {
    cursor: pointer;
}

.deletemodel {
    position: absolute;
    display: inline-block;
    right: 0px;
}

.deletemodel:hover {
    color: red;
}

.savewarning {
    background-color: rgb(248, 215, 218);
    border: 1px solid rgb(245, 198, 203);
    padding: 5px;
    margin-top: 10px;
}

#compiletabs {
    border-bottom: 1px solid black;
}

.compiletab {
    display: inline-block;
    font-size: 16px;
    padding: 5px;
}

.compiletab:hover {
    cursor: pointer;
    background-color: rgb(204, 204, 204);
}

.tabselected {
    background-color: rgb(186, 225, 255);
}

#demotitle {
    margin-top: 10px;
}

.demolink {
    margin-top: 10px;
}

textarea {
  outline: none;
  resize: none;
  overflow-x: hidden;
  border-style: none;
}