@keyframes dialog-fade-in {
    from {
        top: -200px;
    }

    to {
        top: 0;
    }
}

::ng-deep {
    .cdk-overlay-pane {
        overflow: hidden;
        display: flex;
    }

    .cdk-overlay-pane > ng-component {
        flex: 1;
        display: flex;
        max-width: 100%;
    }

    .cdk-overlay-pane dui-window {
        position: relative !important;

        flex: 1;
        height: auto;
        margin: 25px;
        width: calc(100% - 50px);
        margin-top: 0;
        max-height: 100%;
        border: 1px solid #b8b8b8;
        box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.22);

        dui-window-content > .content {
            padding-left: 20px !important;
            padding-right: 20px !important;
            padding-bottom: 5px !important;
        }
    }

    .dialog-overlay-with-animation dui-window {
        animation: 0.2s dialog-fade-in ease-out;
    }

    .cdk-overlay-dark-backdrop {
        background: rgba(0, 0, 0, 0.001)
    }
}


.dialog-actions {
    padding: 20px;
    padding-top: 15px;
    background-color: #ececec;

    text-align: right;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    ::ng-deep > * {
        margin: 0 5px;

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

        &:first-child {
            margin-left: 0;
        }
    }
}

::ng-deep .dark {
    .dialog-actions {
        background-color: var(--dui-window-content-bg);
    }

    ::ng-deep .cdk-overlay-pane dui-window {
        border: 1px solid #060708;
    }
}