// Zurmo is a customer relationship management program developed by
// Zurmo, Inc. Copyright (C) 2017 Zurmo Inc.
//
// Zurmo is free software; you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License version 3 as published by the
// Free Software Foundation with the addition of the following permission added
// to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
// IN WHICH THE COPYRIGHT IS OWNED BY ZURMO, ZURMO DISCLAIMS THE WARRANTY
// OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
//
// Zurmo 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 or write to the Free
// Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
// 02110-1301 USA.
//
// You can contact Zurmo, Inc. with a mailing address at 27 North Wacker Drive
// Suite 370 Chicago, IL 60606. or at email address contact@zurmo.com.
//
// The interactive user interfaces in original and modified versions
// of this program must display Appropriate Legal Notices, as required under
// Section 5 of the GNU Affero General Public License version 3.
//
// In accordance with Section 7(b) of the GNU Affero General Public License version 3,
// these Appropriate Legal Notices must retain the display of the Zurmo
// logo and Zurmo copyright notice. If the display of the logo is not reasonably
// feasible for technical reasons, the Appropriate Legal Notices must display the words
// "Copyright Zurmo Inc. 2017. All rights reserved".

.gravatar{
    float:left;
    border:1px solid #fff !important;
    background:#DFDFDF;
    padding:2px;
}

.list-row-model-date{
    float: right;
    margin-right:10px;
}

#ConversationEditView{
    td{
        padding-left:0;
    }
    textarea{
        line-height: 130%;
    }
	.right-side-edit-view-panel{
		//display: inline-block;
		//float: none;
	}
}

.single-coloumn-details-view,
#MissionDetailsView,
#ConversationDetailsView,
#ConversationDetailsAndRelationsView{
    &.AppContent{
        padding-right:0;
    }
    .GridView{
        display:none;
    }
    .GridView:first-child{
        display:block;
        width:100%;
    }
    .panel{
        width:70%;
        float:left;
        td, th{
            //padding-bottom:10px !important;
        }
        > table{
            border-bottom: none;
        }
    }
    .right-side-edit-view-panel{
        //margin-right:15px;
    }
    .details-table{
	    border:1px solid #ccc !important;
	    .b-shadow(~"inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12)") !important;
	    #gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 ) !important;
	    .clearfix();
    }
	.toolbar-mbmenu{
		top: 8px !important;
	}
}

#MissionDetailsView,
#ConversationDetailsView{
    .panel{
        width: 100%;
    }
}

/*Sidebar*/
.thread-details{
    margin:0 0 10px 0 !important;
    width: 100%;
    td + th{
		padding-left:0 !important;
    }
    th, td{
		text-align: left;
		padding:5px 0;
    }
    th{
		color: @textColor;
    }
    td{

    }
    .attachments{
		margin: 0;
		font-weight: normal;
    }
}

