styles.css

/*
 * General settings.
 */
.indent {
    margin-left: 6%;
}

.tmargin {
    margin-top: 20px;
}

/*
 * The discussionlist in the view.php
 */
.moodleoverflowheaderlist {
    border-collapse: separate;
    border-style: solid;
    border-width: 1px;
    margin-top: 10px;
    width: 100%;
}

.moodleoverflowheaderlist td {
    border-style: solid;
    border-width: 1px 0 0 1px;
}

.moodleoverflowheaderlist th.header.replies .iconsmall {
    margin: 0 .3em;
}

.moodleoverflowheaderlist .picture {
    width: 35px;
}

.moodleoverflowheaderlist .discussion .starter {
    vertical-align: middle;
}

.moodleoverflowheaderlist .discussion .pinned img {
    padding: 5px;
}

.moodleoverflowheaderlist .discussion .lastpost {
    text-align: right;
    white-space: nowrap;
}

.moodleoverflowheaderlist .replies,
.moodleoverflowheaderlist .discussion .author {
    white-space: nowrap;
}

.moodleoverflowheaderlist thead .discussionsubscription {
    text-align: center;
}

.moodleoverflowheaderlist tbody tr:nth-of-type(odd) {
    background-color: #fafafa;
}

.moodleoverflowheaderlist {
    background-color: #f9feff;
}

.moodleoverflowheaderlist .table-active:hover {
    background-color: #dff8ff;
}

.moodleoverflowheaderlist .table-active:hover > td,
.moodleoverflowheaderlist .table-active:hover > th {
    background-color: #dff8ff;
}

.moodleoverflowheaderlist .table-success:hover {
    background-color: #d0e9c6;
}

.moodleoverflowheaderlist .table-success:hover > td,
.moodleoverflowheaderlist .table-success:hover > th {
    background-color: #d0e9c6;
}

.moodleoverflowheaderlist .table-info:hover {
    background-color: #c4e3f3;
}

.moodleoverflowheaderlist .table-info:hover > td,
.moodleoverflowheaderlist .table-info:hover > th {
    background-color: #c4e3f3;
}

.moodleoverflowheaderlist .table-warning:hover {
    background-color: #faf2cc;
}

.moodleoverflowheaderlist .table-warning:hover > td,
.moodleoverflowheaderlist .table-warning:hover > th {
    background-color: #faf2cc;
}

.moodleoverflowheaderlist .table-danger:hover {
    background-color: #ebcccc;
}

.moodleoverflowheaderlist .table-danger:hover > td,
.moodleoverflowheaderlist .table-danger:hover > th {
    background-color: #ebcccc;
}

.moodleoverflowheaderlist,
.moodleoverflowheaderlist td {
    border: none;
}

.moodleoverflowheaderlist thead .header,
.moodleoverflowheaderlist tbody .discussion td {
    padding-left: .5em;
    padding-right: .5em;
    vertical-align: top;
    white-space: normal;
}

.moodleoverflowheaderlist thead .header {
    vertical-align: top;
    white-space: normal;
}

.moodleoverflowheaderlist thead .header.replies {
    text-align: center;
}

.moodleoverflowheaderlist thead .header.lastpost {
    text-align: right;
}

.moodleoverflowheaderlist thead .header th.discussionsubscription,
.moodleoverflowheaderlist tbody .discussion td.discussionsubscription {
    padding-left: .5em;
    padding-right: .5em;
    width: 16px;
}

.moodleoverflowheaderlist .discussion .author,
.moodleoverflowheaderlist .discussion .replies,
.moodleoverflowheaderlist .discussion .lastpost {
    white-space: normal;
}

.moodleoverflowheaderlist .discussion .discussionsubscription,
.moodleoverflowheaderlist .discussion .replies {
    text-align: center;
}

.moodleoverflowheaderlist .discussion .topic,
.moodleoverflowheaderlist .discussion .discussionsubscription,
.moodleoverflowheaderlist .discussion .topic.starter,
.moodleoverflowheaderlist .discussion .picture,
.moodleoverflowheaderlist .discussion .author,
.moodleoverflowheaderlist .discussion .replies,
.moodleoverflowheaderlist .discussion .lastpost {
    vertical-align: top;
}

