/**
 * Copyright (c) 2014-2018 Kaj Magnus Lindberg
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */


$isWideMinWidth = 900px;

// Long category and topic titles should word break and line wrap,
// so overflow-x hidden shouldn't have any effect.
//
// (If, in some rare cases, there are *really* long unbreakable words
// — then it's better that the end of those words, disappear off
// screen, rather than causing horizontal scroll?  [avoid_hz_scroll]
// But this shouldn't happen, because  overflow-wrap: break-all
// (currently using:  word-break: break-word;  for Safari backw compat though)
// breaks long words if needed.)
//
.dw-forum
  overflow-x: hidden;


.c_F_0Cat
  background: hsl(0 0% 93%);
  padding: 1px 20px 20px;
  .btn
    margin-right: 8px;


.s_F_Ts_T_Con-Para
  display: block;
  padding-top: 0 !important;
  &:hover
    outline: 2px solid hsl($uiHue, 100%, 96.7%) !important;
    background: hsl($uiHue, 100%, 98.7%) !important;
    [title]
      text-decoration: underline;
      text-decoration-color: #888;
    &
      color: black !important;
    & .dw-p-excerpt
      color: #4a4a4a !important;
      text-decoration: none !important;


// Avoid a flash of the-wrong-layout (e.g. table layout, before noticing that the screen
// is narrow and switching to list layout).
html.js:not(.dw-react-started)
  .dw-topic-list,
  .c_F_TsL
    display: none;

.esForumIntro
  clearfix()
  margin: 0.4em 0;
  max-width: 125ex;
  //background: hsl($uiHue, 89%, 95%);
  background: hsl($uiHue, 0%, 97%);
  padding: 0.93em 1.15em 0.35em;

  p
    margin-bottom: 0.8em;
    // Large font and line-height makes the intro text easier to read —> more people read it (?).
    color: hsl(0, 0%, 5%);
    font-size: 15px;
    line-height: 1.65;

.esForumIntro_btns
  float: right;

.esForumIntro_edit,
.esForumIntro_close
  display: inline-block;
  padding: 2px 0 8px;
  position: relative;
  left: -3px;
  color: hsl($uiHue, 77%, 42%);
  font-size: 14px;
  .icon-cancel:before
    opacity: 0.8;
  .esForumIntro_close_reopen
    font-weight: normal;
    .icon-info-circled
      text-shadow: 0 0 2px hsl($uiHue, 100%, 20%);
      color: hsl($uiHue, 89%, 95%);
      font-size: 15px;
      margin: 0;
      padding: 0;
      position: relative;
      line-height: 0;
      top: 1px;

.esForumIntro_close_reopen
  font-weight: normal;
  font-size: $postFontSize;

.esForumIntro_edit
  font-weight: bold;
  padding-left: 4px;
  margin-right: 15px;

.dw-hide-forum-intro .esForumIntro
  display: none;

.dw-forum > .dw-help
  margin-bottom: 7px;



// Search field
//===========================


.dw-forum .c_SchD
  margin: 20px auto 24px;

  input[type='text']
    height: 38px;
    padding-left: 1ex;
    // box-shadow: 4px 4px 8px rgb(0 0 0 / 35%);
    // border: none;
    // border-width: 1px;
    font-size: 15px;

  .btn
    height: 38px;
    font-size: 15px;
    font-weight: bold;
    padding-top: 8px;

  .c_SchD_X
    display: none;



// Action bar
//===========================


// Fix this long error prone list later.
.esF_BB_SortBtn,
.esForum_navLink,
.esForum_catsDrop,
.esForum_filterBtn,
.s_F_BB_NewCatB,
.esF_BB_NewTpcB
  font-size: 15px;

.esF_BB_PageTitle
  display: inline-block;
  float: left;
  font-size: 17px;
  padding: 7px 5px 0;
  font-weight: bold;
  margin-right: 5px;

.esForum_catsNav
  margin-top: 20px;
  .btn
    background: hsl(0, 0%, 92%);
    padding: 7px 10px !important;
    &:hover
      background: hsl(0, 0%, 81%);

.esForum_catsNav_btn.btn
  float: left;

.c_F_BB:has(.c_F_BB_TagsLn)
  // The links "View categories   Tags", place them closer together,
  // by reducing margins & padding:
  .c_F_BB_CatsLn,
  .c_F_BB_TpcsLn
    margin-right: 0 !important;
    padding-right: 4px !important;
  .c_F_BB_TagsLn
    margin-left: 0 !important;
    // More padding-left (7px not 4px), so simpler to click — is smaller.
    padding-left: 7px !important;

