// MESSAGE VIEW95px
$evenEmailColor: rgb(246, 246, 246);
$oddEmailColor: rgb(238, 238, 238);

//=== Thread view ==/

.thread-header {
    margin-bottom: 2em;
    h3 {
        text-align: center;
        font-size: 1.5em;
        margin-top: 8px;
        margin-bottom: 0;
    }
    .thread-older, .thread-newer {
        margin-top: 1em;
        color: $subheadingColor;
    }
    button {
        margin-top: 10px;
    }
    .thread-category {
        text-align: center;
    }
    .thread-titles {
        color: $subheadingColor;
    }
}

.view-thread .nav-tabs {
    margin-bottom: 1.5em;
    .dropdown-header {
        padding-left: 0;
        padding-right: 0;
    }
}
.view-thread .anchor-link {
    position: relative;
    a {
        position: absolute;
        top: -95px;
    }
}

.view-thread {
    .unread {
        border-left: 2px solid #08c;
    }
}
//=== Main section with the whole thread ==/

// First email of the thread
.email-header {
    margin-bottom: 1em;
    display: table;
    width: 100%;
    //display: inline-block;

    .gravatar-wrapper {
        float: left;
    }
    .gravatar {
        margin-bottom: 2px;
        display: inline-block
    }

    .fa-envelope {
        font-size: 130%;
        margin-right: 10px;
    }

    .messagelink {
        font-style: italic;
        font-size: 90%;
        color: rgb(167, 169, 172);
        a {
            color: rgb(167, 169, 172);
        }
    }

    .fa {
        color: #08c;
    }

}

.email-author {
    margin-left: 0.5em;;
    align-items: center;

    .name {
        font-size: 1.25em;
    }
    .rank{
        color: $subheadingColor;
        font-size: 80%;
        font-weight: bold;
    }
}

.email-date {
    .date {
        font-weight: bold;
        display: inline-block;
    }
    .time {
        text-align: right;
        display: inline-block;
        span {
            text-align: right;
            color: $subheadingColor;
            border-bottom: 1px dashed $rowBorderColor;
            cursor: help;
        }
    }
}

.email-body {
    word-wrap: break-word;

    span.read-more a,
    span.read-less a {
        float: right;
        padding: 3px 10px 0 0;
    }

    .blockquote {
      padding-left: 20px;
      padding-right: 20px;
      font-size: 1rem;
      border-radius: 10px
  }

  blockquote {
      background: #e8ecf2;
      border-left: 2px solid #3771c8;
  }

  blockquote blockquote {
      background: #e4f1df;
      border-left: 2px solid #3771c8;
  }

  blockquote blockquote blockquote {
      background: #ffc4b3;
      border-left: 2px solid #3771c8;
  }
  blockquote blockquote blockquote blockquote {
      background: #e8ecf2;
      border-left: 2px solid #3771c8;
  }

  p {
      white-space: pre-wrap;
  }

  div {
      white-space: pre-wrap;
  }

  h1, h2, h3, h4, h5, h6 {
      font-size: 1.2rem;
  }

  pre {
      border: none;
  }

}
.email-body.fixed {
    font-family: 'Droid Sans Mono', monospace;
    white-space: pre;
}

.attachments {
    padding-top: 8px;
    p {
        margin-bottom: 0;
        font-weight: bold;
    }
}

