├── .editorconfig
├── .github
    ├── CONTRIBUTING.md
    ├── ISSUE_TEMPLATE.md
    └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .prettierrc
├── .vscode
    ├── launch.json
    └── settings.json
├── README.md
├── angular.json
├── e2e
    ├── protractor.conf.js
    ├── src
    │   ├── app.e2e-spec.ts
    │   └── app.po.ts
    └── tsconfig.e2e.json
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── content
    │   │   ├── content.component.css
    │   │   ├── content.component.html
    │   │   ├── content.component.spec.ts
    │   │   ├── content.component.ts
    │   │   └── network-activities
    │   │   │   ├── network-activities.component.css
    │   │   │   ├── network-activities.component.html
    │   │   │   ├── network-activities.component.spec.ts
    │   │   │   └── network-activities.component.ts
    │   ├── global
    │   │   ├── footer
    │   │   │   ├── footer.component.css
    │   │   │   ├── footer.component.html
    │   │   │   ├── footer.component.spec.ts
    │   │   │   └── footer.component.ts
    │   │   └── no-content
    │   │   │   ├── no-content.component.css
    │   │   │   ├── no-content.component.spec.ts
    │   │   │   └── no-content.component.ts
    │   └── menu
    │   │   ├── sidebar
    │   │       ├── sidebar.component.css
    │   │       ├── sidebar.component.html
    │   │       ├── sidebar.component.spec.ts
    │   │       └── sidebar.component.ts
    │   │   └── top-nav-bar
    │   │       ├── top-nav-bar.component.css
    │   │       ├── top-nav-bar.component.html
    │   │       ├── top-nav-bar.component.spec.ts
    │   │       └── top-nav-bar.component.ts
    ├── assets
    │   ├── .gitkeep
    │   ├── img.jpg
    │   ├── jquery.flot.spline.js
    │   └── jquery.flot.spline.min.js
    ├── browserslist
    ├── environments
    │   ├── .prettierrc
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── karma.conf.js
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    ├── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    └── tslint.json
├── tsconfig.json
└── tslint.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Read and contribute to the Wiki
 2 | 
 3 | Make sure you read the [Wiki](https://github.com/AngularClass/angular2-webpack-starter/wiki).
 4 | 
 5 | ## Submitting Pull Requests
 6 | 
 7 | If you're changing the structure of the repository please create an issue first.
 8 | 
 9 | ## Submitting bug reports
10 | 
11 | Make sure you are on latest changes and that you ran this command `npm run clean:install` after updating your local repository. If you can, please provide more information about your environment such as browser, operating system, node version, and npm version.
12 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | **Note: for support questions, please use one of these channels:** [Chat: AngularClass.slack](http://angularclass.com/member-join/) or [Twitter: @AngularClass](https://twitter.com/AngularClass)
 2 | 
 3 | * **I'm submitting a ...**
 4 | [ ] bug report
 5 | [ ] feature request
 6 | [ ] question about the decisions made in the repository
 7 | 
 8 | * **Do you want to request a *feature* or report a *bug*?**
 9 | 
10 | 
11 | 
12 | * **What is the current behavior?**
13 | 
14 | 
15 | 
16 | * **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** via
17 | https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
18 | 
19 | 
20 | 
21 | * **What is the expected behavior?**
22 | 
23 | 
24 | 
25 | * **What is the motivation / use case for changing the behavior?**
26 | 
27 | 
28 | 
29 | * **Please tell us about your environment:**
30 | 
31 | - Angular version: 2.0.0-beta.X
32 | - Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
33 | 
34 | 
35 | 
36 | * **Other information** (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
37 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | * **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
 2 | 
 3 | 
 4 | 
 5 | * **What is the current behavior?** (You can also link to an open issue here)
 6 | 
 7 | 
 8 | 
 9 | * **What is the new behavior (if this is a feature change)?**
10 | 
11 | 
12 | 
13 | * **Other information**:
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | yarn-error.log
34 | testem.log
35 | /typings
36 | 
37 | # System Files
38 | .DS_Store
39 | Thumbs.db
40 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true
3 | }


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "0.2.0",
 3 |     "configurations": [
 4 |         {
 5 |             "name": "Launch Chrome against localhost, with sourcemaps",
 6 |             "type": "chrome",
 7 |             "request": "launch",
 8 |             "url": "http://localhost:3000/*",
 9 |             "runtimeArgs": [
10 |               "--disable-web-security",
11 |               "--user-data-dir",
12 |               "--remote-debugging-port=9222"
13 |             ],
14 |             "sourceMaps": true,
15 |             "webRoot": "${workspaceRoot}"
16 |         },
17 |         {
18 |             "name": "Attach to Chrome, with sourcemaps",
19 |             "type": "chrome",
20 |             "request": "attach",
21 |             "url": "http://localhost:3000/*",
22 |             "port": 9222,
23 |             "sourceMaps": true,
24 |             "webRoot": "${workspaceRoot}"
25 |         }
26 |     ]
27 | }
28 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "typescript.tsdk": "node_modules/typescript/lib/"
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Gentelella
 2 | 
 3 | Updated to Angular 7 project, generated by ANGULAR-CLI and then modified to utilize the Gentelella free bootstrap theme. I tried to use bootstrap 4 reference, but this leads to various UI formatting issues, so pointed back to bootstrap 3. Bootstrap is a CDN reference. Jquery and jquery-flot are imported as scripts directly, because jquery-flot is legacy non-module javascript. Everything else is referenced from NPM now.
 4 | 
 5 | Some of the dependencies are currently flagging as high risk, but can't be updated automatically. I haven't tried to do a manual fix for these. Some of the libraries this is depending on unfortunately haven't been updated in quite a long time - most notably jquery-flot. Probabably ideal at this point in time would be to replace jquery-flot with some other charting library.
 6 | 
 7 | It does not currently have support for all the pages of existing gentelella, and some of the javascript tools (like pie charts) needed for dashboard controls have (still) not yet been incorporated in project.
 8 | 
 9 | To run, clone/fork the repo, and then do npm install.
10 | 
11 | ## Development server
12 | 
13 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
14 | 
15 | ## Code scaffolding
16 | 
17 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
18 | 
19 | ## Build
20 | 
21 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
22 | 
23 | ## Running unit tests
24 | 
25 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
26 | 
27 | ## Running end-to-end tests
28 | 
29 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
30 | 
31 | ## Further help
32 | 
33 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
34 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "gentelella": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {},
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "outputPath": "dist/gentelella",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "src/tsconfig.app.json",
 21 |             "assets": ["src/favicon.ico", "src/assets", "src/assets/img.jpg"],
 22 |             "styles": [
 23 |               "src/styles.css",
 24 |               "node_modules/font-awesome/css/font-awesome.css"
 25 |             ],
 26 |             "scripts": [
 27 |               "node_modules/jquery/dist/jquery.min.js",
 28 |               "node_modules/jquery-flot/jquery.flot.js",
 29 |               "node_modules/jquery-flot/jquery.flot.pie.js",
 30 |               "node_modules/jquery-flot/jquery.flot.time.js",
 31 |               "node_modules/jquery-flot/jquery.flot.stack.js",
 32 |               "node_modules/jquery-flot/jquery.flot.resize.js",
 33 |               "node_modules/jquery-flot/jquery.flot.canvas.js",
 34 |               "node_modules/jquery-flot/jquery.flot.categories.js",
 35 |               "node_modules/jquery-flot/jquery.flot.crosshair.js",
 36 |               "node_modules/jquery-flot/jquery.flot.errorbars.js",
 37 |               "node_modules/jquery-flot/jquery.flot.symbol.js",
 38 |               "node_modules/jquery-flot/jquery.flot.navigate.js",
 39 |               "node_modules/jquery-flot/jquery.flot.fillbetween.js",
 40 |               "node_modules/jquery-flot/jquery.flot.selection.js",
 41 |               "node_modules/jquery-flot/jquery.flot.image.js",
 42 |               "node_modules/jquery-flot/jquery.flot.threshold.js",
 43 |               "src/assets/jquery.flot.spline.js"
 44 |             ]
 45 |           },
 46 |           "configurations": {
 47 |             "production": {
 48 |               "fileReplacements": [
 49 |                 {
 50 |                   "replace": "src/environments/environment.ts",
 51 |                   "with": "src/environments/environment.prod.ts"
 52 |                 }
 53 |               ],
 54 |               "optimization": true,
 55 |               "outputHashing": "all",
 56 |               "sourceMap": false,
 57 |               "extractCss": true,
 58 |               "namedChunks": false,
 59 |               "aot": true,
 60 |               "extractLicenses": true,
 61 |               "vendorChunk": false,
 62 |               "buildOptimizer": true
 63 |             }
 64 |           }
 65 |         },
 66 |         "serve": {
 67 |           "builder": "@angular-devkit/build-angular:dev-server",
 68 |           "options": {
 69 |             "browserTarget": "gentelella:build"
 70 |           },
 71 |           "configurations": {
 72 |             "production": {
 73 |               "browserTarget": "gentelella:build:production"
 74 |             }
 75 |           }
 76 |         },
 77 |         "extract-i18n": {
 78 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 79 |           "options": {
 80 |             "browserTarget": "gentelella:build"
 81 |           }
 82 |         },
 83 |         "test": {
 84 |           "builder": "@angular-devkit/build-angular:karma",
 85 |           "options": {
 86 |             "main": "src/test.ts",
 87 |             "polyfills": "src/polyfills.ts",
 88 |             "tsConfig": "src/tsconfig.spec.json",
 89 |             "karmaConfig": "src/karma.conf.js",
 90 |             "styles": ["src/styles.css"],
 91 |             "scripts": [],
 92 |             "assets": ["src/favicon.ico", "src/assets"]
 93 |           }
 94 |         },
 95 |         "lint": {
 96 |           "builder": "@angular-devkit/build-angular:tslint",
 97 |           "options": {
 98 |             "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
 99 |             "exclude": ["**/node_modules/**"]
100 |           }
101 |         }
102 |       }
103 |     },
104 |     "gentelella-e2e": {
105 |       "root": "e2e/",
106 |       "projectType": "application",
107 |       "architect": {
108 |         "e2e": {
109 |           "builder": "@angular-devkit/build-angular:protractor",
110 |           "options": {
111 |             "protractorConfig": "e2e/protractor.conf.js",
112 |             "devServerTarget": "gentelella:serve"
113 |           }
114 |         },
115 |         "lint": {
116 |           "builder": "@angular-devkit/build-angular:tslint",
117 |           "options": {
118 |             "tsConfig": "e2e/tsconfig.e2e.json",
119 |             "exclude": ["**/node_modules/**"]
120 |           }
121 |         }
122 |       }
123 |     }
124 |   },
125 |   "defaultProject": "gentelella"
126 | }
127 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gentelella",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "^6.0.3",
15 |     "@angular/common": "^6.0.3",
16 |     "@angular/compiler": "^6.0.3",
17 |     "@angular/core": "^6.0.3",
18 |     "@angular/forms": "^6.0.3",
19 |     "@angular/http": "^6.0.3",
20 |     "@angular/platform-browser": "^6.0.3",
21 |     "@angular/platform-browser-dynamic": "^6.0.3",
22 |     "@angular/router": "^6.0.3",
23 |     "angular-font-awesome": "^3.1.2",
24 |     "bootstrap": "^4.3.1",
25 |     "core-js": "^2.5.4",
26 |     "font-awesome": "^4.7.0",
27 |     "jquery": "^3.4.1",
28 |     "jquery-flot": "^0.8.3",
29 |     "ng2-fontawesome": "0.0.6",
30 |     "rxjs": "^6.0.0",
31 |     "zone.js": "^0.8.26"
32 |   },
33 |   "devDependencies": {
34 |     "@angular/compiler-cli": "^6.0.3",
35 |     "@angular-devkit/build-angular": "~0.6.5",
36 |     "typescript": "~2.7.2",
37 |     "@angular/cli": "~6.0.5",
38 |     "@angular/language-service": "^6.0.3",
39 |     "@types/jasmine": "~2.8.6",
40 |     "@types/jasminewd2": "~2.0.3",
41 |     "@types/node": "~8.9.4",
42 |     "codelyzer": "~4.2.1",
43 |     "jasmine-core": "~2.99.1",
44 |     "jasmine-spec-reporter": "~4.2.1",
45 |     "karma": "~1.7.1",
46 |     "karma-chrome-launcher": "~2.2.0",
47 |     "karma-coverage-istanbul-reporter": "~1.4.2",
48 |     "karma-jasmine": "~1.1.1",
49 |     "karma-jasmine-html-reporter": "^0.2.2",
50 |     "protractor": "~5.3.0",
51 |     "ts-node": "~5.0.1",
52 |     "tslint": "~5.9.1"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/app/app.component.css


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <side-bar></side-bar>
2 | <topnav-bar></topnav-bar>
3 | <router-outlet></router-outlet>
4 | <custom-footer></custom-footer>
5 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | describe('AppComponent', () => {
 4 |   beforeEach(async(() => {
 5 |     TestBed.configureTestingModule({
 6 |       declarations: [
 7 |         AppComponent
 8 |       ],
 9 |     }).compileComponents();
10 |   }));
11 |   it('should create the app', async(() => {
12 |     const fixture = TestBed.createComponent(AppComponent);
13 |     const app = fixture.debugElement.componentInstance;
14 |     expect(app).toBeTruthy();
15 |   }));
16 |   it(`should have as title 'app'`, async(() => {
17 |     const fixture = TestBed.createComponent(AppComponent);
18 |     const app = fixture.debugElement.componentInstance;
19 |     expect(app.title).toEqual('app');
20 |   }));
21 |   it('should render title in a h1 tag', async(() => {
22 |     const fixture = TestBed.createComponent(AppComponent);
23 |     fixture.detectChanges();
24 |     const compiled = fixture.debugElement.nativeElement;
25 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to gentelella!');
26 |   }));
27 | });
28 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import * as jQuery from 'jquery';
 3 | 
 4 | @Component({
 5 |   selector: 'app-root',
 6 |   templateUrl: './app.component.html',
 7 |   styleUrls: ['./app.component.css']
 8 | })
 9 | export class AppComponent {
10 |   title = 'app';
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { SidebarComponent } from './menu/sidebar/sidebar.component';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { NgModule } from '@angular/core';
 4 | 
 5 | import { AppComponent } from './app.component';
 6 | import { NoContentComponent } from './global/no-content/no-content.component';
 7 | import { ContentComponent } from './content/content.component';
 8 | import { RouterModule, Routes } from '@angular/router';
 9 | import { TopNavBarComponent } from './menu/top-nav-bar/top-nav-bar.component';
10 | import { FontAwesomeDirective } from 'ng2-fontawesome';
11 | import { Footer } from './global/footer/footer.component';
12 | import { NetworkActivitiesComponent } from './content/network-activities/network-activities.component';
13 | import * as jQuery from 'jquery';
14 | 
15 | export const AppRoutes2: Routes = [
16 |   { path: '', component: ContentComponent },
17 |   /*{ path: 'inbox',  component: Inbox },
18 |   { path: 'about', component: About },*/
19 |   { path: '**', component: NoContentComponent }
20 | ];
21 | 
22 | @NgModule({
23 |   declarations: [
24 |     AppComponent,
25 |     SidebarComponent,
26 |     NoContentComponent,
27 |     ContentComponent,
28 |     TopNavBarComponent,
29 |     FontAwesomeDirective,
30 |     Footer,
31 |     NetworkActivitiesComponent
32 |   ],
33 |   imports: [BrowserModule, RouterModule.forRoot(AppRoutes2, { useHash: true })],
34 |   providers: [],
35 |   bootstrap: [AppComponent]
36 | })
37 | export class AppModule {}
38 | 


--------------------------------------------------------------------------------
/src/app/content/content.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/app/content/content.component.css


--------------------------------------------------------------------------------
/src/app/content/content.component.html:
--------------------------------------------------------------------------------
  1 |  <!-- page content -->
  2 |  <div class="right_col" style="min-height:1659px" role="main">
  3 |   <!-- top tiles -->
  4 |   <div class="row tile_count">
  5 |     <div class=" col-md-2 col-sm-4 col-xs-6 tile_stats_count">
  6 |       <span class="count_top"><i class="fa fa-user"></i> Total Users</span>
  7 |       <div class="count">2500</div>
  8 |       <span class="count_bottom"><i class="green">4% </i> From last Week</span>
  9 |     </div>
 10 |     <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
 11 |       <span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
 12 |       <div class="count">123.50</div>
 13 |       <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
 14 |     </div>
 15 |     <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
 16 |       <span class="count_top"><i class="fa fa-user"></i> Total Males</span>
 17 |       <div class="count green">2,500</div>
 18 |       <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
 19 |     </div>
 20 |     <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
 21 |       <span class="count_top"><i class="fa fa-user"></i> Total Females</span>
 22 |       <div class="count">4,567</div>
 23 |       <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
 24 |     </div>
 25 |     <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
 26 |       <span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
 27 |       <div class="count">2,315</div>
 28 |       <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
 29 |     </div>
 30 |     <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
 31 |       <span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
 32 |       <div class="count">7,325</div>
 33 |       <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
 34 |     </div>
 35 |   </div>
 36 |   <!-- /top tiles -->
 37 | 
 38 |   <div class="row">
 39 |     <div class="col-md-12 col-sm-12 col-xs-12">
 40 |       <div class="dashboard_graph">
 41 | 
 42 |         <div class="row x_title">
 43 |           <div class="col-md-6">
 44 |             <h3>Network Activities <small>Graph title sub-title</small></h3>
 45 |           </div>
 46 |           <div class="col-md-6">
 47 |             <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
 48 |               <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
 49 |               <span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b>
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 | 
 54 |         <div class="col-md-9 col-sm-9 col-xs-12">
 55 |           <div id="placeholder33" style="height: 260px; display: none" class="demo-placeholder"></div>
 56 |           <div style="width: 100%;">
 57 |             <network-activities></network-activities>
 58 |           </div>
 59 |         </div>
 60 |         <div class="col-md-3 col-sm-3 col-xs-12 bg-white">
 61 |           <div class="x_title">
 62 |             <h2>Top Campaign Performance</h2>
 63 |             <div class="clearfix"></div>
 64 |           </div>
 65 | 
 66 |           <div class="col-md-12 col-sm-12 col-xs-6">
 67 |             <div>
 68 |               <p>Facebook Campaign</p>
 69 |               <div class="">
 70 |                 <div class="progress progress_sm" style="width: 76%;">
 71 |                   <div class="progress-bar bg-green" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
 72 |                 </div>
 73 |               </div>
 74 |             </div>
 75 |             <div>
 76 |               <p>Twitter Campaign</p>
 77 |               <div class="">
 78 |                 <div class="progress progress_sm" style="width: 76%;">
 79 |                   <div class="progress-bar bg-green" role="progressbar"  style="width: 60%"  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
 80 |                 </div>
 81 |               </div>
 82 |             </div>
 83 |           </div>
 84 |           <div class="col-md-12 col-sm-12 col-xs-6">
 85 |             <div>
 86 |               <p>Conventional Media</p>
 87 |               <div class="">
 88 |                 <div class="progress progress_sm" style="width: 76%;">
 89 |                   <div class="progress-bar bg-green" role="progressbar"   style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
 90 |                 </div>
 91 |               </div>
 92 |             </div>
 93 |             <div>
 94 |               <p>Bill boards</p>
 95 |               <div class="">
 96 |                 <div class="progress progress_sm" style="width: 76%;">
 97 |                   <div class="progress-bar bg-green" role="progressbar"   style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 98 |                 </div>
 99 |               </div>
100 |             </div>
101 |           </div>
102 | 
103 |         </div>
104 | 
105 |         <div class="clearfix"></div>
106 |       </div>
107 |     </div>
108 | 
109 |   </div>
110 |   <br />
111 | 
112 |   <div class="row">
113 | 
114 | 
115 |     <div class="col-md-4 col-sm-4 col-xs-12">
116 |       <div class="x_panel tile fixed_height_320">
117 |         <div class="x_title">
118 |           <h2>App Versions</h2>
119 |           <ul class="nav navbar-right panel_toolbox">
120 |             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
121 |             </li>
122 |             <li class="dropdown">
123 |               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
124 |               <ul class="dropdown-menu" role="menu">
125 |                 <li><a href="#">Settings 1</a>
126 |                 </li>
127 |                 <li><a href="#">Settings 2</a>
128 |                 </li>
129 |               </ul>
130 |             </li>
131 |             <li><a class="close-link"><i class="fa fa-close"></i></a>
132 |             </li>
133 |           </ul>
134 |           <div class="clearfix"></div>
135 |         </div>
136 |         <div class="x_content">
137 |           <h4>App Usage across versions</h4>
138 |           <div class="widget_summary">
139 |             <div class="w_left w_25">
140 |               <span>0.1.5.2</span>
141 |             </div>
142 |             <div class="w_center w_55">
143 |               <div class="progress">
144 |                 <div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 66%;">
145 |                   <span class="sr-only">60% Complete</span>
146 |                 </div>
147 |               </div>
148 |             </div>
149 |             <div class="w_right w_20">
150 |               <span>123k</span>
151 |             </div>
152 |             <div class="clearfix"></div>
153 |           </div>
154 | 
155 |           <div class="widget_summary">
156 |             <div class="w_left w_25">
157 |               <span>0.1.5.3</span>
158 |             </div>
159 |             <div class="w_center w_55">
160 |               <div class="progress">
161 |                 <div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
162 |                   <span class="sr-only">60% Complete</span>
163 |                 </div>
164 |               </div>
165 |             </div>
166 |             <div class="w_right w_20">
167 |               <span>53k</span>
168 |             </div>
169 |             <div class="clearfix"></div>
170 |           </div>
171 |           <div class="widget_summary">
172 |             <div class="w_left w_25">
173 |               <span>0.1.5.4</span>
174 |             </div>
175 |             <div class="w_center w_55">
176 |               <div class="progress">
177 |                 <div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
178 |                   <span class="sr-only">60% Complete</span>
179 |                 </div>
180 |               </div>
181 |             </div>
182 |             <div class="w_right w_20">
183 |               <span>23k</span>
184 |             </div>
185 |             <div class="clearfix"></div>
186 |           </div>
187 |           <div class="widget_summary">
188 |             <div class="w_left w_25">
189 |               <span>0.1.5.5</span>
190 |             </div>
191 |             <div class="w_center w_55">
192 |               <div class="progress">
193 |                 <div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
194 |                   <span class="sr-only">60% Complete</span>
195 |                 </div>
196 |               </div>
197 |             </div>
198 |             <div class="w_right w_20">
199 |               <span>3k</span>
200 |             </div>
201 |             <div class="clearfix"></div>
202 |           </div>
203 |           <div class="widget_summary">
204 |             <div class="w_left w_25">
205 |               <span>0.1.5.6</span>
206 |             </div>
207 |             <div class="w_center w_55">
208 |               <div class="progress">
209 |                 <div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
210 |                   <span class="sr-only">60% Complete</span>
211 |                 </div>
212 |               </div>
213 |             </div>
214 |             <div class="w_right w_20">
215 |               <span>1k</span>
216 |             </div>
217 |             <div class="clearfix"></div>
218 |           </div>
219 | 
220 |         </div>
221 |       </div>
222 |     </div>
223 | 
224 |     <div class="col-md-4 col-sm-4 col-xs-12">
225 |       <div class="x_panel tile fixed_height_320 overflow_hidden">
226 |         <div class="x_title">
227 |           <h2>Device Usage</h2>
228 |           <ul class="nav navbar-right panel_toolbox">
229 |             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
230 |             </li>
231 |             <li class="dropdown">
232 |               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
233 |               <ul class="dropdown-menu" role="menu">
234 |                 <li><a href="#">Settings 1</a>
235 |                 </li>
236 |                 <li><a href="#">Settings 2</a>
237 |                 </li>
238 |               </ul>
239 |             </li>
240 |             <li><a class="close-link"><i class="fa fa-close"></i></a>
241 |             </li>
242 |           </ul>
243 |           <div class="clearfix"></div>
244 |         </div>
245 |         <div class="x_content">
246 |           <table class="" style="width:100%">
247 |             <tr>
248 |               <th style="width:37%;">
249 |                 <p>Top 5</p>
250 |               </th>
251 |               <th>
252 |                 <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
253 |                   <p class="">Device</p>
254 |                 </div>
255 |                 <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
256 |                   <p class="">Progress</p>
257 |                 </div>
258 |               </th>
259 |             </tr>
260 |             <tr>
261 |               <td>
262 |                 <canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
263 |               </td>
264 |               <td>
265 |                 <table class="tile_info">
266 |                   <tr>
267 |                     <td>
268 |                       <p><i class="fa fa-square blue"></i>IOS </p>
269 |                     </td>
270 |                     <td>30%</td>
271 |                   </tr>
272 |                   <tr>
273 |                     <td>
274 |                       <p><i class="fa fa-square green"></i>Android </p>
275 |                     </td>
276 |                     <td>10%</td>
277 |                   </tr>
278 |                   <tr>
279 |                     <td>
280 |                       <p><i class="fa fa-square purple"></i>Blackberry </p>
281 |                     </td>
282 |                     <td>20%</td>
283 |                   </tr>
284 |                   <tr>
285 |                     <td>
286 |                       <p><i class="fa fa-square aero"></i>Symbian </p>
287 |                     </td>
288 |                     <td>15%</td>
289 |                   </tr>
290 |                   <tr>
291 |                     <td>
292 |                       <p><i class="fa fa-square red"></i>Others </p>
293 |                     </td>
294 |                     <td>30%</td>
295 |                   </tr>
296 |                 </table>
297 |               </td>
298 |             </tr>
299 |           </table>
300 |         </div>
301 |       </div>
302 |     </div>
303 | 
304 | 
305 |     <div class="col-md-4 col-sm-4 col-xs-12">
306 |       <div class="x_panel tile fixed_height_320">
307 |         <div class="x_title">
308 |           <h2>Quick Settings</h2>
309 |           <ul class="nav navbar-right panel_toolbox">
310 |             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
311 |             </li>
312 |             <li class="dropdown">
313 |               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
314 |               <ul class="dropdown-menu" role="menu">
315 |                 <li><a href="#">Settings 1</a>
316 |                 </li>
317 |                 <li><a href="#">Settings 2</a>
318 |                 </li>
319 |               </ul>
320 |             </li>
321 |             <li><a class="close-link"><i class="fa fa-close"></i></a>
322 |             </li>
323 |           </ul>
324 |           <div class="clearfix"></div>
325 |         </div>
326 |         <div class="x_content">
327 |           <div class="dashboard-widget-content">
328 |             <ul class="quick-list">
329 |               <li><i class="fa fa-calendar-o"></i><a href="#">Settings</a>
330 |               </li>
331 |               <li><i class="fa fa-bars"></i><a href="#">Subscription</a>
332 |               </li>
333 |               <li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li>
334 |               <li><i class="fa fa-line-chart"></i><a href="#">Achievements</a>
335 |               </li>
336 |               <li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li>
337 |               <li><i class="fa fa-line-chart"></i><a href="#">Achievements</a>
338 |               </li>
339 |               <li><i class="fa fa-area-chart"></i><a href="#">Logout</a>
340 |               </li>
341 |             </ul>
342 | 
343 |             <div class="sidebar-widget">
344 |               <h4>Profile Completion</h4>
345 |               <canvas width="150" height="80" id="foo" class="" style="width: 160px; height: 100px;"></canvas>
346 |               <div class="goal-wrapper">
347 |                 <span class="gauge-value pull-left">$</span>
348 |                 <span id="gauge-text" class="gauge-value pull-left">3,200</span>
349 |                 <span id="goal-text" class="goal-value pull-right">$5,000</span>
350 |               </div>
351 |             </div>
352 |           </div>
353 |         </div>
354 |       </div>
355 |     </div>
356 | 
357 |   </div>
358 | 
359 | 
360 |   <div class="row">
361 |     <div class="col-md-4 col-sm-4 col-xs-12">
362 |       <div class="x_panel">
363 |         <div class="x_title">
364 |           <h2>Recent Activities <small>Sessions</small></h2>
365 |           <ul class="nav navbar-right panel_toolbox">
366 |             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
367 |             </li>
368 |             <li class="dropdown">
369 |               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
370 |               <ul class="dropdown-menu" role="menu">
371 |                 <li><a href="#">Settings 1</a>
372 |                 </li>
373 |                 <li><a href="#">Settings 2</a>
374 |                 </li>
375 |               </ul>
376 |             </li>
377 |             <li><a class="close-link"><i class="fa fa-close"></i></a>
378 |             </li>
379 |           </ul>
380 |           <div class="clearfix"></div>
381 |         </div>
382 |         <div class="x_content">
383 |           <div class="dashboard-widget-content">
384 | 
385 |             <ul class="list-unstyled timeline widget">
386 |               <li>
387 |                 <div class="block">
388 |                   <div class="block_content">
389 |                     <h2 class="title">
390 |                                       <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
391 |                                   </h2>
392 |                     <div class="byline">
393 |                       <span>13 hours ago</span> by <a>Jane Smith</a>
394 |                     </div>
395 |                     <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
396 |                     </p>
397 |                   </div>
398 |                 </div>
399 |               </li>
400 |               <li>
401 |                 <div class="block">
402 |                   <div class="block_content">
403 |                     <h2 class="title">
404 |                                       <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
405 |                                   </h2>
406 |                     <div class="byline">
407 |                       <span>13 hours ago</span> by <a>Jane Smith</a>
408 |                     </div>
409 |                     <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
410 |                     </p>
411 |                   </div>
412 |                 </div>
413 |               </li>
414 |               <li>
415 |                 <div class="block">
416 |                   <div class="block_content">
417 |                     <h2 class="title">
418 |                                       <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
419 |                                   </h2>
420 |                     <div class="byline">
421 |                       <span>13 hours ago</span> by <a>Jane Smith</a>
422 |                     </div>
423 |                     <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
424 |                     </p>
425 |                   </div>
426 |                 </div>
427 |               </li>
428 |               <li>
429 |                 <div class="block">
430 |                   <div class="block_content">
431 |                     <h2 class="title">
432 |                                       <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
433 |                                   </h2>
434 |                     <div class="byline">
435 |                       <span>13 hours ago</span> by <a>Jane Smith</a>
436 |                     </div>
437 |                     <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
438 |                     </p>
439 |                   </div>
440 |                 </div>
441 |               </li>
442 |             </ul>
443 |           </div>
444 |         </div>
445 |       </div>
446 |     </div>
447 | 
448 | 
449 |     <div class="col-md-8 col-sm-8 col-xs-12">
450 | 
451 | 
452 | 
453 |       <div class="row">
454 | 
455 |         <div class="col-md-12 col-sm-12 col-xs-12">
456 |           <div class="x_panel">
457 |             <div class="x_title">
458 |               <h2>Visitors location <small>geo-presentation</small></h2>
459 |               <ul class="nav navbar-right panel_toolbox">
460 |                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
461 |                 </li>
462 |                 <li class="dropdown">
463 |                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
464 |                   <ul class="dropdown-menu" role="menu">
465 |                     <li><a href="#">Settings 1</a>
466 |                     </li>
467 |                     <li><a href="#">Settings 2</a>
468 |                     </li>
469 |                   </ul>
470 |                 </li>
471 |                 <li><a class="close-link"><i class="fa fa-close"></i></a>
472 |                 </li>
473 |               </ul>
474 |               <div class="clearfix"></div>
475 |             </div>
476 |             <div class="x_content">
477 |               <div class="dashboard-widget-content">
478 |                 <div class="col-md-4 hidden-small">
479 |                   <h2 class="line_30">125.7k Views from 60 countries</h2>
480 | 
481 |                   <table class="countries_list">
482 |                     <tbody>
483 |                       <tr>
484 |                         <td>United States</td>
485 |                         <td class="fs15 fw700 text-right">33%</td>
486 |                       </tr>
487 |                       <tr>
488 |                         <td>France</td>
489 |                         <td class="fs15 fw700 text-right">27%</td>
490 |                       </tr>
491 |                       <tr>
492 |                         <td>Germany</td>
493 |                         <td class="fs15 fw700 text-right">16%</td>
494 |                       </tr>
495 |                       <tr>
496 |                         <td>Spain</td>
497 |                         <td class="fs15 fw700 text-right">11%</td>
498 |                       </tr>
499 |                       <tr>
500 |                         <td>Britain</td>
501 |                         <td class="fs15 fw700 text-right">10%</td>
502 |                       </tr>
503 |                     </tbody>
504 |                   </table>
505 |                 </div>
506 |                 <div id="world-map-gdp" class="col-md-8 col-sm-12 col-xs-12" style="height:230px;"></div>
507 |               </div>
508 |             </div>
509 |           </div>
510 |         </div>
511 | 
512 |       </div>
513 |       <div class="row">
514 | 
515 | 
516 |         <!-- Start to do list -->
517 |         <div class="col-md-6 col-sm-6 col-xs-12">
518 |           <div class="x_panel">
519 |             <div class="x_title">
520 |               <h2>To Do List <small>Sample tasks</small></h2>
521 |               <ul class="nav navbar-right panel_toolbox">
522 |                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
523 |                 </li>
524 |                 <li class="dropdown">
525 |                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
526 |                   <ul class="dropdown-menu" role="menu">
527 |                     <li><a href="#">Settings 1</a>
528 |                     </li>
529 |                     <li><a href="#">Settings 2</a>
530 |                     </li>
531 |                   </ul>
532 |                 </li>
533 |                 <li><a class="close-link"><i class="fa fa-close"></i></a>
534 |                 </li>
535 |               </ul>
536 |               <div class="clearfix"></div>
537 |             </div>
538 |             <div class="x_content">
539 | 
540 |               <div class="">
541 |                 <ul class="to_do">
542 |                   <li>
543 |                     <p>
544 |                       <input type="checkbox" class="flat"> Schedule meeting with new client </p>
545 |                   </li>
546 |                   <li>
547 |                     <p>
548 |                       <input type="checkbox" class="flat"> Create email address for new intern</p>
549 |                   </li>
550 |                   <li>
551 |                     <p>
552 |                       <input type="checkbox" class="flat"> Have IT fix the network printer</p>
553 |                   </li>
554 |                   <li>
555 |                     <p>
556 |                       <input type="checkbox" class="flat"> Copy backups to offsite location</p>
557 |                   </li>
558 |                   <li>
559 |                     <p>
560 |                       <input type="checkbox" class="flat"> Food truck fixie locavors mcsweeney</p>
561 |                   </li>
562 |                   <li>
563 |                     <p>
564 |                       <input type="checkbox" class="flat"> Food truck fixie locavors mcsweeney</p>
565 |                   </li>
566 |                   <li>
567 |                     <p>
568 |                       <input type="checkbox" class="flat"> Create email address for new intern</p>
569 |                   </li>
570 |                   <li>
571 |                     <p>
572 |                       <input type="checkbox" class="flat"> Have IT fix the network printer</p>
573 |                   </li>
574 |                   <li>
575 |                     <p>
576 |                       <input type="checkbox" class="flat"> Copy backups to offsite location</p>
577 |                   </li>
578 |                 </ul>
579 |               </div>
580 |             </div>
581 |           </div>
582 |         </div>
583 |         <!-- End to do list -->
584 |         
585 |         <!-- start of weather widget -->
586 |         <div class="col-md-6 col-sm-6 col-xs-12">
587 |           <div class="x_panel">
588 |             <div class="x_title">
589 |               <h2>Daily active users <small>Sessions</small></h2>
590 |               <ul class="nav navbar-right panel_toolbox">
591 |                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
592 |                 </li>
593 |                 <li class="dropdown">
594 |                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
595 |                   <ul class="dropdown-menu" role="menu">
596 |                     <li><a href="#">Settings 1</a>
597 |                     </li>
598 |                     <li><a href="#">Settings 2</a>
599 |                     </li>
600 |                   </ul>
601 |                 </li>
602 |                 <li><a class="close-link"><i class="fa fa-close"></i></a>
603 |                 </li>
604 |               </ul>
605 |               <div class="clearfix"></div>
606 |             </div>
607 |             <div class="x_content">
608 |               <div class="row">
609 |                 <div class="col-sm-12">
610 |                   <div class="temperature"><b>Monday</b>, 07:30 AM
611 |                     <span>F</span>
612 |                     <span><b>C</b></span>
613 |                   </div>
614 |                 </div>
615 |               </div>
616 |               <div class="row">
617 |                 <div class="col-sm-4">
618 |                   <div class="weather-icon">
619 |                     <canvas height="84" width="84" id="partly-cloudy-day"></canvas>
620 |                   </div>
621 |                 </div>
622 |                 <div class="col-sm-8">
623 |                   <div class="weather-text">
624 |                     <h2>Texas <br><i>Partly Cloudy Day</i></h2>
625 |                   </div>
626 |                 </div>
627 |               </div>
628 |               <div class="col-sm-12">
629 |                 <div class="weather-text pull-right">
630 |                   <h3 class="degrees">23</h3>
631 |                 </div>
632 |               </div>
633 | 
634 |               <div class="clearfix"></div>
635 | 
636 |               <div class="row weather-days">
637 |                 <div class="col-sm-2">
638 |                   <div class="daily-weather">
639 |                     <h2 class="day">Mon</h2>
640 |                     <h3 class="degrees">25</h3>
641 |                     <canvas id="clear-day" width="32" height="32"></canvas>
642 |                     <h5>15 <i>km/h</i></h5>
643 |                   </div>
644 |                 </div>
645 |                 <div class="col-sm-2">
646 |                   <div class="daily-weather">
647 |                     <h2 class="day">Tue</h2>
648 |                     <h3 class="degrees">25</h3>
649 |                     <canvas height="32" width="32" id="rain"></canvas>
650 |                     <h5>12 <i>km/h</i></h5>
651 |                   </div>
652 |                 </div>
653 |                 <div class="col-sm-2">
654 |                   <div class="daily-weather">
655 |                     <h2 class="day">Wed</h2>
656 |                     <h3 class="degrees">27</h3>
657 |                     <canvas height="32" width="32" id="snow"></canvas>
658 |                     <h5>14 <i>km/h</i></h5>
659 |                   </div>
660 |                 </div>
661 |                 <div class="col-sm-2">
662 |                   <div class="daily-weather">
663 |                     <h2 class="day">Thu</h2>
664 |                     <h3 class="degrees">28</h3>
665 |                     <canvas height="32" width="32" id="sleet"></canvas>
666 |                     <h5>15 <i>km/h</i></h5>
667 |                   </div>
668 |                 </div>
669 |                 <div class="col-sm-2">
670 |                   <div class="daily-weather">
671 |                     <h2 class="day">Fri</h2>
672 |                     <h3 class="degrees">28</h3>
673 |                     <canvas height="32" width="32" id="wind"></canvas>
674 |                     <h5>11 <i>km/h</i></h5>
675 |                   </div>
676 |                 </div>
677 |                 <div class="col-sm-2">
678 |                   <div class="daily-weather">
679 |                     <h2 class="day">Sat</h2>
680 |                     <h3 class="degrees">26</h3>
681 |                     <canvas height="32" width="32" id="cloudy"></canvas>
682 |                     <h5>10 <i>km/h</i></h5>
683 |                   </div>
684 |                 </div>
685 |                 <div class="clearfix"></div>
686 |               </div>
687 |             </div>
688 |           </div>
689 | 
690 |         </div>
691 |         <!-- end of weather widget -->
692 |       </div>
693 |     </div>
694 |   </div>
695 | </div>
696 | <!-- /page content -->


--------------------------------------------------------------------------------
/src/app/content/content.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { ContentComponent } from './content.component';
 7 | 
 8 | describe('ContentComponent', () => {
 9 |   let component: ContentComponent;
10 |   let fixture: ComponentFixture<ContentComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ ContentComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(ContentComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/content/content.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import * as jQuery from 'jquery';
 3 | 
 4 | @Component({
 5 |   selector: 'content',
 6 |   //styleUrls: ["../../styles.css"],
 7 |   templateUrl: './content.component.html'
 8 | })
 9 | export class ContentComponent {
10 |   // Set our default values
11 |   localState = { value: '' };
12 | 
13 |   // TypeScript public modifiers
14 |   constructor() {}
15 | 
16 |   ngOnInit() {
17 |     console.log('hello `Content` component');
18 |   }
19 | 
20 |   submitState(value: string) {
21 |     console.log('submitState', value);
22 |     this.localState.value = '';
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/app/content/network-activities/network-activities.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/app/content/network-activities/network-activities.component.css


--------------------------------------------------------------------------------
/src/app/content/network-activities/network-activities.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |   network-activities works!
3 | </p>
4 | 


--------------------------------------------------------------------------------
/src/app/content/network-activities/network-activities.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { NetworkActivitiesComponent } from './network-activities.component';
 7 | 
 8 | describe('NetworkActivitiesComponent', () => {
 9 |   let component: NetworkActivitiesComponent;
10 |   let fixture: ComponentFixture<NetworkActivitiesComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ NetworkActivitiesComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(NetworkActivitiesComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/content/network-activities/network-activities.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, ElementRef, Inject } from '@angular/core';
  2 | declare var jquery: any;
  3 | declare var $: any;
  4 | 
  5 | @Component({
  6 |   selector: 'network-activities',
  7 |   template: `
  8 |     <div
  9 |       id="canvas_dahs"
 10 |       class="demo-placeholder"
 11 |       style="width: 100%; height:270px;"
 12 |     ></div>
 13 |   `
 14 | })
 15 | export class NetworkActivitiesComponent {
 16 |   private options;
 17 |   private width = '100%';
 18 |   private height = 220;
 19 |   private data1;
 20 |   private data2;
 21 | 
 22 |   constructor(public el: ElementRef) {
 23 |     this.data1 = [
 24 |       [this.gd(2012, 1, 1), 17],
 25 |       [this.gd(2012, 1, 2), 74],
 26 |       [this.gd(2012, 1, 3), 6],
 27 |       [this.gd(2012, 1, 4), 39],
 28 |       [this.gd(2012, 1, 5), 20],
 29 |       [this.gd(2012, 1, 6), 85],
 30 |       [this.gd(2012, 1, 7), 7]
 31 |     ];
 32 |     this.data2 = [
 33 |       [this.gd(2012, 1, 1), 82],
 34 |       [this.gd(2012, 1, 2), 23],
 35 |       [this.gd(2012, 1, 3), 66],
 36 |       [this.gd(2012, 1, 4), 9],
 37 |       [this.gd(2012, 1, 5), 119],
 38 |       [this.gd(2012, 1, 6), 6],
 39 |       [this.gd(2012, 1, 7), 9]
 40 |     ];
 41 |     this.options = {
 42 |       series: {
 43 |         lines: {
 44 |           show: false,
 45 |           fill: true
 46 |         },
 47 |         splines: {
 48 |           show: true,
 49 |           tension: 0.4,
 50 |           lineWidth: 1,
 51 |           fill: 0.4
 52 |         },
 53 |         points: {
 54 |           radius: 0,
 55 |           show: true
 56 |         },
 57 |         shadowSize: 2
 58 |       },
 59 |       grid: {
 60 |         verticalLines: true,
 61 |         hoverable: true,
 62 |         clickable: true,
 63 |         tickColor: '#d5d5d5',
 64 |         borderWidth: 1,
 65 |         color: '#fff'
 66 |       },
 67 |       colors: ['rgba(38, 185, 154, 0.38)', 'rgba(3, 88, 106, 0.38)'],
 68 |       xaxis: {
 69 |         tickColor: 'rgba(51, 51, 51, 0.06)',
 70 |         mode: 'time',
 71 |         tickSize: [1, 'day'],
 72 |         //tickLength: 10,
 73 |         axisLabel: 'Date',
 74 |         axisLabelUseCanvas: true,
 75 |         axisLabelFontSizePixels: 12,
 76 |         axisLabelFontFamily: 'Verdana, Arial',
 77 |         axisLabelPadding: 10
 78 |       },
 79 |       yaxis: {
 80 |         ticks: 8,
 81 |         tickColor: 'rgba(51, 51, 51, 0.06)'
 82 |       },
 83 |       tooltip: false
 84 |     };
 85 |   } //end of constructor
 86 | 
 87 |   ngAfterViewInit(): void {
 88 |     this.plot();
 89 |   }
 90 | 
 91 |   plot() {
 92 |     let plotArea = $(this.el.nativeElement).find('div');
 93 |     $.plot(plotArea, [this.data1, this.data2], this.options);
 94 |   }
 95 | 
 96 |   private gd(year, month, day) {
 97 |     return new Date(year, month - 1, day).getTime();
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/app/global/footer/footer.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/app/global/footer/footer.component.css


--------------------------------------------------------------------------------
/src/app/global/footer/footer.component.html:
--------------------------------------------------------------------------------
 1 | <!-- footer content -->
 2 | <footer>
 3 |   <div class="pull-right">
 4 |     Gentelella - Bootstrap Admin Template by
 5 |     <a href="https://colorlib.com">Colorlib</a>
 6 |   </div>
 7 |   <div class="clearfix"></div>
 8 | </footer>
 9 | <!-- /footer content -->
10 | 


--------------------------------------------------------------------------------
/src/app/global/footer/footer.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { FooterComponent } from './footer.component';
 7 | 
 8 | describe('FooterComponent', () => {
 9 |   let component: FooterComponent;
10 |   let fixture: ComponentFixture<FooterComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ FooterComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(FooterComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/global/footer/footer.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   selector: "custom-footer", // <home></home>
 5 |   // We need to tell Angular's Dependency Injection which providers are in our app.
 6 |   providers: [],
 7 |   // Every Angular template is first compiled by the browser before Angular runs it's compiler
 8 |   templateUrl: "./footer.component.html"
 9 | })
10 | export class Footer {
11 |   // TypeScript public modifiers
12 |   constructor() {}
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app/global/no-content/no-content.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/app/global/no-content/no-content.component.css


--------------------------------------------------------------------------------
/src/app/global/no-content/no-content.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { NoContentComponent } from './no-content.component';
 7 | 
 8 | describe('NoContentComponent', () => {
 9 |   let component: NoContentComponent;
10 |   let fixture: ComponentFixture<NoContentComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ NoContentComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(NoContentComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/global/no-content/no-content.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   selector: "no-content",
 5 |   template: `
 6 |     <div>
 7 |       <h1>404: page missing</h1>
 8 |     </div>
 9 |   `
10 | })
11 | export class NoContentComponent {}
12 | 


--------------------------------------------------------------------------------
/src/app/menu/sidebar/sidebar.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/app/menu/sidebar/sidebar.component.css


--------------------------------------------------------------------------------
/src/app/menu/sidebar/sidebar.component.html:
--------------------------------------------------------------------------------
  1 | <div class="col-md-3 left_col">
  2 |   <div class="left_col scroll-view">
  3 |     <div class="navbar nav_title" style="border: 0;">
  4 |       <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentellela Alela!</span></a>
  5 |     </div>
  6 |     <div class="clearfix"></div>
  7 | 
  8 |     <!-- menu profile quick info -->
  9 |     <div class="profile">
 10 |       <div class="profile_pic">
 11 |         <img src="assets/img.jpg" alt="..." class="img-circle profile_img" />
 12 |       </div>
 13 |       <div class="profile_info">
 14 |         <span>Welcome,</span>
 15 |         <h2>John Doe</h2>
 16 |       </div>
 17 |     </div>
 18 |     <!-- /menu profile quick info -->
 19 | 
 20 |     <br />
 21 | 
 22 |     <!-- sidebar menu -->
 23 |     <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
 24 |       <div class="menu_section">
 25 |         <h3>General</h3>
 26 |         <ul class="nav side-menu">
 27 |           <li>
 28 |             <a id="homeli" (click)="anchorClicked($event)"
 29 |               ><i class="fa fa-home"></i> Home <span id="homechevron" class="fa fa-chevron-down"></span
 30 |             ></a>
 31 |             <ul class="nav child_menu">
 32 |               <li><a routerLink="" routerLinkActive="active">Dashboard</a></li>
 33 |               <li><a href="index2.html">Dashboard2</a></li>
 34 |               <li><a href="index3.html">Dashboard3</a></li>
 35 |             </ul>
 36 |           </li>
 37 |           <li>
 38 |             <a id="formsli" (click)="anchorClicked($event)"
 39 |               ><i class="fa fa-edit"></i> Forms <span id="formschevron" class="fa fa-chevron-down"></span
 40 |             ></a>
 41 |             <ul class="nav child_menu">
 42 |               <li><a href="form.html">General Form</a></li>
 43 |               <li><a href="form_advanced.html">Advanced Components</a></li>
 44 |               <li><a href="form_validation.html">Form Validation</a></li>
 45 |               <li><a href="form_wizards.html">Form Wizard</a></li>
 46 |               <li><a href="form_upload.html">Form Upload</a></li>
 47 |               <li><a href="form_buttons.html">Form Buttons</a></li>
 48 |             </ul>
 49 |           </li>
 50 |           <li>
 51 |             <a id="uielementsli" (click)="anchorClicked($event)"
 52 |               ><i class="fa fa-desktop"></i> UI Elements <span id="uielementschevron" class="fa fa-chevron-down"></span
 53 |             ></a>
 54 |             <ul class="nav child_menu">
 55 |               <li><a href="general_elements.html">General Elements</a></li>
 56 |               <li><a href="media_gallery.html">Media Gallery</a></li>
 57 |               <li><a href="typography.html">Typography</a></li>
 58 |               <li><a href="icons.html">Icons</a></li>
 59 |               <li><a href="glyphicons.html">Glyphicons</a></li>
 60 |               <li><a href="widgets.html">Widgets</a></li>
 61 |               <li><a href="invoice.html">Invoice</a></li>
 62 |               <li><a routerLink="/inbox" routerLinkActive="active">Inbox</a></li>
 63 |               <li><a href="calendar.html">Calendar</a></li>
 64 |             </ul>
 65 |           </li>
 66 |           <li>
 67 |             <a id="tablesli" (click)="anchorClicked($event)"
 68 |               ><i class="fa fa-table"></i> Tables <span id="tableschevron" class="fa fa-chevron-down"></span
 69 |             ></a>
 70 |             <ul class="nav child_menu">
 71 |               <li><a href="tables.html">Tables</a></li>
 72 |               <li><a href="tables_dynamic.html">Table Dynamic</a></li>
 73 |             </ul>
 74 |           </li>
 75 |           <li>
 76 |             <a id="datali" (click)="anchorClicked($event)"
 77 |               ><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span
 78 |             ></a>
 79 |             <ul class="nav child_menu">
 80 |               <li><a href="chartjs.html">Chart JS</a></li>
 81 |               <li><a href="chartjs2.html">Chart JS2</a></li>
 82 |               <li><a href="morisjs.html">Moris JS</a></li>
 83 |               <li><a href="echarts.html">ECharts</a></li>
 84 |               <li><a href="other_charts.html">Other Charts</a></li>
 85 |             </ul>
 86 |           </li>
 87 |           <li>
 88 |             <a id="layoutsli" (click)="anchorClicked($event)"
 89 |               ><i class="fa fa-clone"></i>Layouts <span id="layoutschevron" class="fa fa-chevron-down"></span
 90 |             ></a>
 91 |             <ul class="nav child_menu">
 92 |               <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
 93 |               <li><a href="fixed_footer.html">Fixed Footer</a></li>
 94 |             </ul>
 95 |           </li>
 96 |         </ul>
 97 |       </div>
 98 |       <div class="menu_section">
 99 |         <h3>Live On</h3>
100 |         <ul class="nav side-menu">
101 |           <li>
102 |             <a id="additionalli" (click)="anchorClicked($event)"
103 |               ><i class="fa fa-bug"></i> Additional Pages <span id="additionalchevron" class="fa fa-chevron-down"></span
104 |             ></a>
105 |             <ul class="nav child_menu">
106 |               <li><a href="e_commerce.html">E-commerce</a></li>
107 |               <li><a href="projects.html">Projects</a></li>
108 |               <li><a href="project_detail.html">Project Detail</a></li>
109 |               <li><a href="contacts.html">Contacts</a></li>
110 |               <li><a href="profile.html">Profile</a></li>
111 |             </ul>
112 |           </li>
113 |           <li>
114 |             <a id="extrasli" (click)="anchorClicked($event)"
115 |               ><i class="fa fa-windows"></i> Extras <span id="extraschevron" class="fa fa-chevron-down"></span
116 |             ></a>
117 |             <ul class="nav child_menu">
118 |               <li><a href="page_403.html">403 Error</a></li>
119 |               <li><a href="page_404.html">404 Error</a></li>
120 |               <li><a href="page_500.html">500 Error</a></li>
121 |               <li><a href="plain_page.html">Plain Page</a></li>
122 |               <li><a href="login.html">Login Page</a></li>
123 |               <li><a href="pricing_tables.html">Pricing Tables</a></li>
124 |             </ul>
125 |           </li>
126 |           <li>
127 |             <a id="multilevelli" (click)="anchorClicked($event)"
128 |               ><i class="fa fa-sitemap"></i> Multilevel Menu <span id="multilevelchevron" class="fa fa-chevron-down"></span
129 |             ></a>
130 |             <ul class="nav child_menu">
131 |               <li><a href="#level1_1">Level One</a></li>
132 |               <li>
133 |                 <a>Level One<span class="fa fa-chevron-down"></span></a>
134 |                 <ul class="nav child_menu">
135 |                   <li class="sub_menu"><a href="level2.html">Level Two</a></li>
136 |                   <li><a href="#level2_1">Level Two</a></li>
137 |                   <li><a href="#level2_2">Level Two</a></li>
138 |                 </ul>
139 |               </li>
140 |               <li><a href="#level1_2">Level One</a></li>
141 |             </ul>
142 |           </li>
143 |           <li>
144 |             <a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
145 |           </li>
146 |         </ul>
147 |       </div>
148 |     </div>
149 |     <!-- /sidebar menu -->
150 |   </div>
151 | </div>
152 | 


--------------------------------------------------------------------------------
/src/app/menu/sidebar/sidebar.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { SidebarComponent } from './sidebar.component';
 7 | 
 8 | describe('SidebarComponent', () => {
 9 |   let component: SidebarComponent;
10 |   let fixture: ComponentFixture<SidebarComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ SidebarComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(SidebarComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/menu/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component } from "@angular/core";
  2 | import * as $ from "jquery";
  3 | 
  4 | @Component({
  5 |   selector: "side-bar",
  6 |   // styleUrls: ["../../../styles.css"],
  7 |   templateUrl: "./sidebar.component.html"
  8 | })
  9 | export class SidebarComponent {
 10 |   private $BODY;
 11 |   private $MENU_TOGGLE;
 12 |   private $SIDEBAR_MENU;
 13 |   private $SIDEBAR_FOOTER;
 14 |   private $LEFT_COL;
 15 |   private $RIGHT_COL;
 16 |   private $NAV_MENU;
 17 |   private $FOOTER;
 18 | 
 19 |   constructor() {}
 20 | 
 21 |   ngAfterViewInit(): void {
 22 |     // this.plot();
 23 |   }
 24 | 
 25 |   anchorClicked(event: MouseEvent) {
 26 |     let target = event.srcElement.id;
 27 | 
 28 |     let $li = $("#" + target.replace("chevron", "li")).parent();
 29 | 
 30 |     if ($li.is(".active")) {
 31 |       $li.removeClass("active active-sm");
 32 |       $("ul:first", $li).slideUp(function() {});
 33 |     } else {
 34 |       // prevent closing menu if we are on child menu
 35 |       if (!$li.parent().is(".child_menu")) {
 36 |         $("#sidebar-menu")
 37 |           .find("li")
 38 |           .removeClass("active active-sm");
 39 |         $("#sidebar-menu")
 40 |           .find("li ul")
 41 |           .slideUp();
 42 |       }
 43 | 
 44 |       $li.addClass("active");
 45 | 
 46 |       $("ul:first", $li).slideDown(function() {});
 47 |     }
 48 |   }
 49 | 
 50 |   plot() {
 51 |     console.log("in sidebar");
 52 | 
 53 |     this.$BODY = $("body");
 54 |     this.$MENU_TOGGLE = $("#menu_toggle");
 55 |     this.$SIDEBAR_MENU = $("#sidebar-menu");
 56 |     this.$SIDEBAR_FOOTER = $(".sidebar-footer");
 57 |     this.$LEFT_COL = $(".left_col");
 58 |     this.$RIGHT_COL = $(".right_col");
 59 |     this.$NAV_MENU = $(".nav_menu");
 60 |     this.$FOOTER = $("footer");
 61 | 
 62 |     let $a = this.$SIDEBAR_MENU.find("a");
 63 |     this.$SIDEBAR_MENU.find("a").on("click", function(ev) {
 64 |       let $li = $(this).parent();
 65 | 
 66 |       if ($li.is(".active")) {
 67 |         $li.removeClass("active active-sm");
 68 |         $("ul:first", $li).slideUp(function() {
 69 |           this.setContentHeight();
 70 |         });
 71 |       } else {
 72 |         // prevent closing menu if we are on child menu
 73 |         if (!$li.parent().is(".child_menu")) {
 74 |           this.$SIDEBAR_MENU.find("li").removeClass("active active-sm");
 75 |           this.$SIDEBAR_MENU.find("li ul").slideUp();
 76 |         }
 77 | 
 78 |         $li.addClass("active");
 79 | 
 80 |         $("ul:first", $li).slideDown(function() {
 81 |           this.setContentHeight();
 82 |         });
 83 |       }
 84 |     });
 85 | 
 86 |     // toggle small or large menu
 87 |     this.$MENU_TOGGLE.on("click", function() {
 88 |       if (this.$BODY.hasClass("nav-md")) {
 89 |         this.$SIDEBAR_MENU.find("li.active ul").hide();
 90 |         this.$SIDEBAR_MENU
 91 |           .find("li.active")
 92 |           .addClass("active-sm")
 93 |           .removeClass("active");
 94 |       } else {
 95 |         this.$SIDEBAR_MENU.find("li.active-sm ul").show();
 96 |         this.$SIDEBAR_MENU
 97 |           .find("li.active-sm")
 98 |           .addClass("active")
 99 |           .removeClass("active-sm");
100 |       }
101 | 
102 |       this.$BODY.toggleClass("nav-md nav-sm");
103 | 
104 |       this.setContentHeight();
105 |     });
106 |   }
107 | 
108 |   setContentHeight() {
109 |     // reset height
110 |     this.$RIGHT_COL.css("min-height", $(window).height());
111 | 
112 |     const bodyHeight = this.$BODY.outerHeight();
113 |     const footerHeight = this.$BODY.hasClass("footer_fixed") ? -10 : this.$FOOTER.height();
114 |     const leftColHeight = this.$LEFT_COL.eq(1).height() + this.$SIDEBAR_FOOTER.height();
115 |     let contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;
116 | 
117 |     // normalize content
118 |     contentHeight -= this.$NAV_MENU.height() + footerHeight;
119 | 
120 |     this.$RIGHT_COL.css("min-height", contentHeight);
121 |   }
122 | }
123 | 


--------------------------------------------------------------------------------
/src/app/menu/top-nav-bar/top-nav-bar.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/app/menu/top-nav-bar/top-nav-bar.component.css


--------------------------------------------------------------------------------
/src/app/menu/top-nav-bar/top-nav-bar.component.html:
--------------------------------------------------------------------------------
 1 | <!-- top navigation -->
 2 | <div class="top_nav">
 3 |   <div class="nav_menu">
 4 |     <nav>
 5 |       <div class="nav toggle">
 6 |         <a id="menu_toggle" (click)="toggleClicked($event)"><i class="fa fa-bars"></i></a>
 7 |       </div>
 8 |       <ul class="nav navbar-nav navbar-right">
 9 |         <li class="">
10 |           <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
11 |             <img src="assets/img.jpg" alt="" />John Doe
12 |             <span class=" fa fa-angle-down"></span>
13 |           </a>
14 |           <ul class="dropdown-menu dropdown-usermenu pull-right">
15 |             <li><a href="javascript:;"> Profile</a></li>
16 |             <li>
17 |               <a href="javascript:;">
18 |                 <span class="badge bg-red pull-right">50%</span>
19 |                 <span>Settings</span>
20 |               </a>
21 |             </li>
22 |             <li><a href="javascript:;">Help</a></li>
23 |             <li>
24 |               <a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
25 |             </li>
26 |           </ul>
27 |         </li>
28 | 
29 |         <li role="presentation" class="dropdown">
30 |           <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
31 |             <i class="fa fa-envelope-o"></i>
32 |             <span class="badge bg-green">6</span>
33 |           </a>
34 |           <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
35 |             <li>
36 |               <a>
37 |                 <span class="image"><img src="assets/img.jpg" alt="Profile Image"/></span>
38 |                 <span>
39 |                   <span>John Smith</span>
40 |                   <span class="time">3 mins ago</span>
41 |                 </span>
42 |                 <span class="message">
43 |                   Film festivals used to be do-or-die moments for movie makers. They were where...
44 |                 </span>
45 |               </a>
46 |             </li>
47 |             <li>
48 |               <a>
49 |                 <span class="image"><img src="assets/img.jpg" alt="Profile Image"/></span>
50 |                 <span>
51 |                   <span>John Smith</span>
52 |                   <span class="time">3 mins ago</span>
53 |                 </span>
54 |                 <span class="message">
55 |                   Film festivals used to be do-or-die moments for movie makers. They were where...
56 |                 </span>
57 |               </a>
58 |             </li>
59 |             <li>
60 |               <a>
61 |                 <span class="image"><img src="assets/img.jpg" alt="Profile Image"/></span>
62 |                 <span>
63 |                   <span>John Smith</span>
64 |                   <span class="time">3 mins ago</span>
65 |                 </span>
66 |                 <span class="message">
67 |                   Film festivals used to be do-or-die moments for movie makers. They were where...
68 |                 </span>
69 |               </a>
70 |             </li>
71 |             <li>
72 |               <a>
73 |                 <span class="image"><img src="assets/img.jpg" alt="Profile Image"/></span>
74 |                 <span>
75 |                   <span>John Smith</span>
76 |                   <span class="time">3 mins ago</span>
77 |                 </span>
78 |                 <span class="message">
79 |                   Film festivals used to be do-or-die moments for movie makers. They were where...
80 |                 </span>
81 |               </a>
82 |             </li>
83 |             <li>
84 |               <div class="text-center">
85 |                 <a>
86 |                   <strong>See All Alerts</strong>
87 |                   <i class="fa fa-angle-right"></i>
88 |                 </a>
89 |               </div>
90 |             </li>
91 |           </ul>
92 |         </li>
93 |       </ul>
94 |     </nav>
95 |   </div>
96 | </div>
97 | <!-- /top navigation -->
98 | 


--------------------------------------------------------------------------------
/src/app/menu/top-nav-bar/top-nav-bar.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { TopNavBarComponent } from './top-nav-bar.component';
 7 | 
 8 | describe('TopNavBarComponent', () => {
 9 |   let component: TopNavBarComponent;
10 |   let fixture: ComponentFixture<TopNavBarComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ TopNavBarComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(TopNavBarComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/menu/top-nav-bar/top-nav-bar.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | import * as $ from "jquery";
 3 | 
 4 | @Component({
 5 |   selector: "topnav-bar", // <home></home>
 6 |   // We need to tell Angular's Dependency Injection which providers are in our app.
 7 |   providers: [],
 8 |   // Every Angular template is first compiled by the browser before Angular runs it's compiler
 9 |   templateUrl: "./top-nav-bar.component.html"
10 | })
11 | export class TopNavBarComponent {
12 |   // TypeScript public modifier
13 |   constructor() {}
14 | 
15 |   toggleClicked(event: MouseEvent) {
16 |     var target = event.srcElement.id;
17 |     var body = $("body");
18 |     var menu = $("#sidebar-menu");
19 | 
20 |     // toggle small or large menu
21 |     if (body.hasClass("nav-md")) {
22 |       menu.find("li.active ul").hide();
23 |       menu
24 |         .find("li.active")
25 |         .addClass("active-sm")
26 |         .removeClass("active");
27 |     } else {
28 |       menu.find("li.active-sm ul").show();
29 |       menu
30 |         .find("li.active-sm")
31 |         .addClass("active")
32 |         .removeClass("active-sm");
33 |     }
34 |     body.toggleClass("nav-md nav-sm");
35 |   }
36 | 
37 |   ngOnInit() {
38 |     console.log("hello `topnavbar` component");
39 |   }
40 | 
41 |   ngAfterViewInit() {}
42 | }
43 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/assets/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/assets/img.jpg


--------------------------------------------------------------------------------
/src/assets/jquery.flot.spline.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Flot plugin that provides spline interpolation for line graphs
  3 |  * author: Alex Bardas < alex.bardas@gmail.com >
  4 |  * modified by: Avi Kohn https://github.com/AMKohn
  5 |  * based on the spline interpolation described at:
  6 |  *     http://scaledinnovation.com/analytics/splines/aboutSplines.html
  7 |  *
  8 |  * Example usage: (add in plot options series object)
  9 |  *    for linespline:
 10 |  *      series: {
 11 |  *        ...
 12 |  *        lines: {
 13 |  *          show: false
 14 |  *        },
 15 |  *        splines: {
 16 |  *          show: true,
 17 |  *          tension: x, (float between 0 and 1, defaults to 0.5),
 18 |  *          lineWidth: y (number, defaults to 2),
 19 |  *          fill: z (float between 0 .. 1 or false, as in flot documentation)
 20 |  *        },
 21 |  *        ...
 22 |  *      }
 23 |  *    areaspline:
 24 |  *      series: {
 25 |  *        ...
 26 |  *        lines: {
 27 |  *          show: true,
 28 |  *          lineWidth: 0, (line drawing will not execute)
 29 |  *          fill: x, (float between 0 .. 1, as in flot documentation)
 30 |  *          ...
 31 |  *        },
 32 |  *        splines: {
 33 |  *          show: true,
 34 |  *          tension: 0.5 (float between 0 and 1)
 35 |  *        },
 36 |  *        ...
 37 |  *      }
 38 |  *
 39 |  */
 40 | 
 41 | (function($) {
 42 |   'use strict'
 43 | 
 44 |   /**
 45 |    * @param {Number} x0, y0, x1, y1: coordinates of the end (knot) points of the segment
 46 |    * @param {Number} x2, y2: the next knot (not connected, but needed to calculate p2)
 47 |    * @param {Number} tension: control how far the control points spread
 48 |    * @return {Array}: p1 -> control point, from x1 back toward x0
 49 |    *          p2 -> the next control point, returned to become the next segment's p1
 50 |    *
 51 |    * @api private
 52 |    */
 53 |   function getControlPoints(x0, y0, x1, y1, x2, y2, tension) {
 54 | 
 55 |     var pow = Math.pow,
 56 |       sqrt = Math.sqrt,
 57 |       d01, d12, fa, fb, p1x, p1y, p2x, p2y;
 58 | 
 59 |     //  Scaling factors: distances from this knot to the previous and following knots.
 60 |     d01 = sqrt(pow(x1 - x0, 2) + pow(y1 - y0, 2));
 61 |     d12 = sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2));
 62 | 
 63 |     fa = tension * d01 / (d01 + d12);
 64 |     fb = tension - fa;
 65 | 
 66 |     p1x = x1 + fa * (x0 - x2);
 67 |     p1y = y1 + fa * (y0 - y2);
 68 | 
 69 |     p2x = x1 - fb * (x0 - x2);
 70 |     p2y = y1 - fb * (y0 - y2);
 71 | 
 72 |     return [p1x, p1y, p2x, p2y];
 73 |   }
 74 | 
 75 |   var line = [];
 76 | 
 77 |   function drawLine(points, ctx, height, fill, seriesColor) {
 78 |     var c = $.color.parse(seriesColor);
 79 | 
 80 |     c.a = typeof fill == "number" ? fill : .3;
 81 |     c.normalize();
 82 |     c = c.toString();
 83 | 
 84 |     ctx.beginPath();
 85 |     ctx.moveTo(points[0][0], points[0][1]);
 86 | 
 87 |     var plength = points.length;
 88 | 
 89 |     for (var i = 0; i < plength; i++) {
 90 |       ctx[points[i][3]].apply(ctx, points[i][2]);
 91 |     }
 92 | 
 93 |     ctx.stroke();
 94 | 
 95 |     ctx.lineWidth = 0;
 96 |     ctx.lineTo(points[plength - 1][0], height);
 97 |     ctx.lineTo(points[0][0], height);
 98 | 
 99 |     ctx.closePath();
100 |     
101 |     if (fill !== false) {
102 |       ctx.fillStyle = c;
103 |       ctx.fill();
104 |     }
105 |   }
106 | 
107 |   /**
108 |    * @param {Object} ctx: canvas context
109 |    * @param {String} type: accepted strings: 'bezier' or 'quadratic' (defaults to quadratic)
110 |    * @param {Array} points: 2 points for which to draw the interpolation
111 |    * @param {Array} cpoints: control points for those segment points
112 |    *
113 |    * @api private
114 |    */
115 |   function queue(ctx, type, points, cpoints) {
116 |     if (type === void 0 || (type !== 'bezier' && type !== 'quadratic')) {
117 |       type = 'quadratic';
118 |     }
119 |     type = type + 'CurveTo';
120 | 
121 |     if (line.length == 0) line.push([points[0], points[1], cpoints.concat(points.slice(2)), type]);
122 |     else if (type == "quadraticCurveTo" && points.length == 2) {
123 |       cpoints = cpoints.slice(0, 2).concat(points);
124 | 
125 |       line.push([points[0], points[1], cpoints, type]);
126 |     }
127 |     else line.push([points[2], points[3], cpoints.concat(points.slice(2)), type]);
128 |   }
129 | 
130 |   /**
131 |    * @param {Object} plot
132 |    * @param {Object} ctx: canvas context
133 |    * @param {Object} series
134 |    *
135 |    * @api private
136 |    */
137 | 
138 |   function drawSpline(plot, ctx, series) {
139 |     // Not interested if spline is not requested
140 |     if (series.splines.show !== true) {
141 |       return;
142 |     }
143 | 
144 |     var cp = [],
145 |       // array of control points
146 |       tension = series.splines.tension || 0.5,
147 |       idx, x, y, points = series.datapoints.points,
148 |       ps = series.datapoints.pointsize,
149 |       plotOffset = plot.getPlotOffset(),
150 |       len = points.length,
151 |       pts = [];
152 | 
153 |     line = [];
154 | 
155 |     // Cannot display a linespline/areaspline if there are less than 3 points
156 |     if (len / ps < 4) {
157 |       $.extend(series.lines, series.splines);
158 |       return;
159 |     }
160 | 
161 |     for (idx = 0; idx < len; idx += ps) {
162 |       x = points[idx];
163 |       y = points[idx + 1];
164 |       if (x == null || x < series.xaxis.min || x > series.xaxis.max || y < series.yaxis.min || y > series.yaxis.max) {
165 |         continue;
166 |       }
167 | 
168 |       pts.push(series.xaxis.p2c(x) + plotOffset.left, series.yaxis.p2c(y) + plotOffset.top);
169 |     }
170 | 
171 |     len = pts.length;
172 | 
173 |     // Draw an open curve, not connected at the ends
174 |     for (idx = 0; idx < len - 2; idx += 2) {
175 |       cp = cp.concat(getControlPoints.apply(this, pts.slice(idx, idx + 6).concat([tension])));
176 |     }
177 | 
178 |     ctx.save();
179 |     ctx.strokeStyle = series.color;
180 |     ctx.lineWidth = series.splines.lineWidth;
181 | 
182 |     queue(ctx, 'quadratic', pts.slice(0, 4), cp.slice(0, 2));
183 | 
184 |     for (idx = 2; idx < len - 3; idx += 2) {
185 |       queue(ctx, 'bezier', pts.slice(idx, idx + 4), cp.slice(2 * idx - 2, 2 * idx + 2));
186 |     }
187 | 
188 |     queue(ctx, 'quadratic', pts.slice(len - 2, len), [cp[2 * len - 10], cp[2 * len - 9], pts[len - 4], pts[len - 3]]);
189 | 
190 |     drawLine(line, ctx, plot.height() + 10, series.splines.fill, series.color);
191 | 
192 |     ctx.restore();
193 |   }
194 | 
195 |   $.plot.plugins.push({
196 |     init: function(plot) {
197 |       plot.hooks.drawSeries.push(drawSpline);
198 |     },
199 |     options: {
200 |       series: {
201 |         splines: {
202 |           show: false,
203 |           lineWidth: 2,
204 |           tension: 0.5,
205 |           fill: false
206 |         }
207 |       }
208 |     },
209 |     name: 'spline',
210 |     version: '0.8.2'
211 |   });
212 | })(jQuery);
213 | 


--------------------------------------------------------------------------------
/src/assets/jquery.flot.spline.min.js:
--------------------------------------------------------------------------------
1 | !function(a){"use strict";function b(a,b,c,d,e,f,g){var j,k,l,m,n,o,p,q,h=Math.pow,i=Math.sqrt;return j=i(h(c-a,2)+h(d-b,2)),k=i(h(e-c,2)+h(f-d,2)),l=g*j/(j+k),m=g-l,n=c+l*(a-e),o=d+l*(b-f),p=c-m*(a-e),q=d-m*(b-f),[n,o,p,q]}function d(b,c,d,e,f){var g=a.color.parse(f);g.a="number"==typeof e?e:.3,g.normalize(),g=g.toString(),c.beginPath(),c.moveTo(b[0][0],b[0][1]);for(var h=b.length,i=0;h>i;i++)c[b[i][3]].apply(c,b[i][2]);c.stroke(),c.lineWidth=0,c.lineTo(b[h-1][0],d),c.lineTo(b[0][0],d),c.closePath(),e!==!1&&(c.fillStyle=g,c.fill())}function e(a,b,d,e){(void 0===b||"bezier"!==b&&"quadratic"!==b)&&(b="quadratic"),b+="CurveTo",0==c.length?c.push([d[0],d[1],e.concat(d.slice(2)),b]):"quadraticCurveTo"==b&&2==d.length?(e=e.slice(0,2).concat(d),c.push([d[0],d[1],e,b])):c.push([d[2],d[3],e.concat(d.slice(2)),b])}function f(f,g,h){if(h.splines.show===!0){var k,l,m,i=[],j=h.splines.tension||.5,n=h.datapoints.points,o=h.datapoints.pointsize,p=f.getPlotOffset(),q=n.length,r=[];if(c=[],4>q/o)return a.extend(h.lines,h.splines),void 0;for(k=0;q>k;k+=o)l=n[k],m=n[k+1],null==l||l<h.xaxis.min||l>h.xaxis.max||m<h.yaxis.min||m>h.yaxis.max||r.push(h.xaxis.p2c(l)+p.left,h.yaxis.p2c(m)+p.top);for(q=r.length,k=0;q-2>k;k+=2)i=i.concat(b.apply(this,r.slice(k,k+6).concat([j])));for(g.save(),g.strokeStyle=h.color,g.lineWidth=h.splines.lineWidth,e(g,"quadratic",r.slice(0,4),i.slice(0,2)),k=2;q-3>k;k+=2)e(g,"bezier",r.slice(k,k+4),i.slice(2*k-2,2*k+2));e(g,"quadratic",r.slice(q-2,q),[i[2*q-10],i[2*q-9],r[q-4],r[q-3]]),d(c,g,f.height()+10,h.splines.fill,h.color),g.restore()}}var c=[];a.plot.plugins.push({init:function(a){a.hooks.drawSeries.push(f)},options:{series:{splines:{show:!1,lineWidth:2,tension:.5,fill:!1}}},name:"spline",version:"0.8.2"})}(jQuery);


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
5 | > 0.5%
6 | last 2 versions
7 | Firefox ESR
8 | not dead
9 | # IE 9-11


--------------------------------------------------------------------------------
/src/environments/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true
3 | }
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * In development mode, to ignore zone related error stack frames such as
11 |  * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 |  * import the following file, but please comment it out in production mode
13 |  * because it will have performance impact when throw error
14 |  */
15 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
16 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kmkatsma/angular2-webpack-starter-gentelella/f582519cd92f26076072083dfd1fe4a17f6fae1d/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Gentelella</title>
 6 |     <base href="/" />
 7 | 
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 9 |     <link rel="icon" type="image/x-icon" href="favicon.ico" />
10 |     <link
11 |       rel="stylesheet"
12 |       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
13 |       integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
14 |       crossorigin="anonymous"
15 |     />
16 |   </head>
17 | 
18 |   <body class="nav-md">
19 |     <div class="container body">
20 |       <div class="main_container">
21 |         <app-root></app-root>
22 |       </div>
23 |     </div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic()
12 |   .bootstrapModule(AppModule)
13 |   .catch(err => console.log(err));
14 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 | 
48 | 
49 | /**
50 |  * Web Animations `@angular/platform-browser/animations`
51 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
52 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
53 |  **/
54 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
55 | 
56 | /**
57 |  * By default, zone.js will patch all possible macroTask and DomEvents
58 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
59 |  */
60 | 
61 |  // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
62 |  // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
63 |  // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
64 | 
65 |  /*
66 |  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
67 |  * with the following flag, it will bypass `zone.js` patch for IE/Edge
68 |  */
69 | // (window as any).__Zone_enable_cross_context_check = true;
70 | 
71 | /***************************************************************************************************
72 |  * Zone JS is required by default for Angular itself.
73 |  */
74 | import 'zone.js/dist/zone';  // Included with Angular CLI.
75 | 
76 | 
77 | 
78 | /***************************************************************************************************
79 |  * APPLICATION IMPORTS
80 |  */
81 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
   1 | body { margin: 0px}
   2 | 
   3 | .left_col {
   4 |   background: #2A3F54;
   5 | }
   6 | .nav-sm .container.body .col-md-3.left_col {
   7 |   min-height: 100%;
   8 |   width: 70px;
   9 |   padding: 0;
  10 |   z-index: 9999;
  11 |   position: absolute;
  12 | }
  13 | .nav-sm .container.body .col-md-3.left_col.menu_fixed {
  14 |   position: fixed;
  15 |   height: 100%;
  16 | }
  17 | .nav-sm .container.body .col-md-3.left_col .mCSB_container,
  18 | .nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
  19 |   overflow: visible;
  20 | }
  21 | .nav-sm .hidden-small {
  22 |   visibility: hidden;
  23 | }
  24 | .nav-sm .container.body .right_col {
  25 |   padding: 10px 20px;
  26 |   margin-left: 70px;
  27 |   z-index: 2;
  28 | }
  29 | .nav-sm .navbar.nav_title {
  30 |   width: 70px;
  31 | }
  32 | .nav-sm .navbar.nav_title a span {
  33 |   display: none;
  34 | }
  35 | .nav-sm .navbar.nav_title a i {
  36 |   font-size: 27px;
  37 |   margin: 13px 0 0 3px;
  38 | }
  39 | .site_title i {
  40 |   border: 1px solid #EAEAEA;
  41 |   padding: 5px 6px;
  42 |   border-radius: 50%;
  43 | }
  44 | .nav-sm .main_container .top_nav {
  45 |   display: block;
  46 |   margin-left: 70px;
  47 |   z-index: 2;
  48 | }
  49 | .nav-sm .nav.side-menu li a {
  50 |   text-align: center !important;
  51 |   font-weight: 400;
  52 |   font-size: 10px;
  53 |   padding: 10px 5px;
  54 | }
  55 | .nav-sm .nav.child_menu li.active,
  56 | .nav-sm .nav.side-menu li.active-sm {
  57 |   border-right: 5px solid #1ABB9C;
  58 | }
  59 | .nav-sm ul.nav.child_menu ul,
  60 | .nav-sm .nav.side-menu li.active-sm ul ul {
  61 |     position: static;
  62 |     width: 200px;
  63 |     background: none;
  64 | }
  65 | .nav-sm > .nav.side-menu > li.active-sm > a {
  66 |   color: #1ABB9C !important;
  67 | }
  68 | .nav-sm .nav.side-menu li a i.toggle-up {
  69 |   display: none !important;
  70 | }
  71 | .nav-sm .nav.side-menu li a i {
  72 |   font-size: 25px !important;
  73 |   text-align: center;
  74 |   width: 100% !important;
  75 |   margin-bottom: 5px;
  76 | }
  77 | .nav-sm ul.nav.child_menu {
  78 |   left: 100%;
  79 |   position: absolute;
  80 |   top: 0;
  81 |   width: 210px;
  82 |   z-index: 4000;
  83 |   background: #3E5367;
  84 |   display: none;
  85 | }
  86 | .nav-sm ul.nav.child_menu li {
  87 |   padding: 0 10px;
  88 | }
  89 | .nav-sm ul.nav.child_menu li a {
  90 |   text-align: left !important;
  91 | }
  92 | .nav-sm .profile {
  93 |   display: none;
  94 | }
  95 | .menu_section {
  96 |   margin-bottom: 35px;
  97 | }
  98 | .menu_section h3 {
  99 |   padding-left: 23px;
 100 |   color: #fff;
 101 |   text-transform: uppercase;
 102 |   letter-spacing: .5px;
 103 |   font-weight: bold;
 104 |   font-size: 11px;
 105 |   margin-bottom: 0;
 106 |   margin-top: 0;
 107 |   text-shadow: 1px 1px #000;
 108 | }
 109 | .menu_section >ul {
 110 |   margin-top: 10px;
 111 | }
 112 | .profile_pic {
 113 |   width: 35%;
 114 |   float: left;
 115 | }
 116 | .img-circle.profile_img {
 117 |   width: 70%;
 118 |   background: #fff;
 119 |   margin-left: 15%;
 120 |   z-index: 1000;
 121 |   position: inherit;
 122 |   margin-top: 20px;
 123 |   border: 1px solid rgba(52, 73, 94, 0.44);
 124 |   padding: 4px;
 125 | }
 126 | .profile_info {
 127 |   padding: 25px 10px 10px;
 128 |   width: 65%;
 129 |   float: left;
 130 | }
 131 | .profile_info span {
 132 |   font-size: 13px;
 133 |   line-height: 30px;
 134 |   color: #BAB8B8;
 135 | }
 136 | .profile_info h2 {
 137 |   font-size: 14px;
 138 |   color: #ECF0F1;
 139 |   margin: 0;
 140 |   font-weight: 300;
 141 | }
 142 | .profile.img_2 {
 143 |   text-align: center;
 144 | }
 145 | .profile.img_2 .profile_pic {
 146 |   width: 100%;
 147 | }
 148 | .profile.img_2 .profile_pic .img-circle.profile_img {
 149 |   width: 50%;
 150 |   margin: 10px 0 0;
 151 | }
 152 | .profile.img_2 .profile_info {
 153 |   padding: 15px 10px 0;
 154 |   width: 100%;
 155 |   margin-bottom: 10px;
 156 |   float: left;
 157 | }
 158 | .main_menu span.fa {
 159 |   float: left;
 160 |   text-align: center;
 161 |   margin-top: 5px;
 162 |   font-size: 10px;
 163 |   min-width: inherit;
 164 |   color: #C4CFDA;
 165 | }
 166 | .active a span.fa {
 167 |   text-align: right !important;
 168 |   margin-right: 4px;
 169 | }
 170 | .nav-sm .menu_section {
 171 |   margin: 0;
 172 | }
 173 | .nav-sm span.fa, 
 174 | .nav-sm .menu_section h3 {
 175 |   display: none;
 176 | }
 177 | .nav-sm li li span.fa {
 178 |   display: inline-block;
 179 | }
 180 | .nav_menu {
 181 |   float: left;
 182 |   background: #EDEDED;
 183 |   border-bottom: 1px solid #D9DEE4;
 184 |   margin-bottom: 10px;
 185 |   width: 100%;
 186 |   position: relative;
 187 | }
 188 | @media (min-width: 480px) {
 189 |   .nav_menu {
 190 |     position: static;
 191 |   }
 192 | }
 193 | .nav-md .container.body .col-md-3.left_col {
 194 |   min-height: 100%;
 195 |   width: 230px;
 196 |   padding: 0;
 197 |   position: absolute;
 198 |   display: flex;
 199 |   z-index: 1;
 200 | }
 201 | .nav-md .container.body .col-md-3.left_col.menu_fixed {
 202 |   height: 100%;
 203 |   position: fixed;
 204 | }
 205 | body .container.body .right_col {
 206 |   background: #F7F7F7;
 207 | }
 208 | .nav-md .container.body .right_col {
 209 |   padding: 10px 20px 0;
 210 |   margin-left: 230px;
 211 | }
 212 | .nav_title {
 213 |   width: 230px;
 214 |   float: left;
 215 |   background: #2A3F54;
 216 |   border-radius: 0;
 217 |   height: 57px;
 218 | }
 219 | @media (max-width: 991px) {
 220 |   .nav-md .container.body .right_col, .nav-md .container.body .top_nav {
 221 |     width: 100%;
 222 |     margin: 0;
 223 |   }
 224 |   .nav-md .container.body .col-md-3.left_col {
 225 |     display: none;
 226 |   }
 227 |   .nav-md .container.body .right_col {
 228 |     width: 100%;
 229 |     padding-right: 0
 230 |   }
 231 |   .right_col {
 232 |     padding: 10px !important;
 233 |   }
 234 | }
 235 | @media (max-width: 1200px) {
 236 |   .x_title h2 {
 237 |     width: 62%;
 238 |     font-size: 17px;
 239 |   }
 240 |   .tile, .graph {
 241 |     zoom: 85%;
 242 |     height: inherit;
 243 |   }
 244 | }
 245 | @media (max-width: 1270px) and (min-width: 192px) {
 246 |   .x_title h2 small {
 247 |     display: none
 248 |   }
 249 | }
 250 | .left_col .mCSB_scrollTools {
 251 |   width: 6px;
 252 | }
 253 | .left_col .mCSB_dragger {
 254 |   max-height: 400px !important;
 255 | }
 256 | /**  ------------------------------------------  **/
 257 | 
 258 | .blue {
 259 |   color: #3498DB;
 260 | }
 261 | .purple {
 262 |   color: #9B59B6;
 263 | }
 264 | .green {
 265 |   color: #1ABB9C;
 266 | }
 267 | .aero {
 268 |   color: #9CC2CB;
 269 | }
 270 | .red {
 271 |   color: #E74C3C;
 272 | }
 273 | .dark {
 274 |   color: #34495E;
 275 | }
 276 | .border-blue {
 277 |   border-color: #3498DB !important;
 278 | }
 279 | .border-purple {
 280 |   border-color: #9B59B6 !important;
 281 | }
 282 | .border-green {
 283 |   border-color: #1ABB9C !important;
 284 | }
 285 | .border-aero {
 286 |   border-color: #9CC2CB !important;
 287 | }
 288 | .border-red {
 289 |   border-color: #E74C3C !important;
 290 | }
 291 | .border-dark {
 292 |   border-color: #34495E !important;
 293 | }
 294 | .bg-white {
 295 |   background: #fff !important;
 296 |   border: 1px solid #fff !important;
 297 |   color: #73879C;
 298 | }
 299 | .bg-green {
 300 |   background: #1ABB9C !important;
 301 |   border: 1px solid #1ABB9C !important;
 302 |   color: #fff;
 303 | }
 304 | .bg-red {
 305 |   background: #E74C3C !important;
 306 |   border: 1px solid #E74C3C !important;
 307 |   color: #fff;
 308 | }
 309 | .bg-blue {
 310 |   background: #3498DB !important;
 311 |   border: 1px solid #3498DB !important;
 312 |   color: #fff;
 313 | }
 314 | .bg-orange {
 315 |   background: #F39C12 !important;
 316 |   border: 1px solid #F39C12 !important;
 317 |   color: #fff;
 318 | }
 319 | .bg-purple {
 320 |   background: #9B59B6 !important;
 321 |   border: 1px solid #9B59B6 !important;
 322 |   color: #fff;
 323 | }
 324 | .bg-blue-sky {
 325 |   background: #50C1CF !important;
 326 |   border: 1px solid #50C1CF !important;
 327 |   color: #fff;
 328 | }
 329 | .container {
 330 |   width: 100%;
 331 |   padding: 0
 332 | }
 333 | .navbar-nav>li>a, .navbar-brand, .navbar-nav>li>a {
 334 |   color: #fff !important;
 335 | }
 336 | .top_nav .nav>li>a:focus, .top_nav .nav>li>a:hover, .top_nav .nav .open>a, .top_nav .nav .open>a:focus, .top_nav .nav .open>a:hover {
 337 |   background: #D9DEE4;
 338 | }
 339 | body {
 340 |   color: #73879C;
 341 |   background: #2A3F54;
 342 |   font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
 343 |   font-size: 13px;
 344 |   font-weight: 400;
 345 |   line-height: 1.471;
 346 | }
 347 | .main_container .top_nav {
 348 |   display: block;
 349 |   margin-left: 230px;
 350 | }
 351 | .main_container {}
 352 | .no-padding {
 353 |   padding: 0 !important;
 354 | }
 355 | .page-title {
 356 |   width: 100%;
 357 |   height: 65px;
 358 |   padding: 10px 0;
 359 | }
 360 | .page-title .title_left {
 361 |   width: 45%;
 362 |   float: left;
 363 |   display: block;
 364 | }
 365 | .page-title .title_left h3 {
 366 |   margin: 9px 0;
 367 | }
 368 | .page-title .title_right {
 369 |   width: 55%;
 370 |   float: left;
 371 |   display: block;
 372 | }
 373 | .page-title .title_right .pull-right {
 374 |   margin: 10px 0;
 375 | }
 376 | .fixed_height_320 {
 377 |   height: 320px;
 378 | }
 379 | .fixed_height_390 {
 380 |   height: 390px;
 381 | }
 382 | .fixed_height_200 {
 383 |   height: 200px;
 384 | }
 385 | .overflow_hidden {
 386 |   overflow: hidden
 387 | }
 388 | .progress-bar-dark {
 389 |   background-color: #34495E !important;
 390 | }
 391 | .progress-bar-gray {
 392 |   background-color: #BDC3C7 !important;
 393 | }
 394 | table.no-margin .progress {
 395 |   margin-bottom: 0;
 396 | }
 397 | .main_content {
 398 |   padding: 10px 20px;
 399 | }
 400 | .col-md-55 {
 401 |   width: 50%;
 402 |   margin-bottom: 10px;
 403 | }
 404 | @media (min-width: 768px) {
 405 |   .col-md-55 {
 406 |     width: 20%;
 407 |   }
 408 | }
 409 | @media (min-width: 992px) {
 410 |   .col-md-55 {
 411 |     width: 20%;
 412 |   }
 413 | }
 414 | @media (min-width: 1200px) {
 415 |   .col-md-55 {
 416 |     width: 20%;
 417 |   }
 418 | }
 419 | @media (min-width: 192px) and (max-width: 1270px) {
 420 |   table.tile_info span.right {
 421 |     margin-right: 7px;
 422 |     float: left;
 423 |   }
 424 | }
 425 | .center-margin {
 426 |   margin: 0 auto;
 427 |   float: none!important;
 428 | }
 429 | .col-md-55, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
 430 |   position: relative;
 431 |   min-height: 1px;
 432 |   float: left;
 433 |   padding-right: 10px;
 434 |   padding-left: 10px;
 435 | }
 436 | .row {
 437 |   margin-right: -10px;
 438 |   margin-left: -10px;
 439 | }
 440 | .grid_slider .col-md-6 {
 441 |   padding: 0 40px;
 442 | }
 443 | h1, .h1, h2, .h2, h3, .h3 {
 444 |   margin-top: 10px;
 445 |   margin-bottom: 10px;
 446 | }
 447 | a {
 448 |   color: #5A738E;
 449 |   text-decoration: none;
 450 | }
 451 | a, a:visited, a:focus, a:active, :visited, :focus, :active, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
 452 |   outline: 0;
 453 | }
 454 | a:hover, a:focus {
 455 |   text-decoration: none
 456 | }
 457 | .navbar {
 458 |   margin-bottom: 0
 459 | }
 460 | .navbar-header {
 461 |   background: #34495E;
 462 | }
 463 | .navbar-right {
 464 |   margin-right: 0;
 465 | }
 466 | .top_nav .navbar-right {
 467 |   margin: 0;
 468 |   width: 70%;
 469 |   float: right;
 470 | }
 471 | .top_nav .navbar-right li {
 472 |   display: inline-block;
 473 |   float: right;
 474 |   position: static;
 475 | }
 476 | @media (min-width: 480px) {
 477 |   .top_nav .navbar-right li {
 478 |     position: relative;
 479 |   }
 480 | }
 481 | .top_nav .dropdown-menu li {
 482 |   width: 100%;
 483 | }
 484 | .top_nav .dropdown-menu li a {
 485 |   width: 100%;
 486 |   padding: 12px 20px;
 487 | }
 488 | .top_nav li a i {
 489 |   font-size: 15px
 490 | }
 491 | .navbar-static-top {
 492 |   position: fixed;
 493 |   top: 0;
 494 |   width: 100%;
 495 | }
 496 | .sidebar-header {
 497 |   border-bottom: 0;
 498 |   margin-top: 46px;
 499 | }
 500 | .sidebar-header:first-of-type {
 501 |   margin-top: 0
 502 | }
 503 | .nav.side-menu> li {
 504 |   position: relative;
 505 |   display: block;
 506 |   cursor: pointer;
 507 | }
 508 | .nav.side-menu> li > a {
 509 |   margin-bottom: 6px;
 510 | }
 511 | .nav.side-menu> li > a:hover {
 512 |   color: #F2F5F7 !important;
 513 | }
 514 | .nav.side-menu>li>a:hover, .nav>li>a:focus {
 515 |   text-decoration: none;
 516 |   background: transparent;
 517 | }
 518 | .nav.child_menu {
 519 |   display: none;
 520 | }
 521 | .nav.child_menu li:hover,
 522 | .nav.child_menu li.active {
 523 |   background-color: rgba(255, 255, 255, 0.06);
 524 | }
 525 | .nav.child_menu li {
 526 |   padding-left: 36px;
 527 | }
 528 | .nav-md ul.nav.child_menu li:before {
 529 |   background: #425668;
 530 |   bottom: auto;
 531 |   content: "";
 532 |   height: 8px;
 533 |   left: 23px;
 534 |   margin-top: 15px;
 535 |   position: absolute;
 536 |   right: auto;
 537 |   width: 8px;
 538 |   z-index: 1;
 539 |   -webkit-border-radius: 50%;
 540 |   -moz-border-radius: 50%;
 541 |   border-radius: 50%;
 542 | }
 543 | .nav-md ul.nav.child_menu li:after {
 544 |   border-left: 1px solid #425668;
 545 |   bottom: 0;
 546 |   content: "";
 547 |   left: 27px;
 548 |   position: absolute;
 549 |   top: 0;
 550 | }
 551 | .nav.side-menu>li>a, .nav.child_menu>li>a {
 552 |   color: #E7E7E7;
 553 |   font-weight: 500;
 554 | }
 555 | .nav.child_menu li li:hover, 
 556 | .nav.child_menu li li.active {
 557 |   background: none;
 558 | }
 559 | .nav.child_menu li li a:hover, 
 560 | .nav.child_menu li li a.active {
 561 |   color: #fff;
 562 | }
 563 | .nav>li>a {
 564 |   position: relative;
 565 |   display: block;
 566 |   padding: 13px 15px 12px;
 567 | }
 568 | .nav.side-menu> li.current-page, .nav.side-menu> li.active {
 569 |   border-right: 5px solid #1ABB9C;
 570 | }
 571 | .nav li.current-page {
 572 |   background: rgba(255, 255, 255, 0.05);
 573 | }
 574 | .nav li li li.current-page {
 575 |   background: none;
 576 | }
 577 | .nav li li.current-page a {
 578 |   color: #fff;
 579 | }
 580 | .nav.side-menu> li.active > a {
 581 |   text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
 582 |   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b6479), color-stop(100%, #4c5566)), #686e78;
 583 |   background: -webkit-linear-gradient(#334556, #2C4257), #2A3F54;
 584 |   background: -moz-linear-gradient(#334556, #2C4257), #2A3F54;
 585 |   background: -o-linear-gradient(#334556, #2C4257), #2A3F54;
 586 |   background: linear-gradient(#334556, #2C4257), #2A3F54;
 587 |   -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
 588 |   -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
 589 |   box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
 590 | }
 591 | .navbar-brand, .navbar-nav>li>a {
 592 |   font-weight: 500;
 593 |   color: #ECF0F1 !important;
 594 |   margin-left: 0 !important;
 595 |   line-height: 32px;
 596 | }
 597 | .site_title {
 598 |   text-overflow: ellipsis;
 599 |   overflow: hidden;
 600 |   font-weight: 400;
 601 |   font-size: 22px;
 602 |   width: 100%;
 603 |   color: #ECF0F1 !important;
 604 |   margin-left: 0 !important;
 605 |   line-height: 59px;
 606 |   display: block;
 607 |   height: 55px;
 608 |   margin: 0;
 609 |   padding-left: 10px;
 610 | }
 611 | .site_title:hover, .site_title:focus {
 612 |   text-decoration: none
 613 | }
 614 | .nav.navbar-nav>li>a {
 615 |   color: #515356 !important;
 616 | }
 617 | .nav.top_menu>li>a {
 618 |   position: relative;
 619 |   display: block;
 620 |   padding: 10px 15px;
 621 |   color: #34495E !important;
 622 | }
 623 | .nav>li>a:hover, .nav>li>a:focus {
 624 |   background-color: transparent;
 625 | }
 626 | .top_search {
 627 |   padding: 0;
 628 | }
 629 | .top_search .form-control {
 630 |   border-right: 0;
 631 |   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
 632 |   border-radius: 25px 0px 0px 25px;
 633 |   padding-left: 20px;
 634 |   border: 1px solid rgba(221, 226, 232, 0.49);
 635 | }
 636 | .top_search .form-control:focus {
 637 |   border: 1px solid rgba(221, 226, 232, 0.49);
 638 |   border-right: 0;
 639 | }
 640 | .top_search .input-group-btn button {
 641 |   border-radius: 0px 25px 25px 0px;
 642 |   border: 1px solid rgba(221, 226, 232, 0.49);
 643 |   border-left: 0;
 644 |   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 645 |   color: #93A2B2;
 646 |   margin-bottom: 0 !important;
 647 | }
 648 | .toggle {
 649 |   float: left;
 650 |   margin: 0;
 651 |   padding-top: 16px;
 652 |   width: 70px;
 653 | }
 654 | .toggle a {
 655 |   padding: 15px 15px 0;
 656 |   margin: 0;
 657 |   cursor: pointer;
 658 | }
 659 | .toggle a i {
 660 |   font-size: 26px;
 661 | }
 662 | .nav.child_menu > li > a {
 663 |   color: rgba(255, 255, 255, 0.75);
 664 |   font-size: 12px;
 665 |   padding: 9px;
 666 | }
 667 | .panel_toolbox {
 668 |   float: right;
 669 |   min-width: 70px;
 670 | }
 671 | .panel_toolbox>li {
 672 |   float: left;
 673 |   cursor: pointer;
 674 | }
 675 | .panel_toolbox>li>a {
 676 |   padding: 5px;
 677 |   color: #C5C7CB;
 678 |   font-size: 14px;
 679 | }
 680 | .panel_toolbox>li>a:hover {
 681 |   background: #F5F7FA;
 682 | }
 683 | .line_30 {
 684 |   line-height: 30px;
 685 | }
 686 | .main_menu_side {
 687 |   padding: 0;
 688 | }
 689 | .bs-docs-sidebar .nav>li>a {
 690 |   display: block;
 691 |   padding: 4px 6px;
 692 | }
 693 | footer {
 694 |   background: #fff;
 695 |   padding: 15px 20px;
 696 |   display: block;
 697 | }
 698 | 
 699 | .nav-sm footer {
 700 |   margin-left: 70px ;  
 701 | }
 702 | .footer_fixed footer {
 703 |   position: fixed;
 704 |   left: 0px;
 705 |   bottom: 0px;
 706 |   width: 100%;
 707 | }
 708 | @media (min-width: 768px) {
 709 |   .footer_fixed footer {
 710 |     margin-left: 0;
 711 |   }
 712 | }
 713 | @media (min-width: 768px) {
 714 |   .footer_fixed .nav-sm footer {
 715 |     margin-left: 0;
 716 |   }
 717 | }
 718 | .tile-stats.sparkline {
 719 |   padding: 10px;
 720 |   text-align: center;
 721 | }
 722 | .jqstooltip {
 723 |   background: #34495E !important;
 724 |   width: 30px !important;
 725 |   height: 22px !important;
 726 |   text-decoration: none;
 727 | }
 728 | .tooltip {
 729 |   display: block !important;
 730 | }
 731 | .tiles {
 732 |   border-top: 1px solid #ccc;
 733 |   margin-top: 15px;
 734 |   padding-top: 5px;
 735 |   margin-bottom: 0;
 736 | }
 737 | .tile {
 738 |   overflow: hidden;
 739 | }
 740 | .top_tiles {
 741 |   margin-bottom: 0;
 742 | }
 743 | .top_tiles .tile span {}
 744 | .top_tiles .tile h2 {
 745 |   font-size: 30px;
 746 |   line-height: 30px;
 747 |   margin: 3px 0 7px;
 748 |   font-weight: bold;
 749 | }
 750 | article.media {
 751 |   width: 100%;
 752 | }
 753 | 
 754 | /* *********  custom accordion  **************************** */
 755 | 
 756 | *, *:before, *:after {
 757 |   -webkit-box-sizing: border-box;
 758 |   -moz-box-sizing: border-box;
 759 |   box-sizing: border-box;
 760 | }
 761 | #integration-list {
 762 |   width: 100%;
 763 |   margin: 0 auto;
 764 |   display: table;
 765 | }
 766 | #integration-list ul {
 767 |   padding: 0;
 768 |   margin: 20px 0;
 769 |   color: #555;
 770 | }
 771 | #integration-list ul > li {
 772 |   list-style: none;
 773 |   border-top: 1px solid #ddd;
 774 |   display: block;
 775 |   padding: 15px;
 776 |   overflow: hidden;
 777 | }
 778 | #integration-list ul:last-child {
 779 |   border-bottom: 1px solid #ddd;
 780 | }
 781 | #integration-list ul > li:hover {
 782 |   background: #efefef;
 783 | }
 784 | .expand {
 785 |   display: block;
 786 |   text-decoration: none;
 787 |   color: #555;
 788 |   cursor: pointer;
 789 | }
 790 | .expand h2 {
 791 |   width: 85%;
 792 |   float: left;
 793 | }
 794 | h2 {
 795 |   font-size: 18px;
 796 |   font-weight: 400;
 797 | }
 798 | #left, #right {
 799 |   display: table;
 800 | }
 801 | #sup {
 802 |   display: table-cell;
 803 |   vertical-align: middle;
 804 |   width: 80%;
 805 | }
 806 | .detail a {
 807 |   text-decoration: none;
 808 |   color: #C0392B;
 809 |   border: 1px solid #C0392B;
 810 |   padding: 6px 10px 5px;
 811 |   font-size: 13px;
 812 |   margin-right: 7px;
 813 | }
 814 | .detail {
 815 |   margin: 10px 0 10px 0px;
 816 |   display: none;
 817 |   line-height: 22px;
 818 |   height: 150px;
 819 | }
 820 | .detail span {
 821 |   margin: 0;
 822 | }
 823 | .right-arrow {
 824 |   width: 10px;
 825 |   float: right;
 826 |   font-weight: bold;
 827 |   font-size: 20px;
 828 | }
 829 | .accordion .panel {
 830 |   margin-bottom: 5px;
 831 |   border-radius: 0;
 832 |   border-bottom: 1px solid #efefef;
 833 | }
 834 | .accordion .panel-heading {
 835 |   background: #F2F5F7;
 836 |   padding: 13px;
 837 |   width: 100%;
 838 |   display: block;
 839 | }
 840 | .accordion .panel:hover {
 841 |   background: #F2F5F7;
 842 | }
 843 | .x_panel {
 844 |   position: relative;
 845 |   width: 100%;
 846 |   margin-bottom: 10px;
 847 |   padding: 10px 17px;
 848 |   display: inline-block;
 849 |   background: #fff;
 850 |   border: 1px solid #E6E9ED;
 851 |   -webkit-column-break-inside: avoid;
 852 |   -moz-column-break-inside: avoid;
 853 |   column-break-inside: avoid;
 854 |   opacity: 1;
 855 |   -moz-transition: all .2s ease;
 856 |   -o-transition: all .2s ease;
 857 |   -webkit-transition: all .2s ease;
 858 |   -ms-transition: all .2s ease;
 859 |   transition: all .2s ease;
 860 | }
 861 | .x_title {
 862 |   border-bottom: 2px solid #E6E9ED;
 863 |   padding: 1px 5px 6px;
 864 |   margin-bottom: 10px;
 865 | }
 866 | .x_title .filter {
 867 |   width: 40%;
 868 |   float: right;
 869 | }
 870 | .x_title h2 {
 871 |   margin: 5px 0 6px;
 872 |   float: left;
 873 |   display: block;
 874 |   text-overflow: ellipsis;
 875 |   overflow: hidden;
 876 |   white-space: nowrap;
 877 | }
 878 | .x_title h2 small {
 879 |   margin-left: 10px;
 880 | }
 881 | .x_title span {
 882 |   color: #BDBDBD;
 883 | }
 884 | .x_content {
 885 |   padding: 0 5px 6px;
 886 |   position: relative;
 887 |   width: 100%;
 888 |   float: left;
 889 |   clear: both;
 890 |   margin-top: 5px;
 891 | }
 892 | .x_content h4 {
 893 |   font-size: 16px;
 894 |   font-weight: 500;
 895 | }
 896 | legend {
 897 |   padding-bottom: 7px;
 898 | }
 899 | .demo-placeholder {
 900 |   height: 280px;
 901 | }
 902 | 
 903 | /** Contacts **/
 904 | .profile_details:nth-child(3n){
 905 |     clear:both;
 906 | }
 907 | 
 908 | .profile_details .profile_view {
 909 |   display: inline-block;
 910 |   padding: 10px 0 0;
 911 |   background: #fff;
 912 | }
 913 | 
 914 | .profile_details .profile_view .divider {
 915 |   border-top: 1px solid #e5e5e5;
 916 |   padding-top: 5px;
 917 |   margin-top: 5px;
 918 | }
 919 | 
 920 | .profile_details .profile_view .ratings {
 921 |   margin-bottom: 0;
 922 | }
 923 | 
 924 | .profile_details .profile_view .bottom {
 925 |   background: #F2F5F7;
 926 |   padding: 9px 0;
 927 |   border-top: 1px solid #E6E9ED;
 928 | }
 929 | 
 930 | .profile_details .profile_view .left {
 931 |   margin-top: 20px;
 932 | }
 933 | 
 934 | .profile_details .profile_view .left p {
 935 |   margin-bottom: 3px;
 936 | }
 937 | 
 938 | .profile_details .profile_view .right {
 939 |   margin-top: 0px;
 940 |   padding: 10px;
 941 | }
 942 | 
 943 | .profile_details .profile_view .img-circle {
 944 |   border: 1px solid #E6E9ED;
 945 |   padding: 2px;
 946 | }
 947 | 
 948 | .profile_details .profile_view h2 {
 949 |   margin: 5px 0;
 950 | }
 951 | 
 952 | .profile_details .profile_view .ratings {
 953 |   text-align: left;
 954 |   font-size: 16px;
 955 | }
 956 | 
 957 | .profile_details .profile_view .brief {
 958 |   margin: 0;
 959 |   font-weight: 300;
 960 | }
 961 | 
 962 | .profile_details .profile_left {
 963 |   background: white;
 964 | }
 965 | 
 966 | .pagination.pagination-split li {
 967 |   display: inline-block;
 968 |   margin-right: 3px;
 969 | }
 970 | 
 971 | .pagination.pagination-split li a {
 972 |   border-radius: 4px;
 973 |   color: #768399;
 974 |   -moz-border-radius: 4px;
 975 |   -webkit-border-radius: 4px;
 976 | }
 977 | /** Contacts **/
 978 | 
 979 | 
 980 | /* *********  /custom accordion  **************************** */
 981 | 
 982 | 
 983 | /* *********  dashboard widget  **************************** */
 984 | 
 985 | table.tile h3, table.tile h4, table.tile span {
 986 |   font-weight: bold;
 987 |   vertical-align: middle !important;
 988 | }
 989 | table.tile th, table.tile td {
 990 |   text-align: center;
 991 | }
 992 | table.tile th {
 993 |   border-bottom: 1px solid #E6ECEE;
 994 | }
 995 | table.tile td {
 996 |   padding: 5px 0;
 997 | }
 998 | table.tile td ul {
 999 |   text-align: left;
1000 |   padding-left: 0
1001 | }
1002 | table.tile td ul li {
1003 |   list-style: none;
1004 |   width: 100%;
1005 | }
1006 | table.tile td ul li a {
1007 |   width: 100%
1008 | }
1009 | table.tile td ul li a big {
1010 |   right: 0;
1011 |   float: right;
1012 |   margin-right: 13px;
1013 | }
1014 | table.tile_info {
1015 |   width: 100%;
1016 | }
1017 | table.tile_info td {
1018 |   text-align: left;
1019 |   padding: 1px;
1020 |   font-size: 15px
1021 | }
1022 | table.tile_info td p {
1023 |   white-space: nowrap;
1024 |   overflow: hidden;
1025 |   text-overflow: ellipsis;
1026 |   margin: 0;
1027 |   line-height: 28px;
1028 | }
1029 | table.tile_info td i {
1030 |   margin-right: 8px;
1031 |   font-size: 17px;
1032 |   float: left;
1033 |   width: 18px;
1034 |   line-height: 28px
1035 | }
1036 | table.tile_info td:first-child {
1037 |   width: 83%;
1038 | }
1039 | td span {
1040 |   line-height: 28px;
1041 | }
1042 | .sidebar-widget {
1043 |   overflow: hidden;
1044 | }
1045 | .error-number {
1046 |   font-size: 90px;
1047 |   line-height: 90px;
1048 |   margin: 20px 0;
1049 | }
1050 | .col-middle {
1051 |   margin-top: 5%;
1052 | }
1053 | .mid_center {
1054 |   width: 370px;
1055 |   margin: 0 auto;
1056 |   text-align: center;
1057 |   padding: 10px 20px;
1058 | }
1059 | h3.degrees {
1060 |   font-size: 22px;
1061 |   font-weight: 400;
1062 |   text-align: center;
1063 | }
1064 | .degrees:after {
1065 |   content: "o";
1066 |   position: relative;
1067 |   top: -12px;
1068 |   font-size: 13px;
1069 |   font-weight: 300;
1070 | }
1071 | .daily-weather .day {
1072 |   font-size: 14px;
1073 |   border-top: 2px solid rgba(115, 135, 156, 0.36);
1074 |   text-align: center;
1075 |   border-bottom: 2px solid rgba(115, 135, 156, 0.36);
1076 |   padding: 5px 0;
1077 | }
1078 | .weather-days .col-sm-2 {
1079 |   overflow: hidden;
1080 |   width: 16.66666667%;
1081 | }
1082 | .weather .row {
1083 |   margin-bottom: 0
1084 | }
1085 | 
1086 | /* *********  tables styling  ******************************* */
1087 | 
1088 | .bulk-actions {
1089 |   display: none;
1090 | }
1091 | 
1092 | table.countries_list {
1093 |   width: 100%;
1094 | }
1095 | 
1096 | table.countries_list td {
1097 |   padding: 0 10px;
1098 |   line-height: 30px;
1099 |   border-top: 1px solid #eeeeee;
1100 | }
1101 | 
1102 | .dataTables_paginate a {
1103 |   padding: 6px 9px !important;
1104 |   background: #ddd !important;
1105 |   border-color: #ddd !important;
1106 | }
1107 | 
1108 | .paging_full_numbers a.paginate_active {
1109 |   background-color: rgba(38, 185, 154, 0.59) !important;
1110 |   border-color: rgba(38, 185, 154, 0.59) !important;
1111 | }
1112 | 
1113 | button.DTTT_button, div.DTTT_button, a.DTTT_button {
1114 |   border: 1px solid #E7E7E7 !important;
1115 |   background: #E7E7E7 !important;
1116 |   box-shadow: none !important;
1117 | }
1118 | 
1119 | table.jambo_table {
1120 |   border: 1px solid rgba(221, 221, 221, 0.78);
1121 | }
1122 | 
1123 | table.jambo_table thead {
1124 |   background: rgba(52, 73, 94, 0.94);
1125 |   color: #ECF0F1;
1126 | }
1127 | 
1128 | table.jambo_table tbody tr:hover td {
1129 |   background: rgba(38, 185, 154, 0.07);
1130 |   border-top: 1px solid rgba(38, 185, 154, 0.11);
1131 |   border-bottom: 1px solid rgba(38, 185, 154, 0.11);
1132 | }
1133 | 
1134 | table.jambo_table tbody tr.selected {
1135 |   background: rgba(38, 185, 154, 0.16);
1136 | }
1137 | 
1138 | table.jambo_table tbody tr.selected td {
1139 |   border-top: 1px solid rgba(38, 185, 154, 0.40);
1140 |   border-bottom: 1px solid rgba(38, 185, 154, 0.40);
1141 | }
1142 | 
1143 | .dataTables_paginate a {
1144 |   background: #ff0000;
1145 | }
1146 | 
1147 | .dataTables_wrapper {
1148 |   position: relative;
1149 |   clear: both;
1150 |   zoom: 1;
1151 | }
1152 | 
1153 | .dataTables_processing {
1154 |   position: absolute;
1155 |   top: 50%;
1156 |   left: 50%;
1157 |   width: 250px;
1158 |   height: 30px;
1159 |   margin-left: -125px;
1160 |   margin-top: -15px;
1161 |   padding: 14px 0 2px 0;
1162 |   border: 1px solid #ddd;
1163 |   text-align: center;
1164 |   color: #999;
1165 |   font-size: 14px;
1166 |   background-color: white;
1167 | }
1168 | 
1169 | .dataTables_length {
1170 |   width: 40%;
1171 |   float: left;
1172 | }
1173 | 
1174 | .dataTables_filter {
1175 |   width: 50%;
1176 |   float: right;
1177 |   text-align: right;
1178 | }
1179 | 
1180 | .dataTables_info {
1181 |   width: 60%;
1182 |   float: left;
1183 | }
1184 | 
1185 | .dataTables_paginate {
1186 |   float: right;
1187 |   text-align: right;
1188 | }
1189 | 
1190 | table.dataTable th.focus,
1191 | table.dataTable td.focus {
1192 |     outline: 2px solid #1ABB9C !important;
1193 |     outline-offset: -1px;
1194 | }
1195 | 
1196 | table.display {
1197 |   margin: 0 auto;
1198 |   clear: both;
1199 |   width: 100%;
1200 | }
1201 | 
1202 | table.display thead th {
1203 |   padding: 8px 18px 8px 10px;
1204 |   border-bottom: 1px solid black;
1205 |   font-weight: bold;
1206 |   cursor: pointer;
1207 | }
1208 | 
1209 | table.display tfoot th {
1210 |   padding: 3px 18px 3px 10px;
1211 |   border-top: 1px solid black;
1212 |   font-weight: bold;
1213 | }
1214 | 
1215 | table.display tr.heading2 td {
1216 |   border-bottom: 1px solid #aaa;
1217 | }
1218 | 
1219 | table.display td {
1220 |   padding: 3px 10px;
1221 | }
1222 | 
1223 | table.display td.center {
1224 |   text-align: center;
1225 | }
1226 | 
1227 | table.display thead th:active, table.display thead td:active {
1228 |   outline: none;
1229 | }
1230 | 
1231 | .dataTables_scroll {
1232 |   clear: both;
1233 | }
1234 | 
1235 | .dataTables_scrollBody {
1236 |   *margin-top: -1px;
1237 |   -webkit-overflow-scrolling: touch;
1238 | }
1239 | 
1240 | .top, .bottom {}
1241 | .top .dataTables_info {
1242 |   float: none;
1243 | }
1244 | 
1245 | .clear {
1246 |   clear: both;
1247 | }
1248 | 
1249 | .dataTables_empty {
1250 |   text-align: center;
1251 | }
1252 | 
1253 | tfoot input {
1254 |   margin: 0.5em 0;
1255 |   width: 100%;
1256 |   color: #444;
1257 | }
1258 | 
1259 | tfoot input.search_init {
1260 |   color: #999;
1261 | }
1262 | 
1263 | td.group {
1264 |   background-color: #d1cfd0;
1265 |   border-bottom: 2px solid #A19B9E;
1266 |   border-top: 2px solid #A19B9E;
1267 | }
1268 | 
1269 | td.details {
1270 |   background-color: #d1cfd0;
1271 |   border: 2px solid #A19B9E;
1272 | }
1273 | 
1274 | .example_alt_pagination div.dataTables_info {
1275 |   width: 40%;
1276 | }
1277 | 
1278 | .paging_full_numbers {
1279 |   width: 400px;
1280 |   height: 22px;
1281 |   line-height: 22px;
1282 | }
1283 | 
1284 | .paging_full_numbers a:active {
1285 |   outline: none
1286 | }
1287 | 
1288 | .paging_full_numbers a:hover {
1289 |   text-decoration: none;
1290 | }
1291 | 
1292 | .paging_full_numbers a.paginate_button, .paging_full_numbers a.paginate_active {
1293 |   border: 1px solid #aaa;
1294 |   -webkit-border-radius: 5px;
1295 |   -moz-border-radius: 5px;
1296 |   padding: 2px 5px;
1297 |   margin: 0 3px;
1298 |   cursor: pointer;
1299 | }
1300 | 
1301 | .paging_full_numbers a.paginate_button {
1302 |   background-color: #ddd;
1303 | }
1304 | 
1305 | .paging_full_numbers a.paginate_button:hover {
1306 |   background-color: #ccc;
1307 |   text-decoration: none !important;
1308 | }
1309 | 
1310 | .paging_full_numbers a.paginate_active {
1311 |   background-color: #99B3FF;
1312 | }
1313 | 
1314 | table.display tr.even.row_selected td {
1315 |   background-color: #B0BED9;
1316 | }
1317 | 
1318 | table.display tr.odd.row_selected td {
1319 |   background-color: #9FAFD1;
1320 | }
1321 | 
1322 | div.box {
1323 |   height: 100px;
1324 |   padding: 10px;
1325 |   overflow: auto;
1326 |   border: 1px solid #8080FF;
1327 |   background-color: #E5E5FF;
1328 | }
1329 | /* *********  /tables styling  ****************************** */
1330 | 
1331 | 
1332 | /* *********  /dashboard widget  **************************** */
1333 | 
1334 | 
1335 | /* *********  widgets  *************************************** */
1336 | 
1337 | ul.msg_list li {
1338 |   background: #f7f7f7;
1339 |   padding: 5px;
1340 |   display: flex;
1341 |   margin: 6px 6px 0;
1342 |   width: 96% !important;
1343 | }
1344 | ul.msg_list li:last-child {
1345 |   margin-bottom: 6px;
1346 |   padding: 10px;
1347 | }
1348 | ul.msg_list li a {
1349 |   padding: 3px 5px !important;
1350 | }
1351 | ul.msg_list li a .image img {
1352 |   border-radius: 2px 2px 2px 2px;
1353 |   -webkit-border-radius: 2px 2px 2px 2px;
1354 |   float: left;
1355 |   margin-right: 10px;
1356 |   width: 11%;
1357 | }
1358 | ul.msg_list li a .time {
1359 |   font-size: 11px;
1360 |   font-style: italic;
1361 |   font-weight: bold;
1362 |   position: absolute;
1363 |   right: 35px;
1364 | }
1365 | ul.msg_list li a .message {
1366 |   display: block !important;
1367 |   font-size: 11px;
1368 | }
1369 | .dropdown-menu.msg_list span {
1370 |   white-space: normal;
1371 | }
1372 | .dropdown-menu {
1373 |   border: medium none;
1374 |   box-shadow: none;
1375 |   display: none;
1376 |   float: left;
1377 |   font-size: 12px;
1378 |   left: 0;
1379 |   list-style: none outside none;
1380 |   padding: 0;
1381 |   position: absolute;
1382 |   text-shadow: none;
1383 |   top: 100%;
1384 |   z-index: 9998;
1385 |   border: 1px solid #D9DEE4;
1386 |   border-top-left-radius: 0;
1387 |   border-top-right-radius: 0;
1388 |   
1389 | }
1390 | .dropdown-menu>li>a {
1391 |   color: #5A738E;
1392 | }
1393 | .navbar-nav .open .dropdown-menu {
1394 |   position: absolute;
1395 |   background: #fff;
1396 |   margin-top: 0;
1397 |   border: 1px solid #D9DEE4;
1398 |   -webkit-box-shadow: none;
1399 |   right: 0;
1400 |   left: auto;
1401 |   width: 220px;
1402 | }
1403 | .navbar-nav .open .dropdown-menu.msg_list {
1404 |   width: 300px;
1405 | }
1406 | .info-number .badge {
1407 |   font-size: 10px;
1408 |   font-weight: normal;
1409 |   line-height: 13px;
1410 |   padding: 2px 6px;
1411 |   position: absolute;
1412 |   right: 2px;
1413 |   top: 8px;
1414 | }
1415 | ul.to_do {
1416 |   padding: 0;
1417 | }
1418 | ul.to_do li {
1419 |   background: #f3f3f3;
1420 |   -webkit-border-radius: 3px;
1421 |   -moz-border-radius: 3px;
1422 |   border-radius: 3px;
1423 |   position: relative;
1424 |   padding: 7px;
1425 |   margin-bottom: 5px;
1426 |   list-style: none;
1427 | }
1428 | ul.to_do p {
1429 |   margin: 0;
1430 | }
1431 | .dashboard-widget {
1432 |   background: #f6f6f6;
1433 |   border-top: 5px solid #79C3DF;
1434 |   border-radius: 3px;
1435 |   padding: 5px 10px 10px;
1436 | }
1437 | .dashboard-widget .dashboard-widget-title {
1438 |   font-weight: normal;
1439 |   border-bottom: 1px solid #c1cdcd;
1440 |   margin: 0 0 10px 0;
1441 |   padding-bottom: 5px;
1442 |   padding-left: 40px;
1443 |   line-height: 30px;
1444 | }
1445 | .dashboard-widget .dashboard-widget-title i {
1446 |   font-size: 100%;
1447 |   margin-left: -35px;
1448 |   margin-right: 10px;
1449 |   color: #33a1c9;
1450 |   padding: 3px 6px;
1451 |   border: 1px solid #abd9ea;
1452 |   border-radius: 5px;
1453 |   background: #fff;
1454 | }
1455 | ul.quick-list {
1456 |   width: 45%;
1457 |   padding-left: 0;
1458 |   display: inline-block;
1459 | }
1460 | ul.quick-list li {
1461 |   padding-left: 10px;
1462 |   list-style: none;
1463 |   margin: 0;
1464 |   padding-bottom: 6px;
1465 |   padding-top: 4px;
1466 |   white-space: nowrap;
1467 |   text-overflow: ellipsis;
1468 |   overflow: hidden;
1469 | }
1470 | ul.quick-list li i {
1471 |   padding-right: 10px;
1472 |   color: #757679;
1473 | }
1474 | .dashboard-widget-content {
1475 |   padding-top: 9px;
1476 | }
1477 | .dashboard-widget-content .sidebar-widget {
1478 |   width: 50%;
1479 |   display: inline-block;
1480 |   vertical-align: top;
1481 |   background: #fff;
1482 |   border: 1px solid #abd9ea;
1483 |   border-radius: 5px;
1484 |   text-align: center;
1485 |   float: right;
1486 |   padding: 2px;
1487 |   margin-top: 10px;
1488 | }
1489 | .widget_summary {
1490 |   width: 100%;
1491 |   display: inline-flex;
1492 | }
1493 | .widget_summary .w_left {
1494 |   float: left;
1495 |   text-align: left;
1496 | }
1497 | .widget_summary .w_center {
1498 |   float: left;
1499 | }
1500 | .widget_summary .w_right {
1501 |   float: left;
1502 |   text-align: right;
1503 | }
1504 | .widget_summary .w_right span {
1505 |   font-size: 20px;
1506 | }
1507 | .w_20 {
1508 |   width: 20%
1509 | }
1510 | .w_25 {
1511 |   width: 25%
1512 | }
1513 | .w_55 {
1514 |   width: 55%
1515 | }
1516 | h5.graph_title {
1517 |   text-align: left;
1518 |   margin-left: 10px
1519 | }
1520 | h5.graph_title i {
1521 |   margin-right: 10px;
1522 |   font-size: 17px
1523 | }
1524 | span.right {
1525 |   float: right;
1526 |   font-size: 14px !important
1527 | }
1528 | .tile_info a {
1529 |   text-overflow: ellipsis;
1530 | }
1531 | .sidebar-footer {
1532 |   bottom: 0px;
1533 |   clear: both;
1534 |   display: block;
1535 |   padding: 5px 0 0 0;
1536 |   position: fixed;
1537 |   width: 230px;
1538 |   background: #2A3F54;
1539 | }
1540 | .sidebar-footer a {
1541 |   padding: 7px 0 3px;
1542 |   text-align: center;
1543 |   width: 25%;
1544 |   font-size: 17px;
1545 |   display: block;
1546 |   float: left;
1547 |   background: #172D44;
1548 | }
1549 | .sidebar-footer a:hover {
1550 |   background: #425567;
1551 | }
1552 | 
1553 | /** top tiles  */
1554 | .tile_count {
1555 |   margin-bottom: 20px;
1556 |   margin-top: 20px;
1557 | }
1558 | .tile_count .tile_stats_count {
1559 |   border-bottom: 1px solid #D9DEE4;
1560 |   padding: 0 10px 0 20px;
1561 |   text-overflow: ellipsis;
1562 |   overflow: hidden;
1563 |   white-space: nowrap;
1564 |   position: relative;
1565 | }
1566 | 
1567 | @media (min-width: 992px) {
1568 |   footer {
1569 |     margin-left: 230px;
1570 |   }
1571 | }
1572 | 
1573 | @media (min-width: 992px) {
1574 |   .tile_count .tile_stats_count {
1575 |     margin-bottom: 10px;
1576 |     border-bottom: 0;
1577 |     padding-bottom: 10px;
1578 |   }
1579 | }
1580 | .tile_count .tile_stats_count:before {
1581 |   content:""; 
1582 |   position: absolute; 
1583 |   left: 0; 
1584 |   height: 65px;
1585 |   border-left: 2px solid #ADB2B5;
1586 |   margin-top: 10px;
1587 | }
1588 | @media (min-width:992px) {
1589 |   .tile_count .tile_stats_count:first-child:before {
1590 |     border-left: 0;
1591 |   }
1592 | }
1593 | .tile_count .tile_stats_count .count {
1594 |   font-size: 30px;
1595 |   line-height: 47px;
1596 |   font-weight: 600;
1597 | }
1598 | @media (min-width:768px) {
1599 |   .tile_count .tile_stats_count .count {
1600 |     font-size: 40px;
1601 |   }
1602 | }
1603 | @media (min-width: 992px) and (max-width: 1100px) {
1604 |   .tile_count .tile_stats_count .count {
1605 |     font-size: 30px;
1606 |   }
1607 | }
1608 | .tile_count .tile_stats_count span {
1609 |   font-size: 12px;
1610 | }
1611 | @media (min-width:768px) {
1612 |   .tile_count .tile_stats_count span {
1613 |     font-size: 13px;
1614 |   }
1615 | }
1616 | .tile_count .tile_stats_count .count_bottom i {
1617 |   width: 12px;
1618 | }
1619 | /** /top tiles **/
1620 | 
1621 | .dashboard_graph {
1622 |   background: #fff;
1623 |   padding: 7px 10px;
1624 | }
1625 | .dashboard_graph .col-md-9, .dashboard_graph .col-md-3 {
1626 |   padding: 0;
1627 | }
1628 | a.user-profile {
1629 |   color: #5E6974 !important;
1630 | }
1631 | .user-profile img {
1632 |   width: 29px;
1633 |   height: 29px;
1634 |   border-radius: 50%;
1635 |   margin-right: 10px;
1636 | }
1637 | ul.top_profiles {
1638 |   height: 330px;
1639 |   width: 100%;
1640 | }
1641 | ul.top_profiles li {
1642 |   margin: 0;
1643 |   padding: 3px 5px;
1644 | }
1645 | ul.top_profiles li:nth-child(odd) {
1646 |   background-color: #eee;
1647 | }
1648 | .media .profile_thumb {
1649 |   border: 1px solid;
1650 |   width: 50px;
1651 |   height: 50px;
1652 |   margin: 5px 10px 5px 0;
1653 |   border-radius: 50%;
1654 |   padding: 9px 12px;
1655 | }
1656 | .media .profile_thumb i {
1657 |   font-size: 30px;
1658 | }
1659 | .media .date {
1660 |   background: #ccc;
1661 |   width: 52px;
1662 |   margin-right: 10px;
1663 |   border-radius: 10px;
1664 |   padding: 5px;
1665 | }
1666 | .media .date .month {
1667 |   margin: 0;
1668 |   text-align: center;
1669 |   color: #fff;
1670 | }
1671 | .media .date .day {
1672 |   text-align: center;
1673 |   color: #fff;
1674 |   font-size: 27px;
1675 |   margin: 0;
1676 |   line-height: 27px;
1677 |   font-weight: bold;
1678 | }
1679 | .event .media-body a.title {
1680 |   font-weight: bold;
1681 | }
1682 | .event .media-body p {
1683 |   margin-bottom: 0;
1684 | }
1685 | h4.graph_title {
1686 |   margin: 7px;
1687 |   text-align: center;
1688 | }
1689 | 
1690 | /* *********  /widgets  *************************************** */
1691 | 
1692 | 
1693 | /* *********  iconts-display  **************************** */
1694 | 
1695 | .fontawesome-icon-list .fa-hover a:hover {
1696 |   background-color: #ddd;
1697 |   color: #fff;
1698 |   text-decoration: none;
1699 | }
1700 | .fontawesome-icon-list .fa-hover a {
1701 |   display: block;
1702 |   line-height: 32px;
1703 |   height: 32px;
1704 |   padding-left: 10px;
1705 |   border-radius: 4px;
1706 | }
1707 | .fontawesome-icon-list .fa-hover a:hover .fa {
1708 |   font-size: 28px;
1709 |   vertical-align: -6px;
1710 | }
1711 | .fontawesome-icon-list .fa-hover a .fa {
1712 |   width: 32px;
1713 |   font-size: 16px;
1714 |   display: inline-block;
1715 |   text-align: right;
1716 |   margin-right: 10px;
1717 | }
1718 | .main_menu .fa {
1719 |   width: 26px;
1720 |   opacity: .99;
1721 |   display: inline-block;
1722 |   font-family: FontAwesome;
1723 |   font-style: normal;
1724 |   font-weight: normal;
1725 |   font-size: 18px;
1726 |   -webkit-font-smoothing: antialiased;
1727 |   -moz-osx-font-smoothing: grayscale;
1728 | }
1729 | 
1730 | /* *********  /iconts-display  **************************** */
1731 | 
1732 | 
1733 | /** tile stats **/
1734 | .tile-stats {
1735 |   position: relative;
1736 |   display: block;
1737 |   margin-bottom: 12px;
1738 |   border: 1px solid #E4E4E4;
1739 |   -webkit-border-radius: 5px;
1740 |   overflow: hidden;
1741 |   padding-bottom: 5px;
1742 |   -webkit-background-clip: padding-box;
1743 |   -moz-border-radius: 5px;
1744 |   -moz-background-clip: padding;
1745 |   border-radius: 5px;
1746 |   background-clip: padding-box;
1747 |   background: #FFF;
1748 |   -moz-transition: all 300ms ease-in-out;
1749 |   -o-transition: all 300ms ease-in-out;
1750 |   -webkit-transition: all 300ms ease-in-out;
1751 |   transition: all 300ms ease-in-out;
1752 | }
1753 | 
1754 | .tile-stats:hover .icon i {
1755 |   animation-name: tansformAnimation;
1756 |   animation-duration: .5s;
1757 |   animation-iteration-count: 1;
1758 |   color: rgba(58, 58, 58, 0.41);
1759 |   animation-timing-function: ease;
1760 |   animation-fill-mode: forwards;
1761 |   -webkit-animation-name: tansformAnimation;
1762 |   -webkit-animation-duration: .5s;
1763 |   -webkit-animation-iteration-count: 1;
1764 |   -webkit-animation-timing-function: ease;
1765 |   -webkit-animation-fill-mode: forwards;
1766 |   -moz-animation-name: tansformAnimation;
1767 |   -moz-animation-duration: .5s;
1768 |   -moz-animation-iteration-count: 1;
1769 |   -moz-animation-timing-function: ease;
1770 |   -moz-animation-fill-mode: forwards;
1771 | }
1772 | 
1773 | .tile-stats .icon {
1774 |   width: 20px;
1775 |   height: 20px;
1776 |   color: #BAB8B8;
1777 |   position: absolute;
1778 |   right: 53px;
1779 |   top: 22px;
1780 |   z-index: 1;
1781 | }
1782 | 
1783 | .tile-stats .icon i {
1784 |   margin: 0;
1785 |   font-size: 60px;
1786 |   line-height: 0;
1787 |   vertical-align: bottom;
1788 |   padding: 0;
1789 | }
1790 | 
1791 | .tile-stats .count {
1792 |   font-size: 38px;
1793 |   font-weight: bold;
1794 |   line-height: 1.65857143
1795 | }
1796 | 
1797 | .tile-stats .count, .tile-stats h3, .tile-stats p {
1798 |   position: relative;
1799 |   margin: 0;
1800 |   margin-left: 10px;
1801 |   z-index: 5;
1802 |   padding: 0;
1803 | }
1804 | 
1805 | .tile-stats h3 {
1806 |   color: #BAB8B8;
1807 | }
1808 | 
1809 | .tile-stats p {
1810 |   margin-top: 5px;
1811 |   font-size: 12px;
1812 | }
1813 | 
1814 | .tile-stats > .dash-box-footer {
1815 |   position: relative;
1816 |   text-align: center;
1817 |   margin-top: 5px;
1818 |   padding: 3px 0;
1819 |   color: #fff;
1820 |   color: rgba(255, 255, 255, 0.8);
1821 |   display: block;
1822 |   z-index: 10;
1823 |   background: rgba(0, 0, 0, 0.1);
1824 |   text-decoration: none;
1825 | }
1826 | 
1827 | .tile-stats > .dash-box-footer:hover {
1828 |   color: #fff;
1829 |   background: rgba(0, 0, 0, 0.15);
1830 | }
1831 | 
1832 | .tile-stats > .dash-box-footer:hover {
1833 |   color: #fff;
1834 |   background: rgba(0, 0, 0, 0.15);
1835 | }
1836 | 
1837 | table.tile_info {
1838 |   padding: 10px 15px;
1839 | }
1840 | 
1841 | table.tile_info span.right {
1842 |   margin-right: 0;
1843 |   float: right;
1844 |   position: absolute;
1845 |   right: 4%;
1846 | }
1847 | 
1848 | .tile:hover {
1849 |   text-decoration: none;
1850 | }
1851 | 
1852 | .tile_header {
1853 |   border-bottom: transparent;
1854 |   padding: 7px 15px;
1855 |   margin-bottom: 15px;
1856 |   background: #E7E7E7;
1857 | }
1858 | 
1859 | .tile_head h4 {
1860 |   margin-top: 0;
1861 |   margin-bottom: 5px;
1862 | }
1863 | 
1864 | .tiles-bottom {
1865 |   padding: 5px 10px;
1866 |   margin-top: 10px;
1867 |   background: rgba(194, 194, 194, 0.3);
1868 |   text-align: left;
1869 | }
1870 | 
1871 | 
1872 | /** /tile stats **/
1873 | 
1874 | /** inbox **/
1875 | a.star {
1876 |   color: #428bca !important
1877 | }
1878 | 
1879 | .mail_content {
1880 |   background: none repeat scroll 0 0 #FFFFFF;
1881 |   border-radius: 4px;
1882 |   margin-top: 20px;
1883 |   min-height: 500px;
1884 |   padding: 10px 11px;
1885 |   width: 100%;
1886 | }
1887 | 
1888 | .list-btn-mail {
1889 |   margin-bottom: 15px;
1890 | }
1891 | 
1892 | .list-btn-mail.active {
1893 |   border-bottom: 1px solid #39B3D7;
1894 |   padding: 0 0 14px;
1895 | }
1896 | 
1897 | .list-btn-mail > i {
1898 |   float: left;
1899 |   font-size: 18px;
1900 |   font-style: normal;
1901 |   width: 33px;
1902 | }
1903 | 
1904 | .list-btn-mail > .cn {
1905 |   background: none repeat scroll 0 0 #39B3D7;
1906 |   border-radius: 12px;
1907 |   color: #FFFFFF;
1908 |   float: right;
1909 |   font-style: normal;
1910 |   padding: 0 5px;
1911 | }
1912 | 
1913 | .button-mail {
1914 |   margin: 0 0 15px !important;
1915 |   text-align: left;
1916 |   width: 100%;
1917 | }
1918 | 
1919 | button,
1920 | .buttons,
1921 | .btn,
1922 | .modal-footer .btn+.btn {
1923 |   margin-bottom: 5px;
1924 |   margin-right: 5px;
1925 | }
1926 | 
1927 | .btn-group-vertical .btn, .btn-group .btn {
1928 |   margin-bottom: 0;
1929 |   margin-right: 0;
1930 | }
1931 | 
1932 | .mail_list_column {
1933 |   border-left: 1px solid #DBDBDB;
1934 | }
1935 | 
1936 | .mail_view {
1937 |   border-left: 1px solid #DBDBDB
1938 | }
1939 | 
1940 | .mail_list {
1941 |   width: 100%;
1942 |   border-bottom: 1px solid #DBDBDB;
1943 |   margin-bottom: 2px;
1944 |   display: inline-block;
1945 | }
1946 | 
1947 | .mail_list .left {
1948 |   width: 5%;
1949 |   float: left;
1950 |   margin-right: 3%
1951 | }
1952 | 
1953 | .mail_list .right {
1954 |   width: 90%;
1955 |   float: left
1956 | }
1957 | 
1958 | .mail_list h3 {
1959 |   font-size: 15px;
1960 |   font-weight: bold;
1961 |   margin: 0px 0 6px;
1962 | }
1963 | 
1964 | .mail_list h3 small {
1965 |   float: right;
1966 |   color: #ADABAB;
1967 |   font-size: 11px;
1968 |   line-height: 20px;
1969 | }
1970 | 
1971 | .mail_list .badge {
1972 |   padding: 3px 6px;
1973 |   font-size: 8px;
1974 |   background: #BAB7B7
1975 | }
1976 | 
1977 | @media (max-width: 767px) {
1978 |   .mail_list {
1979 |     margin-bottom: 5px;
1980 |     display: inline-block;
1981 |   }
1982 | }
1983 | 
1984 | .mail_heading h4 {
1985 |   font-size: 18px;
1986 |   border-bottom: 1px solid #ddd;
1987 |   padding-bottom: 10px;
1988 |   margin-top: 20px;
1989 | }
1990 | 
1991 | .attachment {
1992 |   margin-top: 30px;
1993 | }
1994 | 
1995 | .attachment ul {
1996 |   width: 100%;
1997 |   list-style: none;
1998 |   padding-left: 0;
1999 |   display: inline-block;
2000 |   margin-bottom: 30px;
2001 | }
2002 | 
2003 | .attachment ul li {
2004 |   float: left;
2005 |   width: 150px;
2006 |   margin-right: 10px;
2007 |   margin-bottom: 10px;
2008 | }
2009 | 
2010 | .attachment ul li img {
2011 |   height: 150px;
2012 |   border: 1px solid #ddd;
2013 |   padding: 5px;
2014 |   margin-bottom: 10px;
2015 | }
2016 | 
2017 | .attachment ul li span {
2018 |   float: right;
2019 | }
2020 | 
2021 | .attachment .file-name {
2022 |   float: left;
2023 | }
2024 | 
2025 | .attachment .links {
2026 |   width: 100%;
2027 |   display: inline-block;
2028 | }
2029 | 
2030 | .compose {  
2031 |   padding: 0;
2032 |   position: fixed;
2033 |   bottom: 0;
2034 |   right: 0;
2035 |   background: #fff;
2036 |   border: 1px solid #D9DEE4;
2037 |   border-right: 0;
2038 |   border-bottom: 0;
2039 |   border-top-left-radius: 5px;
2040 |   z-index: 9999;
2041 |   display: none;
2042 | }
2043 | 
2044 | .compose .compose-header {
2045 |   padding: 5px;
2046 |   background: #169F85;
2047 |   color: #fff;
2048 |   border-top-left-radius: 5px;
2049 | }
2050 | 
2051 | .compose .compose-header .close {
2052 |   text-shadow: 0 1px 0 #ffffff;
2053 |   line-height: .8;
2054 | }
2055 | 
2056 | .compose .compose-body .editor.btn-toolbar {
2057 |   margin: 0;
2058 | }
2059 | 
2060 | .compose .compose-body .editor-wrapper {
2061 |   height: 100%;
2062 |   min-height: 50px;
2063 |   max-height: 180px;
2064 |   border-radius: 0;
2065 |   border-left: none;
2066 |   border-right: none;
2067 |   overflow: auto;
2068 | }
2069 | 
2070 | .compose .compose-footer {
2071 |   padding: 10px;
2072 | }
2073 | /** /inbox **/
2074 | 
2075 | /* *********  form design  **************************** */
2076 | 
2077 | .editor.btn-toolbar {
2078 |   zoom: 1;
2079 |   background: #F7F7F7;
2080 |   margin: 5px 2px;
2081 |   padding: 3px 0;
2082 |   border: 1px solid #EFEFEF;
2083 | }
2084 | .input-group {
2085 |   margin-bottom: 10px;
2086 | }
2087 | .ln_solid {
2088 |   border-top: 1px solid #e5e5e5;
2089 |   color: #ffffff;
2090 |   background-color: #ffffff;
2091 |   height: 1px;
2092 |   margin: 20px 0;
2093 | }
2094 | span.section {
2095 |   display: block;
2096 |   width: 100%;
2097 |   padding: 0;
2098 |   margin-bottom: 20px;
2099 |   font-size: 21px;
2100 |   line-height: inherit;
2101 |   color: #333;
2102 |   border: 0;
2103 |   border-bottom: 1px solid #e5e5e5;
2104 | }
2105 | .form-control {
2106 |   border-radius: 0;
2107 |   width: 100%;
2108 | }
2109 | .form-horizontal .control-label {
2110 |   padding-top: 8px
2111 | }
2112 | .form-control:focus {
2113 |   border-color: #CCD0D7;
2114 |   box-shadow: none !important;
2115 | }
2116 | legend {
2117 |   font-size: 18px;
2118 |   color: inherit;
2119 | }
2120 | .checkbox {}
2121 | .form-horizontal .form-group {
2122 |   margin-right: 0;
2123 |   margin-left: 0;
2124 | }
2125 | .form-control-feedback {
2126 |   margin-top: 8px;
2127 |   height: 23px;
2128 |   color: #bbb;
2129 |   line-height: 24px;
2130 |   font-size: 15px;
2131 | }
2132 | .form-control-feedback.left {
2133 |   border-right: 1px solid #ccc;
2134 |   left: 13px;
2135 | }
2136 | .form-control-feedback.right {
2137 |   border-left: 1px solid #ccc;
2138 |   right: 13px;
2139 | }
2140 | .form-control.has-feedback-left {
2141 |   padding-left: 45px;
2142 | }
2143 | .form-control.has-feedback-right {
2144 |   padding-right: 45px;
2145 | }
2146 | .form-group {
2147 |   margin-bottom: 10px;
2148 | }
2149 | .validate {
2150 |   margin-top: 10px;
2151 | }
2152 | .invalid-form-error-message {
2153 |   margin-top: 10px;
2154 |   padding: 5px;
2155 | }
2156 | .invalid-form-error-message.filled {
2157 |   border-left: 2px solid #E74C3C;
2158 | }
2159 | p.parsley-success {
2160 |   color: #468847;
2161 |   background-color: #DFF0D8;
2162 |   border: 1px solid #D6E9C6;
2163 | }
2164 | p.parsley-error {
2165 |   color: #B94A48;
2166 |   background-color: #F2DEDE;
2167 |   border: 1px solid #EED3D7;
2168 | }
2169 | ul.parsley-errors-list {
2170 |   list-style: none;
2171 |   color: #E74C3C;
2172 |   padding-left: 0;
2173 | }
2174 | input.parsley-error, textarea.parsley-error, select.parsley-error {
2175 |   background: #FAEDEC;
2176 |   border: 1px solid #E85445;
2177 | }
2178 | .btn-group .parsley-errors-list {
2179 |   display: none;
2180 | }
2181 | .bad input, .bad select, .bad textarea {
2182 |   border: 1px solid #CE5454;
2183 |   box-shadow: 0 0 4px -2px #CE5454;
2184 |   position: relative;
2185 |   left: 0;
2186 |   -moz-animation: .7s 1 shake linear;
2187 |   -webkit-animation: 0.7s 1 shake linear;
2188 | }
2189 | .item input, .item textarea {
2190 |   -webkit-transition: 0.42s;
2191 |   -moz-transition: 0.42s;
2192 |   transition: 0.42s;
2193 | }
2194 | 
2195 | /* alerts (when validation fails) */
2196 | 
2197 | .item .alert {
2198 |   float: left;
2199 |   margin: 0 0 0 20px;
2200 |   padding: 3px 10px;
2201 |   color: #FFF;
2202 |   border-radius: 3px 4px 4px 3px;
2203 |   background-color: #CE5454;
2204 |   max-width: 170px;
2205 |   white-space: pre;
2206 |   position: relative;
2207 |   left: -15px;
2208 |   opacity: 0;
2209 |   z-index: 1;
2210 |   transition: 0.15s ease-out;
2211 | }
2212 | .item .alert::after {
2213 |   content: '';
2214 |   display: block;
2215 |   height: 0;
2216 |   width: 0;
2217 |   border-color: transparent #CE5454 transparent transparent;
2218 |   border-style: solid;
2219 |   border-width: 11px 7px;
2220 |   position: absolute;
2221 |   left: -13px;
2222 |   top: 1px;
2223 | }
2224 | .item.bad .alert {
2225 |   left: 0;
2226 |   opacity: 1;
2227 | }
2228 | 
2229 | .inl-bl {
2230 |   display: inline-block;
2231 | }
2232 | .well .markup-heading {}
2233 | .well .markup {
2234 |   background: #fff;
2235 |   color: #777;
2236 |   position: relative;
2237 |   padding: 45px 15px 15px;
2238 |   margin: 15px 0 0 0;
2239 |   background-color: #fff;
2240 |   border-radius: 0 0 4px 4px;
2241 |   box-shadow: none;
2242 | }
2243 | .well .markup::after {
2244 |   content: "Example";
2245 |   position: absolute;
2246 |   top: 15px;
2247 |   left: 15px;
2248 |   font-size: 12px;
2249 |   font-weight: bold;
2250 |   color: #bbb;
2251 |   text-transform: uppercase;
2252 |   letter-spacing: 1px;
2253 | }
2254 | 
2255 | /* ***** autocomplete ***** */
2256 | 
2257 | .autocomplete-suggestions {
2258 |   border: 1px solid #e4e4e4;
2259 |   background: #F4F4F4;
2260 |   cursor: default;
2261 |   overflow: auto;
2262 | }
2263 | .autocomplete-suggestion {
2264 |   padding: 2px 5px;
2265 |   font-size: 1.2em;
2266 |   white-space: nowrap;
2267 |   overflow: hidden;
2268 | }
2269 | .autocomplete-selected {
2270 |   background: #f0f0f0;
2271 | }
2272 | .autocomplete-suggestions strong {
2273 |   font-weight: normal;
2274 |   color: #3399ff;
2275 |   font-weight: bolder;
2276 | }
2277 | /* ***** /autocomplete *****/
2278 | 
2279 | /* ***** buttons ********/
2280 | .btn {
2281 |   border-radius: 3px;
2282 | }
2283 | a.btn-success, a.btn-primary, a.btn-warning, a.btn-danger {
2284 |   color: #fff;
2285 | }
2286 | .btn-success {
2287 |   background: #26B99A;
2288 |   border: 1px solid #169F85;
2289 | }
2290 | .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
2291 |   background: #169F85;
2292 | }
2293 | .btn-dark {
2294 |   color: #E9EDEF;
2295 |   background-color: #4B5F71;
2296 |   border-color: #364B5F;
2297 | }
2298 | .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .open .dropdown-toggle.btn-dark {
2299 |   color: #FFFFFF;
2300 |   background-color: #394D5F;
2301 |   border-color: #394D5F;
2302 | }
2303 | .btn-round {
2304 |   border-radius: 30px;
2305 | }
2306 | .btn.btn-app {
2307 |   position: relative;
2308 |   padding: 15px 5px;
2309 |   margin: 0 0 10px 10px;
2310 |   min-width: 80px;
2311 |   height: 60px;
2312 |   -webkit-box-shadow: none;
2313 |   -moz-box-shadow: none;
2314 |   box-shadow: none;
2315 |   -webkit-border-radius: 0;
2316 |   -moz-border-radius: 0;
2317 |   border-radius: 0;
2318 |   text-align: center;
2319 |   color: #666;
2320 |   border: 1px solid #ddd;
2321 |   background-color: #fafafa;
2322 |   font-size: 12px;
2323 | }
2324 | .btn.btn-app > .fa, .btn.btn-app > .glyphicon, .btn.btn-app > .ion {
2325 |   font-size: 20px;
2326 |   display: block;
2327 | }
2328 | .btn.btn-app:hover {
2329 |   background: #f4f4f4;
2330 |   color: #444;
2331 |   border-color: #aaa;
2332 | }
2333 | .btn.btn-app:active, .btn.btn-app:focus {
2334 |   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
2335 |   -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
2336 |   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
2337 | }
2338 | .btn.btn-app > .badge {
2339 |   position: absolute;
2340 |   top: -3px;
2341 |   right: -10px;
2342 |   font-size: 10px;
2343 |   font-weight: 400;
2344 | }
2345 | /* ***** /buttons *******/
2346 | 
2347 | /* *********  /form design  **************************** */
2348 | 
2349 | /* *********  form textarea  **************************** */
2350 | 
2351 | textarea {
2352 |   padding: 10px;
2353 |   vertical-align: top;
2354 |   width: 200px;
2355 | }
2356 | textarea:focus {
2357 |   outline-style: solid;
2358 |   outline-width: 2px;
2359 | }
2360 | .btn_ {
2361 |   display: inline-block;
2362 |   padding: 3px 9px;
2363 |   margin-bottom: 0;
2364 |   font-size: 14px;
2365 |   line-height: 20px;
2366 |   text-align: center;
2367 |   vertical-align: middle;
2368 |   cursor: pointer;
2369 |   color: #333333;
2370 |   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2371 |   background-color: #f5f5f5;
2372 |   background-image: -moz-linear-gradient(to bottom, #ffffff, #e6e6e6);
2373 |   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
2374 |   background-image: -webkit-linear-gradient(to bottom, #ffffff, #e6e6e6);
2375 |   background-image: -o-linear-gradient(to bottom, #ffffff, #e6e6e6);
2376 |   background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
2377 |   background-repeat: repeat-x;
2378 |   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
2379 |   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
2380 |   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
2381 |   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
2382 |   border: 1px solid #cccccc;
2383 |   border-bottom-color: #b3b3b3;
2384 |   -webkit-border-radius: 4px;
2385 |   -moz-border-radius: 4px;
2386 |   border-radius: 4px;
2387 |   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
2388 |   -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
2389 |   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
2390 | }
2391 | 
2392 | /* *********  /form textarea  **************************** */
2393 | 
2394 | 
2395 | /* *********  glyphicons  **************************** */
2396 | 
2397 | .bs-glyphicons {
2398 |   margin: 0 -10px 20px;
2399 |   overflow: hidden
2400 | }
2401 | .bs-glyphicons-list {
2402 |   padding-left: 0;
2403 |   list-style: none
2404 | }
2405 | .bs-glyphicons li {
2406 |   float: left;
2407 |   width: 25%;
2408 |   height: 115px;
2409 |   padding: 10px;
2410 |   font-size: 10px;
2411 |   line-height: 1.4;
2412 |   text-align: center;
2413 |   background-color: #f9f9f9;
2414 |   border: 1px solid #fff
2415 | }
2416 | .bs-glyphicons .glyphicon {
2417 |   margin-top: 5px;
2418 |   margin-bottom: 10px;
2419 |   font-size: 24px
2420 | }
2421 | .bs-glyphicons .glyphicon-class {
2422 |   display: block;
2423 |   text-align: center;
2424 |   word-wrap: break-word
2425 | }
2426 | .bs-glyphicons li:hover {
2427 |   color: #fff;
2428 |   background-color: #1ABB9C
2429 | }
2430 | @media (min-width: 768px) {
2431 |   .bs-glyphicons {
2432 |     margin-right: 0;
2433 |     margin-left: 0
2434 |   }
2435 |   .bs-glyphicons li {
2436 |     width: 12.5%;
2437 |     font-size: 12px
2438 |   }
2439 | }
2440 | 
2441 | /* *********  /glyphicons  **************************** */
2442 | 
2443 | 
2444 | /* *********  form tags input  **************************** */
2445 | 
2446 | .tagsinput {
2447 |   border: 1px solid #CCC;
2448 |   background: #FFF;
2449 |   padding: 6px 6px 0;
2450 |   width: 300px;
2451 |   overflow-y: auto;
2452 | }
2453 | span.tag {
2454 |   -moz-border-radius: 2px;
2455 |   -webkit-border-radius: 2px;
2456 |   display: block;
2457 |   float: left;
2458 |   padding: 5px 9px;
2459 |   text-decoration: none;
2460 |   background: #1ABB9C;
2461 |   color: #F1F6F7;
2462 |   margin-right: 5px;
2463 |   font-weight: 500;
2464 |   margin-bottom: 5px;
2465 |   font-family: helvetica;
2466 | }
2467 | span.tag a {
2468 |   color: #F1F6F7 !important;
2469 | }
2470 | .tagsinput span.tag a {
2471 |   font-weight: bold;
2472 |   color: #82ad2b;
2473 |   text-decoration: none;
2474 |   font-size: 11px;
2475 | }
2476 | .tagsinput input {
2477 |   width: 80px;
2478 |   margin: 0px;
2479 |   font-family: helvetica;
2480 |   font-size: 13px;
2481 |   border: 1px solid transparent;
2482 |   padding: 3px;
2483 |   background: transparent;
2484 |   color: #000;
2485 |   outline: 0px;
2486 | }
2487 | .tagsinput div {
2488 |   display: block;
2489 |   float: left;
2490 | }
2491 | .tags_clear {
2492 |   clear: both;
2493 |   width: 100%;
2494 |   height: 0px;
2495 | }
2496 | .not_valid {
2497 |   background: #FBD8DB !important;
2498 |   color: #90111A !important;
2499 | }
2500 | 
2501 | /* *********  /form tags input  **************************** */
2502 | 
2503 | 
2504 | /** Tabs **/
2505 | ul.bar_tabs {
2506 |   overflow: visible;
2507 |   background: #F5F7FA;
2508 |   height: 25px;
2509 |   margin: 21px 0 14px;
2510 |   padding-left: 14px;
2511 |   position: relative;
2512 |   z-index: 1;
2513 |   width: 100%;
2514 |   border-bottom: 1px solid #E6E9ED;
2515 | }
2516 | ul.bar_tabs > li {
2517 |   border: 1px solid #E6E9ED;
2518 |   color: #333 !important;
2519 |   margin-top: -17px;
2520 |   margin-left: 8px;
2521 |   background: #fff;
2522 |   border-bottom: none;
2523 |   border-radius: 4px 4px 0 0;
2524 | }
2525 | ul.bar_tabs > li.active {
2526 |   border-right: 6px solid #D3D6DA;
2527 |   border-top: 0;
2528 |   margin-top: -15px;
2529 | }
2530 | ul.bar_tabs > li a {
2531 |   padding: 10px 17px;
2532 |   background: #F5F7FA;
2533 |   margin: 0;
2534 |   border-top-right-radius: 0;
2535 | }
2536 | ul.bar_tabs > li a:hover {
2537 |   border: 1px solid transparent;
2538 | }
2539 | ul.bar_tabs > li.active a {
2540 |   border-bottom: none;
2541 | }
2542 | ul.bar_tabs.right {
2543 |   padding-right: 14px;
2544 | }
2545 | ul.bar_tabs.right li {
2546 |   float: right
2547 | }
2548 | a:focus {
2549 |   outline: none;
2550 | }
2551 | /** /Tabs **/
2552 | 
2553 | 
2554 | /* *********  timeline  **************************** */
2555 | 
2556 | ul.timeline li {
2557 |   position: relative;
2558 |   border-bottom: 1px solid #e8e8e8;
2559 |   clear: both;
2560 | }
2561 | .timeline .block {
2562 |   margin: 0;
2563 |   border-left: 3px solid #e8e8e8;
2564 |   overflow: visible;
2565 |   padding: 10px 15px;
2566 |   margin-left: 105px;
2567 | }
2568 | .timeline.widget {
2569 |   min-width: 0;
2570 |   max-width: inherit;
2571 | }
2572 | .timeline.widget .block {
2573 |   margin-left: 5px;
2574 | }
2575 | .timeline .tags {
2576 |   position: absolute;
2577 |   top: 15px;
2578 |   left: 0;
2579 |   width: 84px;
2580 | }
2581 | .timeline .tag {
2582 |   display: block;
2583 |   height: 30px;
2584 |   font-size: 13px;
2585 |   padding: 8px;
2586 | }
2587 | .timeline .tag span {
2588 |   display: block;
2589 |   overflow: hidden;
2590 |   width: 100%;
2591 |   white-space: nowrap;
2592 |   text-overflow: ellipsis;
2593 | }
2594 | .tag {
2595 |   line-height: 1;
2596 |   background: #1ABB9C;
2597 |   color: #fff !important;
2598 | }
2599 | .tag:after {
2600 |   content: " ";
2601 |   height: 30px;
2602 |   width: 0;
2603 |   position: absolute;
2604 |   left: 100%;
2605 |   top: 0;
2606 |   margin: 0;
2607 |   pointer-events: none;
2608 |   border-top: 14px solid transparent;
2609 |   border-bottom: 14px solid transparent;
2610 |   border-left: 11px solid #1ABB9C;
2611 | }
2612 | .timeline h2.title {
2613 |   position: relative;
2614 |   font-size: 16px;
2615 |   margin: 0;
2616 | }
2617 | .timeline h2.title:before {
2618 |   content: "";
2619 |   position: absolute;
2620 |   left: -23px;
2621 |   top: 3px;
2622 |   display: block;
2623 |   width: 14px;
2624 |   height: 14px;
2625 |   border: 3px solid #d2d3d2;
2626 |   border-radius: 14px;
2627 |   background: #f9f9f9;
2628 | }
2629 | .timeline .byline {
2630 |   padding: .25em 0;
2631 | }
2632 | .byline {
2633 |   -webkit-font-smoothing: antialiased;
2634 |   font-style: italic;
2635 |   font-size: .9375em;
2636 |   line-height: 1.3;
2637 |   color: #aab6aa;
2638 | }
2639 | ul.social li {
2640 |   border: 0;
2641 | }
2642 | 
2643 | /* *********  /timeline  **************************** */
2644 | 
2645 | /* *********  profile/social  **************************** */
2646 | 
2647 | .social-sidebar, .social-body {
2648 |   float: right;
2649 | }
2650 | .social-sidebar {
2651 |   background: #EDEDED;
2652 |   width: 22%;
2653 | }
2654 | .social-body {
2655 |   border: 1px solid #ccc;
2656 |   width: 78%;
2657 | }
2658 | .thumb img {
2659 |   width: 50px;
2660 |   height: 50px;
2661 |   border-radius: 50%;
2662 | }
2663 | .chat .thumb img {
2664 |   width: 27px;
2665 |   height: 27px;
2666 |   border-radius: 50%;
2667 | }
2668 | .chat .status {
2669 |   float: left;
2670 |   margin: 16px 0 0 -16px;
2671 |   font-size: 14px;
2672 |   font-weight: bold;
2673 |   width: 12px;
2674 |   height: 12px;
2675 |   display: block;
2676 |   border: 2px solid #FFF;
2677 |   z-index: 12312;
2678 |   border-radius: 50%;
2679 | }
2680 | .chat .status.online {
2681 |   background: #1ABB9C;
2682 | }
2683 | .chat .status.away {
2684 |   background: #F39C12;
2685 | }
2686 | .chat .status.offline {
2687 |   background: #ccc;
2688 | }
2689 | .chat .media-body {
2690 |   padding-top: 5px;
2691 | }
2692 | 
2693 | /* *********  /profile/social  **************************** */
2694 | 
2695 | 
2696 | /* *********  widgets  **************************** */
2697 | 
2698 | .dashboard_graph .x_title {
2699 |   padding: 5px 5px 7px;
2700 | }
2701 | .dashboard_graph .x_title h3 {
2702 |   margin: 0;
2703 |   font-weight: normal;
2704 | }
2705 | .chart {
2706 |   position: relative;
2707 |   display: inline-block;
2708 |   width: 110px;
2709 |   height: 110px;
2710 |   margin-top: 5px;
2711 |   margin-bottom: 5px;
2712 |   text-align: center;
2713 | }
2714 | .chart canvas {
2715 |   position: absolute;
2716 |   top: 0;
2717 |   left: 0;
2718 | }
2719 | .percent {
2720 |   display: inline-block;
2721 |   line-height: 110px;
2722 |   z-index: 2;
2723 |   font-size: 18px;
2724 | }
2725 | .percent:after {
2726 |   content: '%';
2727 |   margin-left: 0.1em;
2728 |   font-size: .8em;
2729 | }
2730 | .angular {
2731 |   margin-top: 100px;
2732 | }
2733 | .angular .chart {
2734 |   margin-top: 0;
2735 | }
2736 | .widget {
2737 |   min-width: 250px;
2738 |   max-width: 310px;
2739 | }
2740 | .widget_tally_box .btn-group button {
2741 |   text-align: center
2742 | }
2743 | .widget_tally_box .btn-group button {
2744 |   color: inherit;
2745 |   font-weight: 500;
2746 |   background-color: #f5f5f5;
2747 |   border: 1px solid #e7e7e7;
2748 | }
2749 | ul.widget_tally, ul.widget_tally li {
2750 |   width: 100%;
2751 | }
2752 | ul.widget_tally li {
2753 |   padding: 2px 10px;
2754 |   border-bottom: 1px solid #ECECEC;
2755 |   padding-bottom: 4px;
2756 | }
2757 | ul.widget_tally .month {
2758 |   width: 70%;
2759 |   float: left;
2760 | }
2761 | ul.widget_tally .count {
2762 |   width: 30%;
2763 |   float: left;
2764 |   text-align: right
2765 | }
2766 | .pie_bg {
2767 |   border-bottom: 1px solid rgba(101, 204, 182, 0.16);
2768 |   padding-bottom: 15px;
2769 |   -webkit-border-radius: 4px;
2770 |   -moz-border-radius: 4px;
2771 |   border-radius: 4px;
2772 |   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
2773 |   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
2774 |   padding-bottom: 10px;
2775 |   -webkit-box-shadow: 0 4px 6px -6px #222;
2776 |   -moz-box-shadow: 0 4px 6px -6px #222;
2777 |   box-shadow: 0 4px 6px -6px #222;
2778 | }
2779 | .widget_tally_box .flex {
2780 |   display: flex;
2781 | }
2782 | ul.widget_profile_box {
2783 |   width: 100%;
2784 |   height: 42px;
2785 |   padding: 3px;
2786 |   background: #ececec;
2787 |   margin-top: 40px;
2788 |   margin-left: 1px;
2789 | }
2790 | ul.widget_profile_box li:first-child {
2791 |   width: 25%;
2792 |   float: left;
2793 | }
2794 | ul.widget_profile_box li:first-child a {
2795 |   float: left;
2796 | }
2797 | ul.widget_profile_box li:last-child {
2798 |   width: 25%;
2799 |   float: right;
2800 | }
2801 | ul.widget_profile_box li:last-child a {
2802 |   float: right;
2803 | }
2804 | ul.widget_profile_box li {}
2805 | ul.widget_profile_box li a {
2806 |   font-size: 22px;
2807 |   text-align: center;
2808 |   width: 35px;
2809 |   height: 35px;
2810 |   border: 1px solid rgba(52, 73, 94, 0.44);
2811 |   display: block;
2812 |   border-radius: 50%;
2813 |   padding: 0px;
2814 | }
2815 | ul.widget_profile_box li a:hover {
2816 |   color: #1ABB9C !important;
2817 |   border: 1px solid rgba(38, 185, 154, 1);
2818 | }
2819 | ul.widget_profile_box li .profile_img {
2820 |   width: 85px;
2821 |   height: 85px;
2822 |   margin: 0;
2823 |   margin-top: -28px;
2824 | }
2825 | .widget_tally_box p, .widget_tally_box span {
2826 |   text-align: center;
2827 | }
2828 | .widget_tally_box .name {
2829 |   text-align: center;
2830 |   margin: 25px;
2831 | }
2832 | .widget_tally_box .name_title {
2833 |   text-align: center;
2834 |   margin: 5px;
2835 | }
2836 | .widget_tally_box ul.legend {
2837 |   margin: 0;
2838 | }
2839 | .widget_tally_box ul.legend p, .widget_tally_box ul.legend span {
2840 |   text-align: left;
2841 | }
2842 | .widget_tally_box ul.legend li .icon {
2843 |   font-size: 20px;
2844 |   float: left;
2845 |   width: 14px;
2846 | }
2847 | .widget_tally_box ul.legend li .name {
2848 |   font-size: 14px;
2849 |   margin: 5px 0 0 14px;
2850 |   text-overflow: ellipsis;
2851 |   float: left;
2852 | }
2853 | .widget_tally_box ul.legend p {
2854 |   display: inline-block;
2855 |   margin: 0;
2856 | }
2857 | .widget_tally_box ul.verticle_bars li {
2858 |   height: 140px;
2859 |   width: 23%;
2860 | }
2861 | .widget .verticle_bars li .progress.vertical.progress_wide {
2862 |   width: 65%;
2863 | }
2864 | ul.count2 {
2865 |   width: 100%;
2866 |   margin-left: 1px;
2867 |   border: 1px solid #ddd;
2868 |   border-left: 0;
2869 |   border-right: 0;
2870 |   padding: 10px 0;
2871 | }
2872 | ul.count2 li {
2873 |   width: 30%;
2874 |   text-align: center;
2875 | }
2876 | ul.count2 li h3 {
2877 |   font-weight: 400;
2878 |   margin: 0;
2879 | }
2880 | ul.count2 li span {
2881 |   font-weight: 300;
2882 | }
2883 | /* *********  /widgets  **************************** */
2884 | 
2885 | .divider {
2886 |   border-bottom: 1px solid #ddd;
2887 |   margin: 10px;
2888 | }
2889 | .divider-dashed {
2890 |   border-top: 1px dashed #e7eaec;
2891 |   background-color: #ffffff;
2892 |   height: 1px;
2893 |   margin: 10px 0;
2894 | }
2895 | ul.messages {
2896 |   padding: 0;
2897 |   list-style: none;
2898 | }
2899 | ul.messages li, .tasks li {
2900 |   border-bottom: 1px dotted #e6e6e6;
2901 |   padding: 8px 0;
2902 | }
2903 | ul.messages li img.avatar, img.avatar {
2904 |   height: 32px;
2905 |   width: 32px;
2906 |   float: left;
2907 |   display: inline-block;
2908 |   -webkit-border-radius: 2px;
2909 |   -moz-border-radius: 2px;
2910 |   border-radius: 2px;
2911 |   padding: 2px;
2912 |   background: #f7f7f7;
2913 |   border: 1px solid #e6e6e6;
2914 | }
2915 | ul.messages li .message_date {
2916 |   float: right;
2917 |   text-align: right;
2918 | }
2919 | ul.messages li .message_wrapper {
2920 |   margin-left: 50px;
2921 |   margin-right: 40px;
2922 | }
2923 | ul.messages li .message_wrapper h4.heading {
2924 |   font-weight: 600;
2925 |   margin: 0;
2926 |   cursor: pointer;
2927 |   margin-bottom: 10px;
2928 |   line-height: 100%;
2929 | }
2930 | ul.messages li .message_wrapper blockquote {
2931 |   padding: 0px 10px;
2932 |   margin: 0;
2933 |   border-left: 5px solid #eee;
2934 | }
2935 | ul.user_data li {
2936 |   margin-bottom: 6px;
2937 | }
2938 | ul.user_data li p {
2939 |   margin-bottom: 0;
2940 | }
2941 | ul.user_data li .progress {
2942 |   width: 90%;
2943 | }
2944 | .project_progress .progress {
2945 |   margin-bottom: 3px !important;
2946 |   margin-top: 5px;
2947 | }
2948 | .projects .list-inline {
2949 |   margin: 0;
2950 | }
2951 | .profile_title {
2952 |   background: #F5F7FA;
2953 |   border: 0;
2954 |   padding: 7px 0;
2955 |   display: flex;
2956 | }
2957 | ul.stats-overview {
2958 |   border-bottom: 1px solid #e8e8e8;
2959 |   padding-bottom: 10px;
2960 |   margin-bottom: 10px;
2961 | }
2962 | ul.stats-overview li {
2963 |   display: inline-block;
2964 |   text-align: center;
2965 |   padding: 0 15px;
2966 |   width: 30%;
2967 |   font-size: 14px;
2968 |   border-right: 1px solid #e8e8e8;
2969 | }
2970 | ul.stats-overview li:last-child {
2971 |   border-right: 0;
2972 | }
2973 | ul.stats-overview li .name {
2974 |   font-size: 12px;
2975 | }
2976 | ul.stats-overview li .value {
2977 |   font-size: 14px;
2978 |   font-weight: bold;
2979 |   display: block;
2980 | }
2981 | ul.stats-overview li:first-child {
2982 |   padding-left: 0;
2983 | }
2984 | ul.project_files li {
2985 |   margin-bottom: 5px;
2986 | }
2987 | ul.project_files li a i {
2988 |   width: 20px;
2989 | }
2990 | .project_detail p {
2991 |   margin-bottom: 10px;
2992 | }
2993 | .project_detail p.title {
2994 |   font-weight: bold;
2995 |   margin-bottom: 0
2996 | }
2997 | .avatar img {
2998 |   border-radius: 50%;
2999 |   max-width: 45px;
3000 | }
3001 | 
3002 | /* *********  pricing  **************************** */
3003 | 
3004 | .pricing {
3005 |   background: #fff;
3006 | }
3007 | .pricing .title {
3008 |   background: #1ABB9C;
3009 |   height: 110px;
3010 |   color: #fff;
3011 |   padding: 15px 0 0;
3012 |   text-align: center;
3013 | }
3014 | .pricing .title h2 {
3015 |   text-transform: capitalize;
3016 |   font-size: 18px;
3017 |   border-radius: 5px 5px 0 0;
3018 |   margin: 0;
3019 |   font-weight: 400;
3020 | }
3021 | .pricing .title h1 {
3022 |   font-size: 30px;
3023 |   margin: 12px;
3024 | }
3025 | .pricing .title span {
3026 |   background: rgba(51, 51, 51, 0.28);
3027 |   padding: 2px 5px;
3028 | }
3029 | .pricing_features {
3030 |   background: #FAFAFA;
3031 |   padding: 20px 15px;
3032 |   min-height: 230px;
3033 |   font-size: 13.5px;
3034 | }
3035 | .pricing_features ul li {
3036 |   margin-top: 10px;
3037 | }
3038 | .pricing_footer {
3039 |   padding: 10px 15px;
3040 |   background-color: #f5f5f5;
3041 |   border-top: 1px solid #ddd;
3042 |   text-align: center;
3043 |   border-bottom-right-radius: 3px;
3044 |   border-bottom-left-radius: 3px;
3045 | }
3046 | .pricing_footer p {
3047 |   font-size: 13px;
3048 |   padding: 10px 0 2px;
3049 |   display: block;
3050 | }
3051 | .ui-ribbon-container {
3052 |   position: relative;
3053 | }
3054 | .ui-ribbon-container .ui-ribbon-wrapper {
3055 |   position: absolute;
3056 |   overflow: hidden;
3057 |   width: 85px;
3058 |   height: 88px;
3059 |   top: -3px;
3060 |   right: -3px;
3061 | }
3062 | .ui-ribbon-container.ui-ribbon-primary .ui-ribbon {
3063 |   background-color: #5b90bf;
3064 | }
3065 | .ui-ribbon-container .ui-ribbon {
3066 |   position: relative;
3067 |   display: block;
3068 |   text-align: center;
3069 |   font-size: 15px;
3070 |   font-weight: 700;
3071 |   color: #fff;
3072 |   -webkit-transform: rotate(45deg);
3073 |   -moz-transform: rotate(45deg);
3074 |   -ms-transform: rotate(45deg);
3075 |   -o-transform: rotate(45deg);
3076 |   transform: rotate(45deg);
3077 |   padding: 7px 0;
3078 |   left: -5px;
3079 |   top: 15px;
3080 |   width: 120px;
3081 |   line-height: 20px;
3082 |   background-color: #555;
3083 |   box-shadow: 0 0 3px rgba(0, 0, 0, .3);
3084 | }
3085 | .ui-ribbon-container.ui-ribbon-primary .ui-ribbon:after, .ui-ribbon-container.ui-ribbon-primary .ui-ribbon:before {
3086 |   border-top: 2px solid #5b90bf;
3087 | }
3088 | .ui-ribbon-container .ui-ribbon:before {
3089 |   left: 0;
3090 |   bottom: -1px;
3091 | }
3092 | .ui-ribbon-container .ui-ribbon:before {
3093 |   right: 0;
3094 | }
3095 | .ui-ribbon-container .ui-ribbon:after, .ui-ribbon-container .ui-ribbon:before {
3096 |   position: absolute;
3097 |   content: " ";
3098 |   line-height: 0;
3099 |   border-top: 2px solid #555;
3100 |   border-left: 2px solid transparent;
3101 |   border-right: 2px solid transparent;
3102 | }
3103 | 
3104 | /* *********  /pricing  **************************** */
3105 | 
3106 | 
3107 | /* *********  media gallery  **************************** */
3108 | 
3109 | .thumbnail .image {
3110 |   height: 120px;
3111 |   overflow: hidden;
3112 | }
3113 | .caption {
3114 |   padding: 9px 5px;
3115 |   background: #F7F7F7;
3116 | }
3117 | .caption p {
3118 |   margin-bottom: 5px;
3119 | }
3120 | .thumbnail {
3121 |   height: 190px;
3122 |   overflow: hidden;
3123 | }
3124 | .view {
3125 |   overflow: hidden;
3126 |   position: relative;
3127 |   text-align: center;
3128 |   box-shadow: 1px 1px 2px #e6e6e6;
3129 |   cursor: default;
3130 | }
3131 | .view .mask, .view .content {
3132 |   position: absolute;
3133 |   width: 100%;
3134 |   overflow: hidden;
3135 |   top: 0;
3136 |   left: 0
3137 | }
3138 | .view img {
3139 |   display: block;
3140 |   position: relative
3141 | }
3142 | .view .tools {
3143 |   text-transform: uppercase;
3144 |   color: #fff;
3145 |   text-align: center;
3146 |   position: relative;
3147 |   font-size: 17px;
3148 |   padding: 3px;
3149 |   background: rgba(0, 0, 0, 0.35);
3150 |   margin: 43px 0 0 0;
3151 | }
3152 | .mask.no-caption .tools {
3153 |   margin: 90px 0 0 0;
3154 | }
3155 | .view .tools a {
3156 |   display: inline-block;
3157 |   color: #FFF;
3158 |   font-size: 18px;
3159 |   font-weight: 400;
3160 |   padding: 0 4px;
3161 | }
3162 | .view p {
3163 |   font-family: Georgia, serif;
3164 |   font-style: italic;
3165 |   font-size: 12px;
3166 |   position: relative;
3167 |   color: #fff;
3168 |   padding: 10px 20px 20px;
3169 |   text-align: center
3170 | }
3171 | .view a.info {
3172 |   display: inline-block;
3173 |   text-decoration: none;
3174 |   padding: 7px 14px;
3175 |   background: #000;
3176 |   color: #fff;
3177 |   text-transform: uppercase;
3178 |   box-shadow: 0 0 1px #000
3179 | }
3180 | .view-first img {
3181 |   transition: all 0.2s linear;
3182 | }
3183 | .view-first .mask {
3184 |   opacity: 0;
3185 |   background-color: rgba(0, 0, 0, 0.5);
3186 |   transition: all 0.4s ease-in-out;
3187 | }
3188 | .view-first .tools {
3189 |   transform: translateY(-100px);
3190 |   opacity: 0;
3191 |   transition: all 0.2s ease-in-out;
3192 | }
3193 | .view-first p {
3194 |   transform: translateY(100px);
3195 |   opacity: 0;
3196 |   transition: all 0.2s linear;
3197 | }
3198 | .view-first:hover img {
3199 |   transform: scale(1.1);
3200 | }
3201 | .view-first:hover .mask {
3202 |   opacity: 1;
3203 | }
3204 | .view-first:hover .tools, .view-first:hover p {
3205 |   opacity: 1;
3206 |   transform: translateY(0px);
3207 | }
3208 | .view-first:hover p {
3209 |   transition-delay: 0.1s;
3210 | }
3211 | 
3212 | /* *********  /media gallery  **************************** */
3213 | 
3214 | 
3215 | /* *********  verticle tabs  **************************** */
3216 | 
3217 | 
3218 | /*!
3219 |  * bootstrap-vertical-tabs - v1.2.1
3220 |  * https://dbtek.github.io/bootstrap-vertical-tabs
3221 |  * 2014-11-07
3222 |  * Copyright (c) 2014 İsmail Demirbilek
3223 |  * License: MIT
3224 |  */
3225 | 
3226 | .tabs-left, .tabs-right {
3227 |   border-bottom: none;
3228 |   padding-top: 2px;
3229 | }
3230 | .tabs-left {
3231 |   border-right: 1px solid #F7F7F7;
3232 | }
3233 | .tabs-right {
3234 |   border-left: 1px solid #F7F7F7;
3235 | }
3236 | .tabs-left>li, .tabs-right>li {
3237 |   float: none;
3238 |   margin-bottom: 2px;
3239 | }
3240 | .tabs-left>li {
3241 |   margin-right: -1px;
3242 | }
3243 | .tabs-right>li {
3244 |   margin-left: -1px;
3245 | }
3246 | .tabs-left>li.active>a, .tabs-left>li.active>a:hover, .tabs-left>li.active>a:focus {
3247 |   border-bottom-color: #F7F7F7;
3248 |   border-right-color: transparent;
3249 | }
3250 | .tabs-right>li.active>a, .tabs-right>li.active>a:hover, .tabs-right>li.active>a:focus {
3251 |   border-bottom: 1px solid #F7F7F7;
3252 |   border-left-color: transparent;
3253 | }
3254 | .tabs-left>li>a {
3255 |   border-radius: 4px 0 0 4px;
3256 |   margin-right: 0;
3257 |   display: block;
3258 |   background: #F7F7F7;
3259 |   text-overflow: ellipsis;
3260 |   overflow: hidden;
3261 | }
3262 | .tabs-right>li>a {
3263 |   border-radius: 0 4px 4px 0;
3264 |   margin-right: 0;
3265 |   background: #F7F7F7;
3266 |   text-overflow: ellipsis;
3267 |   overflow: hidden;
3268 | }
3269 | .sideways {
3270 |   margin-top: 50px;
3271 |   border: none;
3272 |   position: relative;
3273 | }
3274 | .sideways>li {
3275 |   height: 20px;
3276 |   width: 120px;
3277 |   margin-bottom: 100px;
3278 | }
3279 | .sideways>li>a {
3280 |   border-bottom: 1px solid #ddd;
3281 |   border-right-color: transparent;
3282 |   text-align: center;
3283 |   border-radius: 4px 4px 0px 0px;
3284 | }
3285 | .sideways>li.active>a, .sideways>li.active>a:hover, .sideways>li.active>a:focus {
3286 |   border-bottom-color: transparent;
3287 |   border-right-color: #ddd;
3288 |   border-left-color: #ddd;
3289 | }
3290 | .sideways.tabs-left {
3291 |   left: -50px;
3292 | }
3293 | .sideways.tabs-right {
3294 |   right: -50px;
3295 | }
3296 | .sideways.tabs-right>li {
3297 |   -webkit-transform: rotate(90deg);
3298 |   -moz-transform: rotate(90deg);
3299 |   -ms-transform: rotate(90deg);
3300 |   -o-transform: rotate(90deg);
3301 |   transform: rotate(90deg);
3302 | }
3303 | .sideways.tabs-left>li {
3304 |   -webkit-transform: rotate(-90deg);
3305 |   -moz-transform: rotate(-90deg);
3306 |   -ms-transform: rotate(-90deg);
3307 |   -o-transform: rotate(-90deg);
3308 |   transform: rotate(-90deg);
3309 | }
3310 | 
3311 | /* *********  /verticle tabs  **************************** */
3312 | 
3313 | 
3314 | /* *********  moris  **************************** */
3315 | 
3316 | .morris-hover {
3317 |   position: absolute;
3318 |   z-index: 1000;
3319 | }
3320 | .morris-hover.morris-default-style {
3321 |   padding: 6px;
3322 |   color: #666;
3323 |   background: rgba(243, 242, 243, 0.8);
3324 |   border: solid 2px rgba(195, 194, 196, 0.8);
3325 |   font-family: sans-serif;
3326 |   font-size: 12px;
3327 |   text-align: center;
3328 | }
3329 | .morris-hover.morris-default-style .morris-hover-row-label {
3330 |   font-weight: bold;
3331 |   margin: 0.25em 0;
3332 | }
3333 | .morris-hover.morris-default-style .morris-hover-point {
3334 |   white-space: nowrap;
3335 |   margin: 0.1em 0;
3336 | }
3337 | 
3338 | /* *********  /moris  **************************** */
3339 | 
3340 | 
3341 | /* *********  ecommerce  **************************** */
3342 | 
3343 | .price {
3344 |   font-size: 40px;
3345 |   font-weight: 400;
3346 |   color: #26B99A;
3347 |   margin: 0;
3348 | }
3349 | .prod_title {
3350 |   border-bottom: 1px solid #DFDFDF;
3351 |   padding-bottom: 5px;
3352 |   margin: 30px 0;
3353 |   font-size: 20px;
3354 |   font-weight: 400;
3355 | }
3356 | .product-image img {
3357 |   width: 90%;
3358 | }
3359 | .prod_color li {
3360 |   margin: 0 10px;
3361 | }
3362 | .prod_color li p {
3363 |   margin-bottom: 0;
3364 | }
3365 | .prod_size li {
3366 |   padding: 0;
3367 | }
3368 | .prod_color .color {
3369 |   width: 25px;
3370 |   height: 25px;
3371 |   border: 2px solid rgba(51, 51, 51, 0.28) !important;
3372 |   padding: 2px;
3373 |   border-radius: 50px;
3374 | }
3375 | .product_gallery a {
3376 |   width: 100px;
3377 |   height: 100px;
3378 |   float: left;
3379 |   margin: 10px;
3380 |   border: 1px solid #e5e5e5;
3381 | }
3382 | .product_gallery a img {
3383 |   width: 100%;
3384 |   margin-top: 15px;
3385 | }
3386 | .product_price {
3387 |   margin: 20px 0;
3388 |   padding: 5px 10px;
3389 |   background-color: #FFFFFF;
3390 |   text-align: left;
3391 |   border: 2px dashed #E0E0E0;
3392 | }
3393 | .price-tax {
3394 |   font-size: 18px;
3395 | }
3396 | .product_social {
3397 |   margin: 20px 0;
3398 | }
3399 | .product_social ul li a i {
3400 |   font-size: 35px;
3401 | }
3402 | 
3403 | /* *********  /ecommerce  **************************** */
3404 | 
3405 | /** login **/
3406 | .login {
3407 |   background:#F7F7F7;
3408 | }
3409 | .login .fa-paw {
3410 |   font-size: 26px;
3411 | }
3412 | a.hiddenanchor {
3413 |   display: none;
3414 | }
3415 | .login_wrapper {
3416 |   right: 0px;
3417 |   margin: 0px auto;
3418 |   margin-top: 5%;
3419 |   max-width: 350px;
3420 |   position: relative;
3421 | }
3422 | .registration_form, .login_form {
3423 |   position: absolute;
3424 |   top: 0px;
3425 |   width: 100%;
3426 | }
3427 | .registration_form {
3428 |   z-index: 21;
3429 |   opacity: 0;
3430 |   width: 100%;
3431 | }
3432 | .login_form {
3433 |   z-index: 22;
3434 | }
3435 | #signup:target ~ .login_wrapper .registration_form, #signin:target ~ .login_wrapper .login_form {
3436 |   z-index: 22;
3437 |   -webkit-animation-name: fadeInLeft;
3438 |   -moz-animation-name: fadeInLeft;
3439 |   -ms-animation-name: fadeInLeft;
3440 |   -o-animation-name: fadeInLeft;
3441 |   animation-name: fadeInLeft;
3442 |   -webkit-animation-delay: .1s;
3443 |   -moz-animation-delay: .1s;
3444 |   -o-animation-delay: .1s;
3445 |   -ms-animation-delay: .1s;
3446 |   animation-delay: .1s;
3447 | }
3448 | #signup:target ~ .login_wrapper .login_form, #signin:target ~ .login_wrapper .registration_form {
3449 |   -webkit-animation-name: fadeOutLeft;
3450 |   -moz-animation-name: fadeOutLeft;
3451 |   -ms-animation-name: fadeOutLeft;
3452 |   -o-animation-name: fadeOutLeft;
3453 |   animation-name: fadeOutLeft;
3454 | }
3455 | .animate {
3456 |   -webkit-animation-duration: 0.5s;
3457 |   -webkit-animation-timing-function: ease;
3458 |   -webkit-animation-fill-mode: both;
3459 |   -moz-animation-duration: 0.5s;
3460 |   -moz-animation-timing-function: ease;
3461 |   -moz-animation-fill-mode: both;
3462 |   -o-animation-duration: 0.5s;
3463 |   -o-animation-timing-function: ease;
3464 |   -o-animation-fill-mode: both;
3465 |   -ms-animation-duration: 0.5s;
3466 |   -ms-animation-timing-function: ease;
3467 |   -ms-animation-fill-mode: both;
3468 |   animation-duration: 0.5s;
3469 |   animation-timing-function: ease;
3470 |   animation-fill-mode: both;
3471 | }
3472 | /** /login **/
3473 | 
3474 | /** signup **/
3475 | .login_box {
3476 |   padding: 20px;
3477 |   margin: auto;
3478 | }
3479 | .left {
3480 |   float: left;
3481 | }
3482 | .alignleft {
3483 |   float: left;
3484 |   margin-right: 15px;
3485 | }
3486 | .alignright {
3487 |   float: right;
3488 |   margin-left: 15px;
3489 | }
3490 | .clearfix:after, form:after {
3491 |   content: ".";
3492 |   display: block;
3493 |   height: 0;
3494 |   clear: both;
3495 |   visibility: hidden;
3496 | }
3497 | .login_content {
3498 |   margin: 0 auto;
3499 |   padding: 25px 0 0;
3500 |   position: relative;
3501 |   text-align: center;
3502 |   text-shadow: 0 1px 0 #fff;
3503 |   min-width: 280px;
3504 | }
3505 | .login_content a,
3506 | .login_content .btn-default:hover {
3507 |   text-decoration: none;
3508 | }
3509 | .login_content a:hover {
3510 |   text-decoration: underline;
3511 | }
3512 | .login_content h1 {
3513 |   font: normal 25px Helvetica, Arial, sans-serif;
3514 |   letter-spacing: -0.05em;
3515 |   line-height: 20px;
3516 |   margin: 10px 0 30px;
3517 | }
3518 | .login_content h1:before, .login_content h1:after {
3519 |   content: "";
3520 |   height: 1px;
3521 |   position: absolute;
3522 |   top: 10px;
3523 |   width: 27%;
3524 | }
3525 | .login_content h1:after {
3526 |   background: rgb(126, 126, 126);
3527 |   background: -moz-linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3528 |   background: -webkit-linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3529 |   background: -o-linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3530 |   background: -ms-linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3531 |   background: linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3532 |   right: 0;
3533 | }
3534 | .login_content h1:before {
3535 |   background: rgb(126, 126, 126);
3536 |   background: -moz-linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3537 |   background: -webkit-linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3538 |   background: -o-linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3539 |   background: -ms-linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3540 |   background: linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3541 |   left: 0;
3542 | }
3543 | .login_content h1:before, .login_content h1:after {
3544 |   content: "";
3545 |   height: 1px;
3546 |   position: absolute;
3547 |   top: 10px;
3548 |   width: 20%;
3549 | }
3550 | .login_content h1:after {
3551 |   background: rgb(126, 126, 126);
3552 |   background: -moz-linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3553 |   background: -webkit-linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3554 |   background: -o-linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3555 |   background: -ms-linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3556 |   background: linear-gradient( rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3557 |   right: 0;
3558 | }
3559 | .login_content h1:before {
3560 |   background: rgb(126, 126, 126);
3561 |   background: -moz-linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3562 |   background: -webkit-linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3563 |   background: -o-linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3564 |   background: -ms-linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3565 |   background: linear-gradient(to left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%);
3566 |   left: 0;
3567 | }
3568 | .login_content form {
3569 |   margin: 20px 0;
3570 |   position: relative
3571 | }
3572 | .login_content form input[type="text"], .login_content form input[type="email"], .login_content form input[type="password"] {
3573 |   -webkit-border-radius: 3px;
3574 |   -moz-border-radius: 3px;
3575 |   -ms-border-radius: 3px;
3576 |   -o-border-radius: 3px;
3577 |   border-radius: 3px;
3578 |   -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
3579 |   -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
3580 |   -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
3581 |   -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
3582 |   box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
3583 |   border: 1px solid #c8c8c8;
3584 |   color: #777;
3585 |   margin: 0 0 20px;
3586 |   width: 100%;
3587 | }
3588 | .login_content form input[type="text"]:focus, .login_content form input[type="email"]:focus, .login_content form input[type="password"]:focus {
3589 |   -webkit-box-shadow: 0 0 2px #AA77B4 inset;
3590 |   -moz-box-shadow: 0 0 2px #ed1c24 inset;
3591 |   -ms-box-shadow: 0 0 2px #ed1c24 inset;
3592 |   -o-box-shadow: 0 0 2px #ed1c24 inset;
3593 |   box-shadow: 0 0 2px #A97AAD inset;
3594 |   background-color: #fff;
3595 |   border: 1px solid #A878AF;
3596 |   outline: none;
3597 | }
3598 | #username {
3599 |   background-position: 10px 10px !important
3600 | }
3601 | #password {
3602 |   background-position: 10px -53px !important
3603 | }
3604 | .login_content form div a {
3605 |   font-size: 12px;
3606 |   margin: 10px 15px 0 0;
3607 | }
3608 | .reset_pass {
3609 |   margin-top: 10px !important;
3610 | }
3611 | .login_content div .reset_pass {
3612 |   margin-top: 13px !important;
3613 |   margin-right: 39px;
3614 |   float: right;
3615 | }
3616 | .separator {
3617 |   border-top: 1px solid #D8D8D8;
3618 |   margin-top: 10px;
3619 |   padding-top: 10px;
3620 | }
3621 | .button {
3622 |   background: rgb(247, 249, 250);
3623 |   background: -moz-linear-gradient(to bottom, rgba(247, 249, 250, 1) 0%, rgba(240, 240, 240, 1) 100%);
3624 |   background: -webkit-linear-gradient(to bottom, rgba(247, 249, 250, 1) 0%, rgba(240, 240, 240, 1) 100%);
3625 |   background: -o-linear-gradient(to bottom, rgba(247, 249, 250, 1) 0%, rgba(240, 240, 240, 1) 100%);
3626 |   background: -ms-linear-gradient(to bottom, rgba(247, 249, 250, 1) 0%, rgba(240, 240, 240, 1) 100%);
3627 |   background: linear-gradient(to bottom, rgba(247, 249, 250, 1) 0%, rgba(240, 240, 240, 1) 100%);
3628 |   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0);
3629 |   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
3630 |   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
3631 |   -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
3632 |   -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
3633 |   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
3634 |   -webkit-border-radius: 0 0 5px 5px;
3635 |   -moz-border-radius: 0 0 5px 5px;
3636 |   -o-border-radius: 0 0 5px 5px;
3637 |   -ms-border-radius: 0 0 5px 5px;
3638 |   border-radius: 0 0 5px 5px;
3639 |   border-top: 1px solid #CFD5D9;
3640 |   padding: 15px 0;
3641 | }
3642 | .login_content form input[type="submit"], #content form .submit {
3643 |   float: left;
3644 |   margin-left: 38px;
3645 | }
3646 | .button a {
3647 |   background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
3648 |   color: #7E7E7E;
3649 |   font-size: 17px;
3650 |   padding: 2px 0 2px 40px;
3651 |   text-decoration: none;
3652 |   -webkit-transition: all 0.3s ease;
3653 |   -moz-transition: all 0.3s ease;
3654 |   -ms-transition: all 0.3s ease;
3655 |   -o-transition: all 0.3s ease;
3656 |   transition: all 0.3s ease;
3657 | }
3658 | .button a:hover {
3659 |   background-position: 0 -135px;
3660 |   color: #00aeef;
3661 | }
3662 | header {
3663 |   width: 100%;
3664 | }
3665 | /** signup **/
3666 | 
3667 | /** NProgress **/
3668 | #nprogress .bar {
3669 |   background: #1ABB9C;
3670 | }
3671 | 
3672 | #nprogress .peg {
3673 |   box-shadow: 0 0 10px #1ABB9C, 0 0 5px #1ABB9C;
3674 | }
3675 | 
3676 | #nprogress .spinner-icon {
3677 |   border-top-color: #1ABB9C;
3678 |   border-left-color: #1ABB9C;
3679 | }
3680 | /** /NProgress **/
3681 | 
3682 | /** bootstrap-wysiwyg **/
3683 | .editor-wrapper {
3684 |   min-height: 250px;
3685 |   background-color: white;
3686 |   border-collapse: separate; 
3687 |   border: 1px solid rgb(204, 204, 204); 
3688 |   padding: 4px; 
3689 |   box-sizing: content-box; 
3690 |   -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; 
3691 |   box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
3692 |   border-top-right-radius: 3px; border-bottom-right-radius: 3px;
3693 |   border-bottom-left-radius: 3px; border-top-left-radius: 3px;
3694 |   overflow: scroll;
3695 |   outline: none;
3696 | }
3697 | 
3698 | .voiceBtn {
3699 |   width: 20px;
3700 |   color: transparent;
3701 |   background-color: transparent;
3702 |   transform: scale(2.0, 2.0);
3703 |   -webkit-transform: scale(2.0, 2.0);
3704 |   -moz-transform: scale(2.0, 2.0);
3705 |   border: transparent;
3706 |   cursor: pointer;
3707 |   box-shadow: none;
3708 |   -webkit-box-shadow: none;
3709 | }
3710 | 
3711 | div[data-role="editor-toolbar"] {
3712 |   -webkit-user-select: none;
3713 |   -moz-user-select: none;
3714 |   -ms-user-select: none;
3715 |   user-select: none;
3716 | }
3717 | 
3718 | .dropdown-menu a {
3719 |   cursor: pointer;
3720 | }
3721 | /** /bootstrap-wysiwyg **/
3722 | 
3723 | /** Select2 **/
3724 | .select2-container--default .select2-selection--single,
3725 | .select2-container--default .select2-selection--multiple {
3726 |   background-color: #fff;
3727 |   border: 1px solid #ccc;
3728 |   border-radius: 0;
3729 |   min-height: 38px;
3730 | }
3731 | 
3732 | .select2-container--default .select2-selection--single .select2-selection__rendered {
3733 |   color: #73879C;
3734 |   padding-top: 5px;
3735 | }
3736 | 
3737 | .select2-container--default .select2-selection--multiple .select2-selection__rendered {
3738 |   padding-top: 3px;
3739 | }
3740 | 
3741 | .select2-container--default .select2-selection--single .select2-selection__arrow {
3742 |   height: 36px;
3743 | }
3744 | 
3745 | .select2-container--default .select2-selection--multiple .select2-selection__choice,
3746 | .select2-container--default .select2-selection--multiple .select2-selection__clear {
3747 |   margin-top: 2px;
3748 |   border: none;
3749 |   border-radius: 0;
3750 |   padding: 3px 5px;
3751 | }
3752 | 
3753 | .select2-container--default.select2-container--focus .select2-selection--multiple {
3754 |   border: 1px solid #ccc;
3755 | }
3756 | /** /Select2 **/
3757 | 
3758 | /** Switchery **/
3759 | .switchery {
3760 |   width: 32px;
3761 |   height: 20px;
3762 | }
3763 | 
3764 | .switchery>small {
3765 |   width: 20px;
3766 |   height: 20px;
3767 | }
3768 | /** /Switchery **/
3769 | 
3770 | /** Normalize.css **/
3771 | fieldset {
3772 |   border: none;
3773 |   margin: 0;
3774 |   padding: 0;
3775 | }
3776 | /** /Normalize.css **/
3777 | 
3778 | /** Cropper **/
3779 | .cropper .img-container,
3780 | .cropper .img-preview {
3781 |   background-color: #f7f7f7;
3782 |   width: 100%;
3783 |   text-align: center;
3784 | }
3785 | 
3786 | .cropper .img-container {
3787 |   min-height: 200px;
3788 |   max-height: 516px;
3789 |   margin-bottom: 20px;
3790 | }
3791 | 
3792 | @media (min-width: 768px) {
3793 |   .cropper .img-container {
3794 |     min-height: 516px;
3795 |   }
3796 | }
3797 | 
3798 | .cropper .img-container > img {
3799 |   max-width: 100%;
3800 | }
3801 | 
3802 | .cropper .docs-preview {
3803 |   margin-right: -15px;
3804 | }
3805 | 
3806 | .cropper .img-preview {
3807 |   float: left;
3808 |   margin-right: 10px;
3809 |   margin-bottom: 10px;
3810 |   overflow: hidden;
3811 | }
3812 | 
3813 | .cropper .img-preview > img {
3814 |   max-width: 100%;
3815 | }
3816 | 
3817 | .cropper .preview-lg {
3818 |   width: 263px;
3819 |   height: 148px;
3820 | }
3821 | 
3822 | .cropper .preview-md {
3823 |   width: 139px;
3824 |   height: 78px;
3825 | }
3826 | 
3827 | .cropper .preview-sm {
3828 |   width: 69px;
3829 |   height: 39px;
3830 | }
3831 | 
3832 | .cropper .preview-xs {
3833 |   width: 35px;
3834 |   height: 20px;
3835 |   margin-right: 0;
3836 | }
3837 | 
3838 | .cropper .docs-data > .input-group {
3839 |   margin-bottom: 10px;
3840 | }
3841 | 
3842 | .cropper .docs-data > .input-group > label {
3843 |   min-width: 80px;
3844 | }
3845 | 
3846 | .cropper .docs-data > .input-group > span {
3847 |   min-width: 50px;
3848 | }
3849 | 
3850 | .cropper .docs-buttons > .btn,
3851 | .cropper .docs-buttons > .btn-group,
3852 | .cropper .docs-buttons > .form-control {
3853 |   margin-right: 5px;
3854 |   margin-bottom: 10px;
3855 | }
3856 | 
3857 | .cropper .docs-toggles > .btn,
3858 | .cropper .docs-toggles > .btn-group,
3859 | .cropper .docs-toggles > .dropdown {
3860 |   margin-bottom: 10px;
3861 | }
3862 | 
3863 | .cropper .docs-tooltip {
3864 |   display: block;
3865 |   margin: -6px -12px;
3866 |   padding: 6px 12px;
3867 | }
3868 | 
3869 | .cropper .docs-tooltip > .icon {
3870 |   margin: 0 -3px;
3871 |   vertical-align: top;
3872 | }
3873 | 
3874 | .cropper .tooltip-inner {
3875 |   white-space: normal;
3876 | }
3877 | 
3878 | .cropper .btn-upload .tooltip-inner,
3879 | .cropper .btn-toggle .tooltip-inner {
3880 |   white-space: nowrap;
3881 | }
3882 | 
3883 | .cropper .btn-toggle {
3884 |   padding: 6px;
3885 | }
3886 | 
3887 | .cropper .btn-toggle > .docs-tooltip {
3888 |   margin: -6px;
3889 |   padding: 6px;
3890 | }
3891 | 
3892 | @media (max-width: 400px) {
3893 |   .cropper .btn-group-crop {
3894 |     margin-right: -15px!important;
3895 |   }
3896 | 
3897 |   .cropper .btn-group-crop > .btn {
3898 |     padding-left: 5px;
3899 |     padding-right: 5px;
3900 |   }
3901 | 
3902 |   .cropper .btn-group-crop .docs-tooltip {
3903 |     margin-left: -5px;
3904 |     margin-right: -5px;
3905 |     padding-left: 5px;
3906 |     padding-right: 5px;
3907 |   }
3908 | }
3909 | 
3910 | .cropper .docs-options .dropdown-menu {
3911 |   width: 100%;
3912 | }
3913 | 
3914 | .cropper .docs-options .dropdown-menu > li {
3915 |   padding: 3px 20px;
3916 | }
3917 | 
3918 | .cropper .docs-options .dropdown-menu > li:hover {
3919 |   background-color: #f7f7f7;
3920 | }
3921 | 
3922 | .cropper .docs-options .dropdown-menu > li > label {
3923 |   display: block;
3924 | }
3925 | 
3926 | .cropper .docs-cropped .modal-body {
3927 |   text-align: center;
3928 | }
3929 | 
3930 | .cropper .docs-cropped .modal-body > img,
3931 | .cropper .docs-cropped .modal-body > canvas {
3932 |   max-width: 100%;
3933 | }
3934 | 
3935 | .cropper .docs-diagram .modal-dialog {
3936 |   max-width: 352px;
3937 | }
3938 | 
3939 | .cropper .docs-cropped canvas {
3940 |   max-width: 100%;
3941 | }
3942 | /** /Cropper **/
3943 | 
3944 | /** jQuery Smart Wizard  **/
3945 | .form_wizard .stepContainer {
3946 |   display: block;
3947 |   position: relative;
3948 |   margin: 0;
3949 |   padding: 0;
3950 |   border: 0 solid #CCC;
3951 |   overflow-x: hidden;
3952 | }
3953 | 
3954 | .wizard_horizontal ul.wizard_steps {
3955 |   display: table;
3956 |   list-style: none;
3957 |   position: relative;
3958 |   width: 100%;
3959 |   margin: 0 0 20px;
3960 | }
3961 | 
3962 | .wizard_horizontal ul.wizard_steps li {
3963 |   display: table-cell;
3964 |   text-align: center;
3965 | }
3966 | 
3967 | .wizard_horizontal ul.wizard_steps li a, .wizard_horizontal ul.wizard_steps li:hover {
3968 |   display: block;
3969 |   position: relative;
3970 |   -moz-opacity: 1;
3971 |   filter: alpha(opacity= 100);
3972 |   opacity: 1;
3973 |   color: #666;
3974 | }
3975 | 
3976 | .wizard_horizontal ul.wizard_steps li a:before {
3977 |   content: "";
3978 |   position: absolute;
3979 |   height: 4px;
3980 |   background: #ccc;
3981 |   top: 20px;
3982 |   width: 100%;
3983 |   z-index: 4;
3984 |   left: 0;
3985 | }
3986 | 
3987 | .wizard_horizontal ul.wizard_steps li a.disabled .step_no {
3988 |   background: #ccc;
3989 | }
3990 | 
3991 | .wizard_horizontal ul.wizard_steps li a .step_no {
3992 |   width: 40px;
3993 |   height: 40px;
3994 |   line-height: 40px;
3995 |   border-radius: 100px;
3996 |   display: block;
3997 |   margin: 0 auto 5px;
3998 |   font-size: 16px;
3999 |   text-align: center;
4000 |   position: relative;
4001 |   z-index: 5;
4002 | }
4003 | 
4004 | .wizard_horizontal ul.wizard_steps li a.selected:before, .step_no {
4005 |   background: #34495E;
4006 |   color: #fff;
4007 | }
4008 | 
4009 | .wizard_horizontal ul.wizard_steps li a.done:before, .wizard_horizontal ul.wizard_steps li a.done .step_no {
4010 |   background: #1ABB9C;
4011 |   color: #fff;
4012 | }
4013 | 
4014 | .wizard_horizontal ul.wizard_steps li:first-child a:before {
4015 |   left: 50%;
4016 | }
4017 | 
4018 | .wizard_horizontal ul.wizard_steps li:last-child a:before {
4019 |   right: 50%;
4020 |   width: 50%;
4021 |   left: auto;
4022 | }
4023 | 
4024 | .wizard_verticle .stepContainer {
4025 |   width: 80%;
4026 |   float: left;
4027 |   padding: 0 10px;
4028 | }
4029 | 
4030 | .actionBar {
4031 |   width: 100%;
4032 |   border-top: 1px solid #ddd;
4033 |   padding: 10px 5px;
4034 |   text-align: right;
4035 |   margin-top: 10px;
4036 | }
4037 | 
4038 | .actionBar .buttonDisabled {
4039 |   cursor: not-allowed;
4040 |   pointer-events: none;
4041 |   opacity: .65;
4042 |   filter: alpha(opacity=65);
4043 |   -webkit-box-shadow: none;
4044 |   box-shadow: none;
4045 | }
4046 | 
4047 | .actionBar a {
4048 |   margin: 0 3px;
4049 | }
4050 | 
4051 | .wizard_verticle .wizard_content {
4052 |   width: 80%;
4053 |   float: left;
4054 |   padding-left: 20px;
4055 | }
4056 | 
4057 | .wizard_verticle ul.wizard_steps {
4058 |   display: table;
4059 |   list-style: none;
4060 |   position: relative;
4061 |   width: 20%;
4062 |   float: left;
4063 |   margin: 0 0 20px;
4064 | }
4065 | 
4066 | .wizard_verticle ul.wizard_steps li {
4067 |   display: list-item;
4068 |   text-align: center;
4069 | }
4070 | 
4071 | .wizard_verticle ul.wizard_steps li a {
4072 |   height: 80px;
4073 | }
4074 | 
4075 | .wizard_verticle ul.wizard_steps li a:first-child {
4076 |   margin-top: 20px;
4077 | }
4078 | 
4079 | .wizard_verticle ul.wizard_steps li a, .wizard_verticle ul.wizard_steps li:hover {
4080 |   display: block;
4081 |   position: relative;
4082 |   -moz-opacity: 1;
4083 |   filter: alpha(opacity= 100);
4084 |   opacity: 1;
4085 |   color: #666;
4086 | }
4087 | 
4088 | .wizard_verticle ul.wizard_steps li a:before {
4089 |   content: "";
4090 |   position: absolute;
4091 |   height: 100%;
4092 |   background: #ccc;
4093 |   top: 20px;
4094 |   width: 4px;
4095 |   z-index: 4;
4096 |   left: 49%;
4097 | }
4098 | 
4099 | .wizard_verticle ul.wizard_steps li a.disabled .step_no {
4100 |   background: #ccc;
4101 | }
4102 | 
4103 | .wizard_verticle ul.wizard_steps li a .step_no {
4104 |   width: 40px;
4105 |   height: 40px;
4106 |   line-height: 40px;
4107 |   border-radius: 100px;
4108 |   display: block;
4109 |   margin: 0 auto 5px;
4110 |   font-size: 16px;
4111 |   text-align: center;
4112 |   position: relative;
4113 |   z-index: 5;
4114 | }
4115 | 
4116 | .wizard_verticle ul.wizard_steps li a.selected:before, .step_no {
4117 |   background: #34495E;
4118 |   color: #fff;
4119 | }
4120 | 
4121 | .wizard_verticle ul.wizard_steps li a.done:before, .wizard_verticle ul.wizard_steps li a.done .step_no {
4122 |   background: #1ABB9C;
4123 |   color: #fff;
4124 | }
4125 | 
4126 | .wizard_verticle ul.wizard_steps li:first-child a:before {
4127 |   left: 49%;
4128 | }
4129 | 
4130 | .wizard_verticle ul.wizard_steps li:last-child a:before {
4131 |   left: 49%;
4132 |   left: auto;
4133 |   width: 0;
4134 | }
4135 | 
4136 | .form_wizard .loader {
4137 |   display: none;
4138 | }
4139 | 
4140 | .form_wizard .msgBox {
4141 |   display: none;
4142 | }
4143 | /** jQuery Smart Wizard  **/
4144 | 
4145 | /** bootstrap-progressbar  **/
4146 | .progress {
4147 |   border-radius: 0;
4148 | }
4149 | 
4150 | .progress-bar-info {
4151 |   background-color: #3498DB;
4152 | }
4153 | 
4154 | .progress-bar-success {
4155 |     background-color: #26B99A;
4156 | }
4157 | 
4158 | .progress_summary .progress {
4159 |   margin: 5px 0 12px !important;
4160 | }
4161 | 
4162 | .progress_summary .row {
4163 |   margin-bottom: 5px;
4164 | }
4165 | 
4166 | .progress_summary .row .col-xs-2 {
4167 |   padding: 0
4168 | }
4169 | 
4170 | .progress_summary .more_info span {
4171 |   text-align: right;
4172 |   float: right;
4173 | }
4174 | 
4175 | .progress_summary .data span {
4176 |   text-align: right;
4177 |   float: right;
4178 | }
4179 | 
4180 | .progress_summary p {
4181 |   margin-bottom: 3px;
4182 |   width: 100%;
4183 | }
4184 | 
4185 | .progress_title .left {
4186 |   float: left;
4187 |   text-align: left;
4188 | }
4189 | 
4190 | .progress_title .right {
4191 |   float: right;
4192 |   text-align: right;
4193 |   font-weight: 300;
4194 | }
4195 | 
4196 | .progress.progress_sm {
4197 |   border-radius: 0;
4198 |   margin-bottom: 18px;
4199 |   height: 10px !important;
4200 | }
4201 | 
4202 | .progress.progress_sm .progress-bar {
4203 |   height: 10px !important;
4204 | }
4205 | 
4206 | .dashboard_graph p {
4207 |   margin: 0 0 4px;
4208 | }
4209 | 
4210 | ul.verticle_bars {
4211 |   width: 100%;
4212 | }
4213 | 
4214 | ul.verticle_bars li {
4215 |   width: 23%;
4216 |   height: 200px;
4217 |   margin: 0;
4218 | }
4219 | 
4220 | .progress.vertical.progress_wide {
4221 |   width: 35px;
4222 | }
4223 | /** bootstrap-progressbar  **/
4224 | 
4225 | /** PNotify **/
4226 | .alert-success {
4227 |   color: #ffffff;
4228 |   background-color: rgba(38, 185, 154, 0.88);
4229 |   border-color: rgba(38, 185, 154, 0.88);
4230 | }
4231 | 
4232 | .alert-info {
4233 |   color: #E9EDEF;
4234 |   background-color: rgba(52, 152, 219, 0.88);
4235 |   border-color: rgba(52, 152, 219, 0.88);
4236 | }
4237 | 
4238 | .alert-warning {
4239 |   color: #E9EDEF;
4240 |   background-color: rgba(243, 156, 18, 0.88);
4241 |   border-color: rgba(243, 156, 18, 0.88);
4242 | }
4243 | 
4244 | .alert-danger,
4245 | .alert-error {
4246 |   color: #E9EDEF;
4247 |   background-color: rgba(231, 76, 60, 0.88);
4248 |   border-color: rgba(231, 76, 60, 0.88);
4249 | }
4250 | 
4251 | .ui-pnotify.dark .ui-pnotify-container {
4252 |   color: #E9EDEF;
4253 |   background-color: rgba(52, 73, 94, 0.88);
4254 |   border-color: rgba(52, 73, 94, 0.88);
4255 | }
4256 | 
4257 | .custom-notifications {
4258 |   position: fixed;
4259 |   margin: 15px;
4260 |   right: 0;
4261 |   float: right;
4262 |   width: 400px;
4263 |   z-index: 4000;
4264 |   bottom: 0;
4265 | }
4266 | 
4267 | ul.notifications {
4268 |   float: right;
4269 |   display: block;
4270 |   margin-bottom: 7px;
4271 |   padding: 0;
4272 |   width: 100%;
4273 | }
4274 | 
4275 | .notifications li {
4276 |   float: right;
4277 |   margin: 3px;
4278 |   width: 36px;
4279 |   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
4280 | }
4281 | 
4282 | .notifications li:last-child {
4283 |   margin-left: 0;
4284 | }
4285 | 
4286 | .notifications a {
4287 |   display: block;
4288 |   text-align: center;
4289 |   text-decoration: none;
4290 |   text-transform: uppercase;
4291 |   padding: 9px 8px;
4292 | }
4293 | 
4294 | .tabbed_notifications .text {
4295 |   padding: 5px 15px;
4296 |   height: 140px;
4297 |   border-radius: 7px;
4298 |   box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3);
4299 | }
4300 | 
4301 | .tabbed_notifications div p {
4302 |   display: inline-block;
4303 | }
4304 | 
4305 | .tabbed_notifications h2 {
4306 |   font-weight: bold;
4307 |   text-transform: uppercase;
4308 |   width: 80%;
4309 |   float: left;
4310 |   height: 20px;
4311 |   text-overflow: ellipsis;
4312 |   overflow: hidden;
4313 |   display: block;
4314 | }
4315 | 
4316 | .tabbed_notifications .close {
4317 |   padding: 5px;
4318 |   color: #E9EDEF;
4319 |   float: right;
4320 |   opacity: 1;
4321 | }
4322 | /** /PNotify **/
4323 | 
4324 | /** bootstrap-daterangepicker **/
4325 | .daterangepicker.dropdown-menu {
4326 |   font-size: 13px;
4327 |   padding: 0;
4328 |   overflow: hidden;
4329 | }
4330 | 
4331 | .daterangepicker.picker_1 {
4332 |   background: #34495E;
4333 |   color: #ECF0F1;
4334 | }
4335 | 
4336 | .daterangepicker.picker_1 table.table-condensed thead tr:first-child {
4337 |   background: #1ABB9C;
4338 | }
4339 | 
4340 | .daterangepicker table.table-condensed thead tr:first-child th {
4341 |   line-height: 28px;
4342 |   text-align: center;
4343 | }
4344 | 
4345 | .daterangepicker.picker_1 table.table-condensed thead tr {
4346 |   background: #213345;
4347 | }
4348 | 
4349 | .daterangepicker table.table-condensed thead tr {
4350 |   line-height: 14px;
4351 | }
4352 | 
4353 | .daterangepicker table.table-condensed tbody tr:first-child td {
4354 |   padding-top: 10px;
4355 | }
4356 | 
4357 | .daterangepicker table.table-condensed th:first-child, .daterangepicker table.table-condensed td:first-child {
4358 |   padding-left: 12px
4359 | }
4360 | 
4361 | .daterangepicker table.table-condensed th:last-child, .daterangepicker table.table-condensed td:last-child {
4362 |   padding-right: 12px
4363 | }
4364 | 
4365 | .table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
4366 |   padding: 5px 7px;
4367 |   text-align: center;
4368 | }
4369 | 
4370 | .daterangepicker table.table-condensed tbody tr:last-child td {
4371 |   padding-bottom: 10px;
4372 | }
4373 | 
4374 | .daterangepicker.picker_2 table.table-condensed thead tr:first-child {
4375 |   color: inherit;
4376 | }
4377 | 
4378 | .daterangepicker.picker_2 table.table-condensed thead tr {
4379 |   color: #1ABB9C;
4380 | }
4381 | 
4382 | .daterangepicker.picker_3 table.table-condensed thead tr:first-child {
4383 |   background: #1ABB9C;
4384 |   color: #ECF0F1;
4385 | }
4386 | 
4387 | .daterangepicker.picker_4 table.table-condensed tbody td {
4388 |   background: #ECF0F1;
4389 |   color: #34495E;
4390 |   border: 1px solid #fff;
4391 |   padding: 4px 7px;
4392 | }
4393 | 
4394 | .daterangepicker.picker_4 table.table-condensed tbody td.active {
4395 |   background: #536A7F;
4396 |   color: #fff;
4397 | }
4398 | 
4399 | .daterangepicker.picker_4 table.table-condensed thead tr:first-child {
4400 |   background: #34495E;
4401 |   color: #ECF0F1;
4402 | }
4403 | 
4404 | .xdisplay_input {
4405 |   width: 240px;
4406 |   overflow: hidden;
4407 |   padding: 0;
4408 | }
4409 | 
4410 | .xdisplay {
4411 |   background-color: #fff;
4412 |   -webkit-background-clip: padding-box;
4413 |   background-clip: padding-box;
4414 |   border: 1px solid #ccc;
4415 |   margin-bottom: 20px;
4416 |   border: 1px solid rgba(0, 0, 0, .15);
4417 |   border-radius: 4px;
4418 |   width: 230px;
4419 |   overflow: hidden;
4420 |   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
4421 |   box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
4422 | }
4423 | 
4424 | .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar, .daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar {
4425 |   float: right;
4426 | }
4427 | 
4428 | .daterangepicker.dropdown-menu .calendar {}
4429 | .daterangepicker table {
4430 |   width: 100%;
4431 |   margin: 0;
4432 | }
4433 | 
4434 | .daterangepicker td, .daterangepicker th {
4435 |   text-align: center;
4436 |   width: 20px;
4437 |   height: 20px;
4438 |   cursor: pointer;
4439 |   white-space: nowrap;
4440 | }
4441 | 
4442 | .daterangepicker td.off {
4443 |   color: #999;
4444 | }
4445 | 
4446 | .daterangepicker td.disabled {
4447 |   color: #999;
4448 | }
4449 | 
4450 | .daterangepicker td.available:hover, .daterangepicker th.available:hover {
4451 |   background: #eee;
4452 |   color: #34495E;
4453 | }
4454 | 
4455 | .daterangepicker td.in-range {
4456 |   background: #E4E7EA;
4457 |   -webkit-border-radius: 0;
4458 |   -moz-border-radius: 0;
4459 |   border-radius: 0;
4460 | }
4461 | 
4462 | .daterangepicker td.available + td.start-date {
4463 |   -webkit-border-radius: 4px 0 0 4px;
4464 |   -moz-border-radius: 4px 0 0 4px;
4465 |   border-radius: 4px 0 0 4px;
4466 | }
4467 | 
4468 | .daterangepicker td.in-range + td.end-date {
4469 |   -webkit-border-radius: 0 4px 4px 0;
4470 |   -moz-border-radius: 0 4px 4px 0;
4471 |   border-radius: 0 4px 4px 0;
4472 | }
4473 | 
4474 | .daterangepicker td.start-date.end-date {
4475 |   -webkit-border-radius: 4px !important;
4476 |   -moz-border-radius: 4px !important;
4477 |   border-radius: 4px !important;
4478 | }
4479 | 
4480 | .daterangepicker td.active, .daterangepicker td.active:hover {
4481 |   background-color: #536A7F;
4482 |   color: #fff;
4483 | }
4484 | 
4485 | .daterangepicker td.week, .daterangepicker th.week {
4486 |   font-size: 80%;
4487 |   color: #ccc;
4488 | }
4489 | 
4490 | .daterangepicker select.monthselect, .daterangepicker select.yearselect {
4491 |   font-size: 12px;
4492 |   padding: 1px;
4493 |   height: auto;
4494 |   margin: 0;
4495 |   cursor: default;
4496 |   height: 30px;
4497 |   border: 1px solid #ADB2B5;
4498 |   line-height: 30px;
4499 |   border-radius: 0px !important;
4500 | }
4501 | 
4502 | .daterangepicker select.monthselect {
4503 |   margin-right: 2%;
4504 |   width: 56%;
4505 | }
4506 | 
4507 | .daterangepicker select.yearselect {
4508 |   width: 40%;
4509 | }
4510 | 
4511 | .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect {
4512 |   width: 50px;
4513 |   margin-bottom: 0;
4514 | }
4515 | 
4516 | .daterangepicker_start_input {
4517 |   float: left;
4518 | }
4519 | 
4520 | .daterangepicker_end_input {
4521 |   float: left;
4522 |   padding-left: 11px;
4523 | }
4524 | 
4525 | .daterangepicker th.month {
4526 |   width: auto;
4527 | }
4528 | 
4529 | .daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label {
4530 |   color: #333;
4531 |   display: block;
4532 |   font-size: 11px;
4533 |   font-weight: normal;
4534 |   height: 20px;
4535 |   line-height: 20px;
4536 |   margin-bottom: 2px;
4537 |   text-shadow: #fff 1px 1px 0px;
4538 |   text-transform: uppercase;
4539 |   width: 74px;
4540 | }
4541 | 
4542 | .daterangepicker .ranges input {
4543 |   font-size: 11px;
4544 | }
4545 | 
4546 | .daterangepicker .ranges .input-mini {
4547 |   background-color: #eee;
4548 |   border: 1px solid #ccc;
4549 |   border-radius: 4px;
4550 |   color: #555;
4551 |   display: block;
4552 |   font-size: 11px;
4553 |   height: 30px;
4554 |   line-height: 30px;
4555 |   vertical-align: middle;
4556 |   margin: 0 0 10px 0;
4557 |   padding: 0 6px;
4558 |   width: 74px;
4559 | }
4560 | 
4561 | .daterangepicker .ranges .input-mini:hover {
4562 |   cursor: pointer;
4563 | }
4564 | 
4565 | .daterangepicker .ranges ul {
4566 |   list-style: none;
4567 |   margin: 0;
4568 |   padding: 0;
4569 | }
4570 | 
4571 | .daterangepicker .ranges li {
4572 |   font-size: 13px;
4573 |   background: #f5f5f5;
4574 |   border: 1px solid #f5f5f5;
4575 |   color: #536A7F;
4576 |   padding: 3px 12px;
4577 |   margin-bottom: 8px;
4578 |   -webkit-border-radius: 5px;
4579 |   -moz-border-radius: 5px;
4580 |   border-radius: 5px;
4581 |   cursor: pointer;
4582 | }
4583 | 
4584 | .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
4585 |   background: #536A7F;
4586 |   border: 1px solid #536A7F;
4587 |   color: #fff;
4588 | }
4589 | 
4590 | .daterangepicker .calendar {
4591 |   display: none;
4592 |   max-width: 270px;
4593 | }
4594 | 
4595 | .daterangepicker.show-calendar .calendar {
4596 |   display: block;
4597 | }
4598 | 
4599 | .daterangepicker .calendar.single .calendar-date {
4600 |   border: none;
4601 | }
4602 | 
4603 | .daterangepicker.single .ranges, .daterangepicker.single .calendar {
4604 |   float: none;
4605 | }
4606 | 
4607 | .daterangepicker .ranges {
4608 |   width: 160px;
4609 |   text-align: left;
4610 |   margin: 4px;
4611 | }
4612 | 
4613 | .daterangepicker .ranges .range_inputs>div {
4614 |   float: left;
4615 | }
4616 | 
4617 | .daterangepicker .ranges .range_inputs>div:nth-child(2) {
4618 |   padding-left: 11px;
4619 | }
4620 | 
4621 | .daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
4622 |   float: left;
4623 |   margin: 4px;
4624 | }
4625 | 
4626 | .daterangepicker .icon {
4627 |   width: 20px;
4628 |   height: 20px;
4629 |   display: inline-block;
4630 |   vertical-align: middle;
4631 | }
4632 | /** bootstrap-daterangepicker **/
4633 | 
4634 | /** FullCalendar **/
4635 | .fc-state-default {
4636 |   background: #f5f5f5; 
4637 |   color: #73879C;
4638 | }
4639 | 
4640 | .fc-state-down,
4641 | .fc-state-active {
4642 |   color: #333;
4643 |   background: #ccc;
4644 | }
4645 | /** /FullCalendar **/
4646 | 
4647 | /** Dropzone.js **/
4648 | .dropzone {
4649 |   min-height: 300px;
4650 |   border: 1px solid #e5e5e5;
4651 | }
4652 | /** /Dropzone.js **/
4653 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "es2015",
 6 |     "types": []
 7 |   },
 8 |   "exclude": [
 9 |     "src/test.ts",
10 |     "**/*.spec.ts"
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "module": "commonjs",
 6 |     "types": [
 7 |       "jasmine",
 8 |       "node"
 9 |     ]
10 |   },
11 |   "files": [
12 |     "test.ts",
13 |     "polyfills.ts"
14 |   ],
15 |   "include": [
16 |     "**/*.spec.ts",
17 |     "**/*.d.ts"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "moduleResolution": "node",
 9 |     "emitDecoratorMetadata": true,
10 |     "experimentalDecorators": true,
11 |     "target": "es5",
12 |     "typeRoots": [
13 |       "node_modules/@types"
14 |     ],
15 |     "lib": [
16 |       "es2017",
17 |       "dom"
18 |     ]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-shadowed-variable": true,
 69 |     "no-string-literal": false,
 70 |     "no-string-throw": true,
 71 |     "no-switch-case-fall-through": true,
 72 |     "no-trailing-whitespace": true,
 73 |     "no-unnecessary-initializer": true,
 74 |     "no-unused-expression": true,
 75 |     "no-use-before-declare": true,
 76 |     "no-var-keyword": true,
 77 |     "object-literal-sort-keys": false,
 78 |     "one-line": [
 79 |       true,
 80 |       "check-open-brace",
 81 |       "check-catch",
 82 |       "check-else",
 83 |       "check-whitespace"
 84 |     ],
 85 |     "prefer-const": true,
 86 |     "quotemark": [
 87 |       true,
 88 |       "single"
 89 |     ],
 90 |     "radix": true,
 91 |     "semicolon": [
 92 |       true,
 93 |       "always"
 94 |     ],
 95 |     "triple-equals": [
 96 |       true,
 97 |       "allow-null-check"
 98 |     ],
 99 |     "typedef-whitespace": [
100 |       true,
101 |       {
102 |         "call-signature": "nospace",
103 |         "index-signature": "nospace",
104 |         "parameter": "nospace",
105 |         "property-declaration": "nospace",
106 |         "variable-declaration": "nospace"
107 |       }
108 |     ],
109 |     "unified-signatures": true,
110 |     "variable-name": false,
111 |     "whitespace": [
112 |       true,
113 |       "check-branch",
114 |       "check-decl",
115 |       "check-operator",
116 |       "check-separator",
117 |       "check-type"
118 |     ],
119 |     "no-output-on-prefix": true,
120 |     "use-input-property-decorator": true,
121 |     "use-output-property-decorator": true,
122 |     "use-host-property-decorator": true,
123 |     "no-input-rename": true,
124 |     "no-output-rename": true,
125 |     "use-life-cycle-interface": true,
126 |     "use-pipe-transform-interface": true,
127 |     "component-class-suffix": true,
128 |     "directive-class-suffix": true
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------