// Make restricted/unlisted/deleted icons in the categories dropdown lighter.
.s_F_BB_CsM
  [class^="icon-"]:before,
  [class*=" icon-"]:before
    opacity: 0.5;

.s_F_BB-Topics_Filter >
  .esForum_catsNav_btn,
  .esForum_catsNav_sort
    margin: 0 8px 7px 0;  // the margin-bottom adds some vertical space, if float drops


.esF_BB_SortBtn
  border: none !important;

.esForum_catsNav_sort
  &:first-child
    margin-left: 0;
  float: left;
  .btn
    background: none;
    margin-left: 0 !important;
    min-width: 50px;
    $sideWithBorder = 8px;
    $border = 1px solid hsl(0, 0%, 91%);
    padding: 7px 9px 6px !important;
    &:not(.active)
      padding: 7px $sideWithBorder 6px !important;
      border: $border;
      color: hsl(0, 0%, 28%);
      box-shadow: 0 -1px 2px hsl(0, 0%, 91%) inset;
      &:not(:first-child)
        border-left: none;
      &:hover
        background: hsl(0, 0%, 96%);
        color: hsl(0, 0%, 25%);
        border-color = hsl(0, 0%, 80%);
    &.active
      cursor: default;
      background: hsl(0, 0%, 97%);
      border-top: $border;
      border-bottom: $border;
      border-left: none;
      border-right: none;
      padding-left: $sideWithBorder + 1;
      padding-right: $sideWithBorder + 1;
      font-weight: normal;
      box-shadow: 1px 2px 5px hsl(0, 0%, 74%) inset;
      color: hsl(0, 0%, 21%);
    &.n_ExplSel
      // Give it an even more stiky-down-pressed look.
      background: hsl(0, 0%, 96%);
      box-shadow: 1px 1px 7px hsl(0 0% 42%) inset;
      color: hsl(0 0% 17%);

.esForum_navLink
  float: left;
  text-decoration: underline;
  background: none !important;
  color: #333 !important;

.esForum_catsDrop
  color: hsl(0, 0%, 8%) !important;
  border: none !important;
  background: none;
  &.active
    box-shadow: none;
  .caret
    position: relative;
    color: hsl(0, 0%, 46%);
    transform: scale(1.1, 1.1);
    margin-left: 7px;

// Could replace some more 7px elsewhere with this too.
$forumButtonPaddingBottom = 7px;

.s_F_BB_NewCatB,
.esF_BB_NewTpcB
  padding-top: 7px;
  padding-bottom: $forumButtonPaddingBottom;

.s_F_BB_NewCatB
  margin-right: 9px;    // there's a New Topic button to the right
  padding-bottom: $forumButtonPaddingBottom - 1;  // because 1px border

.esForum_topicsCatsHelp
  max-width: 500px !important;

.DW.DW.DW .esForum_filterBtn
  float: left;
  border: none;

.dw-forum-actionbar
  clear: both
  padding 0 0 10px;

  .form-group
    margin-bottom: 0;

  li
    margin-left: 0

  .btn-default
    border: 1px solid #ccc;

  button
    float: right
    border: none;

  button:not(.btn-primary):not(.active)
    color: hsl(0, 0%, 13%);

  @media (max-width: 801px)
    select.form-control,
    .btn
      font-size: 14px;

    .dw-forum-actionbar .nav button
      min-width: 50px;
      padding-left: 12px;
      padding-right: 12px;

  @media (max-width: 651px)
    .dw-forum-actionbar .nav button
      min-width: 40px;
      padding-left: 8px;
      padding-right: 8px;


.esForum_sortInfo
  margin: 4px 0 1em 4px;
  color: hsl(0, 0%, 32%);
  font-style: italic;
  font-size: 14px;
  vertical-align: baseline;

.s_F_SI_TopB
  font-weight: bold;
  text-transform: lowercase;

$tablePaddingLeftNarrow = 4px
$tablePaddingLeftWide = 8px
//$tableFontSize = 13.4px; too small
$tableTopicTitleFontSize = 15.3px;
$tableTopicExcerptFontSize = 14px;
$tableHeaderFontSize = 14px;


.dw-topic-list,
.forum-table
  th
    padding: 8px $tablePaddingLeftNarrow 8px;
    @media (min-width: $isWideMinWidth)
      padding: 8px $tablePaddingLeftWide 8px;
    font-weight: normal;
    font-size: $tableHeaderFontSize;
    color: hsl(0, 0%, 55%);


// Topics
//===========================

