.panes {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-self: stretch;

	.pane-section,
	tbody {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		align-self: stretch;
		margin: 1px 1px 28px 1px;
		background: $layoutBackground;
		border-radius: $baseRadius;
		border: 4px solid rgba($gscaleF, .05);

		&:hover {
			border-color: rgba($seaBlue, .05);

			tr.title-item {
				border-color: rgba($seaBlue, .05);
			}
		}

		.pane-item,
		tr {
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			align-self: stretch;
			padding: 8px 18px;
			background: $gscale2;

			&:nth-child(odd) {
				background-color: $gscale1;

				td.description {
					color: rgba($gscaleF, .7);
				}
			}

			&:nth-child(even) {
				background-color: $gscale14;
			}

			.pane-cell,
			td {
				color: $gscale8;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				flex: 1;
				font-size: 14px;

				&.vertical {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
				}

				&.description {
					align-self: stretch;
				}

				&.value {
					flex: 0;
					margin-left: 20px;
					word-break: break-all;
					flex-basis: auto;

					i.icon-legend {
						font-size: 10px;
						margin-right: 10px;
					}

					i.icon-value {
						padding: 2px 2px 1px 2px;
						border-radius: 2px;
						width: 16px;
						text-align: center;
					}
				}
			}

			&.title-item {
				border-bottom: 1px solid $gscale2;

				td {
					color: rgba($seaBlue, .9);
					font-size: 16px;
					font-weight: bold;

					i {
						margin-right: 10px;
					}

					.more {
						flex: 1;
						text-align: right;
						font-size: 12px;
						color: $gscale8;
						font-weight: normal;
						font-style: italic;
					}
				}
			}

			&.variable-item {
				cursor: pointer;

				&:hover {
					background-color: rgba($seaBlue, .05);

					td {
						font-weight: bold;
						color: $gscaleF;

						i.icon-legend {
							color: $gscaleF;
						}

						span,
						i.icon-value {
							background-color: rgba($gscaleF, .3);
							color: $gscaleF;
						}

						&.description {
							color: $seaBlue;
						}
					}
				}
			}
		}
	}
}