.graphs {
  //.graph-box { max-height: 100%; }

	.form {
		p.field {
			padding-bottom: 8px;
		}

    .inner2 {
      padding-bottom: 10px;

      .box {
        margin-bottom: 0;
      }
    }

		.border {
			z-index: 1;
			overflow: auto;

			height: 100%;
			background: #fff;
    }


		label {
			color: #333;
			padding-bottom: 3px;
			display: block;
		}

		label[for=excludeOtp] {
			cursor: pointer;
			font-size: 12px;
			line-height: 12px;
			input, span {
				vertical-align: middle;
			}
		}

    .btn-container{ text-align: center; }

	}

	.main {
		.inner2 {
			padding: 10px 10px 10px 0;
		}

		.border {
			z-index: 1;
			overflow: auto;

			@include box-sizing(border-box);
			height: 100%;
			background: #fff;
			border: 1px solid #bbb;

			> p {
				padding: 5px;
				color: #333;
			}
		}
	}

	.error {
		strong {
			margin: 10px;
			font-size: 16px;
			color: $error-color;
			display: block;
		}
		p {
			margin: 10px;
			color: $error-color;
		}
	}

	.results-text {
		padding: 5px;
		font-family: $monospace-font;
		font-size: 12px;

		p {
			color: #555;
			text-indent: -30px;
			padding-left: 30px;
			&:hover {
				background: #f5f5f5;
			}
		}
		em {
			font-style: normal;
			color: #000;
		}
	}

	.results-svg {
		height: 100%;

		ul {
			padding: 15px 30px;
		}
		a {
			color: #21a9e3;
			outline: 0;
			@extend %smart-underline;
		}
		.image {
			border: 0;
			width: 100%;
			height: 100%;
		}
	}

	.results-smart, .results-collapsible {
		height: 100%;

		> div {
			border: 0;
			overflow: hidden;
			width: 100%;
			height: 100%;
		}
	}

  .results-collapsible {
    &.dragging {
      cursor: move;
    }

    &.loading:before {
      content: 'Loading...'
    }

    &.no-results:before {
      content: 'No results found.'
    }

    > button {
      position: absolute;
      top: 20px;
      left: 10px;
      display: none;
    }

    #graph-search {
      display: none;
      position: absolute;
      top: 20px;
      left: 170px;
      width: 180px;
      opacity: 0.8;
    }

    #clear-search {
      display: none;
      position: absolute;
      top: 30px;
      left: 330px;
      opacity: 0.8;
      cursor: pointer;
    }

    &:hover {
      > button {
        display: block;
      }

      > #graph-search, #clear-search {
        display: block;
      }
    }

  }
}

.collapsible-settings {
	height: 0px !important;
}

.graphs-select-container {
	width: 100%;

  .select2-search-choice {
    top: 2px;

    .select2-search-choice-close {
      top: 4px;
    }
  }

  .select2-search-field > input {
    margin-top: -4px !important;
  }
}

// D3-as gráfhoz tartoznak
.graphs {
  .link {
    fill: none;
    stroke: #666;
    stroke-width: 3px;
    opacity: 0.4;
  }

  .node {
    fill: #ccc;

    &.node-root {
      fill: #000;
    }

    &.node-module {
      fill: rgb(255, 127, 14);
    }

    &.node-function,
    &.node-func {
      fill: rgb(31, 119, 180);
    }

    &.recent {
      fill: red !important;
    }

    &.search-result {
      fill: yellow !important;
    }
  }

  #toggle-animation {
    left: 120px;
  }

  text {
    fill: #000;
    font: 10px;
    pointer-events: none;
  }

}

.sigma-tooltip {
        display: block;
        max-width: 240px;
        min-height: 150px;
        background-color: rgb(249, 247, 237);
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        border-radius: 6px;
    }

.sigma-tooltip-header {
  font-size: 120%;
  color: #437356;
  border-bottom: 1px solid #aac789;
  padding: 10px;
}

.sigma-tooltip-body {
  padding: 10px;

  th {
    color: #999;
    text-align: left;
  }

  td {
    color: black;
    padding: 5px;
  }
}

.sigma-tooltip-footer {
  padding: 10px;
  border-top: 1px solid #aac789;
}

.sigma-tooltip {
    > .arrow {
  border-width: 10px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
    }
}

.sigma-tooltip.top {
        margin-top: -12px;
        > .arrow {
            left: 50%;
            bottom: -10px;
            margin-left: -10px;
            border-top-color: rgb(249, 247, 237);
            border-bottom-width: 0;
        }
    }
.sigma-tooltip.bottom{
        margin-top: 12px;
        > .arrow {
              left: 50%;
              top: -10px;
              margin-left: -10px;
              border-bottom-color: rgb(249, 247, 237);
              border-top-width: 0;
            }
    }
.sigma-tooltip.left {
          margin-left: -12px;
        > .arrow {
          top: 50%;
          right: -10px;
          margin-top: -10px;
          border-left-color: rgb(249, 247, 237);
          border-right-width: 0;
            }
        }
.sigma-tooltip.right {
        margin-left: 12px;
        > .arrow {
              top: 50%;
              left: -10px;
              margin-top: -10px;
              border-right-color: rgb(249, 247, 237);
              border-left-width: 0;
        }
    }