// First, any category title and about-text (shown above the topics).
// (Then, topic filter buttons, then the topic list.)

.s_F_Ts_Cat
  text-align: center;
  margin: 17px auto 3px;

.s_F_Ts_Cat_SelectCatBs
  margin-bottom: 7px;

.DW.DW .s_F_Ts_Cat_Ttl
  text-align: center;
  margin: 0;
  background: none;
  display: inline-block;
  font-size: 20px;
  padding: 6px 0;
  text-decoration: underline;
  text-decoration-color: hsl(0,0%,70%);
  font-weight: bold;
  color: hsl(0, 0%, 35%) !important;
  &:hover
    color: hsl(0, 0%, 25%) !important;
    // Dupl [HOVERSTYL]
    background: hsl($uiHue, 100%, 98%);
    outline: 1px solid hsl($uiHue, 100%, 94%);

// harmless UX BUG: Use ::after instead, on the base cat, so this arrow
// will be on the same row as the base cat (if flex wrap).
.s_F_Ts_Cat_Ttl-SubCat::before  // also see: [40792RHL3], the '—>'' arrow
  content: "→";
  color: hsl(0, 0%, 32%);
  display: inline-block;
  margin: 0 4px;
  font-size: 24px;
  line-height: 0;
  vertical-align: middle;
  position: relative;
  top: -3px;

.s_F_Ts_Cat_Abt
  max-width: 670px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  line-height: 150%;
  color: hsl(0, 0%, 18%);

 .s_F_Ts_Cat_Edt
  margin: 4px 0 0;
  padding: 3px 0;
  display: inline-block;
  position: relative;
  left: -8px;
  &:before
    opacity: 0.8;  // or edit pencil icon too dark

// Avoid undesired flash-of-the-wrong-topic-list before we know if the topic list included
// by the server is the one we want to show. (The server doesn't know which #/client-route
// we're using, we don't yet use real URLS, only hash fragment client side router urls.)
html.js:not(.dw-react-started) #dw-topic-list tbody
  display: none;

.s_F_CatDdInfo
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 26px;
  .icon-trash:before
    font-size: 26px;
    color: #494949;
    margin-right: 7px;
    position: relative;
    top: 2px;

// Dim topics if category deleted.
.s_F_Ts-CatDd .dw-tpc-title
  opacity: 0.78;

.s_F_Ts_T_Avs
  padding-left: 0 !important;
  padding-right: 0 !important;

  .n_AvsL_AsgSep
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: hsl(0 0% 72%);
    line-height: 0;
    padding: 0 0 0 2px;

.c_F_TsL_T_Users
  .n_AvsL_AsgSep
    float: left;
    margin-right: 5px;
    font-size: 20px;
    color: #999;  // oddly enough, 72% (see just above) is too bright here


th.dw-tpc-replies
  padding-left: 0;  // is bug? Remove?

/* COULD RESPONSIVE if forum table narrow
// Smaller distance between stats columns:
th.num
  padding-right: 3px;
*/

td.dw-tpc-activity
  white-space: normal !important;

// Why both :link and :visited needed? With just :link, a:visited's default color is used instead.
.esF_Ts_T_CName:link,
.esF_Ts_T_CName:visited,
.dw-tpc-replies,
.dw-tpc-activity a
  color: hsl(0, 0%, 51%);

.dw-tpc-title
  padding: 13px 30px 5px 8px !important;

.dw-tpc-title
  a
    color: black;
  .s_F_Ts_T_Con_Ttl
    color: hsl(0, 0%, 16%);
    font-weight: bold;

.s_F_Ts_T_Con
  line-height: 24px;
  // some space for highlighting the link inside on hover:
  padding-left: 6px;
  position: relative;
  left: -6px;

.s_F_Ts_T_Con-OneLine
  // If < 31px, the text won't be vertically centered, so should be min 31px.
  // And should be max 31px, so only one line is visible.
  height: 31px;
  overflow: hidden;
  // On click, more excerpt text will be shown, by .s_F_Ts_T_Con-More just below.
  cursor: pointer;
  // Sometimes people submit a title that is a long link = one single super long word. Break it.
  word-break: break-all;

.s_F_Ts_T_Con-More
  // Show more excerpt, because -OneLine just above was clicked.
  height: auto;
  margin-bottom: 7px;

.s_F_Ts_T_Con_B
  color: hsl(0, 0%, 60%);
  font-size: $postFontSize;

.s_F_Ts_T_Tmbs
  max-height: 90px;
  overflow: hidden;
  margin-bottom: 5px;

