#panels-settings-page {

	margin: 0 0 0 -20px;

	.settings-banner {
		display: block;
		padding: 15px 30px 5px 30px;
		background: #f6f6f6;
		position: relative;

		.icon {
			float: left;
			display: inline-block;
			width: 50px;
			height: 50px;
			position: relative;
			margin: 17px 28px 0 0;

			img {
				width: 100%;
				height: auto;
				position: absolute;
				top: 0;
				left: 0;
				display: none;

				&.layer-1 {
					top: 0;
					opacity: 1;
				}

				&.layer-2 {
					top: 10px;
					opacity: 0.5;
				}

				&.layer-3 {
					top: 20px;
					opacity: 0.2;
				}
			}
		}

		h1 {
			font: 300 2.3em/1.4em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
			color: #666;
			/* text-shadow: 0 1px 1px rgba(0,0,0,0.2); */
		}


		#panels-settings-search {
			position: absolute;
			bottom: -35px;
			right: 19px;

			input{
				box-sizing: border-box;
				width: 200px;
			}

			.results {
				display: none;

				box-sizing: border-box;
				position: absolute;
				top: 100%;
				left: 1px;
				width: 200px;
				background: #ffffff;
				border: 1px solid #e0e0e0;
				padding: 0;
				margin: -2px 0 0 0;

				-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.075);
				-moz-box-shadow:  0 1px 1px rgba(0,0,0,0.075);
				box-shadow:  0 1px 1px rgba(0,0,0,0.075);

				li {
					margin: 0;
					padding: 5px;
					font-size: 0.95em;
					font-weight: bold;
					color: #777;
					cursor: pointer;

					&:hover {
						background: #f7f7f7;
					}
				}
			}
		}

	}

	.settings-nav {
		background: #f6f6f6;
		border-bottom: 1px solid #d6d6d6;
		padding: 5px 0 0 30px;
		margin: 0;
		font-size: 0;

		li{
			display: inline-block;
			margin: 0 0 -1px 0;
			background: #f6f6f6;
			line-height: 1em;
			font-size: 12px;
			position: relative;

			border: 1px solid #d6d6d6;
			border-width: 1px 0 1px 1px;

			transition: all 0.2s;

			&:last-child {
				border-right-width: 1px;
			}

			a {
				display: block;
				text-decoration: none;
				color: #555;
				padding: 12px 25px;
				font-weight: bold;
				box-shadow: none !important;

			}

			&:hover {
				background: #f3f3f3;
			}

			&.active {
				background: #f0f0f0;
				border-bottom-color: #f0f0f0;
			}
		}

	}

	#setting-error-settings_updated {
		margin: 20px 30px 10px 30px;
	}
	
	.settings-panel {
		min-height: 300px;
	}

	#panels-settings-sections {

		.panels-settings-section {
			display: none;
			padding: 0 30px 0 20px;

			.description {
				font-style: italic;
				color: #999;
				margin-top: 5px;
				display: block;
			}
			
			label {
				display: block;
			}

			tr {

				th{
					padding-top: 0;
					padding-bottom: 0;

					label {
						border-left: 0 solid #0073aa;
						padding: 20px 0 20px 10px;
					}
				}


				td {

					label {
						-webkit-touch-callout: none;
						-webkit-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						user-select: none;
					}
				}
			}
		}

	}

	.submit {
		margin-top: 30px;
		padding: 0 30px;
	}

}

body.settings_page_siteorigin_panels {
	#contextual-help-link-wrap {
		z-index: 10;
	}
}