.email-info {
    position: relative;
    .messagelink {
        display: inline;
        font-style: italic;
        font-size: 90%;
        color: rgb(167, 169, 172);
        a {
            color: rgb(167, 169, 172);
        }
    }
    .messagelink span, .messagelink a {
        padding: 5px;
        margin-left: 2px;
        border-radius: 2px;
    }
    .messagelink span:hover, .messagelink a:hover {
        background: grey;
    }

    .vote {
        padding: 5px;
        marging-left: 2px;
        border-radius: 2px;
    }

    .youlike:hover {
        background: #E1F4A2;
    }

    .youdislike:hover {
        background: #FFAAAA
    }
    .reply {
        // padding: 10px;
        border-radius: 4px;
    }
    .reply:hover {
        background: #e8ecf2;
    }
    .likeform-wrapper {
        position: relative;
        top: 0;
        right: 0;
    }
    .likeform-wrapper a {
        text-decoration: none;
    }
    .likestatus + span {
        padding-right: 1em;
    }
    div.attachments {
        display: inline;
        margin-left: 1em;
        .attachments-list {
            margin-bottom: 0;
        }
    }

    .reply-form-unauthenticated {
        display: none;
        margin-top: 1em;
    }
    .reply-form {
        display: none;
        .reply-tools {
            margin-top: 10px;
            margin-bottom: 0;
            label {
                font-size: 90%;
                font-weight: normal;
            }
        }
        p { margin: 0; }
        p.new-subject {
            display: none;
            margin-bottom: 0.5em;
        }
        p.message-text {
            margin-bottom: 0.25em;
        }
        p.buttons {
            margin-top: 1em;
        }
    }
    .reply-result {
        text-align: center;
        .alert {
            display: inline-block;
        }
        .alert-success {
            margin-bottom: 0;
        }
        .alert-error {
            white-space: pre;
            text-align: left;
        }
    }


}

.sort-mode {
    text-align: right;
    padding-top: 10px;
}


/* Set the indent of the replies based on the size of the screen.*/
.reply-level-1 {
    margin-left: 2em;
}
.reply-level-2 {
    margin-left: 4em;
}
.reply-level-3 {
    margin-left: 6em;
}
.reply-level-4 {
    margin-left: 8em;
}
.reply-level-5 {
    margin-left: 10em;
}


/* On smaller screens, do not indent replies as it gets harder to read emails
 *  at level 5.
 */
@include media-breakpoint-down(sm) {
    // @media (max-width: 768px) {
    .reply-level-1, .reply-level-2, .reply-level-3, .reply-level-4, .reply-level-5 {
        margin-left: 0em;
    }
}


/* The email thread */
.view-thread .replies {
    margin-top: -15px;
}
.replies .email {
        border-top: 1px solid $rowBorderColor;
        // padding: 0.5em;
        margin: 20px 0 20px 0;
        .unread {
                border-top: 1px solid rgb(100, 100, 100);
                background-color: rgb(214, 214, 214);
                i.unread {
                        float: right;
                        margin-right: 2em;
                }
        }
        .subject {
                text-align: center;
                // clear: both;
                font-style: italic;
                display: inline-flex;
                padding-top: 5;
        }
        .email-body {
                // padding: 5px;
                background-color: rgb(255, 255, 255);
        }
}
// .even .email {
//     background-color: $evenEmailColor;
// }
// .odd .email {
//     background-color: $oddEmailColor;
// }
.temporary .email {
        background-color: rgb(215, 215, 229);
        display: none;
}


// === Thread general information column

.days-num {
        font-size: 150%;
}
.days-text {
        font-size: 70%;
}


#thread-overview-info, #message-overview-info {
        a:hover  .fa {
            color: #fff;
        }
        .fa {
                color: #BFBFBF;
        }
        .postorius .fa {
                color: #007bff;
        }
}

#thread-overview-info {
        #thread-date-info {
                padding-bottom: 8px;
        }

        .list-name {
                word-wrap: break-word;
                a {
                        color: black;
                }
        }
        form.favorite {
                margin-bottom: 0;
        }
        .favorite a {
                i {
                        margin-right: 0.3em;
                }
        }
        a.saved,
        a.notsaved {
                /* Will be shown via Javascript */
                display: none;
        }
}

//=== Tags

#tag-title {
        color: rgb(77, 77, 77);
        @extend .small-caps;
}

#tags {
        color: rgb(167, 169, 172);
        margin-top: 2em;
}
#tags ul {
        padding: 10px 0;
        margin: 0;
}
#tags ul li {
        padding-left: 0;
}
#tags ul li span {
        margin-left: 5px;
}
#tags .rmtag {
        margin: 0;
        display: inline;
}
#tags .rmtag a {
        visibility: hidden;
        font-size: 125%;
}
#tags:hover .rmtag a {
        visibility: visible;
}
#tags:hover .rmtag a:hover {
        text-decoration: none;
}