.moodleoverflowheaderlist .discussion .topic .icon {
    margin-left: 0;
}

/*
 * The form to post new messages.
 */
.moodleoverflowaddnew {
    margin-bottom: 20px;
}

#newdiscussionform {
    float: left;
    text-align: left;
    white-space: nowrap;
}

/*
 * The Index Page.
 */
#page-mod-moodleoverflow-index .subscription {
    float: right;
    margin: 5px 0;
    text-align: right;
    white-space: nowrap;
}

#page-mod-moodleoverflow-index span.unread img {
    border-style: none;
    margin-left: 5px;
    vertical-align: middle;
}

/*
 * The styles for the discussion.php
 */
.moodleoverflowpost {
    border: 1px solid #000;
    display: block;
    margin: 0 0 1em 0;
    max-width: 100%;
    padding: 0;
    position: relative;
}

.moodleoverflowpost .row {
    position: relative;
    width: 100%;
}

.moodleoverflowpost .row .left {
    float: left;
    overflow: hidden;
    width: 43px;
}

.moodleoverflowpost .row .left .votes {
    display: block;
    margin: 0 8px 0 0;
    text-align: center;
}

.moodleoverflowpost .row .left .votes p {
    margin-bottom: 0;
    margin-top: 0;
}

.moodleoverflowpost .row .left .votes .icon {
    color: #0a0;
    height: 24px;
    margin: 0;
    width: 24px;
}

.moodleoverflowpost .row .topic,
.moodleoverflowpost .row .content-mask,
.moodleoverflowpost .row .options {
    margin-left: 43px;
}

.moodleoverflowpost .picture img {
    margin: 4px;
}

.moodleoverflowpost .options .commands,
.moodleoverflowpost .content .attachments,
.moodleoverflowpost .options .footer,
.moodleoverflowpost .options .link {
    text-align: right;
}

.moodleoverflowpost .options .moodleoverflow-post-rating {
    float: left;
}

.moodleoverflowpost .content .posting {
    max-width: 100%;
    overflow: auto;
}

.moodleoverflowpost .content .attachedimages img {
    max-width: 100%;
}

.moodleoverflowpost .post-word-count {
    font-size: .85em;
    font-style: italic;
}

.moodleoverflowpost .shortenedpost .post-word-count {
    display: inline;
    padding: 0 .3em;
}

:target ~ .moodleoverflowpost:before {
    background: #0070a8;
    bottom: -1px;
    content: "";
    display: block;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 4px;
}

.moodleoverflowpost {
    background-color: #fff;
    border: 1px solid rgba(238, 238, 238, 1);
    border-radius: 0;
    display: block;
    margin-bottom: 5px;
    position: relative;
    padding: 6px;
}

.moodleoverflowpost.statusboth:before {
    background: linear-gradient(80deg, rgba(234, 133, 22, 1) 50%, rgba(112, 160, 52, 1) 50%);
    bottom: -1px;
    content: "";
    display: block;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 4px;
}

.moodleoverflowpost.statusteacher:before {
    background: rgba(112, 160, 52, 1);
    bottom: -1px;
    content: "";
    display: block;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 4px;
}

.moodleoverflowpost.statusstarter:before {
    background: rgba(234, 133, 22, 1);
    bottom: -1px;
    content: "";
    display: block;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 4px;
}

.moodleoverflowpost > .list-group:first-child .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.moodleoverflowpost > .list-group:first-child .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.moodleoverflowpost > .list-group:last-child .list-group-item:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#region-main > .moodleoverflowpost {
    min-height: 45rem;
    overflow-x: auto;
    overflow-y: visible;
}

.moodleoverflowpost .header {
    margin-bottom: 3px;
}

.moodleoverflowpost .picture img {
    margin: 3px;
}

.moodleoverflowpost .picture img.userpicture {
    margin-left: 3px;
    margin-right: 10px;
}

