.mbt-post-it{
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background-color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;

  > .post-it-topic{
    width: 100%;
    margin: 0;

    font-size: 1.7em;

    text-align: center;
    color: var(--textColor);
  }

  > .post-it-tool-bar{
    width: 100%;
    padding-left: 2em;
    padding-left: 2em;
    color: var(--textColor);

    display: flex;
    align-items: center;
    justify-content: space-between;

    > .post-it-filter-selector > *{
      margin-left: 1em;
      color: var(--postItTextColor);
      background-color: var(--main);
      border: none;
      outline: none;
    }

    > .post-it-change-display-button{
      border: none;
      color: white;
      background-color: var(--main);

      border-radius: 0.5em;

      display: flex;
      justify-content: center;
      align-items: center;

      width: 3em;
      height: 3em;

      &:hover{
        cursor: pointer;
      }

      > svg{
        width: 2em;
        height: 2em;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.2em;
      }
    }
  }

  > .post-it-container{
    width: 100%;
    margin: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    overflow-y: auto;

    > * {
      margin: 0.8em;
    }
  }

  > .post-it-adding-button{
    position: absolute;
    bottom: 2em;
    right: 2em;
    z-index: 2;

    > svg {
      color: white;
      cursor: pointer;
      background-color: var(--inProgress);
      border-radius: 5em;
      width: 4em;
      height: 4em;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.5em;
    }
  }

  .post-it-interface{
    position: absolute;
    max-height: 100%;
    border-radius: 1em;
    top: 50%;
    left: 50%;
    width: calc(15em + 30%);
    height: calc(20em + 30%);
    transform: translate(-50%,-50%);
    padding: 2em 6em;
    background-color: white;
    overflow: hidden;
    z-index: 20;
  }
}