#temp {
	margin-left: -@main-gutter;
	margin-right: -@main-gutter;
	overflow: hidden;

	position: absolute;
	left: -99999px;
	top: -99999px;
	display: block;
	max-width: 100vw;

	&.active {
		position: relative;
		left: auto;
		top: auto;
	}

	> div:first-child {
		.box-sizing(border-box);
		overflow: hidden;

		width: 100%;
		height: 60vh;
		max-height: none;
		min-height: 200px;

		padding: 0 @main-gutter;
		margin: 0 0 @main-gutter;

		#temperature-graph {
			.box-sizing(border-box);
			position: relative;

			background-position: center 37%;
			background-repeat: no-repeat;
			background-size: auto 80%;

			width: 100%;
			height: 100%;
			margin: 0;

			.tickLabel, .legendLabel {
				color: contrast(@main-background);
			}

			table {
				width: auto;

				tr {
					background: transparent !important;

					&:hover {
						background: transparent !important;

						td {
							background: transparent !important;
						}
					}

					td {
						background: transparent !important;
						color: contrast(@main-color);
						border: 0 none;

						&.legendLabel {
							padding: 0 15px 0 5px;
						}
					}
				}
			}
		}
	}


	> div:last-child {
		.box-sizing(border-box);

		table {
			margin: 0 !important;
			width: 100%;

			tr {
				&:first-child {
					th {
						.rem(font-size, 18);

						&:first-child {
							width: 10% !important;
						}
						&:nth-child(3) {
							width: auto !important;
						}
						@media (max-width: 730px) {
							&:last-child {
								width: 38vw !important;
								.box-sizing();
							}
						}
					}
				}

				th, td {
					.rem(font-size, 16);
					padding: 12px;

					&:nth-child(1) {
						text-align: right;
						padding-left: 0;
					}

					&:nth-child(2) {
						text-align: center !important;
					}

					/*&:nth-child(3) {
						padding-right: 30px;
					}*/

					.dropdown-menu {
						margin: 2px 0 9px;
						bottom: 100%;
						top: auto;
						left: auto;
						right: 0;

						&:before {
							border: 10px solid transparent;
							border-top-color: @main-color;
							border-bottom-color: transparent !important;
							position: absolute;
							top: auto;
							bottom: -18px;
							right: 9px;
						}
					}

					&.temperature_offset {
						.form-inline {
							.input-append {
								.flex-wrap(wrap);
								max-width: 100%;
							}
						}
					}

					.form-inline,
					.input-append {
						.box-sizing(border-box);

						.flex-display(flex);
						.flex-direction(row);
						.flex-wrap(wrap);
						.justify-content(flex-start);
						.align-content(stretch);
						.align-items(flex-start);

						> * {
							.flex-order(0);
							.flex(0 1 auto);
							.align-self(auto);
							margin-top: 2px;
							margin-bottom: 2px;
						}

						> .input-append {
							.flex(1 1 0%);
							.flex-wrap();
							padding-right: 10px;
							margin-bottom: 0;
							margin-top: 0;
						}

						input, .input-mini {
							.flex-order(0);
							.flex(1 1 14px);
							.align-self(auto);

							margin-right: 0px;
							padding: 7px 0 7px 15px;
							.border-radius(0);
							text-align: left;

							width: 0% !important;
							max-width: none !important;
							min-width: 0px;
						}
						.btn-group,
						> button {
							.border-radius(0);

							.fa, .icon {
								pointer-events: none;
							}
						}
						.add-on {
							padding: 7px;
							margin-right: 1px;
							.rem(font-size, 14);
							.rem(line-height, 20);
							height: auto;

							@media (max-width: 474px) {
								display: none;
							}
						}
						button {
							padding: 7px 15px;
							.border-radius(0);

							.caret {
								width: 11px;

								&:after {
									content: @fa-legacy-var-caret-down;
									.font-icon-reset();
									.rem(font-size, 18);
									top: -7px;
									position: relative;
								}
							}
						}
					}
				}
			}
		}

		@media (max-width: 730px) {
			width: 138vw !important;
			margin: 0 0 @main-gutter 0 !important;
			transition: left 0.5s ease;
			cursor: w-resize;
			position: relative;
			left: 0;

			&.open {
				left: -38vw !important;
			}
		}
	}

	#temperature-table {
		@media (max-width: 490px) {
			td,
			th {
				.rem(font-size, 14) !important;
			}
		}

		td {
			.btn {
				border-left: 1px solid @table-row-background;
			}
		}

		th.temperature_target {
			 .btn-group {
				float: none !important;
				margin-top: -5px;

				.caret:after {
					content: @fa-legacy-var-caret-down;
					.font-icon-reset();
					font-size: 1.125rem;
					top: -7px;
					left: -6px;
					position: relative;
				}
			}
		}

		th.temperature_target,
		th.temperature_offset {
			text-align: left;
		}
	}
}
