dx-popup styles

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>DevExtreme Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.spa.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.light.css" />

    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>

    <script src="config.js"></script>
    <script>
        System.import('app')
            .then(function(viz) {
                System.import("devextreme/viz/themes").then(function(viz) {
                    viz.currentTheme("generic.light");
                    viz.refreshTheme();
                });
            })
            .catch(console.error.bind(console));
    </script>

</head>

<body class="dx-viewport">
    <div class="demo-container">
        <demo-app>Loading...</demo-app>
    </div>
</body>

</html>

// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://github.com/DevExpress/devextreme-angular/blob/master/README.md

System.config({
    transpiler: 'ts',
    typescriptOptions: {
        module: "commonjs",
        emitDecoratorMetadata: true,
        experimentalDecorators: true
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },
    paths: {
        'npm:': 'https://unpkg.com/'
    },
    map: {
        'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js',
        'typescript': 'npm:typescript@2.2.2/lib/typescript.js',

        '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js',

        'rxjs': 'npm:rxjs@5.3.1',

        'devextreme': 'npm:devextreme@17.2',
        'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js',
        'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
        'devextreme-angular': 'npm:devextreme-angular@17.2'
    },
    packages: {
        'app': {
            main: './app.component.ts',
            defaultExtension: 'ts'
        },
        'devextreme': {
            defaultExtension: 'js'
        },
        'devextreme-angular': {
            main: 'index.js',
            defaultExtension: 'js'
        }
    }
});

<form id="form" #form>
    
    <div id="fileuploader-container">
        <dx-file-uploader
            selectButtonText="Select photo"
            labelText=""
            accept="image/*"
            uploadMode="useForm">
        </dx-file-uploader>
    </div>
</form>

    
    <dx-button
        id="button"
        text="Open Popup"
        type="success"
        (onClick)="popupVisible = true">
    </dx-button>
    
  <dx-popup [width]="300" [height]="300" title="Edit Photo" [(visible)]="popupVisible" [closeOnOutsideClick]="true">
    <div *dxTemplate="let data of 'content'">
      <dx-file-uploader
        selectButtonText="Browse Photo"
        labelText="or drop file here"
        accept="image/*"
        uploadMode="">
      </dx-file-uploader>
    </div>
  </dx-popup>

import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgForm } from '@angular/forms';

import { DxTextBoxModule, DxFileUploaderModule, DxButtonModule, DxPopupModule } from 'devextreme-angular';
import { alert } from 'devextreme/ui/dialog';

if(!/localhost/.test(document.location.host)) {
    enableProdMode();
}

@Component({
    selector: 'demo-app',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css']
})
export class AppComponent {
    @ViewChild('form') form: NgForm;
    popupVisible = false;
    updateClick(e) {
        alert("Uncomment the line to enable sending a form to the server.", "Click Handler");
        //form.submit();
    }
}

@NgModule({
    imports: [
        BrowserModule,
        DxTextBoxModule,
        DxFileUploaderModule,
        DxButtonModule,
        DxPopupModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

/deep/ #form {
    max-width: 600px;
    margin: auto;
}
/deep/ #button {
    margin-top: 50px;
    margin-right: 20px;
    float: right;    
}
/deep/ #fileuploader-container{
    border: 1px solid #d3d3d3;
    margin: 20px 20px 0 20px;
}
/deep/ #form h3 {
    margin-left: 20px;
    font-weight: normal;
    font-size: 22px;
}

:host /deep/ .dx-fileuploader-button {
    color: red;
  }