/* Modals
// -------------------------*/

/* Modalcolumn is used for menu panels */
.umb-modalcolumn {
	background: @white;
}

.umb-modalcolumn-header {
  background: @gray-10;
  border-bottom: 1px solid @purple-l3;
  height: 94px;
  padding: 5px 20px 0px 20px;
  white-space: nowrap
}

.umb-modalcolumn-header h1{
  margin: 0;
  white-space: nowrap;
  font-size: @fontSizeLarge;
  font-weight: 400;
  padding-top: 10px !important;
}

.umb-modalcolumn-body {
	padding: 0px;
	background: @white;
	top: 100px;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: auto;
}

.no-padding .umb-modalcolumn-body {
	padding: 0px
}

.umb-modalcolumn .umb-modalcolumn-header .btn {
	position: absolute;
	top: 13px;
	right: 15px
}

.umb-modalcolumn iframe.auto-expand, .umb-modal iframe.auto-expand {
	border: none;
	padding: 0px;
	margin: 0px;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	position: absolute;;	
}

/* re-align loader */
.umb-modal .umb-loader-wrapper, .umb-modalcolumn .umb-loader-wrapper, .umb-dialog .umb-loader-wrapper{
    position:relative; 
    margin: 20px -20px;
}

.umb-modal-left .umb-panel-header .umb-headline, .umb-modal-left .umb-panel-header h1 {
  width: auto;
  padding-left: 0;
}

/* umb.dialog is used for the dialogs on the conent tree*/
.umb-dialog {
	outline: none;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	position: absolute;
	padding: 0px;
}

.umb-dialog .umb-btn-toolbar {
	text-align: right;
	padding: 15px 20px 10px 20px;
	margin-top: 30px;
	clear: both;
	background: @white;
}
.umb-dialog .umb-btn-toolbar .umb-control-group{
	border: none;
	padding: none;
}

.umb-dialog-body{
	position: absolute;
    overflow:auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 90px;
}
.umb-dialog-body .umb-pane{margin-top: 15px;}

.umb-dialog-footer{
		border-top: @purple-l3 1px solid;
		position: absolute;
	    overflow:auto;
	    text-align: right;
	    
	    height: 60px;
	    left: 0px;
	    right: 0px;
	    bottom: 0px;
}

/*we will always make sure to wrap iframe dialogs in proper padding*/
.umbracoDialog{
	width: auto !Important;
	height: auto !Important;
    padding: 20px;
}
.umbracoDialog .umb-pane{margin-left: 0px; margin-right: 0px; margin-top: 0px;}
.umbracoDialog .umb-dialog-body .umb-pane{margin-left: 20px; margin-right: 20px; margin-top: 20px;}
.umbracoDialog form{height: 100%;}

/*ensures dialogs doesnt have side-by-side labels*/
.umbracoDialog .controls-row, 
.umb-modal .controls-row{margin-left: 0px !important;}

/* modal and umb-modal are used for right.hand dialogs */
.modal {
    border-radius: 0 !important;

    &.fade.in{border: none !important;}
}
.umb-modal.fade {
	outline: none;
	top: 0 !important;
	left: -100% !important;
	width: 0px !important;
	-webkit-transition: left 0.3s linear, left 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
	-o-transition: opacity 0.3s linear, top 0.3s ease-out;
	transition: opacity 0.3s linear, top 0.3s ease-out;
	height: 100% !important;
}

.umb-modal.fade.in {
	top: 0 !important;
	left: 100% !important;
	margin-left: -440px;
	width: 440px !important;
	height: 100% !important;
	display: block;
}

.umb-modal-left.fade {
	top: 0 !important;
	left: -100% !important;
	width: 0px !important;
	-webkit-transition: left 0.3s linear, left 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
	-o-transition: opacity 0.3s linear, top 0.3s ease-out;
	transition: opacity 0.3s linear, top 0.3s ease-out;
	height: 100% !important;
}
.umb-modal-left.fade.in {
	top: 0 !important;
	left: 0 !important;
	margin-left: 80px;
	width: 440px !important;
	height: 100% !important;
	display: block;
}

/*Modal default panel styles*/
.umb-modal .umb-panel-header {
  padding: 20px;
  background: @white;
  border: none;
  height: auto; 
}
.umb-modal .umb-panel-body{
	padding: 0px 20px 0px 20px;
}

.umb-modal.fade.in.wide {
    margin-left: -640px;
	width: 640px !important;
}
.umb-modal i {
  font-size: 14px;
} 
.umb-modal .breadcrumb {
	background: none;
	padding: 0
}

.umb-modal .breadcrumb input {
	height: 12px
}

.umb-modal.ysod {
    z-index: 10000;
}
