@font-face {
    font-family: Inter;
    src: url("../fonts/Inter/Inter-VariableFont_wght.ttf") format("truetype");
    font-weight: 1 999;
}

@media (max-width: 768px) {
    .container {
        max-width: 90vw;
    }
}

body {
    min-width: 300px;
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}

.NavBut{
    font-size: 20px;
}
 
.TopText{
    color: white;
    font-size: 12px;
}

.TopSlide{
    accent-color: #00d4ff;
}

.canvas-control {
    z-index: 150;
}

.side-output-t{
    border: 1px solid;
}

.side-output-tr{
    border: 1px solid;
}

.side-output-td{
    border: 1px solid;
}

.hidden-link:not(:hover) {
    color: inherit;
    text-decoration: inherit;
}
.hidden-link {
    transition: color .2s;
}

html {
    scroll-behavior: smooth;
}

.icon-link {
    display: inline-flex;
    align-items: center;
}
.icon-link > .bi {
    margin-top: .125rem;
    margin-left: .125rem;
    transition: transform .2s ease-in-out;
    fill: currentColor;
}
.icon-link:hover > .bi {
    transform: translate(.25rem);
}

#wrapper {
    display: flex;
}

#canvas-wrapper {
    width: calc(100% - 2*225px);
    transition: all .2s ease-in-out;
}

#wrapper.sideBarHidden #canvas-wrapper{
    width: calc(100% - 225px);
}

#toolbar {
    width: 225px;
}

#sideBar {
    padding: 1rem;
    border-left: 2px solid black;
    width: 225px;
    overflow: auto;
    transition: all .2s ease-in-out;
}

.sideBarHidden #sideBar{
    width: 0;
    padding: 0;
}

.topBarHidden *{
    visibility: hidden;
    overflow: hidden;
}

.expertModeHidden *{
    display: none;
}

#canvas {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    transition: all .2s;
}

#canvas-background {
    position: absolute;
    display: flex;
    min-width: 100%;
    min-height: 100%;
    background-image: linear-gradient(rgba(211, 211, 211, 0.5) .1em, transparent .1em), linear-gradient(90deg, rgba(211, 211, 211, 0.5) .1em, transparent .1em);
    background-size: 15px 15px;
}

.canvas-element {
    z-index: 100;
    position: absolute;
    transition: all .2s ease-in-out;
}

[data-active-tool="move"] .canvas-element.draggable{
    cursor: pointer;
    touch-action: none;
}

#canvas .canvas-element.dragging {
    transition: none;
    cursor: move;
}

[data-active-tool="delete"] .canvas-element.deleteable{
    cursor: pointer;
}


.line{
    z-index: 50;
    border-radius: 100vw;
}

[data-active-tool="delete"] .line {
    cursor: pointer;
}

.neuron {
    z-index: 100;
    height: 150px;
    display: flex;
}

.neuron .neuron-footer {
    background-color: #264653;
    display: flex;
    align-items: center;
}

.neuron .neuron-body {
    background-color: #264653;
    display: flex;
    align-items: end;
}

.neuron .neuron-head {
    background-color: #264653;
    height: 100%;
    aspect-ratio: 1/1.5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.neuron .neuron-bias-icon {
    margin: 0 15px 0 15px;
}

.bias-input-value {
    background-color:white;
    margin: 1px;
    border-radius: 15px;
    width: 50px;
    font-size: 8px;
    border: none;
}
.bias-input-value-side {
    background-color:white;
    margin: 1px;
    border-radius: 15px;
    width: 50px;
    font-size: 12px;
    border: none;
}

.neuron .neuron-inputs {
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.neuron-input{
    display: flex;
    height: 15px;
}

.neuron-input-icon {
    height: 100%;
    aspect-ratio: 1/1;
    clip-path: polygon(100% 50%,0 0, 0 100%);
    background-color: white;
    transition: transform .1s ease-in-out;
}

.neuron-bias-icon {
    height: 15px;
    aspect-ratio: 1/1;
    clip-path: polygon(50% 0,0 100%, 100% 100%);
    background-color: white;
    transition: transform .1s ease-in-out;
}

[data-bias-active=true] .neuron-bias-icon{
    background-color: red;
}

[data-bias-active=false] .bias-input-value{
    visibility: hidden;
}

.neuron-input.free .neuron-input-weight{
    visibility: hidden;
}

.neuron-input-weight {
    margin: 1px;
    border-radius: 15px;
    width: 50px;
    font-size: 10px;
    border: none;
}

.neuron-input-last-weight {
    margin: 1px;
    width: 50px;
    font-size: 8px;
    border: none;
}

[data-active-tool="link"][data-linking-tool-status="select-input"] .neuron:hover .neuron-input.free .neuron-input-icon{
    transform: scale(1.5);
}

[data-active-tool="link"][data-linking-tool-status="select-input"] .output:hover .output-icon{
    transform: scale(1.5);
}


.neuron-output {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border-left: white solid;
    border-width: 0 2px;
    float: right;
    transition: transform .1s ease-in-out;
}

.output{
    z-index: 100;
    height: 50px;
    display: flex;
    background-color: #264653;
}
.eoutput{
    z-index: 100;
    height: 90px;
    width:620px;
    display: flex;
    background-color: #264653;
}
.output-icon{
    margin: 10px;
    height: 30px;
    width: 30px;
    clip-path:circle();
    background-color:white;
}


.output-text{
    margin: 10px;
    padding: 2px;
    background-color: white;
    color: black;
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
}
    

#farb {
    height: 150px;
    width: 30px;
    background: linear-gradient(rgb(0,255,0),rgb(255,0,0)); 
}

[data-active-tool="link"][data-linking-tool-status="select-output"] .neuron:hover .neuron-output{
    transform: scale(1.5);
}

.locked{
    background-color: red;
}

.chosenWeight {
    background-color: blue;
}

.lower {
    background-color: pink;
}

.higher {
    background-color: lawngreen;
}

.same {
    background-color: gray;
}

.isInOutputNeuronenListe{
    background-color: red;
}

.visitedNeuron {
    background-color: blue;
}

/* output */
.OutputToCurrentOutputNeuron {
    background-color: #0dcaf0;
}

.nachfolgeneuron {
    background-color: #0dcaf0;
}

.vorgaengerneuron {
    background-color: #ffc107;
}

.gewichtaktualisiert {
    background-color: yellow;
}

.debug {
    color: hotpink;
    background-color: hotpink;
}