.c_F_TsL_T .s_F_Ts_T_Tmbs
  margin: 2px 0 8px; // some whitespace looks better in mobile view
  img
    margin: 6px 10px 7px -1px;

.s_F_Ts_T_Tmbs img
  max-width: 160px;
  max-height: 80px;
  margin: 6px 10px 7px -1px;
  opacity: 0.77;
  float: left;

.s_F_Ts-Wide .s_F_Ts_T_Con_B
  &:before
    content: '– ';
    margin: 0 2px 0 1px;

.esF_Ts_T_CName
  vertical-align: middle;
  padding: 3px 2px 2px 5px !important;  // dupl 5px left padding, see (305FF220)

.dw-topic-list
  width: 100%

  th.c_F_TsT_T_DvoTH,
  .num
    text-align: center   // but left if just one row?
    min-width: 55px

  .edAvtr
    // On small screens, show fewer frequent posters.
    @media (max-width: 980px)
      &:nth-child(4)
        display: none
      margin-left: 2px; // place them closer
    @media (max-width: 870px)
      &:nth-child(3)
        display: none
    @media (max-width: 770px)
      &:nth-child(2)
        display: none
    // On even smaller screens, we don't use table layout, but instead row layout.
    // Then there's lots of space: we can show all users again.

  tbody
    tr
      border-top: 1px solid hsl(0, 0%, 92%);
      &:first-child
        border-top-color: hsl(0, 0%, 91%);
        border-top-width: 3px;

      td > .dw-help
        margin: 11px;

    tr.esForum_topics_topic
      td.c_F_TsT_T_Dvo,
      td.dw-tpc-title
        vertical-align: top;  // vertical_align_top

      td
        padding: 10px $tablePaddingLeftNarrow
        @media (min-width: $isWideMinWidth)
          padding: 10px $tablePaddingLeftWide
        //font-size: $tableFontSize; — no, don't make it smaller. Harder to read :- /
        &.dw-tpc-title
          font-size: $tableTopicTitleFontSize;
          .s_F_Ts_T_Con-Para
            font-size: $tableTopicTitleFontSize + 1.7;
          .dw-p-excerpt
            font-size: $tableTopicExcerptFontSize;
        .s_F_Ts_T_Con_Ttl,
        a.c_TpcTtl // :not(.esAvtr)
          $leftPadding = 5px;  // dupl 5px, see (305FF220)
          padding: 3px 2px 5px $leftPadding; // makes it easier to click
          position: relative;
          left: - $leftPadding;
        a.c_TpcTtl  // :not(.esAvtr)
          &:hover
            // Dupl [HOVERSTYL]
            text-decoration: none;
            background: hsl($uiHue, 100%, 97%);
            outline: 1px solid hsl($uiHue, 100%, 92%);

        &:not(.dw-tpc-title)
          white-space: nowrap;

        &.dw-tpc-title
          word-break: break-word;

        &.dw-tpc-title .icon-pin:before
          color: hsl(0, 0%, 63%);
          padding-right: 20px;
          margin-left: 0;
          vertical-align: middle;
          position: relative;
          top: -1px;

        .esF_Ts_T_CName
          display: inline-block;
          // Category names shouldn't be too long. Truncate if too long. Don't wrap to a new
          // line, because then Chrome wraps happily when not needed.
          overflow: hidden;
          text-overflow: ellipsis;
          min-width: 110px;
          max-width: 280px;
          @media (max-width: 900px)
            max-width: 230px;
          // However now the screen is narrow, and it now works okay to let Chrome wrap.
          @media (max-width: 800px)
            word-break: break-word;
            white-space: normal;

        .icon-eye-off:before
          content: '\e824';
          margin: 0 8px 0 1px;
          font-size: 16px;
          color: hsl(0, 0%, 57%);

        .icon-mail:before
          color: hsl(0, 0%, 71%);
          position: relative;
          left: -2px;
          margin-right: 6px;

        .icon-doc-text:before,
        .icon-comment-empty:before
          font-size: 15px;
          margin: 0 9px 0 0;
          color: hsl(0, 0%, 65%);
          position: relative;
          top: -1px;

        .icon-chat:before
          color: hsl(0, 0%, 70%);
          font-weight: bold;
          margin: 0 7px 0 0;
          padding: 0;
          width: 17px;

        .icon-help-circled:before
          margin: 0 7px 0 0;
          color: hsl(0, 0%, 70%);
          font-size: 16px;

        .icon-sitemap:before
          color: hsl(0,0%, 71%);
          margin: 0 8px 0 0;
          position: relative;
          left: -1px;

        .dw-qa-ans-count
          font-size: 85%;
          margin-left: -5px;

        .icon-check-dashed:before
          margin: 0 9px 0 0;
          font-size: 84%;
          border-width: 2px;
          border-color: #bbb;
          border-style: dotted;

        .icon-check-empty:before
          font-weight: bold;
          font-size: 105%;
          margin: 0 8px 0 0;
          position: relative;
          top: 1px;

        .icon-idea:before,
        .icon-attention-circled:before, // problems
        .icon-block:before, // closed topics
        .icon-ok-circled-empty:before, // solved questions
        .icon-check:before  // fixed todos
          color: hsl(0, 0%, 40%); // is this line in use any more?
          margin: 0 8px 0 0;

        .icon-block:before  // closed topics
          color: hsl(0, 0%, 76%);

        .icon-attention-circled:before
          color: hsl(0, 0%, 69%);
          font-size: 16px;

        .icon-idea:before
          font-size: 17px;
          color: hsl(0, 0%, 60%);
          margin-right: 6px; // there's some whitespace to the right inside the icon
          // There's some whitespace to the left, it's not a square.
          position: relative;
          left: -1px;

        .icon-check:before
        .icon-ok-circled-empty:before
          color: hsl(0, 0%, 71%);

        .icon-ok-circled-empty:before
          margin: 0 9px 0 0;
          position: relative;
          left: 1px;

        .icon-ok:before
          color: hsl(0, 0%, 78%);
          margin: 0 7px 0 0;
          position: relative;
          left: -1px;

        .icon-check:before
          color: hsl(0, 0%, 74%);
          font-size: 17px;
          position: relative;
          top: 2px;

        &.num:not(.dw-tpc-feelings, .dw-tpc-replies)
          color: hsl(0, 0%, 53%);

        .dw-p-excerpt
          color: hsl(0, 0%, 50%);
          margin: 0.8ex 20px 1.2ex 0;
          max-width: 650px;
          font-size: 100%;
          letter-spacing: -0.1px; // weird, easier to read I think
          //margin-bottom: 0; // else vertical-align: middle gets messed up
                              // skip, now using vertical_align_top  instead
          a:not(.c_TagL_Tag) // would be better to add a class on the title instead
            color: hsl($uiHue, 100%, 40%);
            margin-left: 6px;
            &:hover
              background: none;
              outline: none;
              text-decoration: underline;

