.dialog {
    box-sizing: border-box;
    height: auto;
    min-height: 131px;
    overflow: visible;
    visibility: visible;
    width: 400px;

    h1, h2, h3, h4, h5, h6 {
        color: $auiDialogColor;
    }

    .aui {

        &-icon {
            color: $auiDialogColor;
            text-indent: -999em;

            &-small {
                width: 14px;
                height: 14px;

                &:before {
                    color: inherit;
                    font-family: "FontAwesome";
                    font-size: 16px;
                    -webkit-font-smoothing: antialiased;
                    font-style: normal;
                    font-weight: normal;
                    left: 0;
                    line-height: 1;
                    margin-top: -8px;
                    position: absolute;
                    text-indent: 0;
                    speak: none;
                    top: 50%;
                }
            }
        }

        &-iconfont-close-dialog {
            cursor: pointer;
            right: 20px;
            position: absolute;
            top: -49px;

            &:before {
                content: "\f00d";
            }
        }

        &-dialog2 {
            &-header, &-footer {
                background-color: $auiDialogBg;
                border: none;
            }

            &-header {
                border-bottom: 1px solid $auiBorderColor;
                border-radius: 5px 5px 0 0;
                box-sizing: border-box;
                color: #333;
                display: table;
                font-weight: normal;
                height: em(58, 12);
                margin-top: -69px;
                padding: 0 20px;
                width: 100%;

                h2 {
                    font-size: em(20, 12);
                    font-weight: $dialogTitleFontWeight;
                    color: $auiDialogColor;
                }

                &-main {
                    display: table-cell;
                    padding-right: 0;
                    max-width: 400px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    vertical-align: middle;
                    white-space: nowrap;

                }
            }

            &-footer {
                border-top: 1px solid $auiBorderColor;
                border-radius: 0 0 5px 5px;
                box-sizing: border-box;
                height: 51px;
                overflow: hidden;
                padding: 10px 20px;
                width: 100%;

                &:empty {
                    height: 5px;
                    padding: 0;
                }
            }

            &-content {
                background-color: $auiDialogBg;
                box-sizing: border-box;
                color: $auiDialogColor;
                font-size: em(14, 12);
                overflow: auto;
                max-height: 100%;
                padding: 20px;

                p,span, h3 {
                    font-weight: $labelFontWeight;
                }

                &:last-child {
                    border-bottom-right-radius: 5px;
                    border-bottom-left-radius: 5px;
                }

                &:first-child {
                    border-top-right-radius: 5px;
                    border-top-left-radius: 5px;
                }
            }
        }
    }

    .input-control {
        background-color: $auiDialogContentBg;
        color: $auiDialogColor;
    }

    .form-control:not(:last-child) {
        border-bottom: 1px solid $auiBorderColor;
    }
}

@media all and (max-width: 420px) {
  .aui-dialog2-small .aui-dialog2-content {
    height: 100%;
  }
}

.modal-dialog-form {
    margin-top: 5px !important;

    .input-control {
        background: $modalMockAKInputBackground;
        border: $modalMockAKInputBorder;
        color: inherit;
    }

    &-error {
        margin-bottom: 8px;
    }

    /**
     * Override Atlaskit dropdown styling when in a modal because the dropdown
     * backgrounds clash with the modal backgrounds.
     */
    .htclLc[data-role=droplistContent] {
        border: 1px solid #455166;
    }
}
.modal-dialog-footer {
    font-size: $modalButtonFontSize;
}

/**
 * Styling inline dialog errors.
 */
.inline-dialog-error {
    margin-top: 16px;

    &-text {
        color: $dialogErrorText;
        margin-bottom: 8px;
        text-align: center;
    }

    &-button {
        display: block;
        margin: 16px auto 0 auto;
    }
}
