@import url('https://use.fontawesome.com/releases/v5.3.1/css/all.css');
/* material-ui uses Roboto */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:100,300,400");

:root {
  --linkblue: #2196f3;
  --font-stack: 'Roboto', 'Lato', helvetica, arial, sans-serif;
  --base-width: 8px;
}

body {
  font-family: var(--font-stack);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: var(--linkblue);

  &:focus, &:hover, &:visited, &:link, &:active {
    text-decoration: none;
  }
}

/* Colored dot for indicating statuses */
div.status-table-dot {
  width: calc(2 * var(--base-width));
  height: calc(2 * var(--base-width));
  min-width: calc(2 * var(--base-width));
  border-radius: 50%;
}

div.success-rate-dot {
  width: calc(1 * var(--base-width));
  height: calc(1 * var(--base-width));
  min-width: calc(1 * var(--base-width));
  border-radius: 50%;
}

.breadcrumb-link a {
  color: white;
}

.version {
  max-width: 250px;
  padding: 24px;
  font-size: 12px;

  & .new-version-text {
    margin-bottom: 12px;
  }
}

div.octopus-graph-container {
  overflow-x: scroll;
  padding: 16px 0;
}

div.octopus-graph {
  max-width: 974px;
  min-width: 974px;
  margin-left: auto;
  margin-right: auto;
}

.octopus-body-node.neighbor {
  width: 220px;
}
.octopus-body-node.main {
  width: 244px;
}