html {
  --colorA: #d5d5d5b0;
  --colorB: #a9a9a9;

  &[data-mode="dark"] {
    --colorA: #99999954;
    --colorB: #161616;
  }
}

.joe_memos_list {padding:10px 0 20px;}
.joe_momos_item {padding:0 0 30px 40px;position:relative}
.joe_momos_item:before {
  border-left: 1px dashed var(--classG);
  content: "";
  height: 150%;
  left: 12px;
  position: absolute;
  top: 0;
  width: 0;
  z-index: 0;
}
::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: auto !important;
}
.joe_memos_date {
  background:var(--background);
  color:var(--routine);
  font-size:14px;
  height:34px;left:-36px;
  line-height:34px;
  position:relative;
  z-index:1
}
.joe_memos_date i {margin-right:8px}
.joe_memos_date em {font-style:normal}
.joe_memos_block{box-shadow:3px 8px 15px 0 var(--box-shadow-journal)}
.joe_memos_block{background:var(--background-journal);border-bottom:1px solid var(--classC);border:1px solid var(--classC);border-radius:0 18px 18px 18px;box-shadow:1px 1px 5px 0 var(--colorB);box-sizing:border-box;color:var(--main);margin-top:10px;padding:10px;position:relative;transition:box-shadow .2s;word-break:break-word;z-index:2}
.joe_memos_body{background:var(--background-journal-block);border-radius:0 6px 6px 6px;border:1px solid var(--colorA);box-sizing:content-box;max-height:300px;overflow:hidden;padding:10px 12px;position:relative;transition:height .2s}
.joe_memos_body.open{max-height:unset!important}
.marked-content {font-size: 14px;}
.marked-content p{line-height: 26px}
.marked-content ul{padding: 5px 0px 5px 3px;line-height: 1.7}
.marked-content hr{margin: 3px 0px 8px 0px;}
.memos-tag {
  list-style: none;
  padding: 3px 4px;
  margin-right: 3px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 4px;
  color: #fff;
  background: #84b4df7a;
}
.joe_memos_footer{padding:12px 0 2px}

.memos_res {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .7rem;
  margin-left: 4px;
}
.memos_reaction {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  height: 1.75rem;
  font-size: .875rem;
  border-radius: 9999px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--minor);
  /*background-color: var(--classB);*/
  box-sizing: border-box;
  padding-left: .5rem;
  padding-right: .5rem;
}
.memos_relation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  padding-left: 4px;
}
.memos_relation i {
  opacity:.6;
  color: var(--classM);
  font-size: 14px;
  align-items: center;
  position: relative;
  top: 1px;
}
.memos_link_tag {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: .925rem;
}
.font-link-tag{color:var(--main);font-size:20px;}.font-link-tag:hover {color:#fb6c28;}
.g-progress{font-size:12px;margin:2px 0px 10px 5px;& span{display:inline-block;vertical-align:middle;width:200px;height:5px;border-radius:25px;background:linear-gradient(90deg,#0f0,#0ff var(--progress),transparent 0);border:1px solid #eee}& i{font-size:10px}}
.memos_img,.marked-content img{max-height:150px;max-width:280px !important;margin:8px 5px 4px 0px;border-radius:5px;cursor:pointer;}