//
// Modals/dialog
// --------------------------------------------------
// /components/com_easysocial/themes/wireframe/dialog/default.ejs

// Has es-wrap as id
&.es-dialog { //modal
	font-family: @baseFontFamily;
	font-size: 12px;
	line-height: 16px;
	color: @esDialogColor;
	font-size-adjust: none;
	border: none;
	overflow: hidden;
	.box-shadow(~"0 5px 10px -5px rgba(0,0,0,1)");
	.border-radius(6px);
	z-index: 10010;
	bottom: auto;
	right: auto;

	&.modal{
		// Fix conflicts with Joomla 3.1
		border: 0 !important;
	}
	/// Reports
	// @import "reports";
	.dialog-wrap {
		/* this is so when resize from big to small, contents don't overflow */
		overflow:hidden;
		min-height:100%;
		height:100%;

		/* this is so that resizing from small to big, dialog don't show transparent background */
		background:@esModalBackground;
		.border-radius(6px);
	}

	// Background
	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: @zindexModalBackdrop;
		background-color: @black;
		// Fade for backdrop
		&.fade { opacity: 0; }
	}

	.modal-backdrop,
	.modal-backdrop.fade.in {
		.opacity(80);
	}
	.modal-header {
		padding: 6px 8px;
		border: 1px solid @esModalBorder;
		border-bottom: none;
		min-height: 34px;
		#gradient > .vertical(@esModalHeaderBackgroundHighlight,@esModalHeaderBackground);
		.border-radius(6px 6px 0 0);

		// Close icon
		.close {
			margin-top: 0px !important;
			font-size: 18px !important;
			height: 16px !important;
			color: @esDialogTitleColor;			
		}
		// Heading
		.dialog-title {
			margin: 0 !important;
			font-size: 12px !important;
			line-height: 20px !important;
			text-align: center;
			color: @esDialogTitleColor;
			background: none;
			display: block;
			font-weight: bold;
		}
	}

	// Body (where all modal content resides)
	.modal-body {
		padding: 15px;
		border: 1px solid @esModalBorder;
		text-align: left;
		position: relative;
		background: @esModalBackground;
		label,
		label > span,
		div,
		p {
			font-size: 11px;
		}

		.footnote{
			margin-top: 50px;
		}

		textarea,
		input{
			font-size: 11px;
			background: @esModalBackground;
			color: @esModalColor;
		}
		&.type-iframe {
			padding: 0;
			overflow: hidden !important;
		}

		.modal-disclaimer{
			margin-top: 65px;
		}
	}
	// Remove bottom margin if need be
	.modal-form {
		margin-bottom: 0;
	}

	// Footer (for actions)
	.modal-footer {
		padding: 10px 15px 11px;
		margin-bottom: 0;
		text-align: right; // right align buttons
		background-color: @esModalFooterBackground;
		border: 1px solid @esModalBorder;
		border-top: none;
		.border-radius(0 0 6px 6px);
		.box-shadow(inset 0 1px 0 @esModalBackground);
		.clearfix(); // clear it in case folks use .pull-* classes on buttons
		
		// issue #1575 #1622
		.btn {
			height: 26px;
			line-height: 16px;	
			float: none;
		}
		// Properly space out buttons
		.btn + .btn {
			margin-left: 5px;
			margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
		}
		// but override that for button groups
		.btn-group .btn + .btn {
			margin-left: -1px;
		}
		// and override it for block buttons as well
		.btn-block + .btn-block {
			margin-left: 0;
		}
	}

	//Login dialog
	&.modal-login {
		width: 780px !important;
		max-width: 780px !important;
		.modal-body {
			max-height: 440px !important;
			padding: 0 10px;
		}
		.es-login-box {
			border: none;
		}
	}//modal-login


	legend {
		margin-bottom: 12px;
	}
	hr {
		margin: 10px 0;
	}
	// //grid
	// .row-fluid {
	// 	width: 100%;
	// 	*zoom: 1;
	// }
	// .row-fluid:before,
	// .row-fluid:after {
	// 	display: table;
	// 	content: "";
	// 	line-height: 0;
	// }
	// .row-fluid:after {
	// 	clear: both;
	// }
	// .row-fluid [class*="span"] {
	// 	display: block;
	// 	width: 100%;
	// 	min-height: 30px;
	// 	-webkit-box-sizing: border-box;
	// 	-moz-box-sizing: border-box;
	// 	box-sizing: border-box;
	// 	float: left;
	// 	margin-left: 2.1276595744681%;
	// 	*margin-left: 2.0744680851064%;
	// }
	// .row-fluid [class*="span"]:first-child {
	// 	margin-left: 0;
	// }
	// .row-fluid .span6 {
	// 	width: 48.936170212766%;
	// 	*width: 48.882978723404%;
	// }

	.modal-padding {
		padding: 0 20px;
	}

	.dialog-loader {
		position: absolute;
	}

	.loader-img {
		background: url('@{media_uri}/../images/loading.gif') no-repeat center;
		width:32px;
		height:32px;
		position:absolute;
		top:50%;
		left:50%;
		margin:-16px 0 0 -16px;
	}

	//comments
	.es-comment {
		list-style: none;
	}
	.es-comment-actions {
		display: none;
	}

	// port backend styling to dialog
	.es-controls-row {
		// border-top: 1px solid white;
		.clearfix();
		padding: 16px 16px;
		position: relative;
		strong {
			word-wrap: break-word;
		}
		&.line {
			border-bottom: 1px solid #ddd;
		}
		[class*="span"] {
			position: relative;
		}
		[class*="span"] > label {
			float: left;
			display: block;
			padding-top: 1px;
			line-height: 20px;
		}
		.form-row-label {
			label {
				float: none;
				text-align: left;
				&::after {
					content: " :";
				}
			}
		}
		.small {
			position: relative;
			top: 5px;
			color: @esModalColor;
		}
		.icon-es-help {
			position: absolute;
			right: 0;
			top: 2px;
		}
		input[type="text"],
		select,
		textarea {
			// width: auto;
			&.input-full {
				width: 96%;
			}
			&.input-medium {
				width: 50%;
			}
			&.input-large {
				width: 65%;
			}
			&.input-xlarge {
				width: 75%;
			}
			&.input-xxlarge {
				width: 85%;
			}
		}
		.full-width,.markItUpEditor {
			width:100%;
		}
		.calendar {
			float: left;
			margin-right: 4px;
		}
		.user-badges {
			li {
				margin-bottom:10px;
			}
		}
		input.span5 {
			width:100%;
		}
	}//es-form-row
	
	// override .es-avatar-list for dialog
	.es-avatar-list {
		> li .es-avatar {
			img {
				width: 38px;
				height: 38px;
				border: none;
			}
		}
	}

	.dialog-footer {
		position: relative;
		background: @esModalFooterBackground !important;
		margin-top: 0;
		
		.dialog-loading {
			display: none;
			position: absolute;
			top: 10px;
			left: 15px;
			height: 26px;
			line-height: 26px;
			padding-left: 28px;
			background: url('@{media_uri}/../images/loading.gif') no-repeat left center;
		}
	}

	&.loading {
		.dialog-loading {
			display: block;
		}
	}

}//dialog