.well-title {

	.picto {
		margin-right: 4px;
	}

	::after {
		clear: both;
	}
}

.status-value {

    > div {
        display: inline-block;
    }

    .picto {
        margin-right: 4px;
    }
}

.toggle {
	.well {
		background-color: @white;
		cursor: pointer;
	}

    .picto {
        display: none;
        font-size: 1.4em;
        line-height: 0.5em;
        margin-right: 4px;
    }

    .on .picto {
        display: inline;
    }

	&.BlockedView .on .well {
		background-color: @brick;
		color: @white;
	}

	&.ReadyView {
		.on .well {
			background-color: @lime;
			color: @white;
		}
	}
}

.detail-view {

	.header {
        font-family: @proxima-nova-semi-bold;
		font-size: 1.5em;
		line-height: 1.2em;
        margin-bottom: 10px;
        overflow: hidden;

		input {
			padding: 2px;
		}
	}
}

.WorkProductView > .display, .RequirementView > .display {
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;

    > .well {
        display: table;
        width: 100%;
        text-align: left;
        overflow: hidden;
    }
}

.DefectsView, .TasksView, .ChildrenView {
    cursor: pointer;
}

.display {
	.well {
		text-align: center;

		&.titled-well-sm {
			// height: 20px;
		}
	}

    .owner-field {
        cursor: pointer;

        .profile-image {
            width: 100%;
            height: 80px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain;
            font-size: 5.5em;
            text-align: center;
            display: inline-block;
        }
        .name {
            text-align: center;
            color: @darkGrey;
            font-family: @noto-sans-bold;
        }
    }

    .html-field {
        min-height: 150px;
        text-align: left;
        overflow: hidden;
    }

    &.discussion-field {

    	.icon {
	    	background-image: url(/img/discussion_icon_2x.png);
	        background-position: center center;
	        background-repeat: no-repeat;
	        background-size: contain;
	        color: @white;
	        width: 47px;
	        height: 40px;
	        line-height: 35px;
	        text-align: center;
	        font-weight: bold;
	        margin: auto;
	        cursor: pointer;
    	}
    }

    .work-product-id, .work-product-name {
    	cursor: pointer;
        display: table-cell;
        text-align: left;
    }

    .work-product-id {
        font-family: @noto-sans-bold;
        color: @cyan;
        display: table-cell;
        padding-right: 5px;
        width: 1px;
    }

	.arrows-left, .arrows-right {
		width: 15%;

		.well {
		    border-radius: 0;
		    text-align: center;
            color: @cyan;
            font-size: 2em;
            line-height: 1.5em;
            padding: 0;
            cursor: pointer;

            &.disabled {
                color: @lightGrey;
                cursor: default;
            }
		}
	}

	.arrows-left .well {
        border-radius: 0;
        border-left-radius: @border-radius-base;
        border-right: 0;
	}

	.arrows-right .well {
		border-right-radius: @border-radius-base;
        border-left: 0;
	}

	.arrows-left, .arrows-center, .arrows-right {
		float: left;
	}
	.arrows-right::after {
		clear: both;
	}

	.arrows-center, .arrows-right {
	    margin-left: 0;
	}

	.arrows-center {
		width: 70%;

		.well {
            padding: 0;
			line-height: 3em;
		    text-align: center;
		    border-radius: 0;
            cursor: pointer;
		}
	}
}

.edit {
	.Name {
		width: 95%;
	}
	.PlanEstimate {
		width: 85%;
	}
	.Description {
		width: 97%;
	}
	.Estimate {
		width: 92%;
	}
	.ToDo {
		width: 92%;
	}
	.Severity {
		width: 100%;
	}
	.Priority {
		width: 100%;
	}
}