.wr-tipoptions {
  padding: 50px;
  overflow-y: auto;
  width: 100%;
}

.span-container {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 40px;
}

.sp {
  font-size: 2.4rem;
}

.sp-small {
  font-size: 1.4rem;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.black {
  color: black;
}

.lorem {
  display: inline;
  font-size: 2rem;
}

.tip-item {
  -ms-flex-item-align: start;
      align-self: flex-start;
  min-width: 80%;
  border-bottom: solid 1px gray;
  padding-right: 10px;
  margin-left: 15px;
  /* margin-right: 10px; */
}

.root-item {
  margin-left: 0px;
}

.tip-options {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px;
  min-width: 150px;
  min-height: 50px;
  border-width: 13px;
  border-color: black;
  border-radius: 15px;
  background: yellow;
  padding: 50x;
  border: solid 1px black;
}

.tip-options::after {
  content: " ";
  position: absolute;
  top: 14%;
  right: 99%;
  /* To the left of the tooltip  -- 99% to cover the border of the tip*/
  margin-top: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent yellow transparent transparent;
  /* background: yellow; */
}

.tip-options::before {
  /* creates fake border on the triangle */
  content: " ";
  position: absolute;
  top: 14%;
  right: 100%;
  /* To the left of the tooltip */
  margin-top: -11px;
  border-width: 11px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.right-tip-options {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  min-width: 150px;
  min-height: 50px;
  border-width: 13px;
  border-color: black;
  border-radius: 15px;
  background: yellow;
  padding: 50x;
  border: solid 1px black;
}

.right-tip-options::after {
  content: " ";
  position: absolute;
  top: 14%;
  left: 99%;
  /* To the right of the tooltip */
  margin-top: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent yellow;
}

.right-tip-options::before {
  /* creates fake border on the triangle */
  content: " ";
  position: absolute;
  top: 14%;
  left: 100%;
  /* To the left of the tooltip */
  margin-top: -11px;
  border-width: 11px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

.bottom-tip-options {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px;
  min-width: 150px;
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
  border-width: 13px;
  border-color: black;
  border-radius: 15px;
  background: yellow;
  padding: 50x;
  border: solid 1px black;
}

.bottom-tip-options::before {
  content: " ";
  position: absolute;
  top: 106%;
  /* At the bottom of the tooltip */
  left: 45%;
  margin-bottom: -11px;
  border-width: 11px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.bottom-tip-options::after {
  content: " ";
  position: absolute;
  top: 105%;
  /* At the bottom of the tooltip */
  left: 45%;
  margin-bottom: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: yellow transparent transparent transparent;
}

.top-tip-options {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px;
  min-width: 150px;
  min-height: 50px;
  border-width: 13px;
  border-color: black;
  border-radius: 15px;
  background: yellow;
  padding: 50x;
  border: solid 1px black;
}

.top-tip-options::before {
  /* creates fake border on the triangle */
  content: " ";
  position: absolute;
  top: -5%;
  left: 45%;
  /* To the left of the tooltip */
  margin-top: -11px;
  border-width: 11px;
  border-style: solid;
  border-color: transparent transparent  black transparent;
}

.top-tip-options::after {
  content: " ";
  position: absolute;
  top: -4%;
  /* At the top of the tooltip */
  left: 45%;
  margin-top: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent yellow transparent;
}

.speach-part {
  min-width: 80px;
}

.punktuacja {
  background: yellow;
}
/*# sourceMappingURL=main_tipoptions.css.map */