@import "bootstrap/variables";

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

.toolbar-menu {
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
  margin-bottom: 20px;
  .button {
    color: #ccc;
    cursor: pointer;
    margin-right: 10px;
  }

  .button[data-active="true"] {
    color: black;
  }
}

.editor-wrapper {
  border: 1px solid #efefef;
  padding: 20px;
}


@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.note {
    position: relative;
    padding-left: 70px;
    margin-bottom: 20px;
    min-height: ($line-height-computed * 3);

    &:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 27px;
        z-index: -1;
        display: block;
        width: 2px;
        background-color: #e6ebf1;
    }

    .start, .finish {
        position: absolute;
        background-color: #fff;
    }

    .start {
        top: 0;
        left: 0;
    }
    .finish {
        bottom: 0;
        left: 0;
    }
}

span.annotation {
    background-color: yellow;
    text-decoration-line: underline;
    text-decoration-style: dotted;

}