.paragraphs-wrapper {
    background: white;
    margin: 50px;
    padding: 50px;
    display: grid;
    justify-items: center;
    gap: 40px;
    border-radius: 10px;
}

.paragraph-block {
    width: 85%;
    display: grid;
    gap: 5px;
}

.paragraph-title {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    cursor: pointer;
}

.paragraph-name {
    font-size: 30pt;
}

.paragraph-state {
    width: 38px;
    justify-self: end;
    border-radius: 30px;
    height: 38px;
    align-items: center;
    justify-items: center;
    display: grid;
    transition: transform .5s;
}

.paragraph-info {
    /*display: grid;*/
    font-weight: 100;
    /*margin: 0px 30px;*/
    overflow: hidden;
    max-height: 0;
    list-style-position: inside;

    -webkit-transition: max-height .5s; 
    -moz-transition: max-height .5s; 
    -ms-transition: max-height .5s; 
    -o-transition: max-height .5s; 
    transition: max-height .5s;  
}

.paragraph-block table {
	border-collapse: collapse;
}

.paragraph-block td {
	border: 1px solid black;
    padding: 5px;
}


.paragraph-title:hover .paragraph-state {
    background-color: #d6f0ff;
}

.paragraph-info.expand {
    max-height: max-content;
}

.paragraph-state.expand {
    transform: rotate(45deg);
}

@keyframes paragraph-in {
    from {
      width: 50px;
      height: 50px;
      background-color: #F498AD;
    }
    to {
      width: 200px;
      height: 200px;
      background-color: #2E9AFF;
    }
}

.paragraph-info li[data-list=checked] > .ql-ui,
.paragraph-info li[data-list=unchecked] > .ql-ui {
  color:#777;
  list-style-type: none;
}


.paragraph-info li[data-list=bullet], .paragraph-info li[data-list=checked], .paragraph-info li[data-list=unchecked] {
    list-style-type: none;
}

.paragraph-info li[data-list=bullet] > .ql-ui:before {
  content:'\2022              ';
}
.paragraph-info li[data-list=checked] > .ql-ui:before {
  content:'\2611              ';
}
.paragraph-info li[data-list=unchecked] > .ql-ui:before {
  content:'\2610              ';
}

@media screen and (max-width: 721px) {
  .paragraph-block {
    width: 90%;
  }

  .paragraph-state {
      width: 19px;
      height: 19px;
  }

  .paragraph-state svg {
    width: 19px;
    height: 19px;
  }
}

@media screen and (max-width: 650px) {
  .page-title {
    font-size: 40pt;
  }
}

@media screen and (max-width: 500px) {
  .paragraphs-wrapper {
    padding: 25px;
    margin: 10px;
  }

  .paragraph-block {
    width: 95%;
  }

  .paragraph-name {
    font-size: 15pt;
  }

  .paragraph-info {
    font-size: 8pt;
  }
}