@import "../../../css/colors.less";

.uiHelp {
	display: none;
	z-index: 2;
	height: 500px;
	width: 818px;
	border: 5px solid @blackB;
	text-align: center;

	> .heading {
		color: @blueA;
		width: 100%;
		height: 36px;
		background-color: @blackB;
		position: relative;

		.heading-text {
			padding-top: 8px;
			margin: auto;
		}
	}

	.content {
		overflow-y: scroll;
		background-color: @blackA;
		width: 100%;
		height: calc(100% - 36px);
		text-align: center;

		.row {
			color: darken(@white, 25%);
			padding: 16px;

			&.mobile {
				display: none;
			}

			.topic {
				color: @white;
			}
		}
	}
}

.mobile .uiHelp {
	height: 80vh;

	.row {
		display: none;

		&.mobile {
			display: block;
		}
	}
}
