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

//=== Thread view ==/

.thread-header {
    margin-bottom: 2em;
    padding: 0;
    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 a {
        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;;
    display: inline-block;

    .name {
        font-weight: bold;
    }
    .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 {
    white-space: pre-wrap;
    word-wrap: break-word;

    span.read-more a,
    span.read-less a {
        float: right;
        padding: 3px 10px 0 0;
    }
}
.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;
    }
    .likestatus + span {
        padding-right: 1em;
    }
    div.attachments {
        display: inline;
        margin-left: 1em;
        .attachments-list {
            margin-bottom: 0;
        }
    }

    .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;
        }
    }


}


.email-first .email-info {
    padding: 0 0 20px 0;
    // border-bottom: 1px solid $rowBorderColor;
}

.email-first {
    padding-left: 10px;
}

.email-first .email-body {
    padding-left: 25px;
}

.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;
		}
		.email-body {
				// padding: 5px;
				padding-left: 25px;
				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: 200%;
}
.days-text {
		font-size: 70%;
}


#thread-overview-info, #message-overview-info {
		a {
				color: #999;
		}
		.fa {
				color: #BFBFBF;
		}
		.postorius .fa {
				color: black;
		}
}

#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);
		text-transform: uppercase;
}

#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;
		span#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;
}

.quoted-text-1 {
		border-left: 2px solid  #1d3e0f;
		padding: 0.5em;
		background: #e4f1df;
		border-radius: 10px;
}

.quoted-text-2 {
		border-left: 2px solid  #5c0a0a;
		padding: 0.5em;
		background: #f7d4d4;
		border-radius: 10px;
}

.quoted-text-3 {
		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: -20px;
						}
				}
		}
		// 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;
								}
						}
				}
		}