#add-tag {
        margin-top: 0.3em;
}

//=== Participants ==/

#participants {
        margin-top: 2em;
        color: $subheadingColor;
        h3#participants_title {
                @extend .small-caps;
        }
        li {
                margin: 1em 0;
        }
        .participant-gravatar {
                padding-left: 0;
        }
}


/* Inline quotes */
.quoted-switch a {
        background-color: #fafafa;
        padding: 0 4px 2px 4px;
        border-left: 2px solid rgb(55, 113, 200);
        font-weight: bold;
        font-size: 115%;
        &:hover {
                text-decoration: none;
        }
}
.quoted-text {
        border-left: 2px solid  rgb(55, 113, 200);
        padding: 0.5em;
        background: #e8ecf2;
        border-radius: 10px;
}


//=== Navigation for unread messages ==/
        #unreadnavbar {
                position: fixed;
                bottom: 0;
                right: 0;
                text-align: right;
                padding-right: 2em;
                display: none;
        }
        #unreadnavbar>div {
                width: auto;
                padding: 0.2em 1em;
                border: 1px solid #888;
                border-bottom: none;
                background-color: #eee;
        }


        //=== Re-attach threads ==/
        .reattach-thread {
                h1 {
                        text-align: center;
                        font-size: 24px;
                        line-height: 26px;
                        margin-bottom: 2em;
                }
                form {
                        margin-bottom: 0;
                        img.ajaxloader {
                                margin-left: 1em;
                        }
                }
                form.search {
                        margin-top: 2em;
                        p {
                                line-height: 22px;
                        }
                        input {
                                margin-left: 3em;
                        }
                        input,
                        button {
                                font-size: 12px;
                                padding: 2px 8px;
                        }
                }
                li.manual {
                        label {
                                display: inline;
                        }
                        input {
                                margin-bottom: 0;
                        }
                        input[type='text'] {
                                width: 22em;
                        }
                }
                p.buttons {
                        margin-top: 2em;
                }
        }

        //=== message_new.html: start a new thread ==/
        .new-thread-form {
                //margin-left: 2em;

                #id_subject,
                textarea {
                        width: 100%;
                }

                p.buttons {
                        margin-top: 2em;
                }
        }

        /*
// tiny screen (<=320px):
// nav-tabs: less padding, smaller dropdowns, right-align last dropdown
@media (max-width: $screen-tn) {
    .view-thread .nav-tabs {
        >li a {
            padding-left: 7px;
            padding-right: 7px;
        }
        #navbarMonthsListDrop ~ .dropdown-menu {
            min-width: 90px;
            left: inherit;
            right: 0;
        }
    }
    #participants {
        .participant-name {
            margin-left: 0 !important;
        }
    }
}
     */

        // xs screen (<=540px): more padding/spacing in nav-tabs
        @include media-breakpoint-down(539px) {
        // @media (max-width: 539px) {
                .view-thread .nav-tabs {
                        .dropdown-menu {
                                min-width: 120px;
                        }
                        #navbarMonthsListDrop ~ .dropdown-menu {
                                text-align: left;
                        }
                }
        }
        // small screens (<768px) have smaller gravatar images
        @include media-breakpoint-down(xs) {
        // @media (max-width: $screen-xs-max) {
                #participants {
                        .participant-name {
                                margin-left: 10px;
                        }
                }
        }
        // mid screens (<992px): adjust spacing between gravatar images
        // @include media-breakpoint-up(md) {
        // @media (min-width: $screen-md-min) {
        //      #participants {
        //              img.gravatar {
        //                      @include square(32px);
        //              }
        //      }
        // }


        //=== Message view ==/

        .message-header {
                margin: 1em 0 2em 0;
                .message-back {
                        a {
                                padding: 0.2em 0;
                                .icon {
                                        font-size: 1.5em;
                                }
                        }
                }
        }
