feat(editor): Added indentation for paragraphs in editor [SDNTB-27]

// article-edit.less
// Styling for the superdesk article edit module
// ----------------------------------------------------------------------------------------
@import 'mixins.less';
@import 'variables.less';

#main-container.authoring {
    .authoring-embedded {
        background: url('../../images/loading-large.gif') no-repeat center;
    }
}

.auth-screen {
	position: absolute;
	top: 0; right: 0; left: 0; bottom: 0;
	.main-section {
		.transition(all ease 0.3s);
	}
}

.authoring-embedded {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;

	.embedded-auth-view {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
        left: 0;
		box-sizing: border-box;

		.subnav {
			z-index: 99;
			background-color: @subnav-authoring;
		}
		.sd-widget.comments .notification-list-box,
		.sd-widget.versions .article-versions {
			bottom: 0;
		}
	}

    .page-content-container {
        left:0;
        right:50px;
        top: 27px;
    }

    .widget-wrapper {
        &.active-right {
            &.right-extended {
                .page-content-container {
                    right: 50px;
                }
            }
            .page-content-container {
                right: 50px;
            }
        }
    }
}

.lock-avatar {
    margin-right: 10px;
    margin-left: -6px;
    .avatar-with-info {
        margin-top: 2px;
        cursor: pointer;
       .logged-info {
            background-color: #cf0000;
            border: 1px solid #cf0000;
            box-shadow: 0px 0 0 2px @subnav-authoring;
        }
    }
    .dropdown-menu {
        padding: 10px;
        top: -19px;
        text-align: center;
        .avatar {
            display: inline-block;
            margin: 10px 0;
            float: none;
        }
        button {
            text-align: center;
            margin-top: 15px;
        }
    }
    .menu-label {
        padding-left: 0;
    }
}

.subnav {
    .button-stack > .btn {
        padding: 8px 20px;
        height: 28px;
    }
    .authoring-topbar {
        height: 30px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 55%;
        .stage {
            font-size: 10px;
            .text-light();
            letter-spacing: 0.035em;
            line-height: 29px;
            color: @gray;
            border: 0;
            background-color: transparent;
            text-transform: uppercase;
            b {
                color: @grayDark;
                .text-semibold();
            }
        }
        &.has-highlights {
            overflow: visible;
        }
    }
}

.auto-save {
	margin-right: 20px;
	line-height: 28px;
	.opacity(70);
	i {
		margin-top: -4px;
	}
}

.page-content-container {
	position: absolute;
	top:0;
	left: @tablist-width + @article-tabpane-padding;
	right: @tablist-width + @article-tabpane-padding;
	bottom: 30px;
	overflow-y: auto;
}

// Medium editor
// -------------------------------------------------
.medium-editor-toolbar-actions {
	li button {
		height: 40px !important;
		min-width: 40px !important;
		padding-top: 10px !important;
	}
}
.medium-toolbar-arrow-under:after {
	top: 40px !important;
}

.text-editor-info {
	font-size: 89%;
}

.text-editor {
	.sderror {
		border-bottom: 1px dotted #cc0000;
		background-color: rgba(204, 0, 0, 0.08);
	}

    .sdfindreplace {
        background-color: rgba(0, 0, 0, 0.08);
    }

    .sdfindreplace.sdactive {
        background-color: rgba(237, 212, 0, 0.55);
    }

    &.typing {
        .sderror, .sdfindreplace {
            border-bottom: none;
            background-color: transparent;
        }
    }
}

// Placeholders
// -------------------------------------------------
[contenteditable=true] {
    &:before{
        display: block; /* For Firefox */
    }
    &:empty:before{
        content: attr(placeholder);
        display: block; /* For Firefox */
        color: #ccc;
    }
    &:focus:before{
        display: none;
    }
}

// Opened articles
// -------------------------------------------------

.opened-articles {
	position: fixed;
	min-height: @authoring-opened-articles;
	left: 0; right: 0;
    bottom: 0;
	background: rgba(0,0,0,0.85);
	z-index: @zindexFixedNavbar;
	ul > li {
		.border-box();
		padding: 0 15px 0 15px;
		max-width: 250px;
		position: relative;
		line-height: 30px;
		.close {
			color: #fff;
			border: none;
			background: none;
			position: absolute;
			right: 5px;
			top: 5px;
			padding: 0;
		}
		.title {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #8bcaf7;
			font-size: 12px;
			.text-light();
			&:hover {
				color: #fff;
				text-decoration: none;
				cursor: pointer;
			}
		}
		&:active {
			background: #444;
		}
		&.active {
			background: darken(@sd-blue,10%) !important;
			margin-top: -1px;
			padding-top: 1px;
			&:hover {
				cursor: default;
			}
			.title {
				color: #fff;
			}
		}
	}
	.list {
		margin-left: 31px;
		margin-right: 250px;
		&.full-width {
			margin-right: 0;
		}
		> li {
			float: left;
			border-right: 1px solid #333;
		}
	}
	.multiedit-item {
		float: right;
		> li {
			border-left: 1px solid #333;
			width: 250px;
		}
	}
	.quick-actions {
		button {
			background: none;
			border: 0;
			height: 30px;
			line-height: 30px;
			width: 30px;
			text-align: center;
			&:hover {
				cursor: pointer;
				background: @sd-blue;
			}
		}
		i {
			margin: -5px 0 0 0;
		}
	}
}

&.scratchpad-open {
	.opened-articles {
		bottom: @scratchpad-closed + @scratchpad-content-height;
	}
}

// Article dashboard
// -------------------------------------------------

.authoring-dashboard {
	padding: 40px;
	overflow: auto;

	.card-list {
		width: 0;
		margin: 0 auto;
	}
	.card-list > li {
		width: 140px;
		height: 170px;
		float: left;
		margin: 10px;
		padding: 15px 20px;
		position: relative;
		.title {
			max-height: 135px;
			overflow: hidden;
			font-size: 14px;
			line-height: 22px;
			max-height: 110px;
			overflow: hidden;
			.text-semibold();
		}
		.created {
			position: absolute;
			bottom: 15px;
			left: 20px;
			color: #888;
			font-size: 12px;
			width: 80%;
			height:14%;
			float:left;
		}
		.text {
			font-size: 12px;
			color: @gray;
			line-height: 18px;
		}
		.close {
			position: absolute;
			right: 7px;
			top: 3px;
		}
        .type-icon {
			position: relative;
			bottom: 6px;
			margin: 0;
			float: left;
		}
		.state-label {
			position: relative;
			bottom: 1px;
			margin: auto;
			float: right;
		}
		.subInfo {
			position: absolute;
			right: 15px;
			bottom: 1px;
			float: right;
		}
		.container {
			.text-semibold();
			color: #216678;
			margin-right: 20px;
		}
	}
}

// Multiedit dropdown
// -------------------------------------------------

