.commentingcontainer .picture {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 9999px;
    background-color: var(--colors-border-neutralbase);
    box-shadow: 0 0 0 2px var(--colors-fill-bgmain), 0 0 0 4px var(--colors-fill-primary);
}
.commentingcontainer .fawnstars-isotype-icon {
    position: absolute;
    height: 67%;
    width: 70%;
    top: 15%;
    right: 15%;
    bottom: 18%;
    left: 15%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    z-index: 1;
}
.commentingcontainer .avatar {
    height: 40px;
    width: 40px;
    position: relative;
}
.commentingcontainer .icon,
.commentingcontainer .username {
    position: relative;
    white-space: nowrap;
}
.commentingcontainer .username {
    flex: 1;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.commentingcontainer .icon {
    margin: 0;
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    font-family: "Material Symbols Outlined";
    color: var(--colors-fill-secondary);
}
.commentingcontainer .inlineusername {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
.commentingcontainer .icon1,
.commentingcontainer .location {
    position: relative;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}
.commentingcontainer .icon1 {
    height: 16px;
    line-height: 16px;
}
.commentingcontainer .location {
    height: 19px;
    flex: 1;
    font-size: 14px;
    font-family: var(--typography-body-body);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}
.commentingcontainer .inlinelocation {
    align-self: stretch;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: center;
    color: var(--colors-text-soft);
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .blockuserdata,
.commentingcontainer .userinfo {
    display: flex;
    justify-content: flex-start;
}
.commentingcontainer .blockuserdata {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.commentingcontainer .userinfo {
    width: 192px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.commentingcontainer .iconclass,
.commentingcontainer .timestamp {
    position: relative;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
}
.commentingcontainer .iconclass {
    margin: 0;
    align-self: stretch;
    font-size: inherit;
    line-height: 24px;
    font-weight: 400;
    font-family: inherit;
}
.commentingcontainer .btnicon {
    width: 32px;
    border-radius: 4px;
    background-color: var(--colors-fill-bgmain);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
    text-align: left;
    font-size: 24px;
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .inlinetimestamp-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    text-align: right;
    font-size: 14px;
    color: var(--colors-text-soft);
}
.commentingcontainer .frame-with-comment,
.commentingcontainer .postheader {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    max-width: 100%;
}
.commentingcontainer .postheader {
    flex: 1;
    background-color: var(--colors-fill-bgmain);
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 4px;
    gap: 20px;
}
.commentingcontainer .frame-with-comment {
    align-self: stretch;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 0 4px;
    text-align: left;
    font-size: 16px;
    color: var(--colors-text-base);
    font-family: var(--typography-body-body);
}
.commentingcontainer .some-text-for {
    flex: 1;
    position: relative;
    line-height: 24px;
    font-weight: 500;
    display: inline-block;
    max-width: 100%;
}
.commentingcontainer .frame-with-text {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 15px 12px;
    box-sizing: border-box;
    max-width: 100%;
    font-family: var(--typography-body-body);
}
.commentingcontainer .cardimg-icon {
    height: 603px;
    flex: 1;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    object-fit: cover;
}
.commentingcontainer .iconcontent {
    position: relative;
    line-height: 32px;
    font-weight: 300;
}
.commentingcontainer .primitivesbtnmediacontrolsp {
    height: 42px;
    border-radius: 9999px;
    background-color: rgba(243, 243, 244, 0.55);
    border: 1px solid var(--colors-border-deep);
    box-sizing: border-box;
    overflow: hidden;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px;
    font-size: 32px;
}
.commentingcontainer .icon2,
.commentingcontainer .location1 {
    position: relative;
    line-height: 16px;
    font-weight: 600;
}
.commentingcontainer .location1 {
    align-self: stretch;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    font-family: var(--typography-body-body);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.commentingcontainer .tagmediacontrolcounter {
    height: 24px;
    border-radius: 4px;
    background-color: rgba(243, 243, 244, 0.55);
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 4px;
    box-sizing: border-box;
    gap: 4px;
    font-size: 16px;
    color: var(--colors-text-base);
}
.commentingcontainer .iconcontent1 {
    position: relative;
    line-height: 20px;
    font-weight: 500;
}
.commentingcontainer .btnmediacontrolsnext {
    height: 30px;
    border-radius: 9999px;
    background-color: rgba(243, 243, 244, 0.55);
    border: 1px solid var(--colors-border-deep);
    box-sizing: border-box;
    overflow: hidden;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px;
    color: var(--colors-text-base);
}
.commentingcontainer .iconcontent2 {
    position: relative;
    line-height: 20px;
    font-weight: 500;
    opacity: 0.5;
}
.commentingcontainer .btnmediacontrolsnext1,
.commentingcontainer .media-container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.commentingcontainer .btnmediacontrolsnext1 {
    height: 30px;
    border-radius: 9999px;
    background-color: rgba(243, 243, 244, 0.55);
    border: 1px solid var(--colors-border-neutralbase);
    box-sizing: border-box;
    overflow: hidden;
    display: none;
    padding: 4px;
}
.commentingcontainer .media-container {
    align-self: stretch;
    display: flex;
    max-width: 100%;
    overflow: hidden;
}
.commentingcontainer .pillselect-filterxs {
    position: relative;
    line-height: 16px;
}
.commentingcontainer .pillselectfilterxs {
    width: 31px;
    border-radius: 4px;
    background-color: var(--colors-fill-bgInverted);
    border: 1px solid var(--colors-fill-bgInverted);
    color: var(--colors-text-base_inverted);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
}
.commentingcontainer .textcontent {
    position: relative;
    font-size: 12px;
    line-height: 16px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: center;
}
.commentingcontainer .pillselectfilterxs1 {
    cursor: pointer;
    border: 1px solid var(--colors-border-neutralbase);
    padding: 4px 7px;
    background-color: var(--colors-fill-bgmain);
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}
.commentingcontainer .pillselectfilterxs1:hover {
    background-color: var(--color-gainsboro-100);
    border: 1px solid var(--color-dimgray);
    box-sizing: border-box;
}
.commentingcontainer .textcontent1 {
    position: relative;
    font-size: 12px;
    line-height: 16px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: center;
}
.commentingcontainer .blockstart {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.commentingcontainer .blockstart {
    width: 193px;
    gap: 4px;
}
.commentingcontainer .iconclass1 {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: inherit;
    line-height: 20px;
    font-weight: 500;
    font-family: inherit;
}
.commentingcontainer .btnicon-sm,
.commentingcontainer .commentingheader {
    background-color: var(--colors-fill-bgmain);
    display: flex;
    align-items: center;
}
.commentingcontainer .btnicon-sm {
    width: 24px;
    border-radius: 2px;
    flex-direction: column;
    justify-content: center;
    padding: 2px;
    box-sizing: border-box;
    text-align: left;
    font-size: 20px;
    color: var(--colors-border-neutralbase);
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .commentingheader {
    align-self: stretch;
    border-bottom: 1px solid var(--colors-border-neutralbase);
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 20px;
}
.commentingcontainer .avatar-icon {
    height: 32px;
    width: 32px;
    position: relative;
    object-fit: cover;
}
.commentingcontainer .username1 {
    position: relative;
    line-height: 20px;
    font-weight: 600;
}
.commentingcontainer .username2 {
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-family: "Material Symbols Outlined";
    color: var(--colors-fill-secondary);
}
.commentingcontainer .inlineusername1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
.commentingcontainer .comment-text-lines {
    position: relative;
    line-height: 20px;
    font-weight: 500;
    color: var(--colors-text-soft);
}
.commentingcontainer .bubblecomment {
    border-radius: 0 8px 8px 8px;
    background-color: var(--colors-fill-bgsoft);
    border: 1px solid var(--colors-fill-disabledHigh);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 8px 7px;
}
.commentingcontainer .inlinecommentinput {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.commentingcontainer .h-ago {
    position: relative;
    line-height: 16px;
    font-weight: 500;
}
.commentingcontainer .commenttimestamp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 0 2px 2px;
    color: var(--colors-text-soft);
}
.commentingcontainer .b,
.commentingcontainer .favorite {
    position: relative;
    line-height: 16px;
}
.commentingcontainer .favorite {
    font-weight: 500;
}
.commentingcontainer .b {
    font-size: 12px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
}
.commentingcontainer .commentaction-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
    gap: 2px;
    font-size: 16px;
}
.commentingcontainer .commentaction-item .icon {
    color: var(--colors-fill-primary);
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .reply {
    position: relative;
    line-height: 16px;
}
.commentingcontainer .report {
    position: relative;
    line-height: 16px;
}
.commentingcontainer .containeractions-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.commentingcontainer .containeractions-info {
    width: 100%;
    padding: 0 48px;
    box-sizing: border-box;
    gap: 8px;
    text-align: right;
    font-size: 12px;
}
.commentingcontainer .iconstart {
    line-height: 16px;
}
.commentingcontainer .iconstart {
    position: relative;
    font-weight: 600;
}
.commentingcontainer .inlinecommentinput1 {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.commentingcontainer .inlinecommentinput1 {
    align-self: stretch;
    justify-content: flex-start;
    padding: 0 32px 0 0;
    gap: 9px;
}
.commentingcontainer .b1 {
    flex: 1;
    position: relative;
    line-height: 16px;
}
.commentingcontainer .containercounter {
    width: 53px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px;
    box-sizing: border-box;
    text-align: right;
    font-size: 12px;
    color: var(--colors-text-soft);
    font-family: var(--typography-body-body);
}
.commentingcontainer .barenterreply {
    align-self: stretch;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 40px;
    gap: 3px;
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .barenteredit {
    align-self: stretch;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 4px 40px;
    gap: 3px;
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .show-replies,
.commentingcontainer .subdirectory-arrow-right {
    align-self: stretch;
    position: relative;
    line-height: 16px;
}
.commentingcontainer .subdirectory-arrow-right {
    font-weight: 500;
}
.commentingcontainer .show-replies {
    flex: 1;
    font-size: 12px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: left;
}
.commentingcontainer .commentaction-item3,
.commentingcontainer .containerexpandreplies {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}
.commentingcontainer .commentaction-item3 {
    height: 20px;
    flex: 1;
    display: flex;
    padding: 2px;
    gap: 2px;
}
.commentingcontainer .containerexpandreplies {
    width: auto;
    padding: 0 48px;
    text-align: right;
    font-size: 16px;
    color: var(--colors-text-link);
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .commentingbubblesreplies {
    display: none;
    width: 100%;
}
.commentingcontainer .commentingbubbles {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 16px 4px 12px;
    gap: 3px;
    text-align: left;
}
.commentingcontainer .picture1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 9999px;
    background-color: var(--colors-border-neutralbase);
    box-shadow: 0 0 0 2px var(--colors-fill-bgmain), 0 0 0 4px var(--colors-fill-primary);
}
.commentingcontainer .fawnstars-isotype-icon1 {
    position: absolute;
    height: 67.19%;
    width: 70%;
    top: 15%;
    right: 15%;
    bottom: 17.81%;
    left: 15%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    z-index: 1;
}
.commentingcontainer .avatar1 {
    height: 32px;
    width: 32px;
    position: relative;
}
.commentingcontainer .username3 {
    position: relative;
    line-height: 20px;
    font-weight: 600;
}
.commentingcontainer .username4 {
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-family: "Material Symbols Outlined";
    color: var(--colors-fill-secondary);
}
.commentingcontainer .bubblecomment.mycomment {
    background-color: var(--colors-fill-bgAccent);
}
.commentingcontainer .inlinecommentinput2 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
}
.commentingcontainer .h-ago1 {
    position: relative;
    line-height: 16px;
    font-weight: 500;
}
.commentingcontainer .b2 {
    position: relative;
    line-height: 16px;
}
.commentingcontainer .b2 {
    font-size: 12px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
}
.commentingcontainer .edit {
    position: relative;
    line-height: 16px;
}
.commentingcontainer .commentaction-item5 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
}
.commentingcontainer .remove {
    position: relative;
    line-height: 16px;
    width: auto;
    height: auto;
    background: none;
    font-size: 12px;
    color: var(--colors-text-base);
    margin: 0;
}
.commentingcontainer .remove:before {
    content: none;
}
.commentingcontainer .commentaction-item6 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.commentingcontainer .commentaction-item6 {
    flex: 1;
    padding: 2px;
    cursor: pointer;
}
.commentingcontainer .show-3-replies,
.commentingcontainer .subdirectory-arrow-right1 {
    align-self: stretch;
    position: relative;
    line-height: 16px;
}
.commentingcontainer .subdirectory-arrow-right1 {
    font-weight: 500;
}
.commentingcontainer .show-3-replies {
    flex: 1;
    font-size: 12px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
}
.commentingcontainer .commentaction-item7,
.commentingcontainer .containerexpandreplies1 {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}
.commentingcontainer .commentaction-item7 {
    height: 20px;
    flex: 1;
    display: flex;
    padding: 2px;
    gap: 2px;
}
.commentingcontainer .containerexpandreplies1 {
    width: 201px;
    display: none;
    padding: 0 48px;
    font-size: 16px;
    color: var(--colors-text-link);
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .commentingbubblesreply {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 16px 4px 64px;
    gap: 3px;
}
.commentingcontainer .picture2 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 9999px;
    background-color: var(--colors-border-neutralbase);
    box-shadow: 0 0 0 2px var(--colors-fill-bgmain), 0 0 0 4px var(--colors-fill-primary);
}
.commentingcontainer .fawnstars-isotype-icon2 {
    position: absolute;
    height: 67.19%;
    width: 70%;
    top: 15%;
    right: 15%;
    bottom: 17.81%;
    left: 15%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.commentingcontainer .avatar2 {
    height: 32px;
    width: 32px;
    position: relative;
}
.commentingcontainer .username5 {
    align-self: stretch;
    flex: 1;
    position: relative;
    line-height: 20px;
    font-weight: 600;
}
.commentingcontainer .username6 {
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-family: "Material Symbols Outlined";
    color: var(--colors-fill-secondary);
}
.commentingcontainer .inlineusername3 {
    width: 117px;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
.commentingcontainer .comment-text-lines2 {
    align-self: stretch;
    flex: 1;
    position: relative;
    line-height: 20px;
    font-weight: 500;
    color: var(--colors-text-soft);
}
.commentingcontainer .bubblecomment2 {
    height: 56px;
    flex: 1;
    border-radius: 0 8px 8px 8px;
    background-color: var(--colors-fill-bgAccent);
    border: 1px solid var(--colors-fill-disabledHigh);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 8px 7px;
}
.commentingcontainer .inlinecommentinput3 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 20px 0 0;
    gap: 8px;
    text-align: left;
}
.commentingcontainer .h-ago2 {
    align-self: stretch;
    position: relative;
    line-height: 16px;
    font-weight: 500;
}
.commentingcontainer .commenttimestamp2 {
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
    box-sizing: border-box;
}
.commentingcontainer .b3,
.commentingcontainer .favorite2 {
    align-self: stretch;
    position: relative;
    line-height: 16px;
}
.commentingcontainer .favorite2 {
    font-weight: 500;
}
.commentingcontainer .b3 {
    font-size: 12px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
}
.commentingcontainer .commentaction-item8 {
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
    box-sizing: border-box;
    gap: 2px;
    font-size: 16px;
    color: var(--colors-fill-primary);
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .edit1 {
    align-self: stretch;
    position: relative;
    line-height: 16px;
}
.commentingcontainer .commentaction-item9 {
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
    box-sizing: border-box;
}
.commentingcontainer .remove1 {
    align-self: stretch;
    flex: 1;
    position: relative;
    line-height: 16px;
}
.commentingcontainer .commentaction-item10,
.commentingcontainer .containeractions-info2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}
.commentingcontainer .commentaction-item10 {
    height: 20px;
    flex: 1;
    padding: 2px;
}
.commentingcontainer .containeractions-info2 {
    width: 277px;
    padding: 0 48px;
    gap: 8px;
    font-size: 12px;
    color: var(--colors-text-soft);
}
.commentingcontainer .show-3-replies1,
.commentingcontainer .subdirectory-arrow-right2 {
    align-self: stretch;
    position: relative;
    line-height: 16px;
}
.commentingcontainer .subdirectory-arrow-right2 {
    font-weight: 500;
}
.commentingcontainer .show-3-replies1 {
    flex: 1;
    font-size: 12px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
}
.commentingcontainer .commentaction-item11,
.commentingcontainer .containerexpandreplies2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}
.commentingcontainer .commentaction-item11 {
    height: 20px;
    flex: 1;
    padding: 2px;
    gap: 2px;
}
.commentingcontainer .containerexpandreplies2 {
    width: 201px;
    padding: 0 48px;
    font-size: 16px;
    color: var(--colors-text-link);
    font-family: "Material Symbols Outlined";
}
.commentingcontainer .commentingbubbles1 {
    align-self: stretch;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 16px 4px 12px;
    gap: 3px;
}
.commentingcontainer .commentingbody {
    background-color: rgba(243, 243, 244, 0.77);
    backdrop-filter: blur(24px);
    align-items: flex-start;
    padding: 8px 0;
    text-align: right;
    font-size: 14px;
    color: var(--colors-text-base);
    overflow-y: auto;
}
.commentingcontainer .commentingbody a {
    text-decoration: none;
    color: inherit;
}
.commentingcontainer .commentingbody,
.commentingcontainer {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.commentingcontainer {
    border-right: 1px solid var(--colors-fill-disabledHigh);
    border-left: 1px solid var(--colors-fill-disabledHigh);
    overflow: hidden;
    align-items: center;
    z-index: 1;
    position: absolute;
    bottom: 56px;
    left: 0;
    right: 0;
    font-size: 12px;
    color: var(--colors-text-base_inverted);
    font-family: var(--typography-body-body);
    max-height: 0;
    transform-origin: bottom center;
}
.modal-comment .commentingcontainer {
    position: static;
    max-height: none;
}
.commentingcontainer.small {
    position: static;
}
.commentingcontainer .picture3 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 9999px;
    background-color: var(--colors-border-neutralbase);
    box-shadow: 0 0 0 2px var(--colors-fill-bgmain), 0 0 0 4px var(--colors-fill-primary);
}
.commentingcontainer .fawnstars-isotype-icon3 {
    position: absolute;
    height: 67.19%;
    width: 70%;
    top: 15%;
    right: 15%;
    bottom: 17.81%;
    left: 15%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    z-index: 1;
}
.commentingcontainer .avatar3 {
    height: 32px;
    min-width: 32px;
    position: relative;
}
.commentingcontainer .textcontent3 {
    position: relative;
    font-weight: 600;
}
.commentingcontainer .textcontent3 {
    width: 30px;
    font-size: 12px;
    line-height: 18px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: left;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.commentingcontainer .inlinecommentinput4 {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.commentingcontainer .inlinecommentinput4 {
    align-self: stretch;
    justify-content: flex-start;
    gap: 9px;
    max-width: 100%;
}
.commentingcontainer .b4 {
    position: relative;
    line-height: 16px;
}
.commentingcontainer .containercounter1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 48px;
    text-align: right;
    font-size: 12px;
    color: var(--colors-text-link);
    font-family: var(--typography-body-body);
}
.commentingcontainer .commentingbarnewcomment {
    align-self: stretch;
    background-color: var(--colors-fill-bgsoft);
    border-top: 1px solid var(--colors-fill-disabledHigh);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 12px 8px;
    gap: 3px;
    max-width: 100%;
    font-size: 20px;
    color: var(--colors-text-base_inverted);
}
.commentingcontainer .icon-text-content,
.commentingcontainer .icon3 {
    position: relative;
    line-height: 24px;
    font-weight: 600;
}
.commentingcontainer .icon3 {
    margin: 0;
    font-size: inherit;
    font-family: inherit;
}
.commentingcontainer .icon-text-content {
    font-size: 16px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: left;
}
.commentingcontainer .btnghost {
    border-radius: 4px;
    background-color: var(--colors-fill-bgmain);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 4px;
    gap: 4px;
}
.commentingcontainer .icon4,
.commentingcontainer .textcontent4 {
    position: relative;
    line-height: 24px;
    font-weight: 600;
}
.commentingcontainer .icon4 {
    margin: 0;
    font-size: inherit;
    font-family: inherit;
}
.commentingcontainer .textcontent4 {
    font-size: 16px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: left;
}
.commentingcontainer .btnghost1,
.commentingcontainer .inlinestart {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.commentingcontainer .btnghost1 {
    border-radius: 4px;
    background-color: var(--colors-fill-bgmain);
    padding: 4px;
    gap: 4px;
}
.commentingcontainer .inlinestart {
    gap: 8px;
}
.commentingcontainer .icon5,
.commentingcontainer .text-input {
    position: relative;
    line-height: 24px;
    font-weight: 600;
}
.commentingcontainer .icon5 {
    margin: 0;
    font-size: inherit;
    font-family: inherit;
}
.commentingcontainer .text-input {
    font-size: 16px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: left;
}
.commentingcontainer .btnghost2 {
    border-radius: 4px;
    background-color: var(--colors-fill-bgmain);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 4px;
    gap: 4px;
}
.commentingcontainer .icon6,
.commentingcontainer .textcontent5 {
    position: relative;
    line-height: 24px;
    font-weight: 600;
}
.commentingcontainer .icon6 {
    margin: 0;
    font-size: inherit;
    font-family: inherit;
}
.commentingcontainer .textcontent5 {
    font-size: 16px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: left;
}
.commentingcontainer .btnghost3 {
    border-radius: 4px;
    background-color: var(--colors-fill-bgmain);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 4px;
    gap: 4px;
}
.commentingcontainer .icon7,
.commentingcontainer .textcontent6 {
    position: relative;
    line-height: 24px;
    font-weight: 600;
}
.commentingcontainer .icon7 {
    margin: 0;
    font-size: inherit;
    font-family: inherit;
}
.commentingcontainer .textcontent6 {
    align-self: stretch;
    width: 66px;
    font-size: 16px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: left;
    display: none;
}
.commentingcontainer .btnghost4,
.commentingcontainer .inlineend {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.commentingcontainer .btnghost4 {
    border-radius: 4px;
    background-color: var(--colors-fill-bgmain);
    padding: 4px;
    gap: 4px;
}
.commentingcontainer .inlineend {
    gap: 8px;
}
.commentingcontainer .changes-when-clicked,
.commentingcontainer .comment-replied {
    background-color: var(--colors-fill-bgmain);
    display: flex;
    align-items: center;
}
.commentingcontainer .changes-when-clicked {
    align-self: stretch;
    border-radius: 0 0 16px 16px;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 20px;
    text-align: center;
    font-size: 24px;
    color: var(--colors-fill-primary);
}
.commentingcontainer .comment-replied {
    width: 100%;
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--colors-fill-disabledHigh);
    box-sizing: border-box;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    letter-spacing: normal;
    text-align: left;
    font-size: 16px;
    color: var(--colors-text-base);
    font-family: "Material Symbols Outlined";
}
@media screen and (max-width: 450px) {
    .commentingcontainer .iconcontent1,
    .commentingcontainer .iconcontent2 {
        font-size: 16px;
        line-height: 16px;
    }
    .commentingcontainer .pillselectfilterxs,
    .commentingcontainer .pillselectfilterxs1 {
        width: calc(100% - 40px);
    }
    .commentingcontainer .iconclass1 {
        font-size: 16px;
        line-height: 16px;
    }
    .commentingcontainer .inlinecommentinput {
        flex-wrap: wrap;
    }
    .commentingcontainer .containeractions-info {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .commentingcontainer .inlinecommentinput2 {
        flex-wrap: wrap;
    }
    .commentingcontainer .commentingbubblesreply {
        padding-left: 20px;
        box-sizing: border-box;
    }
    .commentingcontainer .icon3,
    .commentingcontainer .icon4,
    .commentingcontainer .icon5,
    .commentingcontainer .icon6,
    .commentingcontainer .icon7 {
        font-size: 19px;
        line-height: 19px;
    }
    .commentingcontainer .changes-when-clicked {
        flex-wrap: wrap;
    }
}

.commentingcontainer .replybutton {
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commentingcontainer .replybutton .icon {
    font-size: 20px;
    line-height: 20px;
}

.commentingcontainer .post {
    position: relative;
}

.commentingcontainer .close-comments {
    text-decoration: none;
}

.modal-comment .commentingbody {
    background: transparent;
    height: 100%;
    overflow-y: auto;
}
.modal-comment .commentingbarnewcomment {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.modal-comment .commentingcontainer {
    width: 100%;
    height: calc(100% - 106px);
    padding-bottom: 75px;
}

.modal-comment .post-content {
    height: 104px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    border-bottom: 1px solid var(--colors-fill-disabledHigh);
    box-sizing: border-box;
}

.modal-comment .post-image {
    width: 80px;
    height: 80px;
    border-radius: 4px;
}

.modal-comment .post-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}