.conversation-related-Account{
    .t-shadow(0 1px #fff);
    > div{
		position: relative;
		&:before{
		    .symbly(20px);
		    content:"P";
		    font-weight: normal !important;
		    position: absolute;
		    top:-3px;
		    line-height: 1;
		}
    }
    a{
		position: relative;
		left: 15px;
    }

}

.conversation-related-Opportunity{
    .t-shadow(0 1px #fff);
    > div{
		position: relative;
		&:before{
		    .symbly(21px);
		    content:"9";
		    font-weight: normal !important;
		    position: absolute;
		    top:-2px;
		    line-height: 1;
		}
    }
    a{
		position: relative;
		left: 15px;
    }
}

.conversationStatusChangeArea{
    margin:0 0 15px 0;
    padding:0;
    > span{
		float: left;
		line-height: 1;
		margin:10px 10px 0 0;
		padding: 0 0;
		font-weight: bold;
    }
    label{
		display: inline !important;
		margin-right: 10px;
		input{
		    margin-right: 5px;
		}
    }
}


.switch{
    border:1px solid rgba(170, 170, 170, 0.3);
    #gradient > .vertical( #777, #999 );
    .b-shadow(0 0 9px 5px rgba(153, 153, 153, 0.15));
    display: inline-block;
    padding: 8px 2px 7px 2px;
    .radius(3px);
    cursor: pointer;
    float: right;
}

.switch-state{
    display: inline-block;
    position: relative;
    width: auto;
    label{
	position: relative;
	z-index: 0;
	padding: 5px 7px 5px 7px !important;
	margin: 0;
	.radius(3px);
	.opacity(50);
	color: #fff;
	.smaller() !important;
	font-weight: 700 !important;
	cursor: pointer;
    }
    input{
	position: absolute;
	z-index: 1;
	left: 7px;
	.opacity(0);
    }
    input:after{
	content: "";
	width: 14px;
	height: 14px;
	.radius(50px);
	display: block;
	position: absolute;
	left: -3px;
	top:-2px;
    }
    input:checked{

    }
    input:checked + label{
	.opacity(100);
    }
    &:first-child input:checked + label{
		@topColor: #97c43d;
        @bottomColor: #6fa82d;
		#gradient > .vertical(@topColor, @bottomColor ) !important; //green
		border:1px solid @topColor;
    }
    &:last-child input:checked + label{
		@topColor: #c43d53;
        @bottomColor: #a82d31;
		#gradient > .vertical(@topColor, @bottomColor ) !important; //red
		border:1px solid @topColor;
    }
    &:first-child input:checked:after{
		border:2px solid #6fa82d;
		box-shadow:0 0 10px #6fa82d;
    }
    &:last-child input:checked:after{
		border:2px solid #a82d31;
		box-shadow:0 0 10px #a82d31;
    }
}

.switch-state + .switch-state{
    margin-left: 0;
}

/*End sidebar*/

#ModelDetailsSummaryView,
//#CommentList,
.CommentList{
    h2{
        margin-bottom:15px;
    }
}

.comment-details{
    display:inline-block;
    .smaller();
    strong{
        color: #999;
        font-weight: normal !important;
    }
}

//#CommentList,
.CommentList{
    margin-left: 115px;
    .comment{
        margin-top: 10px;
    }
    &:last-child{
        margin-bottom: 5px;
    }
}

.comment{
    .clearfix();
    line-height: 140%;
    .gravatar{
        margin-top:1px;
    }
    .comment-content{
        padding-left:50px;
        line-height: 140%;
    }
    &.unread{
        font-weight:bold;
    }
    .delete-comment, .edit-comment{
        .smaller();
	    color: @themeColor;
        a{
            .opacity(50);
	        color: @themeColor;
            &:hover{
                .opacity(100);
            }
        }
    }
}

.comment-content,
.comment-details{
    //margin: 0 0 2px 0;
}

.model-details-summary{
    font-size: 12px !important;
    padding-left: 115px;
    .gravatar{
        margin-left: -115px;
    }
    .comment-content{
        font-size: 12px;
        padding-left:0;
        //margin:5px 0;
    }
}

.conversation-subject{
    margin-bottom: 30px;
    .comment-content{
        font-size: 15px;
        line-height: 150%;
        font-style: italic;
    }
}

.showAllCommentsLink{
    margin-left: 130px;
    position: relative;
    top: 5px;
    display: block;
    .z-action-link();
}


#ModelDetailsSummaryView,
#CommentInlineEditForModelView,
#CommentsForRelatedModelView,
#CommentForTaskInlineEditForModelView,
#CommentsForRelatedTaskModelView{
    max-width: 600px;

    .wide.form{
        .unstyle-panel();
    }
    h2{
        font-size:15px;
    }
}

#CommentInlineEditForModelView,
#CommentForTaskInlineEditForModelView{
    margin-top: 25px;
    padding-left: 115px;
    td{
        padding:0 0 0 0 !important;
    }
    h2{
        margin:0 0 10px 0;
    }
    .wide.form{
        padding:0;
        border:none;
        background:none;
        .b-shadow(none);
        margin-bottom: 0;
    }
    form{
        padding:0;
        margin-bottom: 15px;
    }
    .panel{
        width:100%;
        float:none;
    }
    table{
        margin-bottom: 0;
    }
}