.multiedit-menu {
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	margin-right: 4px;
	li button {
		width: 300px !important;
		padding-right: 20px !important;
		overflow: hidden;
		text-overflow: ellipsis;
		position: relative;
		i {
			position: absolute;
			right: -5px;
			top: 9px;
		}
		&.disabled {
			background: #f0f0f0;
			i {
				.opacity(20);
			}
		}
	}
	li .msg {
		padding: 0 20px;
	}
}
.multiedit-dropdown {
	.dropdown-toggle {
		width: 48px;
		padding: 0 !important;
	}
	.dropdown-menu {
		.fieldset {
			border-top: 1px solid #dedede;
			margin-top: 10px;
			height: 32px;
			padding: 10px 10px 0;
			button {
				width: 100px;
			}
		}
	}
}

.terms-box {
	position: relative;
	.dropdown-menu.nested-menu {
		width: 100%;
	}
}

.widget {
	padding: 12px;

	h3 {
		margin-bottom: 0.5em;
	}

	.link-list .btn {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
}

.modal-footer {
	.pagination-box {
		.page-info {
			float: left;
		}
	}
}

// Authoring Header
// -------------------------------------------------

// ---- Sticky header ----
.authoring-sticky {
  position: absolute;
  .box-sizing(border-box);
  left: 0; right: 58px;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 20px;
  border: 1px solid #cacaca;
  border-top: 0;
  border-bottom: 0;
  background-color: @white;
  z-index: 3;
  .transition(all .5s);

  .authoring-sticky__detailed {
    display: inline-block;
    > div {
      display: inline-block;
      margin-left: 15px;
      padding-left: 10px;
      border-left: 1px solid #DADADA;
    }
    label, time, b {
      display: inline-block;
      vertical-align: top;
      font-size: 12px;
      color: @sd-text-label;
      padding-right: .3em;
      margin: 0;
    }
    b {
      max-width: 45%;
      color: #575656;
      font-weight: 400;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  &.authoring-sticky--fixed {
    z-index: 3;
    .box-shadow(0px 2px 4px -1px rgba(0,0,0,0.2));
  }
}

// ---- Main header ----
.authoring-header {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  font-size: 0;
  padding: 5px 10px 12px 10px;
  border: 1px solid #cacaca;
  border-top: 0;
  border-bottom: 0;
  background-color: @white;
  z-index: 2;
  .box-sizing(border-box);
  .box-shadow(0px 1px 4px -1px rgba(0,0,0,0.25));
	max-height: 0;
  //.transition(max-height 0.3s ease-in);
  > .authoring-header__holder {
    height: 0px;
		opacity: 0;
    overflow: hidden;
		//.transition(opacity 0.3s 0.4s);
		.transition(opacity 0.4s 0.1s);
  }
  &.active {
		max-height: 800px;
		//.transition(max-height 0.3s ease-in);
    > .authoring-header__holder {
      height: auto;
			opacity: 1;
      overflow: visible;
			//.transition(opacity 0.3s 0.4s);
			.transition(opacity 0.4s 0.1s);
    }
  }
  * {
    box-sizing: border-box;
  }
}

.authoring-header__general-info {
  display: block;
  margin: 10px 0;
  padding: 0 10px;
  > div {
    display: inline-block;
    vertical-align: top;
    line-height: 0;
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #DADADA;
    &:last-of-type {
        margin-right: 0;
        border-right: 0;
    }
  }
  label {
    display: inline-block;
    font-size: 10px;
    line-height: 16px;
    min-width: 0;
    margin: 0;
    color: @sd-text-label;
    letter-spacing: 0.06em;
  }
  .data {
    display: inline-block;
    font-size: 13px;
    line-height: 14px;
    padding-left: 10px;
    text-transform: lowercase;
  }
  .word-count b {
    font-size: 12px;
    line-height: 12px;
    color: #575656;
    padding-right: .2em;
  }
  .broadcast-status {
    color: #e51c23;
    b {
        font-size: 14px;
    }
  }
  [class^="filetype-icon-"],
  [class*="filetype-icon-"] {
    height: 13px;
    color: @grayLight;
  }
  .dropdown-toggle {
    line-height: 13px;
    height: auto;
  }
}

.authoring-header__detailed {
  display: flex;
  flex-wrap: wrap;
  align-content:flex-start;
  .data {
    flex-grow: 1;
    font-size: 13px;
    line-height: 20px;
  }

  // label {
  //   display: inline-block;
  //   min-width: 75px;
  //   font-size: 11px;
  //   line-height: 26px;
  //   margin: 0;
  //   color: #c0c0c0;
  // }

  input.slugline {
    color: @sd-keyword;
    font-weight: 500;
  }

  textarea.ed-note {
    color: #d25932;
  }

  .dropdown {
    width: 100%;
    line-height: 0;
    .dropdown-toggle {
      .box-sizing(border-box);
      .transition(all .3s);
      padding: 0;
      .caret {
        position: absolute;
        top: 50%;
        right: 3px;
        margin-top: -3px;
      }
      i { vertical-align: middle; }
      &.line-input {
        + .dropdown-menu {
            top: -11px;
        }
      }
    }
    &.open {
      .dropdown-toggle {
        box-shadow: 0 1px 0 0 @sd-blue;
        border-color: @sd-blue;
      }
    }
    .dropdown-menu {
      width: 100%;
      margin-top: 3px;
      .place-dropdown {
        padding-left: 16px;
        .text-semibold();
      }
    }
  }
}

.authoring-header__toggle {
  position: absolute;
  width: 23px;
  height: 23px;
  border: 0;
  padding: 0;
  left: 50%;
  margin-left: -11.5px;
  bottom: -11px;
  background-color: @white;
  z-index: 3;
  line-height: 0;
  .border-radius(23px);
  box-shadow: 0 0 7px 0 rgba(0,0,0,0.3);
  .transition(transform 0.5s);
  i { height: 15px; }
  &.active {
    .rotate(180deg);
  }
}

.authoring-header__row {
  display: flex;
  margin-bottom: 12px;
  min-height: 24px;
}

.authoring-header__row--wrap {
  flex-wrap: wrap;
  align-content:flex-start;
}

.authoring-header__item {
  display: flex;
  flex-grow: 1;
  padding: 0 10px 12px;
  min-height: 24px;
    label {
        display: inline-block;
        min-width: 75px;
        font-size: 11px;
        line-height: 26px;
        margin: 0;
        color: #c0c0c0;
        padding-right: 5px;
    }

    input.slugline {
        color: @sd-keyword;
        font-weight: 500;
    }

    .sd-invalid-text {
        float: right;
        margin-bottom: -16px;
    }

    .char-count {
        font-size: 11px;
        font-style: italic;
        color: @sd-text-label;
        float: right;
        margin-bottom: -16px;
        margin-left: 5px;
        &.error {
            color: @red;
        }
    }

    [sd-meta-terms] + .sd-invalid-text {
        position: absolute;
        left: 120px;
        margin-top: 3px;
    }
    &----half {
      flex-basis: 50%;
    }
}

.authoring-header__item-label {
  min-width: 75px;
  max-width: 75px;
  font-size: 11px;
  line-height: 26px;
  margin: 0;
  color: @sd-text-label;
  text-transform: uppercase;
  padding-right: 6px;
  flex-shrink: 1;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.authoring-header__input-holder {
    position: relative;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

// --- various layout options ---
.authoring-header__row--2 {
  .authoring-header__item {
    flex-basis: 50%;
  }
}
.authoring-header__row--3 {
  .authoring-header__item {
    flex-basis: 33%;
  }
}
.authoring-header__row--4 {
  .authoring-header__item {
    flex-basis: 25%;
  }
}
.authoring-header__row--2-1-1 {
  .authoring-header__item {
    flex-basis: 25%;
    &:first-child {
      flex-basis: 50%;
    }
  }
}

.authoring-header__row--inline {
  .authoring-header__item {
    flex-grow:0;
  }
}

.authoring-header__row--inline {
  .authoring-header__item {
    .authoring-header__item-label {
      min-width: 0;
      max-width: 100%;
      padding-right: 12px;
      width: auto;
      flex-shrink: 1;
    }
    &:first-child {
      .authoring-header__item-label {
        min-width: 75px;
        max-width: 75px;
        padding-right: 6px;
      }
    }
  }
}

.compact {
  .authoring-header__item {
    .authoring-header__item-label {
      min-width: 0;
      max-width: 50px;
    }
    &:first-child {
      .authoring-header__item-label {
        min-width: 75px;
        max-width: 75px;
        padding-right: 6px;
      }
    }
  }
  .authoring-header__row--inline {
    .authoring-header__item {
      .authoring-header__item-label {
        min-width: 0;
        max-width: 50px;
      }
      &:first-child {
        .authoring-header__item-label {
          min-width: 75px;
          max-width: 75px;
          padding-right: 6px;
        }
      }
    }
  }

}

// .authoring-header__row--inline .authoring-header__item:first-child .authoring-header__item-label {
//   min-width: 75px;
//   max-width: 75px;
//   padding-right: 6px;
//
// }

// -------------------------------------------------
// END Authoring Header

.dropdown-terms {
    width: auto !important;
    .dropdown-toggle {
        width: 24px;
        height: 24px;
        background-color: @sd-blue;
        .opacity(50);
        border-radius: 2px;
        i {
            margin-bottom: 2px;
        }
        &:hover, &:focus {
            .opacity(100);
        }
    }
    &.open {
        .dropdown-toggle { .opacity(100) };
    }
    .dropdown-menu {
        width: 230px;
        max-height: 275px;
        top: -11px;
        padding: 0;
        .input-term {
            padding: 5px 0 5px 25px;
            background: url(../../images/search-icon.png) left 10px center no-repeat white;
            border-bottom: 1px solid @grayLighter;
            input {
                box-shadow: none!important;
                border: 0!important;
            }
        }
        .main-list {
            background-color: @white;
            max-height: 215px;
            padding: 8px 0;
            overflow: auto;
            li {
                position: relative;
                button {
                    padding-right: 17px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    i {
                        margin-right: 0;
                    }
                }
            }
        }
        .levelup {
            display: flex;
            padding: 4.5px;
            margin-bottom: -1px;
            border-bottom: 1px solid @grayLighter;
            background-color: @white;
            i.backlink {
                flex-grow: 0;
                cursor: pointer;
                height: 27px;
                margin-top: 0;
            }
            button {
                flex-grow: 1;
                min-width: 0;
                font-weight: 500;
                text-overflow: ellipsis;
                overflow: hidden;
                b.category-hover {
                    display: none;
                }
                &:hover {
                    b.category { display: none; }
                    b.category-hover { display: block; }
                }
            }
        }
        .item-list { position: static; max-height: 215px; }
    }
}
.terms-list {
    width: calc(~'100% - 28px');
    display: inline-block;
    vertical-align: top;
    li {
        position: relative;
        font-size: 12px;
        color: @black;
        background-color: @grayLighter;
        margin-right: 3px;
        margin-bottom: 3px;
        padding: 3px 6px;
        cursor: pointer;
        border-radius: 2px;
        .transition(color .2s);
        i {
            position: absolute;
            margin-left: -7px;
            left: 50%;
            top: 5px;
            .opacity(0);
            .transition(opacity .2s);
        }
        &:hover {
            text-align: center;
            color: #f3f3f3;
            i {
                .opacity(70);
            }
        }
    }
}

.item-detail-info {
    height: 0px;
    overflow: hidden;
    .box-sizing(border-box);
    &.active {
        height: auto;
    }
    + button {
        position: absolute;
        width: 23px;
        height: 23px;
        border: 0;
        padding: 0 5px;
        font-size: 0;
        left: 98%;
        margin-left: -11.5px;
        margin-top: -13px;
        background-color: @white;
        .border-radius(23px);
        .transition(transform 0.5s);
        &.active {
            .rotate(180deg);
        }
    }

    .edit-photo {
        display: none	;
        color: #fff;
        text-transform: uppercase;
        font-size: 9px;
        text-decoration: none;
        text-align: center;
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
    }
    &:hover {
        .edit-photo {
            display: block;
        }
    }
}

.preview-modal-control { // toggle for preview dialog
    .btn {
        position: absolute;
        top: 12px;
        right: 80px;
        z-index: 100;
        background-color: transparent;
        height: 22px;
        padding: 0px 6px;
        .border-radius(0);
        &:hover {
            background-color: rgba(152,152,152,.3);
            .box-shadow(none);
        }
        [class^="icon-"], .btn [class*=" icon-"] {
            margin: 3px 0 0;
        }
    }
}

.preview-pane {
    .pane-holder {
        width: @sidepreview-width;
        &.outer-pane {
            top: 0;
        }
        .send-to-pane {
            width: @sidepreview-width;
        }
    }
}

#macros-diff {
    position: absolute;
    bottom: 30px;
    right: 60px;
    padding: 5px;
    opacity: 0.88;
    z-index: 10;
    text-align: right;
    background-color: #fff;

    & > * {
        margin-left: 5px;
    }

    & .replace-btn {
        margin-right: 8px;
    }

    & em {
        font-size: 120%;
    }
}

.item-association {
    border: 2px dashed #cfcfcf;
    background-color: #f7f7f7;
    width: 100%;
    height: 65px;
    position: relative;

    [contenteditable] {
        border: 1px solid @sd-blue;
        .border-radius(3px);
        padding: 5px;
        min-height: 18px;
    }

    &:not(.preview) {
        cursor: pointer;
    }

    &.preview {
        border: none;
        background-color: transparent;
    }

    img {
        border: 1px solid #cfcfcf;
        max-width: 100%;
    }

    .close-overlay {
        z-index:10000;
        position: absolute;
        top: 30px;
        right: 30px;
    }
}

feature-image {
    .item-association {
        [contenteditable] {
            text-align: center;
        }
    }
}

.indent-article {
    #bodyhtml, .text.body-text {
        :header {
            text-indent: 0;
        }
        p:first-of-type, p+p {
            text-indent: 25px;
        }
    }
}


[FIX] sap.m.Dialog: prevent blurred text

Change-Id: I1c15b5d7e248227f702b01f9b29b03b6f6876d36
BCP: 1570874793

/* ============================================= */
/* CSS for control sap.m/Dialog.control          */
/* ============================================= */

@SapDialogMarginWidth: 10%;
@SapDialogMarginHeight: 7%;
@SapBarHeight: 3rem;
@SapBarCompactHeight: 2.5rem;

.sapMDialog,
.sapMMessageDialog .sapMDialogScrollCont,
.sapMDialogSection {
	box-sizing: border-box;
}

.sapMDialog {
	background-clip: padding-box;
	min-height: 6rem;
	outline: none;
	overflow: hidden;
	position: absolute;
	opacity: 0;
	-webkit-transition: opacity .15s, transform 0.2s;
	transition: opacity .15s, transform 0.2s;
	-ms-transform: translate(-50%, -50%) scale(0.9);
	-webkit-transform: translate(-50%, -50%) scale(0.9);
	transform: translate(-50%, -50%) scale(0.9);
	//prevent blurring
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	-ms-filter: blur(0);
	filter: blur(0);

}

//the rtl will change the transform-translate from (-50% -50%) to (50% -50%)
[dir="rtl"] .sapMDialog {
	left: 50%; //this will be changed to auto from the rtl mode
	right: -50%; //this will be reverted to 50% by the rtl mode
}

// set max height and max width ========================================================================================

.sapMDialog {
	max-width: calc(~"100% - " @SapDialogMarginWidth);
}

.sapMDialog > .sapMDialogSection {
	max-width: 100%;
}

// =====================================================================================================================
// there are 6 cases (3 vars - header, subheader, and footer)
// =====================================================================================================================

.setDialogMaxHeight(@_barHeight, @_path) {

	//with header, subheader and footer (3 bars)
	@{_path}.sapMDialogWithSubHeader:not(.sapMDialog-NoHeader):not(.sapMDialog-NoFooter) {
		max-height: calc(~"100% - " @_barHeight * 3 ~" - " @SapDialogMarginHeight);
	}

	//with header, no subheader and footer (2 bars)
	@{_path}:not(.sapMDialog-NoHeader):not(.sapMDialog-NoFooter):not(.sapMDialogWithSubHeader) {
		max-height: calc(~"100% - " @_barHeight * 2 ~" - " @SapDialogMarginHeight);
	}

	//with no headers and footer (1 bar)
	@{_path}.sapMDialog-NoHeader:not(.sapMDialog-NoFooter):not(.sapMDialogWithSubHeader) {
			max-height: calc(~"100% - " @_barHeight ~" - " @SapDialogMarginHeight);
	}

	//with 2 headers with no footer (2 bars)
	@{_path}:not(.sapMDialog-NoHeader).sapMDialog-NoFooter.sapMDialogWithSubHeader {
		max-height: calc(~"100% - " @_barHeight ~" - " @SapDialogMarginHeight);
	}

	//with 1 sub-header and no footer (1 bar)
	@{_path}.sapMDialog-NoHeader.sapMDialog-NoFooter.sapMDialogWithSubHeader {
		max-height: calc(~"100% - " @_barHeight ~" - " @SapDialogMarginHeight);
	}

	//with header, no sub-header and no footer (1 bar)
	@{_path}:not(.sapMDialog-NoHeader).sapMDialog-NoFooter:not(.sapMDialogWithSubHeader) {
		max-height: calc(~"100% - " @_barHeight ~" - " @SapDialogMarginHeight);
	}

	//with no headers and no footer (0 bars)
	@{_path}.sapMDialog-NoHeader.sapMDialog-NoFooter:not(.sapMDialogWithSubHeader) {
		max-height: calc(~"100% - " @_barHeight);
	}
}

.setDialogMaxHeight(@SapBarHeight, ~".sapMDialog");
.setDialogMaxHeight(@SapBarCompactHeight, ~".sapUiSizeCompact .sapMDialog");

// end max height and max width ========================================================================================

.sapMDialog .sapMDialogScrollCont > * {
	vertical-align: middle;
}

// Removing borders, shadow, and rounded corners when the dialog is on fullscreen
.sapMDialog.sapMDialogStretched {
	border: none;
	border-radius: 0;
	box-shadow: 0;
	transform: none;
	-ms-transform: none;
	-webkit-transform: none;
	right: 0 !important;
	bottom: 0 !important;
	top: 0 !important;
	left: 0 !important;
	max-height: none !important;
	max-width: none !important;
	height: auto !important; //this is for preventing inline size/width sizes set the width
	width: auto !important; //this is for preventing inline size/height sizes set the height
	min-width: 0 !important; //this is for preventing the dialog to hold it's width in small screens
	min-height: 0 !important; //this is for preventing the dialog to hold it's width in small screens
}

.sap-phone .sapMDialog {
	min-width: 18rem;
	overflow: hidden;

	& > footer  {
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex;
		padding: 0 0.25rem;

		.sapMTBSpacer {
			display: none;
		}

		.sapMBtn {
			-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
			-moz-box-flex: 1; /* OLD - Firefox 19- */
			-webkit-flex: 1; /* Chrome */
			-ms-flex: 1; /* IE 10 */
			flex: 1;
			min-width: 31%;
		}
	}
}

.sap-tablet .sapMDialog,
.sap-desktop .sapMDialog {
	min-width: 25rem;
}

.sapMDialog > .sapMBar {
	position: relative;
	width: auto;
}

.sapMDialog .sapMDialogSection {
	overflow: hidden;
	position: relative;
}

.sapMDialogScroll {
	display: inline-block; /*this is for horizontal scrolling enablement */
	min-height: 100%;
	width: 100%;
	vertical-align: middle;
}

/* disable scrolling automatically for sap.m.Page sap.m.NavContainer sap.m.ScrollingContainer inside Dialog */
.sapMDialogVerScrollDisabled .sapMDialogScroll {
	height: 100%;
}

/* disable scrolling automatically for sap.m.Page sap.m.NavContainer sap.m.ScrollingContainer inside Dialog */
.sapMDialogHorScrollDisabled .sapMDialogScroll {
	display: block;
	/* This div has position set to absolute when runs in android native browser with version less than 4.1. */
	/* Width needs to be set to 100% due to position absolute */
	width: 100%;
}

.sapMDialogHidden {
	/* display: none; */
	/* visibility need to be used instead of display none, because some control inside dialog may need to do calculation */
	visibility: hidden;
}

.sapMDialogSliding {
	transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;

	/* The style without prefix needs to be put to the end because Firefox browser recognize the 'transition-property' but can't interpret the value 'transform' and it needs '-webkit-transform' instead */
	-moz-transition-property: -webkit-transform;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}

.sapMDialogBlockLayer {
	opacity: 0.6;
}

.sapMDialogTransparent {
	opacity: 0;
}

.sapUiPopupWithPadding .sapMDialogScrollCont {
	padding: 1rem;
}

/* messagedialog always has content padding */
.sapMMessageDialog .sapMDialogScrollCont {
	box-sizing: border-box;
	padding: 1rem;
}

.sapMDialogScrollCont {
	height: 100%;
}

.sapMDialogWithScrollCont .sapMDialogScroll {
	/*
      This property together with the position: absolute in sapMDialogScrollCont fixes the browser bug stated here:
      http://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
  */
	position: relative;
}

.sapMDialogWithScrollCont .sapMDialogScrollCont {
	height: 100%;
	padding: 0;
	position: absolute;
	width: 100%;
}

.sapMActionSheetDialog .sapMDialogScrollCont {
	padding: 0; /* no content padding for action sheet */
}

.sapMDialogOpen {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	-ms-transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}

.sapMDialogBlockLayerAnimation {
	position: absolute;
	transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
}

/* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
.sapUiContainerContentPadding(~".sapMDialog", ~"> section > .sapMDialogScroll > .sapMDialogScrollCont");

/* ====================================================== */

.sapMDialog.sapMMessageDialog {
	font-size: 0.875rem;
}

.sapMDialog > header.sapMDialogTitle,
.sapMDialog > header.sapMDialogSubHeader {
	font-size: 1rem;
}

.sapMDialogIcon ~ .sapMDialogTitle {
	display: inline;
}

/* remove the branding color of bar in page when page is in dialog*/
.sapMDialog .sapMIBar.sapMPageHeader::before {
	border-top: none;
}

.sapMMessageDialog.sapMPopup-CTX > header.sapMDialogTitle {
	background-image: none;
	filter: none;
}

.sapMDialog > header.sapMDialogTitle .sapMTitle {
	color: @sapUiPageHeaderTextColor;
	margin: 0;
	vertical-align: middle;
}

.sapMDialog > header.sapMDialogTitle .sapMImg {
	height: 2.25rem;
	margin-right: 0.625rem;
	vertical-align: middle;
	width: 2.25rem;
}

.sapMDialog > header.sapMDialogTitle .sapMDialogIcon.sapUiIcon {
	font-size: 1.25rem;
	margin-right: 0.5rem;
	vertical-align: middle;
}

.sapMTB.sapMTBNoBorders {
	border-bottom: none;
	border-top: none;
}

.sapMDialog > footer {
	padding: 0 0.25rem;

	#dialogWithManyButtons-footer-overflowButton-inner {
		padding-left: 0;
	}

	#dialogWithManyButtons-footer-overflowButton-img {
		position: static;
	}

	.sapMBtn {
		//for some reason buttons have offset of 1px when focused and not exactly in the vertical middle
		margin-top: -1px;
		margin-left: 0;
		margin-right: 0.5rem;

		&:last-child {
			margin-right: 0;
		}
	}
}

/* Compact size */
.sapUiSizeCompact {

	&.sapMDialog,
	.sapMDialog {
		min-height: @SapBarCompactHeight;
		padding-bottom: @SapBarCompactHeight;
		padding-top: @SapBarCompactHeight;

		&.sapMDialogWithSubHeader {
			padding-top: @SapBarCompactHeight + @SapBarCompactHeight;

		  	&.sapMDialog-NoHeader {
				padding-top: @SapBarCompactHeight;

				& > .sapMDialogSubHeader {
			  		top: 0;
				}
		  	}
		}

		& > .sapMDialogTitle {
			height: @SapBarCompactHeight;

			.sapMBarPH {
				line-height: @SapBarCompactHeight;
			}
		}

		& > .sapMDialogSection {
			min-height: @SapBarCompactHeight;
		}

		& > footer {
			height: @SapBarCompactHeight;
		}

		& header.sapMDialogSubHeader {
			height: @SapBarCompactHeight;
			top: @SapBarCompactHeight;
		}
	}

	&.sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapMImg {
		&.sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapMImg,
		& .sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapMImg {
			height: 1.5rem;
			width: 1.5rem;
		}

		&.sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapUiIcon,
		& .sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapUiIcon {
			font-size: 1rem;
			height: 1.5rem;
			line-height: 1.5rem;
			width: 1rem;
		}

		&.sapMDialog > header:first-of-type.sapMHeader-CTX,
		&.sapMDialog > footer:last-of-type.sapMFooter-CTX,
		& .sapMDialog > header:first-of-type.sapMHeader-CTX,
		& .sapMDialog > footer:last-of-type.sapMFooter-CTX {
			height: 2.5rem;

			.sapMBarLeft,
			.sapMBarRight,
			.sapMBarPH {
				padding-bottom: 0.25rem;
				padding-top: 0.25rem;
			}
		}
	}
}

.sapMDialogResizing,
.sapMDialogResizing * {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

//remove the transform translate
.sapMDialogTouched {
	transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
}

.sapDialogDisableTransition {
	transition: none;
	-webkit-transition: none;
}

.sapMDialogResizeHandler {
	bottom: -0.5rem;
	cursor: se-resize;
	height: 1rem;
	position: absolute;
	right: -0.5rem;
	width: 1rem;
	z-index: 2;

	&:before {
		border-style: solid;
		border-width: 0 0 0.5rem 0.5rem;
		content: "";
		left: 0;
		position: absolute;
		top: 0;
	}
}

.sapMDialog {
	box-sizing: content-box;
	min-height: @SapBarHeight;
	padding-bottom: @SapBarHeight;
	padding-top: @SapBarHeight;

	&.sapMDialog-NoFooter {
		padding-bottom: 0;
	}

	&.sapMDialog-NoHeader {
		padding-top: 0;
	}

	&.sapMDialogWithSubHeader {
		padding-top: @SapBarHeight + @SapBarHeight;

	  	&.sapMDialog-NoHeader {
			padding-top: @SapBarHeight;

		  	& > .sapMDialogSubHeader {
				top: 0;
		  	}
		}
	}

	& > .sapMDialogTitle {
		height: @SapBarHeight;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	& > .sapMDialogSection {
		height: 100%;
		min-height: @SapBarHeight;
	}

	& > footer {
		bottom: 0;
		height: @SapBarHeight;
		left: 0;
		position: absolute;
		right: 0;
	}

	&.sapMDialogDraggable > header {
		cursor: move;
	}

	& header.sapMDialogSubHeader {
		cursor: default;
		height: @SapBarHeight;
		left: 0;
		position: absolute;
		right: 0;
		top: @SapBarHeight;
		z-index: 2;
	}
}

/* ============================================= */
/* CSS for control sap.m/Dialog.control          */
/* ============================================= */

@SapDialogMarginWidth: 10%;
@SapDialogMarginHeight: 7%;
@SapBarHeight: 3rem;
@SapBarCompactHeight: 2.5rem;

.sapMDialog,
.sapMMessageDialog .sapMDialogScrollCont,
.sapMDialogSection {
	box-sizing: border-box;
}

.sapMDialog {
	background-clip: padding-box;
	min-height: 6rem;
	outline: none;
	overflow: hidden;
	position: absolute;
	opacity: 0;
	-webkit-transition: opacity .15s, transform 0.2s;
	transition: opacity .15s, transform 0.2s;
	-ms-transform: translate(-50%, -50%) scale(0.9);
	-webkit-transform: translate(-50%, -50%) scale(0.9);
	transform: translate(-50%, -50%) scale(0.9);
}

//the rtl will change the transform-translate from (-50% -50%) to (50% -50%)
[dir="rtl"] .sapMDialog {
	left: 50%; //this will be changed to auto from the rtl mode
	right: -50%; //this will be reverted to 50% by the rtl mode
}

// set max height and max width ========================================================================================

.sapMDialog {
	max-width: calc(~"100% - " @SapDialogMarginWidth);
}

.sapMDialog > .sapMDialogSection {
	max-width: 100%;
}

// =====================================================================================================================
// there are 6 cases (3 vars - header, subheader, and footer)
// =====================================================================================================================

.setDialogMaxHeight(@_barHeight, @_path) {

	//with header, subheader and footer (3 bars)
	@{_path}.sapMDialogWithSubHeader:not(.sapMDialog-NoHeader):not(.sapMDialog-NoFooter) {
		max-height: calc(~"100% - " @_barHeight * 3 ~" - " @SapDialogMarginHeight);
	}

	//with header, no subheader and footer (2 bars)
	@{_path}:not(.sapMDialog-NoHeader):not(.sapMDialog-NoFooter):not(.sapMDialogWithSubHeader) {
		max-height: calc(~"100% - " @_barHeight * 2 ~" - " @SapDialogMarginHeight);
	}

	//with no headers and footer (1 bar)
	@{_path}.sapMDialog-NoHeader:not(.sapMDialog-NoFooter):not(.sapMDialogWithSubHeader) {
			max-height: calc(~"100% - " @_barHeight ~" - " @SapDialogMarginHeight);
	}

	//with 2 headers with no footer (2 bars)
	@{_path}:not(.sapMDialog-NoHeader).sapMDialog-NoFooter.sapMDialogWithSubHeader {
		max-height: calc(~"100% - " @_barHeight ~" - " @SapDialogMarginHeight);
	}

	//with 1 sub-header and no footer (1 bar)
	@{_path}.sapMDialog-NoHeader.sapMDialog-NoFooter.sapMDialogWithSubHeader {
		max-height: calc(~"100% - " @_barHeight ~" - " @SapDialogMarginHeight);
	}

	//with header, no sub-header and no footer (1 bar)
	@{_path}:not(.sapMDialog-NoHeader).sapMDialog-NoFooter:not(.sapMDialogWithSubHeader) {
		max-height: calc(~"100% - " @_barHeight ~" - " @SapDialogMarginHeight);
	}

	//with no headers and no footer (0 bars)
	@{_path}.sapMDialog-NoHeader.sapMDialog-NoFooter:not(.sapMDialogWithSubHeader) {
		max-height: calc(~"100% - " @_barHeight);
	}
}

.setDialogMaxHeight(@SapBarHeight, ~".sapMDialog");
.setDialogMaxHeight(@SapBarCompactHeight, ~".sapUiSizeCompact .sapMDialog");

// end max height and max width ========================================================================================

.sapMDialog .sapMDialogScrollCont > * {
	vertical-align: middle;
}

// Removing borders, shadow, and rounded corners when the dialog is on fullscreen
.sapMDialog.sapMDialogStretched {
	border: none;
	border-radius: 0;
	box-shadow: 0;
	transform: none;
	-ms-transform: none;
	-webkit-transform: none;
	right: 0 !important;
	bottom: 0 !important;
	top: 0 !important;
	left: 0 !important;
	max-height: none !important;
	max-width: none !important;
	height: auto !important; //this is for preventing inline size/width sizes set the width
	width: auto !important; //this is for preventing inline size/height sizes set the height
	min-width: 0 !important; //this is for preventing the dialog to hold it's width in small screens
	min-height: 0 !important; //this is for preventing the dialog to hold it's width in small screens
}

.sap-phone .sapMDialog {
	min-width: 18rem;
	overflow: hidden;

	& > footer  {
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex;
		padding: 0 0.25rem;

		.sapMTBSpacer {
			display: none;
		}

		.sapMBtn {
			-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
			-moz-box-flex: 1; /* OLD - Firefox 19- */
			-webkit-flex: 1; /* Chrome */
			-ms-flex: 1; /* IE 10 */
			flex: 1;
			min-width: 31%;
		}
	}
}

.sap-tablet .sapMDialog,
.sap-desktop .sapMDialog {
	min-width: 25rem;
}

.sapMDialog > .sapMBar {
	position: relative;
	width: auto;
}

.sapMDialog .sapMDialogSection {
	overflow: hidden;
	position: relative;
}

.sapMDialogScroll {
	display: inline-block; /*this is for horizontal scrolling enablement */
	min-height: 100%;
	width: 100%;
	vertical-align: middle;
}

/* disable scrolling automatically for sap.m.Page sap.m.NavContainer sap.m.ScrollingContainer inside Dialog */
.sapMDialogVerScrollDisabled .sapMDialogScroll {
	height: 100%;
}

/* disable scrolling automatically for sap.m.Page sap.m.NavContainer sap.m.ScrollingContainer inside Dialog */
.sapMDialogHorScrollDisabled .sapMDialogScroll {
	display: block;
	/* This div has position set to absolute when runs in android native browser with version less than 4.1. */
	/* Width needs to be set to 100% due to position absolute */
	width: 100%;
}

.sapMDialogHidden {
	/* display: none; */
	/* visibility need to be used instead of display none, because some control inside dialog may need to do calculation */
	visibility: hidden;
}

.sapMDialogSliding {
	transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;

	/* The style without prefix needs to be put to the end because Firefox browser recognize the 'transition-property' but can't interpret the value 'transform' and it needs '-webkit-transform' instead */
	-moz-transition-property: -webkit-transform;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}

.sapMDialogBlockLayer {
	opacity: 0.6;
}

.sapMDialogTransparent {
	opacity: 0;
}

.sapUiPopupWithPadding .sapMDialogScrollCont {
	padding: 1rem;
}

/* messagedialog always has content padding */
.sapMMessageDialog .sapMDialogScrollCont {
	box-sizing: border-box;
	padding: 1rem;
}

.sapMDialogScrollCont {
	height: 100%;
}

.sapMDialogWithScrollCont .sapMDialogScroll {
	/*
      This property together with the position: absolute in sapMDialogScrollCont fixes the browser bug stated here:
      http://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
  */
	position: relative;
}

.sapMDialogWithScrollCont .sapMDialogScrollCont {
	height: 100%;
	padding: 0;
	position: absolute;
	width: 100%;
}

.sapMActionSheetDialog .sapMDialogScrollCont {
	padding: 0; /* no content padding for action sheet */
}

.sapMDialogOpen {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	-ms-transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}

.sapMDialogBlockLayerAnimation {
	position: absolute;
	transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
}

/* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
.sapUiContainerContentPadding(~".sapMDialog", ~"> section > .sapMDialogScroll > .sapMDialogScrollCont");

/* ====================================================== */

.sapMDialog.sapMMessageDialog {
	font-size: 0.875rem;
}

.sapMDialog > header.sapMDialogTitle,
.sapMDialog > header.sapMDialogSubHeader {
	font-size: 1rem;
}

.sapMDialogIcon ~ .sapMDialogTitle {
	display: inline;
}

/* remove the branding color of bar in page when page is in dialog*/
.sapMDialog .sapMIBar.sapMPageHeader::before {
	border-top: none;
}

.sapMMessageDialog.sapMPopup-CTX > header.sapMDialogTitle {
	background-image: none;
	filter: none;
}

.sapMDialog > header.sapMDialogTitle .sapMTitle {
	color: @sapUiPageHeaderTextColor;
	margin: 0;
	vertical-align: middle;
}

.sapMDialog > header.sapMDialogTitle .sapMImg {
	height: 2.25rem;
	margin-right: 0.625rem;
	vertical-align: middle;
	width: 2.25rem;
}

.sapMDialog > header.sapMDialogTitle .sapMDialogIcon.sapUiIcon {
	font-size: 1.25rem;
	margin-right: 0.5rem;
	vertical-align: middle;
}

.sapMTB.sapMTBNoBorders {
	border-bottom: none;
	border-top: none;
}

.sapMDialog > footer {
	padding: 0 0.25rem;

	#dialogWithManyButtons-footer-overflowButton-inner {
		padding-left: 0;
	}

	#dialogWithManyButtons-footer-overflowButton-img {
		position: static;
	}

	.sapMBtn {
		//for some reason buttons have offset of 1px when focused and not exactly in the vertical middle
		margin-top: -1px;
		margin-left: 0;
		margin-right: 0.5rem;

		&:last-child {
			margin-right: 0;
		}
	}
}

/* Compact size */
.sapUiSizeCompact {

	&.sapMDialog,
	.sapMDialog {
		min-height: @SapBarCompactHeight;
		padding-bottom: @SapBarCompactHeight;
		padding-top: @SapBarCompactHeight;

		&.sapMDialogWithSubHeader {
			padding-top: @SapBarCompactHeight + @SapBarCompactHeight;

		  	&.sapMDialog-NoHeader {
				padding-top: @SapBarCompactHeight;

				& > .sapMDialogSubHeader {
			  		top: 0;
				}
		  	}
		}

		& > .sapMDialogTitle {
			height: @SapBarCompactHeight;

			.sapMBarPH {
				line-height: @SapBarCompactHeight;
			}
		}

		& > .sapMDialogSection {
			min-height: @SapBarCompactHeight;
		}

		& > footer {
			height: @SapBarCompactHeight;
		}

		& header.sapMDialogSubHeader {
			height: @SapBarCompactHeight;
			top: @SapBarCompactHeight;
		}
	}

	&.sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapMImg {
		&.sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapMImg,
		& .sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapMImg {
			height: 1.5rem;
			width: 1.5rem;
		}

		&.sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapUiIcon,
		& .sapMDialog > header.sapMDialogTitle > .sapMBarMiddle > .sapMBarPH > .sapUiIcon {
			font-size: 1rem;
			height: 1.5rem;
			line-height: 1.5rem;
			width: 1rem;
		}

		&.sapMDialog > header:first-of-type.sapMHeader-CTX,
		&.sapMDialog > footer:last-of-type.sapMFooter-CTX,
		& .sapMDialog > header:first-of-type.sapMHeader-CTX,
		& .sapMDialog > footer:last-of-type.sapMFooter-CTX {
			height: 2.5rem;

			.sapMBarLeft,
			.sapMBarRight,
			.sapMBarPH {
				padding-bottom: 0.25rem;
				padding-top: 0.25rem;
			}
		}
	}
}

.sapMDialogResizing,
.sapMDialogResizing * {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

//remove the transform translate
.sapMDialogTouched {
	transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
}

.sapDialogDisableTransition {
	transition: none;
	-webkit-transition: none;
}

.sapMDialogResizeHandler {
	bottom: -0.5rem;
	cursor: se-resize;
	height: 1rem;
	position: absolute;
	right: -0.5rem;
	width: 1rem;
	z-index: 2;

	&:before {
		border-style: solid;
		border-width: 0 0 0.5rem 0.5rem;
		content: "";
		left: 0;
		position: absolute;
		top: 0;
	}
}

.sapMDialog {
	box-sizing: content-box;
	min-height: @SapBarHeight;
	padding-bottom: @SapBarHeight;
	padding-top: @SapBarHeight;

	&.sapMDialog-NoFooter {
		padding-bottom: 0;
	}

	&.sapMDialog-NoHeader {
		padding-top: 0;
	}

	&.sapMDialogWithSubHeader {
		padding-top: @SapBarHeight + @SapBarHeight;

	  	&.sapMDialog-NoHeader {
			padding-top: @SapBarHeight;

		  	& > .sapMDialogSubHeader {
				top: 0;
		  	}
		}
	}

	& > .sapMDialogTitle {
		height: @SapBarHeight;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	& > .sapMDialogSection {
		height: 100%;
		min-height: @SapBarHeight;
	}

	& > footer {
		bottom: 0;
		height: @SapBarHeight;
		left: 0;
		position: absolute;
		right: 0;
	}

	&.sapMDialogDraggable > header {
		cursor: move;
	}

	& header.sapMDialogSubHeader {
		cursor: default;
		height: @SapBarHeight;
		left: 0;
		position: absolute;
		right: 0;
		top: @SapBarHeight;
		z-index: 2;
	}
}


Updated styles for other languages

Updated styles for other languages

/*  Anode theme for Brackets by Artem Solovev

------------------------------
>>>> TABLE OF CONTENTS:
------------------------------
1.0 Code editor
2.0 Line numbers
3.0 Active line
4.0 Brackets
5.0 Cursor
6.0 Tags
7.0 Comments
8.0 Variables
9.0 Other
10.0 Non-editor styling

------------------------------
*/

/* 1.0 EDITOR */
.CodeMirror, .CodeMirror-scroll {
    background-color: #212121;
    color: #fff;
}

.CodeMirror-selected { background: rgba(96, 125, 139, .6); }

/* 2.0 LINE NUMBERS */
.CodeMirror-gutters {
    background-color: #263238;
    border-right: 1px solid rgba(88,214,247, .3);
}

.CodeMirror .CodeMirror-linenumber { color: #C0D8D1; }

/* 3.0 ACTIVE LINE */
.CodeMirror-activeline-background,
.CodeMirror-activeline .CodeMirror-gutter-elt { background: #000000 }

/* 4.0 BRACKETS */
.CodeMirror-matchingbracket {
    background: 0 0!important;
    color: #FDD835!important;
    text-shadow: 0 0 5px #FDD835;
    font-weight: 700;
}

.CodeMirror-nonmatchingbracket {
    background: #D81B60!important;
    color: #fff!important;
}

/* 5.0 CURSOR */
.CodeMirror .CodeMirror-cursor { border-left: 2px solid #ffffff!important; }

/* 7.0 COMMENTS */
.cm-comment { color: #757575; }

.CodeMirror-activeline .cm-comment { color: #9e9e9e; }

/* 8.0 VARIABLES */
.cm-variable,
.cm-variable-2,
.cm-variable-3,
.cm-bracket { color: #29B26A; }

.CodeMirror-activeline .cm-variable,
.CodeMirror-activeline .cm-variable-2,
.CodeMirror-activeline .cm-variable-3 { color: #69F0AE; }

/* 9.0 TAGS, ATTRS etc. */
.cm-meta { color: #ffffff; } // HTML DOCTYPE

.CodeMirror-activeline .cm-meta { text-shadow: 0 0 1px #ffffff; }

.CodeMirror-matchingtag { background-color: #000!important; }

span.cm-tag { color: #F06292; } // Tag (HTML tags)

.CodeMirror-activeline span.cm-tag { color: #F06292; }

.cm-attribute { color: #81C784; } // Attributes (HTML - class, id, src etc.)

.CodeMirror-activeline .cm-attribute { color: #43A047; }

.cm-string { color: #FFF176; } // Params (HTML params for attr.)

.CodeMirror-activeline .cm-string { color: #FDD835; }

.cm-qualifier { color: #4DB6AC!important; } // CSS selector

.CodeMirror-activeline .cm-qualifier { color: #00897B!important; }

.cm-property { color: #AED581; } // CSS property

.CodeMirror-activeline .cm-property { color: #7CB342!important; }

.cm-atom,
.cm-def { color: #FFF176; } // line-properties (inline-block, className, true, func params, #values)

.CodeMirror-activeline .cm-atom,
.CodeMirror-activeline .cm-def { color: #FDD835; }

.cm-number { color: #4FC3F7; } // Numbers

.CodeMirror-activeline .cm-number { color: #039BE5; }

.cm-keyword { color: #AB47BC; } // var, new, if, this, function, CSS[and, !important]

.CodeMirror-activeline .cm-keyword { color: #8E24AA; }

.cm-builtin,
.cm-quote { color: #A1887F!important; } // ?

.CodeMirror-activeline .cm-builtin,
.CodeMirror-activeline .cm-quote { color: #6D4C41!important; }

.cm-string-2 { color: #D50000; } // String

.cm-error { color: #A72726; } // Error

.cm-operator { color: #ffffff; }

/* 10.0 NON-EDITOR STYLINGs */
.image-view,
.not-editor { background-color: #292929; }

.view-pane .image-view { color: #64B5F6; }

/*  Anode theme for Brackets by Artem Solovev

------------------------------
>>>> TABLE OF CONTENTS:
------------------------------
1.0 Code editor
2.0 Line numbers
3.0 Active line
4.0 Brackets
5.0 Cursor
6.0 Tags
7.0 Comments
8.0 Variables
9.0 Other
10.0 Non-editor styling

------------------------------
*/

/* 1.0 Code editor */
.CodeMirror, .CodeMirror-scroll {
    background-color: #212121;
    color: #fff;
}

.CodeMirror-selected { background: rgba(96, 125, 139, .6); }

/* 2.0 Line numbers */
.CodeMirror-gutters {
    background-color: #2D2A25;
    border-right: 1px solid rgba(88,214,247, .3);
}

.CodeMirror .CodeMirror-linenumber { color: #C0D8D1; }

/* 3.0 Active line */
.CodeMirror-activeline-background,
.CodeMirror-activeline .CodeMirror-gutter-elt { background: #000000 }

.CodeMirror-activeline .cm-comment { color: #9e9e9e; }

.CodeMirror-activeline .cm-qualifier { color: #00897B!important; }

.CodeMirror-activeline .cm-variable,
.CodeMirror-activeline .cm-variable-2,
.CodeMirror-activeline .cm-variable-3 { color: #69F0AE; }

.CodeMirror-activeline .cm-property { color: #7CB342!important; }

.CodeMirror-activeline span.cm-tag { color: #F06292; }

.CodeMirror-activeline .cm-attribute { color: #43A047; }

.CodeMirror-activeline .cm-string { color: #FDD835; }

.CodeMirror-activeline .cm-meta { text-shadow: 0 0 1px #ffffff; }

.CodeMirror-activeline .cm-atom,
.CodeMirror-activeline .cm-def { color: #FDD835; }

.CodeMirror-activeline .cm-number { color: #039BE5; }

.CodeMirror-activeline .cm-keyword,
.CodeMirror-activeline .cm-builtin,
.CodeMirror-activeline .cm-quote { color: #6D4C41!important; }

/* 4.0 Brackets */
.CodeMirror-matchingbracket {
    background: 0 0!important;
    color: #FDD835!important;
    text-shadow: 0 0 5px #FDD835;
    font-weight: 700;
}

.CodeMirror-nonmatchingbracket {
    background: #D81B60!important;
    color: #fff!important;
}

/* 5.0 Cursor */
.CodeMirror .CodeMirror-cursor { border-left: 2px solid #ffffff!important; }

/* 6.0 Tags */
.CodeMirror-matchingtag { background-color: #000!important; }

/* 7.0 Comments */
.cm-comment { color: #757575; }

/* 8.0 Variables */
.cm-variable,
.cm-variable-2,
.cm-variable-3,
.cm-bracket { color: #29B26A; }

/* 9.0 Other */
.cm-atom,
.cm-def { color: #FFF176; } // Definition

.cm-number { color: #4FC3F7; } // Numbers

span.cm-tag { color: #F06292; } // Tag (HTML tags)

.cm-attribute { color: #81C784; } // Attributes (HTML - class, id, src etc.)

.cm-string { color: #FFF176; } // Params (HTML params for attr.)

.cm-string-2 { color: #D50000; } // String

.cm-error { color: #A72726; } // Error

.cm-qualifier { color: #4DB6AC!important; } // CSS selector

.cm-property { color: #AED581; } // CSS property

.cm-meta { color: #ffffff; } // HTML DOCTYPE

.cm-operator { color: #D50000; }

.cm-keyword,
.cm-builtin,
.cm-quote { color: #A1887F!important; }

/* 10.0 Non-editor styling */
.image-view,
.not-editor { background-color: #292929; }

.view-pane .image-view { color: #64B5F6; }