#macros-dialog {
  .body {
    overflow: hidden;
    width: 100%;
    padding-top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

		#macros-dialog-content {
      display: flex;
      flex: 1;
      height: calc(100% - 37px);  // 37px - footer height

			.menu-header {
        display: flex;
				align-items: center;
        white-space: nowrap;

				& > label {
					line-height: 20px;
					font-weight: 700;
				}
			}	

			#macros-dialog-left {
				display: flex;
        flex-direction: column;
        height: 100%;
        width: 30%;
        min-width: 230px;
        overflow: hidden;

				.menu-header {
					padding: 7px 12px;
					justify-content: space-between;
        }

				#macros-menu, #functions-menu {
          height: 50%;
        }

				#btn-ai-macros-add {
					margin-left: auto;
					margin-right: 6px;
					.rtl & {
						margin-left: 6px;
						margin-right: auto;
          }
        }

        #btn-function-add {
          .margin-left(12px);
        }
      }
			#macros-list, #functions-list {
				height: calc(100% - 34px);
        padding: 2px 4px 4px 4px;

        .listview {
          border: none;
          box-shadow: none;
          .item {
            display: flex;
            position: relative;
            align-items: center;
            justify-content: space-between;
						padding: 6px 8px 6px 0px;
            border: none;
            cursor: default;
						margin-top: 2px;

            &:not(:hover):not(.selected) {
              background-color: @background-pane-ie;
              background-color: @background-pane;
            }
            &.dragged {
              opacity: 0.6;
            }
            &.dragHovered:after {
              content: "";
              position: absolute;
              width: 100%;
              height: 2px;
              background-color: @highlight-button-pressed-ie !important;
              background-color: @highlight-button-pressed !important;
              left: 0;
            }
            &.dragHovered.last:after {
              bottom: -2px;
            }
            &.dragHovered:not(.last):after {
              top: -2px;
            }

            .listitem-autostart {
              font-size: 9px;
              width: 16px;
              text-align: center;
            }

            .list-item {
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .listitem-icon {
              cursor: pointer;
              margin-left: 10px;
              height: 20px;
              width: 20px;
              line-height: 20px;
              border-radius: 2px;

              &.active {
                background-color: @highlight-button-pressed-hover-ie;
                background-color: @highlight-button-pressed-hover;
              }
            }
            &.selected {
              .listitem-icon {
                background-position-x: @button-small-active-icon-offset-x-ie;
                background-position-x: @button-small-active-icon-offset-x;
              }
						}
					}
				}
			}
			#macros-dialog-right {
				display: flex;
    		flex-direction: column;
				flex: 1;
        min-width: 0;

				.menu-header {
					padding: 7px 12px 7px 0px;
					.rtl & {
						padding: 7px 0px 7px 12px;
            }

					& > * {
						.margin-left-12();
          }
        }

				#btn-macros-delete {
					margin: 0px 12px;
      }

				#ch-macros-autostart {
					display: flex;
					align-items: center;
					margin-left: auto;

					.rtl & {
						margin-left: 0;
						margin-right: auto;
					}
				}

				#macros-code-editor {
        width: 100%;
        flex: 1;
      }
    }
  }
}
}

#macros-ai-dialog {
	&.padding-none .body {
		padding-top: 0;
	}

	.body {
		width: 100%;
		bottom: 0;
		display: flex;
		flex-direction: column;

		.box {
			flex: 1;
		}
		#macros-ai-dialog-textarea {
			height: 100%;
			& * {
				height: 100%;
			}
		}
		#macros-ai-dialog-code-editor {
			height: 100%;
		}
	}
}