// --------------------------------------------------------------------------
// SHOP ONLINE / OFFLINE PAGE
// --------------------------------------------------------------------------

#shop-offline {

	// VARIABLES
	// =========
	$spacer: 24px;

	// RESETS
	// ======
	input, select {
		width: initial;
		min-width: initial;
		max-width: initial;
		margin: 0;
		outline: none;
	}

	table, thead, tbody, th, tr, td {
		border: 0;
		padding: 0;
		margin: 0;
		border-spacing: 0;
		border-collapse: collapse;
		background-image: none;
	}


	// HELPERS
	// =======
	.add-margin {
		display: inline-block;

		&.all {
			margin: $spacer;

			&.double {
				margin: $spacer * 2;
			}

		}

		&.left {
			margin-left: $spacer;

			&.double {
				margin-left: $spacer * 2;
			}
		}

		&.top {
			margin-top: $spacer;

			&.double {
				margin-top: $spacer * 2;
			}
		}

		&.right {
			margin-right: $spacer;

			&.double {
				margin-right: $spacer * 2;
			}

			&.quarter {
				margin-right: $spacer / 4;
			}
		}

		&.bottom {
			margin-bottom: $spacer;

			&.double {
				margin-bottom: $spacer * 2;
			}
		}

	}

	.add-padding {

		&.all {
			padding: $spacer;

			&.double {
				padding: $spacer * 2;
			}
		}

	}

	// TABS
	// ====
	.ui-tabs {
		padding: 0;
		margin: 0;
		position: initial;

		.tab-headline-wrapper {
			overflow: auto;
			position: relative;

			a {
				display: inline-block;
				float: left;
				padding: 6px 15px 6px;
				margin-right: 6px;
				background: $highlight-color;
				border: none;
				cursor: pointer;
				color: $text-color-light;
				text-decoration: none;
				@include font(12px);
				@include border-top-radius(2px);

				&.active {
					background: $primary-color;
					color: $text-color-inverse;
				}

			}

			.languages {
				position: relative;

				a {
					opacity: 0.5;
					background: transparent;
					display: inline-block;
					float: none;
					padding: 0;
					margin: 0;

					&.active {
						img {
							background-color: transparent;
							border: 0;
						}

						opacity: 1;
					}

					img {
						background-color: transparent;
						border: 0;
					}

				}

			}

		}

		.tab-content-wrapper {
			padding: $spacer;
			border: 1px solid $border-color-light;
			background: $background-color;
		}

	}


	.timer-table {

		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
		// border          : 1px solid $text-color-light;
		border-radius: 0;
		color: $text-color-light;
		font-size: 12px;

		input:disabled {
			border: 0;
			opacity: 1;
		}

		thead {

			th {
				background: $gambio-blue;
				color: white;
				text-decoration: none;
				text-transform: none;
				font-size: 12px;
				height: 24px;

				&:first-child {
					border-radius: 0;
				}

			}

		}

		th, td {
			text-align: left;
			padding-left: 6px;
		}

		.dataTableHeadingContent {
			border: 0;
		}

		.datepicker_wrapper,
		.timepicker_wrapper {
			color: $text-color-light;
			display: inline-block;
			margin-top: 0;

			button.ui-datepicker-trigger {
				display: none;
			}
		}

		tr {

			i.editmode {
				display: none;
			}


			&.edit {
				i.editmode {
					display: inline;
				}

				i.defaultmode {
					display: none;
				}
			}
		}

		.icon {
			float: left;
			color: $text-color-light;
			font-size: 24px;

			:hover {
				color: $gambio-blue;
			}
		}

	}

	div.icon-position-fix {
		display: inline-block;
		margin-left: 24px;
	}

	.button-position-fix {
		margin: 6px 0 4px 0;
	}

	span.table_inlineedit_alt, span.time {
		font-size: 12px;
		color: $text-color-light;
	}

}