.dw-tpc-title .icon-pin [class^=icon-]:before
  display: none; // hide topic type icon, if pin icon shown [6YK320W]

.load-more
  text-align: center
  width: 100%
  display: block
  margin: 20px 0 0
  cursor: pointer

.esForum_topics_topic-deleted
  color: hsl(0, 0%, 40%);
  crossGray();


.esForum_topics_openIconsHelp
  padding: 11px 0 10px 16px;
  display: block;
  font-size: 15px;
  color: hsl($uiHue, 100%, 39%);
  float: left;
  &.icon-info-circled:before
    opacity: 0.75;
  &:hover
    text-decoration: none;
    color: hsl($uiHue, 100%, 22%);

.esTopicIconHelp
  li
    list-style: none;
    display: inline-block;
    margin: 0 0 3px 10px;
    width: 300px;
    vertical-align: top;

  [class^=icon-]:before
    width: 20px;
    margin: 0 6px 0 0;
    padding: 0;
    font-size: 16px;
    color: #555;

  .icon-check-empty:before
    color: #222;  // or hard to see, so thin borders

  .icon-idea:before
    font-size: 18px;
    color: #333;

.esTopicIconHelp_intro
  margin-bottom: 8px;

// Avoid flash of ISO dates in activity column (e.g. 2016-09-10 23:59:59Z)
html.js:not(.dw-react-started) .dw-tpc-activity .dw-ago-ltr
  visibility: hidden;
  width: 75px;
  display: block;

.s_F_Ts_NoTopics
  margin: 20px 0 10px;



// Tags
//===========================

.s_F_Ts
  .dw-p-excerpt
    .c_TagL
      margin-left: 9px;
    .c_TagL_Tag
      margin-left: 0;
      margin-right: 9px;

// When in a forum topic list, make the colors less strong — the topic title,
// tends to be the interesting thing.
.c_TagL_Tag.c_Tag-Po
  &,
  &:visited,
  &:link
    font-size: 14px;
    // No, a bit hard to read:
    //background: hsl(0deg 0% 98%);
    // Easy to read and looks nice:
    box-shadow: 1px 0.8px 3.7px hsl(0 0% 64%);
    color: hsl(0 0% 40%);
    background: none;

