dialogs.css

.p-Widget.dialogOverlay .dialogBlock {
    border-radius: 3px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    margin: 15px 20px;

    /* 
       padding (left + right) = 56px
       margin (left + right) = 40px
       total = padding + margin = 96px
    */
    max-width: calc(100% - 96px) !important;
    
    min-width: 424px;
    max-height: 560px;
    padding: 0 28px;
}

.p-Widget.dialogOverlay .dialogBlock .dialogTitle {
    padding: 20px 0;
    font-weight: 500;
    background-color: transparent;
    font-size: var(--theia-ui-font-size2);
    color: var(--theia-editorWidget-foreground);
    min-height: 0;
}

.p-Widget.dialogOverlay .dialogBlock .dialogControl {
    padding: 0 0 36px;
    min-height: 0;
}

.p-Widget.dialogOverlay .dialogBlock .dialogContent {
    padding: 0;
    overflow: auto;
}

.p-Widget.dialogOverlay .dialogBlock .dialogContent > input {
    margin-bottom: 28px;
}

.p-Widget.dialogOverlay .dialogBlock .dialogContent > div {
    padding: 0 0 12px;
}

.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection {
    margin-top: 28px;
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection:first-child {
    margin-top: 0;
}

.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow {
    margin-top: 16px;
    display: flex;
    align-items: center;
}

.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow .spinner {
    background: var(--theia-icon-loading) center center no-repeat;
    animation: theia-spin 1.25s linear infinite;
    width: 30px;
    height: 30px;
}

.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow:first-child {
    margin-top: 0px;    
    height: 32px;
}

.fl1{
    flex: 1;
}

.status-icon {
    margin-right: 6px;
    font-size: 17px;
}

.fa.disabled {
    opacity: .4;
}


@media only screen and (max-height: 560px) {
    .p-Widget.dialogOverlay .dialogBlock {
        max-height: 400px;
    }
}