.attachments{
    margin-top:5px;
    list-style: none;
    line-height: 140%;
    li{
        margin-bottom:2px;
		padding-left:15px;
    }
}

.icon-attachment{
    .symbly(18px);
//    float: left;
//    margin-left: -15px;
    &:before{
        content:"H";
    }
}

#ConversationsPageView ~ .token-input-dropdown{
    min-width: 0 !important;

}

.unread{
	td, td a{
		font-weight:bold;
		color: @themeColor;
	}
}

#ConversationDetailsView,
#MissionDetailsView{
    .details-table{
        .clearfix();
        margin-right:0 !important;
    }
    .panel > table{
        border-bottom: none;
    }
}

#MissionEditView{
    .panel{
        width:100% !important;
    }
	.view-toolbar-container + .left-column{
		display: none;
	}
}

.mission-change-status-link{
    margin:0 5px !important;
}

#MissionDetailsView{
    .missionStatusChangeArea{
        margin-bottom:10px;
    }
    .mission-change-status-link{
        position:relative;
        top:9px;
    }
}


.missionStatusChangeArea{
    margin-top: 10px;
    display: inline-block;
    a{
        float: none;
        color:#fff !important;
    }
}

.actions-column{
    .missionStatusChangeArea{
        margin-top:0;
    }
}

.comment-content{
	font-weight: normal;
    .missionStatusChangeArea{
        a:first-child{
            margin-left: 15px;
        }
    }
    .comment-text a:not(.user-link){
        color: @themeColor;
        &:hover{
            color: darken(@themeColor, 20%);
        }
    }
}

a.user-link{
    font-weight: bold;
    color: @textColor;
}

.mission-status{
    margin:0 5px;
    font-weight:bold;
}

#MissionsListView{
    .actions-column{
        width: 250px;
    }
}

.actions-column{
    text-align: right;
    .mission-status{
        vertical-align:60%;
        font-weight:normal;
        font-style:italic;
    }
}

/*=Social Items*/
.SocialItemsListView,
#AllSocialItemsForPortletView{
    tr:hover{
        background: none !important;
        color: inherit !important;
    }
    td:first-child{
        border-top:none;
    }
    .CommentList{
        margin-left: 80px;
    }
    .model-details-summary{
        padding-left: 80px;
        padding-top:0;
        .gravatar{
            margin-left: -65px;
        }
    }
    .show-create-comment{
        margin-left: 80px;
        .smaller();
        .opacity(50);
	    color: @themeColor;
        &:hover{
            .opacity(100);
        }
    }
    .wide.form{
        margin-bottom: 0;
        border:none;
        border-bottom: 1px solid #fff;
        .b-shadow(none);
	    float: none;
    }
    .comment-content{
        padding-right:15px;
    }
}

#MissionsPageView,
#ConversationsPageView{
	#comment-inline-edit-form,
    #comment-for-task-inline-edit-form,
	#social-item-inline-edit-form{
		.left-column{
			padding: 0;
			z-index: 99999;
			position: relative;
		}
		.form-toolbar{
			padding: 0;
		}
	}
}

#comment-inline-edit-form,
#comment-for-task-inline-edit-form,
#social-item-inline-edit-form{
    padding-bottom:15px;
    border:none;
    border-bottom: 1px solid #ccc;
    background: none !important;
    .b-shadow(none);
    .reset-filter();
	.left-column{
		//padding: 0;
	}
    td:first-child{
        padding-left: 0;
    }
    .form-toolbar{
        text-align: right;
        border-top:none;
//        padding: 0 15px;
        margin-top: 0;
        a{
            color:#fff;
            margin-right:0;
            float:right;
        }
    }
    table.files{
        border-bottom: none;
        float: left;
        margin-top: 5px;
    }
    .panel > table{
        border:none;
    }
}