.moodleoverflowpost .content .posting.fullpost {
    margin-top: 8px;
}

.moodleoverflowpost .row.side {
    clear: both;
}

.moodleoverflowpost .options .commands {
    margin-left: 0;
}

.moodleoverflowpost .options .moodleoverflow-post-rating .icon {
    height: 20px;
    width: 24px;
}

.moodleoverflowpost .subject {
    font-weight: 700;
}

.moodleoverflowpost.unread .row.header,
span.unread {
    background-color: #ffd;
}

.moodleoverflowpost.unread .row.header {
    border-bottom: 1px solid #ddd;
}

.moodleoverflowpost .row {
    margin-left: 0;
}

.moodleoverflowpost .row:before,
.moodleoverflowpost .row:after {
    content: none;
}

.moodleoverflowpost .topic .author {
    color: #848d95;
}

.moodleoverflowpost .topic .author .icon {
    margin-right: 0;
}

.moodleoverflowpost .attachments img {
    max-width: 40em;
    max-height: 30em;
}

/*
 * The Votes.
 */
.moodleoverflowpost td.votecell {
    float: left;
    overflow: hidden;
    width: 43px;
}

.moodleoverflowpost td.votecell .votes {
    display: block;
    margin: 0 8px 0 0;
    text-align: center;
}

.moodleoverflowpost td.votecell .votes p {
    margin-bottom: 0;
    margin-top: 0;
}

.moodleoverflowpost td.votecell .votes .icon {
    color: #0a0;
    height: 24px;
    margin: 0;
    width: 24px;
}

/*
 * The Answers.
 */
.moodleoverflowpost td.answercell {
    vertical-align: top;
    width: 100%;
}

.moodleoverflowpost td.answercell .post-text {
    margin-bottom: 5px;
    overflow-wrap: break-word;
    width: 100%;
    word-wrap: break-word;
}

.moodleoverflowpost td.answercell .comment-by {
    color: #848d95;
}

.moodleoverflowpost td.answercell .comment-commands {
    text-align: right;
}

.moodleoverflowpost td.answercell table.post-info {
    margin-bottom: 4px;
    width: 100%;
}

.moodleoverflowpost td.answercell table.post-info td.rightbox {
    text-align: right;
    vertical-align: bottom;
}

.moodleoverflowpost td.answercell table.post-info td.rightbox .status {
    color: #848d95;
}

.moodleoverflowpost td.answercell table.post-info td.rightbox .status .icon {
    height: 16px;
    width: 16px;
}

.moodleoverflowpost td.answercell table.post-info td.leftbox {
    text-align: left;
    vertical-align: top;
}

.moodleoverflowpost td.answercell table.post-info td.leftbox .user-info {
    box-sizing: border-box;
    color: #848d95;
    padding: 5px 6px 7px 7px;
}

.moodleoverflowpost td.answercell table.post-info td.leftbox .user-info::before {
    content: "";
    display: table;
}

.moodleoverflowpost td.answercell table.post-info td.leftbox .user-info::after {
    clear: both;
}

.moodleoverflowpost td.answercell table.post-info td.leftbox .user-info .user-action-time {
    margin-bottom: 4px;
    margin-top: 1px;
    white-space: nowrap;
}

.moodleoverflowpost td.answercell table.post-info td.leftbox .user-info .user-avatar {
    border-collapse: separate;
    border-radius: 1px;
    float: left;
    height: 32px;
    width: 32px;
}

.moodleoverflowpost td.answercell table.post-info td.leftbox .user-info .user-details {
    float: left;
    line-height: 17px;
    width: 100%;
    word-wrap: break-word;
}

.moodleoverflowpost td.answercell table.post-info td.leftbox .user-info .user-details .icon {
    margin-bottom: 3px;
    margin-right: 0;
}

.moodleoverflowpost td.answercell table.post-info td.leftbox .user-info .user-avatar + .user-details {
    margin-left: 8px;
    width: calc(100% - 40px);
}

.moodleoverflowpost td.answercell table.post-info td.leftbox .user-info .user-details .-flair {
    display: block;
}