// When in a post header in a discussion, make the tags a bit stronger, than in
// the topic list — now, the reader isn't just skimming titles, but clicked this
// partiuclar topic, so then, more contrast, making the tags simpler to read.
.dw-p-hd
  .c_TagL_Tag.c_Tag-Po,
  .c_TagL_AddB
    color: hsl(0 0% 30.5%);
    box-shadow: 0.7px 0.7px 3px hsl(0 0% 40%);
    background: hsl(0 0% 98.7%);
  .c_TagL_AddB
    opacity: 0.67; // this button isn't that interesting


// Categories tree
//===========================

$catTitleMarginTop = 4px;
$catIconWidth = 64px;
$minOwnIconColumnDisplWidth = 900px;

.esForum_cats_cat-new
  animation: esFadeIn 2.8s 0s;
  animation-timing-function: ease-out-quad;

.s_F_Cs_C-Dd
  .forum-title,
  .topic-title
    crossGray();

.s_F_Cs_C_IcoWrp
  float: left;
  width: $catIconWidth;
  margin: $catTitleMarginTop 16px 0 0;
  img
    object-fit: contain;

.s_F_Cs_C_IcoWrp
  @media (max-width: 600px)
    width: 48px;

.s_F_Cs_C_IcoWrp + .s_F_Cs_C_TxtWrp
  // Wide screen? Then any category icon can get its own "column".
  @media (min-width: $minOwnIconColumnDisplWidth)
    margin-left: $catIconWidth + 16px;
  // Narrow screen? Show only icon and category title together,
  // but let the category description use the full width.
  @media (max-width: $minOwnIconColumnDisplWidth - 1)
    .forum-description
      clear: left;
      padding-top: 16px;  // so not immediately below the icon.

.s_F_Cs_C_ChildCs
  margin: 8px 0 -1px;
  // Why did I use flex-wrap here? At least, doesn't work well on
  // narrow screens — causes the cats to line up in small horizontal
  // word wrapped squares.
  // display: flex;
  // flex-wrap: wrap;

.s_F_Cs_C_ChildCs li
  flex: 1;
  list-style: disc;
  margin: 8px 15px 0px 18px;
  color: hsl(0, 0%, 33%);

.DW .s_F_Cs_C_ChildCs_C
  font-weight: bold;
  font-size: 16px;  // 14 is a bit small
  // white-space: nowrap;  — Why? No. Can make sub cats with long names
  // push the right table column, off screen, on mobile phones.
  // Instead:   [avoid_hz_scroll]
  word-break: break-word;  // no not needed? because on .esPage  already

  // Move closer to list item disc.
  position: relative;
  left: -4px;
  color: hsl(0, 0%, 31%);


@keyframes esFadeIn
  from
    opacity: 0.15;
    background: hsl($uiHue, 100%, 60%);
  to
    opacity: 1;
    background: hsl($uiHue, 0%, 100%);

.esForum_cats_cat .forum-description
  word-break: break-word;
  color: hsl(0, 0%, 40%);
  margin-bottom: 3px; /* to the notfs settings dropdown below */

.forum-table
  & > tbody > tr > td:first-child
    width: 45%; // or sometimes 80-90% wide
    // This looks more balanced — but line-breaks topic titles slightly more often, on small screens.
    @media (min-width: 1200px)
      width: 50%;

  .topic-title.icon-pin:before
    margin: 0 4px 0 0;

  .topic-title
    color: hsl(0, 0%, 25%);
    font-size: 15px;
    @media (max-width 767px)
      font-size: 14px;  // [avoid_hz_scroll]

    [class^="icon-"]:before, [class*=" icon-"]:before
      margin: 0 4px 0 0;
      font-size: 95%;

    // Don't show both pinned icon + topic type icon. [6YK320W]
    &.icon-pin [class^='icon-']:before
      display: none;

    .icon-chat:before
      opacity: 0.87;
      font-size: 16px;
      margin: 0 6px 0 0;
      padding-left: 2px;
      font-weight: bold;
      top: 1px;
      position: relative;

    .icon-check-empty:before
      position: relative;
      top: 1px;

    .icon-idea:before
      font-size: 106%;

    .icon-pin:before,
    .icon-ok-circled-empty:before
      opacity: 0.87;

    .icon-ok-circled:before
      opacity: 0.83;
    .icon-help-circled:before,
    .icon-block:before
      opacity: 0.83;
      font-size: 105%;


