@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;

}