.eac-notes {
	list-style: none;
	padding: 2px 0 0;
	margin: 0;
	max-height: 400px;
	overflow-y: auto;


	li {
		margin-bottom: 10px;

		.note__content {
			padding: 10px;
			background: #efefef;
			position: relative;

			&::after{
				content: "";
				display: block;
				position: absolute;
				bottom: -10px;
				left: 20px;
				width: 0;
				height: 0;
				border-width: 10px 10px 0 0;
				border-style: solid;
				border-color: #efefef transparent;
			}

			p {
				margin: 0;
				padding: 0;
				word-wrap: break-word;
			}
		}

		.note__meta {
			padding: 10px;
			color: #999;
			margin: 0;
			font-size: 11px;
		}

		a.note__delete {
			margin-left: 5px;
			color: #a00;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	.pagination {
		margin-top: 20px;

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			align-items: center;
			justify-content: center;

			li {
				margin: 0;
				padding: 0;
				margin-right: 5px;
				display: inline-block;

				&:last-child {
					margin-right: 0;
				}

				a {
					display: block;
					padding: 5px 10px;
					border: 1px solid #ccc;
					border-radius: 4px;
					color: #333;
					text-decoration: none;
					transition: all 0.3s ease-in-out;

					&:hover {
						background: #f5f5f5;
					}
				}

				&.active {
					a {
						background: #f5f5f5;
					}
				}
			}
		}
	}


	// if this appears after button.
	button + & {
		margin-top: 20px;
	}
}