.s_F_Cs_C_Ntfs
  $color = hsl(0, 0%, 57%);
  color: $color;
  font-style: italic;
  .dw-notf-level
    border: none;
    padding: 0;
    vertical-align: baseline;
    color: $color;


$less_forum_padding_width = 680px;

@media (max-width $less_forum_padding_width)
  .forum-table
    th, td
      &:first-child
        padding-left: 0 !important;

.forum-table > tbody > tr > td
  padding: 15px 20px 16px 8px; /* 8x paddin-left aligns w/ row header */
  @media (max-width $less_forum_padding_width)
    padding-right: 2px;  // 2 + 8 = 10, ok



.forum-table .forum-title-wrap
  font-size: 19px;
  line-height: 1;  // else hard to vertical-align with any icon to the left

  // The cat name in 19px would take up *lots* of space
  // on a 400 wide screen. [avoid_hz_scroll]
  @media (min-width 940px) and (max-width: 1023px)
    font-size: 18px;
  @media (min-width 640px) and (max-width: 939px)
    font-size: 17px;
  @media (min-width 440px) and (max-width 639px)
    font-size: 16px;
  @media (max-width 439px)
    font-size: 15px;

  margin: $catTitleMarginTop 10px 9px 0;
  min-width: 100px; // or hard to read, if word-wrap splits onto many lines
  .forum-title
    font-weight: bold;
    color: hsl(0, 0%, 23%);
    // Prevent long words in a category name from pushing the
    // topics list to the right off-screen. [avoid_hz_scroll]
    word-break: break-word; // Later: overflow-wrap: anywhere;  when supported by Safari
    line-height: 125%;


.DW.DW .forum-table td
  background: none; /* cancel Twitter Bootstrap */


.forum-table .topic-table-excerpt tbody,
.forum-table .topic-table-excerpt td {
  border: none;
  padding-left: 0; /* or wouldn't align with parent table header */
}

.forum-table .topic-table-excerpt
  margin-bottom: 10px;
  // Don't let long words make the table wider than a phone. [avoid_hz_scroll]
  // But avoid, if screen a bit wide — then the browser word-breaks more nicely.
  @media (min-width 480px)
    // Breaks only if actually needed.
    word-break: break-word;
  @media (max-width 479px)
    // Starts a word on a line although it won't fit, and happily line-breaks it
    // — good on mobiles, to use more of the available space.
    word-break: break-all;


.forum-table .topic-table-excerpt .topic-details
  font-size: 12px;
  margin-left: 1.9ex;
  .icon-comment-empty
    margin-right: 1.1ex;
    position: relative;
    top: -1px;

.topic-details {
  color: gray;
}



// Forum in list layout (not table)
//------------------------

$topicTitlePadding = 6px;
$row2PaddingBottom = 7px;

.c_F_TsL_T
  display: flex; // this changes from display: list-item to flex on <li> (that's fine).
  //list-style: none; — not needed, is display: flex, not list-item.
  margin: 0;
  padding: (12px - $topicTitlePadding) 0 6px;
  border-top: 1px solid hsl(0, 0%, 86%);

  .n_Col1
    margin: 0 19px 0 16px;
    @media (max-width: 480px)
      margin: 0 11px 0 5px;
    @media (max-width: 380px)
      margin: 0 10px 0 0;

  .n_Col2
    flex: 1;

.c_F_TsL_T .n_Row1
  display: flex;
  justify-content: space-between;

.c_F_TsL_T_Title
  display: inline-block;
  padding-right: 15px;
  word-break: break-word;
  > a:first-child
    font-size: 16px;
    font-weight: bold;
    color: hsl(0, 0%, 15%);
    padding: $topicTitlePadding 0 7px;
    display: inline-block;
  [class^='icon-']:before
    left: -2px;
    position: relative;
    margin-right: 5px;
    opacity: 0.65;
  .icon-pin
    margin-right: 5px;
  // If a pin icon is shown already, hide topic type icon. [6YK320W]
  .icon-pin [class^=icon-]:before
    display: none;

.c_F_TsL_T_Stats
  display: inline-block;
  white-space: nowrap;
  padding: $topicTitlePadding 0 0 20px;
  text-align: right;

.c_F_TsL_T_NumRepls
  min-width: 30px;  // so do-it votes get right aligned
  .icon-comment-empty:before
    position: relative;
    top: -1px;
    right: -1px;

.c_F_TsL_T
  .dw-p-excerpt
    overflow: hidden; // otherwise a long URL can cause horizontal scrollbars
  .dw-p-excerpt,
  .s_F_Ts_T_Con_B
    display: block;
    margin: 0 0 11px;
    color: #555;
    a
      margin-left: 7px;