#social-item-inline-edit-form{
    .view-toolbar-container{
        float: none;
        padding: 0 15px;
    }
}

#comment-inline-edit-form,
#comment-for-task-inline-edit-form{
    border-bottom: none;
    tr.template-download td{
        padding-left:0 !important;
    }
}

#comment-for-task-inline-edit-form{
    .view-toolbar-container{
        top: auto !important;
    }
}

[id^="comment-inline-edit-form"]{
    .left-column{
        padding: 0;
    }
}

.SocialItemsListView{
    .items{
        width: 100%;
        > tbody > tr > td{
            padding: 0 !important;
        }
    }
}

.social-item{
    border-top: 1px solid #fff;
    padding: 15px 0;
    .wide.form{
        border:none !important;
        background: none !important;
        .b-shadow(none);
        form{
            border:none !important;
            background: none !important;
            .b-shadow(none);
            padding-bottom: 0;
            td{
                //padding-top: 0 !important;
                //padding: 5px 0 10px 65px !important;
            }
        }
    }
    .comments-activity{
        td{
            padding: 0;
            border-bottom: none;
        }
        .form-fields td:first-child{
            padding-left: 0;
        }
    }
    textarea{
        width: 100%;
    }
    table{
        border-bottom: none;
    }
    .form-toolbar{
        text-align: right;
        border:none;
        a{
            margin-right: 0;
        }
    }
}

.CommentInlineEditView{
    padding-top: 2px;
}

.CommentForSocialItemInlineEditView {
    margin: 10px 15px 0 80px;
    &.CommentInlineEditView .wide.form td{
        padding: 0;
    }
}

.SocialItemInlineEditView{
    td{
        padding-bottom: 0;
    }
    .file-upload-box{
        margin-top: 7px;
    }
    .left-column {
        padding-bottom: 0;
    }
}

.mentions-input-box{
    margin-bottom: 10px;
}

.comment-text{
    .form-toolbar{
        text-align: right;
        border-top: none;
        a{
            margin-right: 0;
        }
    }
    .form-fields{
        td:first-child{
            padding: 0;
        }
    }
}

.comment .comment-content table{
    margin-bottom: 0;
}

.comment .comment-content .comment-text{
    h1, h2, h3, h4, h5, h6{
        color: @textColor;
        margin:0 !important;
        padding:0 !important;
        background: none !important;
        border:0 !important;
        outline:0 !important;
        text-indent: 0 !important;
        box-shadow: none !important;
    }
    h1{
        font-size: 15px !important;
    }
    h2{
        font-size: 14px !important;
    }
    h3{
        font-size: 14px !important;
    }
    ul, ol{
        display: block;
        margin-top: 0.25em;
        margin-bottom: 0.25em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 10px;
    }
    ul{
        list-style-type: disc;
    }
    ol{
        list-style-type: decimal;
    }
    li{
        color: @textColor;
        display: list-item;
    }
    table, th, td {
        border: 1px solid @textColor;
        border-collapse: collapse;
    }
    table.form-fields{
        border: 0;
        border-collapse: collapse;
        th, td{
            border: 0;
        }
    }
}

.comment-markdown-guide-link{
    margin: 0px 5px 0px 0px;
    text-align: right;
    .simple-link {
        margin-left: 0;
    }
}

.markdown-guide-modal{
    padding: 15px;
    line-height: 140%;
    > div{
        margin-top: 15px;
    }
    h4{
        margin-bottom: 5px;
    }
    ul{
        padding-left: 16px;
    }
    li{
        margin-bottom: 4px;
    }
}

.details-table .left-column .left-column{
    padding: 0;
}