/* Graph */

.user-graph-wrapper {
	border: 1px solid rgb(216, 220, 234);
	background-color: rgb(241, 243, 248);

	~ .user-sidebars-wrapper,
	~ .user-dashboard-page {
		margin-top: 50px;
	}
}

.user-graph-table-wrapper {
	&.ui.list {
		padding: 15px 35px;

		@include small-desktop {
			padding: 15px 0;
		}

		&.horizontal {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.value {
			font-size: 24px;
			color: rgb(32, 196, 151);
			font-weight: bold;
			line-height: 1.2;

			@include tablet {
				font-size: 20px;
			}
		}

		.label {
			font-size: 13px;
			color: rgb(137, 142, 180);
			font-weight: bold;
			text-transform: uppercase;
			line-height: 1.846;

			@include tablet {
				font-size: 12px;
			}
		}

		.item:not(:last-child) {
			@include mobile {
				border-bottom: 1px solid #ebebeb;
			}
		}
	}
}

.user-chart-wrapper {
	.graph-link {
		position: absolute;
		right: 10px;
		bottom: 0px;
		cursor: pointer;

		i {
			color: rgb(137, 142, 180);
			font-size: 18px;

			@include tablet {
				font-size: 16px;
			}
		}
	}
	.graph-options {
		float: left;
		margin-left: 0;
		margin-right: 10px;

		.ui.button {
			height: 42px;
		}
	}
}

.is-chat-active {
	&.is-sidebar-minimalist .user-chart-wrapper .graph-link {
		right: 60px;

		@include mobile {
			right: 0;
		}
	}
	&.is-chat-minimized .user-chart-wrapper .graph-link {
		right: 12px;

		@include mobile {
			right: 0;
		}
	}
	&.is-chat-maximized .user-chart-wrapper .graph-link {
		@include desktop-only {
			right: 122px;
		}
	}
}

.graph-button {
	float: left;

	label {
		width: auto;
		border-radius: 0;
		border: 1px solid #dddedf;
		min-width: 48px;
		text-align: center;
	}

	input.radio:empty {
		display: none;
	}

	input.radio:empty ~ label {
		position: relative;
		float: left;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		padding: 0 10px;
		line-height: 34px;
	}

	input.radio:hover:not(:checked) ~ label {
		color: #88898a;
	}

	input.radio:checked ~ label {
		color: #000;
		background-color: #F3F3F3;
		border-color: #dddedf;
		box-shadow: inset 0 1px 5px rgba(0, 0, 0, .2);
	}
}

#chart_div * {
	font-family: "Lato", sans-serif;
}