.c_F_TsL_T .n_Row2
  clearfix();
  margin-top: 7px;

.c_F_TsL_T_When
  float: right;
  vertical-align: middle;
  padding: 2px 3px 5px 5px; // top:2px aligns w category name, other sides make easier to click
  min-width: 35px;
  text-align: right;

.c_F_TsL_T_Users
  clearfix();
  padding-bottom: $row2PaddingBottom;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.8; // otherwise avatars steal attention from topic title
  .esAvtr-tny
    margin-right: 4px;

.c_F_TsL_T_Cat
  display: inline-block;
  margin: 0 4px 0 8px;
  vertical-align: middle;
  padding-bottom: $row2PaddingBottom;
  .esF_Ts_T_CName
    color: #222;

.c_F_TsL_T_Cat_Expl
  color: hsl(0, 0%, 50%);
  margin-right: 1px;
  vertical-align: middle;


// Votes

// In list alt 1, its own column to the left
.esForum_topics_topic .c_TpDvo,   // ... vert_dovotes
.c_F_TsL_T .n_Col1 .c_TpDvo
  display: block;
  text-align: center;
  .icon-heart
    display: inline-block;
    font-size: 15px;  // if on one line [tab_do_vo_1_line]
  .icon-heart:first-child
    display: block;
    font-size: 22px;  // if on two lines: icon, then vote count below

// But show votes in one line, if topics in one line (no 2nd line
// with any excerpt or thumbnails).  [tab_do_vo_1_line]
.c_F_TsT-OneLine
  .c_F_TsT_T_Dvo
    vertical-align: middle;
  .c_TpDvo .icon-heart:first-child
    display: inline-block;
    margin-right: 4px;
    font-size: 15px;

.esForum_topics_topic .c_TpDvo
  padding-right: 3px;
  // Would be better to merge with ..dw-tpc-title somehow.
  padding-top: 3px;

.c_F_TsL_T .n_Col1 .c_TpDvo
  padding-top: 6px;

// In list alt 2, next to num-replies
.c_F_TsL_T_Stats .c_TpDvo
  padding-right: 7px;
  .icon-heart
    font-size: 15px;
    padding: 0 2px 1px 0px;
    margin-right: 4px;

.c_TpDvo .icon-heart
  color: white;
  text-shadow: 0 0 1px black;

/* Later, once vote-from-topic-list has been impl. [vote_from_tp_ls]
.c_TpDvo:hover .icon-heart
  background: hsl(207 100% 94%);
  outline: hsl(207 100% 92%);
  text-shadow: 1px 1px 3px hsl(207deg 100% 30%);
  */

.c_TpDvo
  // Do-It vote count text:
  .c_TpDiVo_Ttl
    color: hsl(0 0% 42%);

  &.c_DiVo-0 .c_TpDiVo_Ttl
    color: hsl(0 0% 48%);

  // Do-It vote icon — stronger red color, the more votes.
  &.c_DiVo-1 .icon-heart
    text-shadow: 1px 1px 3px hsl(7deg 25% 40%) !important;

  &.c_DiVo-2 .icon-heart
    text-shadow: 1px 1px 4px hsl(7deg 33% 34%) !important;

  &.c_DiVo-3 .icon-heart
    text-shadow: 1px 1px 5px hsl(7deg 40% 34%) !important;

  &.c_DiVo-4 .icon-heart
    text-shadow: 1px 1px 6px hsl(7deg 45% 34%) !important;

  &.c_DiVo-5 .icon-heart
    text-shadow: 1px 1px 7px hsl(7deg 50% 34%) !important;

  &.c_DiVo-6 .icon-heart
    text-shadow: 1px 1px 7px hsl(7deg 55% 34%) !important;

  &.c_DiVo-7 .icon-heart
    text-shadow: 1px 1px 8px hsl(7deg 65% 33%) !important;

  &.c_DiVo-8 .icon-heart
    text-shadow: 1px 1px 8px hsl(7deg 75% 34%) !important;

  &.c_DiVo-9 .icon-heart
    text-shadow: 1px 1px 9px hsl(7deg 80% 34%) !important;

  &.c_DiVo-10 .icon-heart
    text-shadow: 1px 1px 9px hsl(7deg 90% 34%) !important;

  &.c_DiVo-11 .icon-heart  // [max_log_likes]
    text-shadow: 1px 1px 10px hsl(7deg 100% 34%) !important;


// vim: fdm=indent et ts=2 sw=2 fo=r list
