@import "../../../Base/Content/sass/bootstrap/variables";
@import "../../../Base/Content/sass/compass";

@import "../../Branding/Content/Partials/Variables";

.bootstrap-wrapper {
	&.wt-webpart-projectspace-roles {
		.control-label {
			margin-top: 0;
			font-size: $wizdom-webpart-h3-size;
		}

		.roles-alignment {
			display: inline-flex;
			vertical-align: top;
			width: 100px;

			.position {
				text-align: center;

				.ms-spimn-presenceLink {
					display: inline;
				}
			}

			.imgColumn {
				text-align: center;
				display: inline-block;
			}

			.name,
			.properties {
				font-size: $wizdom-x-small-text;
				word-break: break-word;
			}
		}
	}

	&.wt-webpart-projectspace-overview {
		.image-picker-presentation {
			max-height: 70px;
			max-width: 70px;
		}

		.overviewDataLoading {
			opacity: 0.5;
		}

		.overviewNoItemsFound {
			padding-left: 2px;
			padding-bottom: 5px;
		}

		.overviewNoItemsFound a {
			cursor: pointer;
		}
	}

	&.wt-webpart-projectspace-metadata {
		.image-picker-presentation {
			max-height: 70px;
			max-width: 70px;
		}
	}

	&.wt-webpart-projectspace {

		.projectspace-details {
			padding: 6px 18px 6px 18px;

			.projectspace-details-label {
				font-weight: bold;
			}
		}

		.w365-searchLink {
			height: 32px;
			width: 32px;
			float: right;
			display: inline-block;
			vertical-align: top;
			background-color: transparent;
			border: 1px solid transparent;
			position: relative;
			overflow: hidden;
		}

		.w365-searchImg {
			left: -53px;
			top: -1px;
			position: absolute;
		}

		.peopleInput .input-group-addon {
			padding-top: 0;
			padding-bottom: 0;
			padding-left: 5px;
			padding-right: 6px;

			.glyphicon {
				font-size: 18px;
				margin-top: 6px;
			}
		}

		.filterSearch.container-fluid {
			padding-left: 0;
			padding-right: 0;
			padding-top: 10px;
			padding-bottom: 10px;
		}

		.filterSearch {
			.col-sm-4, col-sm-6, col-sm-2 {
				padding-left: 0;
			}

			.row {
				margin-bottom: 10px;
			}

			.row:last-child {
				margin-bottom: 0;
			}
		}
	}


	.wizdom-user {
		display: table;
		table-layout: fixed;
		width: 100%;
		padding-bottom: 10px;

		.imgColumn {
			display: table-cell;
			text-align: center;
			width: $wizdom-avatar-small-dims;

			.avatar-frame {
				border: 0;
				width: $wizdom-avatar-small-dims;
				height: $wizdom-avatar-small-dims;

				img {
					@include border-radius($wizdom-avatar-small-radius);
					width: $wizdom-avatar-small-dims;
					height: $wizdom-avatar-small-dims;
				}
			}
		}

		.textColumn {
			display: table-cell;
			-ms-word-wrap: break-word;
			word-wrap: break-word;
			padding-left: 20px;
			vertical-align: middle;

			h4 {
				margin: 0;
			}

			.email {
				font-style: italic;
			}
		}
	}
}


.projectspace {
	.list-group-item:hover {
		background-color: #f5f5f5;
	}

	a {
		text-decoration: none;
	}

	.create-project-type {
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 10px;

		i {
			margin-left: 5px;
		}
	}

	.principal-picker .list-group {
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.tiles {
		margin-top: 0 !important;
	}

	.input-group {
		/*margin-bottom:20px;*/
	}

	.panel-body {
		position: relative;
	}
}

.ProjectSpace {
	.dateTimePicker {
		.input-group {
			margin-bottom: 0;
		}
	}

	.input-group {
		/*margin-bottom:20px;*/
	}
}

.ProjectSpace.newSiteDialog {
    .siteTypeContainer {
        margin: -24px;

        table {
            border-spacing: 24px;
            border-collapse:separate;
            width:100%;
        }
    }

    .sitetype {
        padding: 0;
        vertical-align: top;
        border: solid 1px #eaeaea;
        width: 220px;
        position: relative;
        cursor: pointer;

        .img {
            background-size: cover;
            height: 100px;
            width: 100%;
            background-color: #c7e0f4;
        }

        .name {
            font-size: 16px;
            padding: 6px 24px;
            background-color: #0078d7;
            color: white;
        }

        .description {
            font-size: 12px;
            padding: 24px;

            > p {
                margin: 0;
            }
        }

        &.notReady {
            .img, .name, .description {
                opacity: 0.4;
            }

            cursor: unset;
        }
    }
}