html:root {
	--modal-poke-date: cornflowerblue;
	--modal-poke-text: #004d00;
}

.container-poke {
	display: flex!important;;
	flex-direction: column!important;;

	.container-servers {
		display: flex;
		flex-direction: column;
		justify-content: stretch;

		.server {
			display: flex;
			flex-direction: column;
			justify-content: stretch;

			.server-name {
				margin-top: 5px;

				flex-grow: 0;
				flex-shrink: 0;

				font-weight: bold;
				text-decoration: underline;
			}

			.poke-list {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				overflow-y: auto;
				overflow-x: auto;

				.entry {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;

					flex-shrink: 0;
					flex-grow: 0;

					> * {
						white-space: nowrap;
					}

					.date, .user, .text {
						margin-right: 5px;
					}

					.date {
						color: var(--modal-poke-date);
					}
					.text {
						color: var(--modal-poke-text);
					}
				}
			}
		}
	}

	.buttons {
		display: flex;
		flex-direction: row;
		justify-content: stretch;

		margin-top: 5px;
		flex-shrink: 0;
		flex-grow: 0;

		.spacer {
			flex-grow: 1;
			flex-shrink: 1;
		}

		.button-close {
			flex-grow: 0;
			flex-shrink: 0;

			margin-top: 5px;
			width: 150px;
			float: right;
		}
	}
}