.user-widget {
    .user-widget-layout {
        .user-widget-name {
            font-weight: bold;
            margin-bottom: 2em;
        }
    }
}

.widget-wizard {

	.nav-pills-boder {
		li:first-child a {
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 0;
		}
		li a {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
	}

	.sr-widget{
		.nav-pills {
			@extend .nav-pills-boder;
		}
	}

	.sr-exclude-text-area {
		width: 100%;
		height: 70px;
	}

	.perma-links-no-border {
		.form-group {
			margin-bottom: 5px;
		}
	}

	.perma-link-boder-left {
		border-left: 2px solid lightgray;
	}

	.border-top-twenty {
		margin-top: 20px;
	}

	.metaDataTypeSelection {
		padding-top: 23px;

	}


	.metadata-text {
		.check {
			margin: 0;
			label {
				font-size: 11px;
			}
		}

		.max-char {
			margin: 0;
			label {
				font-size: 11px;
				font-weight: normal;
				display: inline-block;
				padding-right: 5px;
				margin:0;
			}

			input {
				display: inline-block;
				width: 25%;
				margin: 0;
				padding-right: 5px;
			}
		}
	}

	.widget-display-options {
		margin-top: 15px;
		padding: 0;
	}

	.layout-group-container {
		margin: 5px 0;
		padding: 0;
	}

	@mixin widget-display-optios($width,$height) {
		.form-group {
			display: block;
			position: relative;
			height: $height;
		}

		label {
			float: left;
		}
		select {
			width: $width;
			margin-bottom: 0;
			margin-right: 15%;
			float: right;
		}
	}

	.pagination-options{
		@include widget-display-optios(50%, 20px)
	}

	.slide-options {
		@include widget-display-optios(37%, 20px)
	}

	.setterComponent {
		label {
			display: inline-block;
		  	margin: 0;
		  	padding: 0;
		}

		input[type="text"] {
			display: inline-block;
			width: 25%;
			float: right;
			margin: 0;
			padding: 0;
		}

		select {
			display: inline-block;
			width: 50%;
			float: right;
			margin: 0;
			padding: 0;
		}
	}

	.modal.color-picker-modal {
		z-index: 2000 !important;
	  	display: none;
	}

	.dialer-content {
		.modal_color_box_color .yui3-slider {
			width: 218px;
			height: 25px;
			border-radius: 0 !important;
			background: url(/o/OPPortalEE/images/color-gradient.png) 6px 0px no-repeat;
			background-size: 186px 100px;

			.yui3-slider-rail {
				background: none;
				height: 9px;
			}
			.yui3-slider-rail-cap-right,
			.yui3-slider-rail-cap-left {
				display: none;
			}
		}

		.yui3-dial-center-button {
			font-size: 85%;
			text-decoration: underline;
			width: 40px!important;
			height: 40px!important;
			left: 30px!important;
			top: 30px!important;
			border-radius: 20px!important;
		}




	}

	.colorPicker-preview {
		height: 30px;
	  	margin-bottom: 30px;
	}


	.color-picker-input {
		border-radius: 4px 0 0 4px !important;
		padding: 0;
	}

	.info-message {
		margin-bottom: 3%;
		padding: 3px;
		padding-left: 6px;
		border-radius: 2px;
		display: inline;
		font-size: 12px;
	}

	.glyphicon-asterisk {
		font-size: 10px;
	}


	.widget-display-statistics {
		padding: 0;
		>div { padding: 0; }
		table {
			width: 100%;
			thead {
				tr {
					th {
						background-image: none;
						background-color: #CCCCCC;
						border-color: #fff;
						text-shadow: none;
					}
				}
			}

			tfoot {
				tr {
					td {
						> div {
							background-image: none;
							background-color: #CCCCCC;
							border-color: #fff;
							text-shadow: none;

							>div {
								button[disabled=disabled], button:disabled {
									color: #EEEEEE;
								}

								button:hover,
								button:active {
									box-shadow: none;
									background: #ddd;
								}
							}

							> form {
								width: 15%;
								>label {
									margin: 0;
									>input {
										margin: 0;
										margin-right: 3.2%;
									}

									> button {
										color: #fff;
									}
								}
							}

							>div.yui3-datatable-paginator-per-page {
								width: 20%;
								>label {
									margin: 0;
									> select {
										margin: 0;
										width: 70%;
									}
								}
							}
						}


					}
				}
			}
		}
	}

	.modal{
		 &.yui3-widget-modal{
			 z-index: 1000!important;
		 }
	}

}

.aui{
	.op-portal-theme {
		.color-picker-button.btn {
			height: 20px;
			width: 20px;
			margin: 3px 0;
			border-radius: 0 4px 4px 0;
			background-image: none;
			border-width: 4px;
			padding: 0;
		}
	}

	.input-combo {
		.metadata-enabled,
		.metadata-available {
			height: 125px;
		}
	}

	#PORTAL2012_DIALOG {
		TEXTAREA {
			width: 100%;
			height: 190px;
		}
	}
}



@media  all and (max-width: 767px){
	.widget-wizard {
		.nav-pills > .main {
			display: block;
			float: none;
		}

		.perma-links-no-border { border: none;}

		.move-button {
			width: 100%;
			padding-top: 0%;
			padding-bottom: 4%;

			.glyphicon-chevron-right {
				width: 49%;
				float: right;
			}

			.glyphicon-chevron-left {
				width: 49%;
				float: left;
			}
		}

		#basicAppearance {
			#basicAppearanceLeft {
				float: none!important;
				.setterComponent {
					width: 95%;
					display: inline-block;
					input {
						height: 20px;
					}


				}

				button {
					display: inline-block;
					margin-top: 0;
				}
			}

			#basicAppearanceRight {
				float: none!important;
				border-top: 1px solid lightgray;
				.setterComponent {
					width: 95%;
					display: inline-block;
					input {
						height: 20px;
					}


				}

				button {
					display: inline-block;
					margin-top: 0;
				}
			}
		}
	}
}