#EditTopicContainer {
  display: block;
  position: fixed;
  z-index: 999;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
}

#EditTopic {
  position: fixed;
  border-radius: 12.5px;
  padding: 10px;
  width: 600px;
  padding-left: 20px;
  padding-right: 20px;
  top: calc(50% - 250px);
  left: calc(50% - 250px);
  background-color: white;
  box-shadow: 10px 13px 15px 0px rgba(0, 0, 0, 0.1);

  & h2 {
    margin: 0;
    padding: 10px;
    padding-bottom: 15px;
    text-align: start;
    font-size: 2.5rem;
  }

  & .buttons {
    position: relative;
    left: calc(100% - 120px);

    & button {
      margin-top: 40px;
      display: inline-block;
      outline: 0;
      margin-right: 10px;
      border: none;
      cursor: pointer;
      padding: 0 24px;
      border-radius: 50px;
      height: 40px;
      font-size: 18px;
      background-color: var(--highlight-color);
      font-weight: 500;
      color: #222;

      &:disabled {
        background-color: var(--button-disabled);
        cursor: not-allowed;
      }
    }
  }

  & #TopicsContainer {
    margin: 10px;
    max-height: calc(50vh - 100px);
    overflow: scroll;

    & .editTopic {
      display: grid;
      padding: 5px;
      line-height: 16px;
      grid-template-columns: 8fr 2fr;
      & .editTopicButtons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        cursor: pointer;

        & div:hover {
          color: white;
        }
      }
    }

    & .editTopic:hover {
      background-color: var(--highlight-color);
    }
  }
}
