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

  display: flex;

  align-items: center;

  .button {

    color: #ccc;

    cursor: pointer;

    margin-right: 10px;

  }

  .button[data-active="true"] {

    color: black;

  }

  > *:last-child {

    margin-left: auto;

    .checkbox {

        display: inline-block;

        margin-right: 10px;

    }

  }

}

.navbar {

    .material-icons {

        font-size: 20px;

        line-height: 20px;

    }

}

.hovering-menu {

    position: absolute;

    z-index: 1;

    top: -10000px;

    left: -10000px;

    margin-top: -20px;

    opacity: 0;

    transition: opacity .75s;

}

.categories-tooltip {

    background-color: #efefef;

    border-radius: 4px;

    border: 1px solid #ccc;

    padding: 5px;

    .buttons {

        display: flex;

        flex-wrap: wrap;

        justify-content: space-between;

        button {

            background-color: yellow;

            border: 1px solid #ccc;

        }

        button:not(:last-child) {

            margin-right: 10px;

        }

    }

    .form-group:last-child {

        margin-bottom: 0;

    }

}

.editor {

  display: flex;

  margin-bottom: 10px;

  &-left {

    width: 66.6666%;

    border: 1px solid #efefef;

    padding: 20px;

  }

  &-right {

    width: 33.3333%;

    padding-left: 20px;

    .form-control {

      height: 100%;

    }

  }

}

.session-container {

    position: absolute;

    top: 71px;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    .session-notes {

        overflow-y: hidden;

        width: 100%;

        display: flex;

        flex: 1;

        > * {

            padding-left: ($grid-gutter-width / 2);

            padding-right: ($grid-gutter-width / 2);

        }

        .notes-affix {

            min-width: 25%;

            > *:first-child {

                max-height: calc(100% - 20px);

                overflow-y: auto;

            }

        }

        .notes-list {

            min-width: 75%;

            overflow-y: auto;

        }

    }

}

@keyframes App-logo-spin {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}

.note {

    display: flex;

    position: relative;

    padding: 20px 10px 20px 80px;

    margin-bottom: 10px;

    cursor: pointer;

    min-height: ($line-height-computed * 4);

    border: 1px solid transparent;

    &:before {

        content: "";

        position: absolute;

        top: 0;

        bottom: 0;

        left: 37px;

        z-index: -1;

        display: block;

        width: 2px;

        background-color: #e6ebf1;

    }

    &:hover {

        border: 1px solid #efefef;

    }

    .start, .finish {

        position: absolute;

        background-color: #fff;

    }

    .start {

        top: 0;

        left: 0;

    }

    .finish {

        bottom: 0;

        left: 0;

        padding: 0 0 10px 10px;

    }

    &-content {

        width: 66.6666%;

    }

    &-margin-comment {

        width: 33.3333%;

        padding-left: 15px;

    }

}

span.annotation {

    background-color: yellow;

    text-decoration-line: underline;

    text-decoration-style: dotted;

}

.editor-fixed {

    border-top: 1px solid #efefef;

    background-color: #fff;

    padding: 20px 0;

}