@import "variables";
.cp-emp-activity {
	.cpea-form {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		margin-left: -12px;
		margin-right: -12px;
		.form-group {
			padding: 4px 12px;
			.form-label {
				font-size: 12px;
				font-weight: bold;
			}
		}
	}
	.cpea-timeline {
		position: relative;
		overflow: hidden;
		overflow-x: auto;
		font-size: 12px;
		.cpea-timeline__line {
			display: flex;
		}
		.cpea-timeline__drop {
			background: #fff7e0;
			position: relative;
			padding: 8px;
			ul {
				background: #fff;
				max-width: 480px;
				margin: 0 auto;
				padding: 0;
				list-style: none;
				@include box-shadow(0 0 4px rgba(0,0,0,.15));
				& > li {
					display: flex;
					.date {
						width: 72px;
						min-width: 72px;
						padding: 8px;
					}
					.link {
						flex-grow: 1;
						padding: 8px;
						a {
							border-bottom-color: transparent;
							&:hover {
								border-bottom-color: $color_primary;
							}
						}
					}
					&:not(:first-child){
						border-top: 1px solid rgba(0,0,0,.1);
					}
					&:hover {
						background: $color_water;
					}
				}
			}
		}

		.cpea-timeline-date {
			border-right: 1px solid #d2d2d2;
			width: 80px;
			min-width: 80px;
			padding: 4px 8px;
			line-height: 1.25;
		}
		.cpea-timeline-hour {
			border-right: 1px solid #d2d2d2;
			position: relative;
			width: 60px;
			min-width: 60px;
			&:hover, &.hovered {
				background: #d5e6f6;
				cursor: pointer;
			}
		}
		.cpea-timeline-range {
			background: #2db92d;
			position: absolute; top: 0; bottom: 0; left: 0;
			min-width: 1px;
		}

		.cpea-timeline__separate {
			background: #e9e9e9;
			display: none;
		}
		.cpea-timeline__head {
			.cpea-timeline__line {
				background: #e9e9e9;
			}
			.cpea-timeline-hour {
				padding: 4px 8px;
			}
		}
		.cpea-timeline__body {
			.cpea-timeline__line {
				background: #f6faff;
				&:not(:first-child){
					margin-top: 12px;
				}
				/*&:hover {
					.cpea-timeline-date {
						background: #d5e6f6;
					}
				}*/
			}
		}

		&.fix {
			.cpea-timeline__separate {
				display: block;
			}
			.cpea-timeline__head {
				position: absolute; top: 0; left: 0; right: 0;
				z-index: 999;
			}
		}
	}

	.cpea-raiting {
		font-size: 12px;
		.cpea-raiting__head {
			margin-bottom: 8px;
			font-size: 16px;
			font-weight: bold;
		}
		.cpea-raiting__body {
			table {
				width: 100%;
				tr {
					th, td {
						padding: 4px 8px;
						&:not(:first-child) {
							border-left: 1px solid #e1e1e1;
						}
					}
					&:not(:first-child) {
						th, td {
							border-top: 1px solid #e1e1e1;
						}
					}
				}
				thead {
					tr {
						th, td {
							background: #e9e9e9;
							font-weight: bold;
						}
					}
				}
			}
			a {
				border-bottom-color: transparent;
				&:hover {
					border-bottom-color: $color_primary;
				}
			}
		}
	}
}