diff --git a/angular.json b/angular.json
index 98d5964e15907d61d3b213eae69a3fd837abceee..ef6a61f80d4b44cb6e2b3bfb8f6041ef172aa93c 100755
--- a/angular.json
+++ b/angular.json
@@ -23,7 +23,7 @@
"./src/assets"
],
"styles": [
- "./src/styles.styl",
+ "./src/styles.scss",
"./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
@@ -75,7 +75,7 @@
"tsConfig": "./src/tsconfig.spec.json",
"karmaConfig": "./src/karma.conf.js",
"styles": [
- "./src/styles.styl",
+ "./src/styles.scss",
"./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [],
diff --git a/package.json b/package.json
index 3344d5f9c07cd609f6f39b0a8ce20b056cddfb65..5e32e2f07361422a243927a012804d78e5ebadb8 100755
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
"start": "ng serve --host 10.2.95.136",
"build": "ng build",
"build-watch": "ng build --watch",
+ "build-css": "node-sass --include-path scss src/frontend/css/maarch-material.scss src/frontend/css/maarch-material.css --output-style compressed",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
@@ -69,7 +70,8 @@
"stylus-loader": "^3.0.2",
"ts-node": "~5.0.1",
"tslint": "~5.11.0",
- "typescript-tools": "^0.3.1"
+ "typescript-tools": "^0.3.1",
+ "node-sass": "^4.9.4"
},
"repository": {}
}
diff --git a/src/frontend/app/modal/reject-info.styl b/src/frontend/app/app.component.scss
old mode 100755
new mode 100644
similarity index 100%
rename from src/frontend/app/modal/reject-info.styl
rename to src/frontend/app/app.component.scss
diff --git a/src/frontend/app/app.component.styl b/src/frontend/app/app.component.styl
deleted file mode 100755
index 4dd768d687426b1affb0306e8bf75bb5266fe941..0000000000000000000000000000000000000000
--- a/src/frontend/app/app.component.styl
+++ /dev/null
@@ -1,18 +0,0 @@
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
-
-.swipe-panel-area
- position: fixed
- width: 20px
- height: 100%
-
-body
- overflow-y:hidden
-
-.header button
- height : 70px
- width : 70px
-
-.header button mat-icon
- height : auto
- width : auto
- font-size : 40px
\ No newline at end of file
diff --git a/src/frontend/app/app.component.ts b/src/frontend/app/app.component.ts
index 6e1bc73e905f27b96fed08a11e5d1de930d8ebd5..d0c618cd54bc86bc364a377acc4be23336ea38a7 100755
--- a/src/frontend/app/app.component.ts
+++ b/src/frontend/app/app.component.ts
@@ -1,13 +1,12 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
-import { empty } from 'rxjs';
import { SignaturesContentService } from './service/signatures.service';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None,
- styleUrls: ['app.component.styl']
+ styleUrls: ['app.component.scss']
})
export class AppComponent {
diff --git a/src/frontend/app/document/document.component.scss b/src/frontend/app/document/document.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b684a081089161e5002833611fd76ac40c89fe3
--- /dev/null
+++ b/src/frontend/app/document/document.component.scss
@@ -0,0 +1,192 @@
+@import '../../css/vars.scss';
+
+.swipe-panel-area {
+ position: fixed;
+ width: 20px;
+ height: 100%;
+}
+
+body {
+ overflow-y: hidden;
+}
+
+.header button {
+ height: 70px;
+ width: 70px;
+}
+
+.header button mat-icon {
+ height: auto;
+ width: auto;
+ font-size: 40px;
+}
+
+.article {
+ display: flex;
+ justify-content: center;
+ width: 768px;
+}
+
+.canvas-wrapper {
+ overflow: hidden;
+ position: relative;
+ width: 768px;
+ margin-bottom: 0;
+ padding: 0;
+}
+
+canvas {
+
+ margin: 0 auto;
+ display: block;
+}
+
+.page {
+ &-info {
+ position: fixed;
+ bottom: 100px;
+ height: 30px;
+ width: 70%;
+ color: #9B9B9B;
+ font-size: 12px;
+ font-weight: 300;
+ line-height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0.8;
+ left: 50%;
+ transform: translateX(-50%);
+ &-doc {
+ max-width: 80%;
+ background-color: #F1F4F4;
+ border-radius: 14px;
+ padding: 0 20px;
+ z-index: 1;
+ white-space: pre;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &-page {
+ max-width: 20%;
+ text-align: center;
+ border-radius: 0 14px 14px 0;
+ padding: 0 20px;
+ background: #fff;
+ border: 1px solid #ECF0F1;
+ margin-left: -15px;
+ height: 28px;
+ }
+ }
+ &-viewer {
+ width: 100%;
+ overflow: auto;
+ justify-content: center;
+ display: flex;
+ }
+}
+
+.btn-next {
+ color: #666;
+ background: #c6c6c680;
+ border-radius: 20px;
+ padding: 10px;
+ border: none;
+ outline: none;
+ position: fixed;
+ right: 25px;
+ top: 50%;
+ cursor: pointer;
+ z-index: 1;
+ &.disabled {
+ cursor: not-allowed;
+ }
+}
+.btn-previous {
+ color: #666;
+ background: #c6c6c680;
+ border-radius: 20px;
+ padding: 10px;
+ border: none;
+ outline: none;
+ position: fixed;
+ left: 25px;
+ top: 50%;
+ cursor: pointer;
+ z-index: 1;
+ &.disabled {
+ cursor: not-allowed;
+ }
+}
+
+button.disabled {
+ cursor: not-allowed;
+}
+
+.overlay {
+ position: absolute;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+}
+
+.radio {
+ appearance: none;
+ position: relative;
+ margin: 5px;
+ width: 30px;
+ height: 30px;
+ border-radius: 30px;
+ border-width: none;
+ border-style: solid;
+ outline: none;
+ cursor: pointer;
+ transition: all 0.2s;
+ &:checked, &:hover {
+ transform: scale(1.5);
+ }
+}
+
+.pdf-page-canvas {
+ opacity: 1;
+ transition: 0.5s opacity ease-in;
+}
+
+.pdf-page-canvas-loading-doc {
+ opacity: 0;
+}
+
+
+.ellipsis {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.tool-content {
+ display: flex;
+ position: fixed;
+ background: #8080804d;
+ border-radius: 20px;
+ top: 50%;
+ transform: translateY(-50%) rotate(-90deg);
+ padding: 10px;
+ &-left {
+ left: 0;
+ }
+ &-right {
+ right: 0;
+ }
+}
+
+.undo {
+ cursor: pointer;
+ transform: rotate(90deg);
+ transition: all 0.2s;
+ &:active {
+ transform: rotate(90deg) scale(1.5);
+ }
+}
diff --git a/src/frontend/app/document/document.component.styl b/src/frontend/app/document/document.component.styl
deleted file mode 100755
index a9ae0a53394b594eecba297984f8f8eac6468115..0000000000000000000000000000000000000000
--- a/src/frontend/app/document/document.component.styl
+++ /dev/null
@@ -1,150 +0,0 @@
-@import '../../css/vars.styl'
-
-.article
- display flex
- justify-content center
- //overflow scroll
- //height 100%
- width 768px
-
-.canvas-wrapper
- overflow hidden
- position relative
- width 768px
- margin-bottom 0
- padding 0
- //border 6px dotted pink
-
-canvas
- //width 100%
- margin 0 auto
- display block
-
-.page
- &-info
- position fixed
- bottom 100px
- height 30px
- width 70%
- color #9B9B9B
- font-size 12px
- font-weight 300
- line-height 30px
- display flex
- align-items center
- justify-content center
- opacity 0.8
- left 50%
- transform translateX(-50%)
- &-doc
- max-width 80%
- background-color #F1F4F4
- border-radius 14px
- padding 0 20px
- z-index 1
- white-space pre
- overflow hidden
- text-overflow ellipsis
- &-page
- max-width 20%
- text-align center
- border-radius 0 14px 14px 0
- padding 0 20px
- background #fff
- border 1px solid #ECF0F1
- margin-left -15px
- height 28px
- &-viewer
- width 100%
- overflow auto
- justify-content center
- display flex
-
-.btn-next
- color #666
- background #c6c6c680
- border-radius 20px
- padding 10px
- border none
- outline none
- position fixed
- right 25px
- top 50%
- cursor pointer
- z-index 1
- &.disabled
- cursor not-allowed
-.btn-previous
- color #666
- background #c6c6c680
- border-radius 20px
- padding 10px
- border none
- outline none
- position fixed
- left 25px
- top 50%
- cursor pointer
- z-index 1
- &.disabled
- cursor not-allowed
-
-button.disabled
- cursor not-allowed
-
-.overlay
- position absolute
- z-index 1
- left 0
- top 0
- right 0
- bottom 0
- background rgba(0,0,0,0.5)
-
-.radio
- appearance none
- position relative
- margin 5px
- width 30px
- height 30px
- border-radius 30px
- border-width none
- border-style solid
- outline none
- cursor pointer
- transition all 0.2s
- &:checked, &:hover
- transform scale(1.5)
-
-.pdf-page-canvas
- opacity 1
- transition 0.5s opacity ease-in
-
-.pdf-page-canvas-loading-doc
- opacity 0
-
-
-.ellipsis
- white-space nowrap
- overflow hidden
- text-overflow ellipsis
-
-.tool-content
- display flex
- position fixed
- background #8080804d
- border-radius 20px
- top 50%
- transform translateY(-50%) rotate(-90deg)
- padding 10px
- &-left
- left 0
- &-right
- right 0
-
-.undo
- cursor pointer
- transform rotate(90deg)
- transition all 0.2s
- &:active
- transform rotate(90deg) scale(1.5)
\ No newline at end of file
diff --git a/src/frontend/app/document/document.component.ts b/src/frontend/app/document/document.component.ts
index 87e6e311f064615afe89eb04c1ff2838879da291..d400128a47414e328396f90a2ce6e2a73249d6c9 100755
--- a/src/frontend/app/document/document.component.ts
+++ b/src/frontend/app/document/document.component.ts
@@ -22,7 +22,7 @@ import { trigger, transition, style, animate } from '@angular/animations';
@Component({
selector: 'app-document',
templateUrl: 'document.component.html',
- styleUrls: ['document.component.styl'],
+ styleUrls: ['document.component.scss'],
animations: [
trigger(
'slideDown',
@@ -450,7 +450,7 @@ export class DocumentComponent implements OnInit {
@Component({
templateUrl: '../modal/warn-modal.component.html',
- styleUrls: ['../modal/warn-modal.component.styl']
+ styleUrls: ['../modal/warn-modal.component.scss']
})
export class WarnModalComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any, public http: HttpClient, public dialogRef: MatDialogRef<WarnModalComponent>, public signaturesService: SignaturesContentService) { }
@@ -505,7 +505,7 @@ export class WarnModalComponent {
@Component({
templateUrl: '../modal/confirm-modal.component.html',
- styleUrls: ['../modal/confirm-modal.component.styl']
+ styleUrls: ['../modal/confirm-modal.component.scss']
})
export class ConfirmModalComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any, public http: HttpClient, public dialogRef: MatDialogRef<ConfirmModalComponent>, public signaturesService: SignaturesContentService) { }
@@ -560,7 +560,7 @@ export class ConfirmModalComponent {
@Component({
templateUrl: '../modal/success-info-valid.html',
- styleUrls: ['../modal/success-info-valid.styl']
+ styleUrls: ['../modal/success-info-valid.scss']
})
export class SuccessInfoValidBottomSheetComponent implements OnInit {
date: Date = new Date();
@@ -577,7 +577,7 @@ export class SuccessInfoValidBottomSheetComponent implements OnInit {
@Component({
templateUrl: '../modal/reject-info.html',
- styleUrls: ['../modal/reject-info.styl']
+ styleUrls: ['../modal/reject-info.scss']
})
export class RejectInfoBottomSheetComponent implements OnInit {
date: Date = new Date();
diff --git a/src/frontend/app/drawer/drawer.component.scss b/src/frontend/app/drawer/drawer.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6eb1beb6d393dafe8a432b196ef26a23a2a984ca
--- /dev/null
+++ b/src/frontend/app/drawer/drawer.component.scss
@@ -0,0 +1,21 @@
+.drawer {
+ width: 100vw;
+ height: 0;
+ background: #FCFCFC;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ border-radius: 5px;
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
+ transition: 0.25s all ease-in-out;
+ z-index: 2;
+ &.open {
+ height: 470px;
+ }
+ .btn-action {
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ cursor: pointer;
+ }
+}
\ No newline at end of file
diff --git a/src/frontend/app/drawer/drawer.component.styl b/src/frontend/app/drawer/drawer.component.styl
deleted file mode 100755
index ecd0086f1aec7470c3ef5edf4192996423339854..0000000000000000000000000000000000000000
--- a/src/frontend/app/drawer/drawer.component.styl
+++ /dev/null
@@ -1,18 +0,0 @@
-.drawer
- width 100vw
- height 0
- background #FCFCFC
- position fixed
- bottom 0
- left 0
- border-radius 5px
- box-shadow 0 2px 5px 0 rgba(0,0,0,0.08)
- transition 0.25s all ease-in-out
- z-index 2
- &.open
- height 470px
- .btn-action
- position absolute
- right 20px
- top 20px
- cursor pointer
\ No newline at end of file
diff --git a/src/frontend/app/drawer/drawer.component.ts b/src/frontend/app/drawer/drawer.component.ts
index a05c3b338ebdc10d9031ecf7c7bd6d9ceeb79c88..3c9a6b14c072ed91431bfc6d0ad422daf55a1611 100755
--- a/src/frontend/app/drawer/drawer.component.ts
+++ b/src/frontend/app/drawer/drawer.component.ts
@@ -4,7 +4,7 @@ import { SignaturesContentService } from '../service/signatures.service';
@Component({
selector: 'app-drawer',
templateUrl: 'drawer.component.html',
- styleUrls: ['drawer.component.styl']
+ styleUrls: ['drawer.component.scss']
})
export class DrawerComponent {
diff --git a/src/frontend/app/login/login.component.scss b/src/frontend/app/login/login.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a13c9d2a7724a8c0fa89a6a3c2bf3b01ceb030b2
--- /dev/null
+++ b/src/frontend/app/login/login.component.scss
@@ -0,0 +1,38 @@
+@import '../../css/vars.scss';
+
+.login-content {
+ background-color: $primary;
+ height: 100vh;
+ width: 100vw;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.login-form {
+ max-width: 768px;
+ text-align: center;
+}
+
+.input-row {
+ width: 100%;
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.maarchLogo {
+ position: absolute;
+ transition: all 1s ease-in-out;
+ width: 250px;
+ height: auto;
+ padding-bottom: 10px;
+}
+
+footer {
+ color: white;
+ position: absolute;
+ bottom: 5px;
+ font-size: 10px;
+ opacity: 0.5;
+}
diff --git a/src/frontend/app/login/login.component.styl b/src/frontend/app/login/login.component.styl
deleted file mode 100644
index bad12adcc60be991d9247d385edcc5fa06989193..0000000000000000000000000000000000000000
--- a/src/frontend/app/login/login.component.styl
+++ /dev/null
@@ -1,31 +0,0 @@
-.login-content
- background-color #135F7F
- height 100vh
- width 100vw
- display flex
- flex-direction column
- justify-content center
- align-items center
-
-.login-form
- max-width 768px
- text-align center
-
-.input-row
- width 100%
- padding-top 10px
- padding-bottom 10px
-
-.maarchLogo
- position absolute
- transition all 1s ease-in-out
- width 250px
- height auto
- padding-bottom 10px
-
-footer
- color white
- position absolute
- bottom 5px
- font-size 10px
- opacity 0.5
\ No newline at end of file
diff --git a/src/frontend/app/login/login.component.ts b/src/frontend/app/login/login.component.ts
index be73d80528181a08b3c4ddc10212499e20470061..05f74e311ba0fc547301c5e1de4e8de3512bb8a4 100644
--- a/src/frontend/app/login/login.component.ts
+++ b/src/frontend/app/login/login.component.ts
@@ -10,7 +10,7 @@ import { NotificationService } from '../service/notification.service';
@Component({
templateUrl: 'login.component.html',
- styleUrls: ['login.component.styl'],
+ styleUrls: ['login.component.scss'],
animations: [
trigger(
'myAnimation',
diff --git a/src/frontend/app/modal/confirm-modal.component.styl b/src/frontend/app/modal/confirm-modal.component.scss
old mode 100755
new mode 100644
similarity index 75%
rename from src/frontend/app/modal/confirm-modal.component.styl
rename to src/frontend/app/modal/confirm-modal.component.scss
index bfb7fea38216a0b8f27f31825461e460e61f0980..c0b3ae30175fa93d6d491ee94a1f17bc2bb2c651
--- a/src/frontend/app/modal/confirm-modal.component.styl
+++ b/src/frontend/app/modal/confirm-modal.component.scss
@@ -1,4 +1,4 @@
-.mat-dialog-content,.mat-dialog-title {
+.mat-dialog-content, .mat-dialog-title {
text-align:center !important;
}
.mat-dialog-title {
diff --git a/src/frontend/app/modal/success-info-valid.styl b/src/frontend/app/modal/reject-info.scss
old mode 100755
new mode 100644
similarity index 100%
rename from src/frontend/app/modal/success-info-valid.styl
rename to src/frontend/app/modal/reject-info.scss
diff --git a/src/frontend/app/modal/success-info-valid.scss b/src/frontend/app/modal/success-info-valid.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/frontend/app/modal/warn-modal.component.scss b/src/frontend/app/modal/warn-modal.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eddb7ed47f694decc335e34c52563dbde38d6533
--- /dev/null
+++ b/src/frontend/app/modal/warn-modal.component.scss
@@ -0,0 +1,11 @@
+.mat-dialog-content, .mat-dialog-title {
+ text-align: center !important;
+}
+.mat-dialog-title {
+ color: #F5A623;
+ font-weight: bold;
+}
+button {
+ width: 100%;
+ margin: 10px;
+}
\ No newline at end of file
diff --git a/src/frontend/app/modal/warn-modal.component.styl b/src/frontend/app/modal/warn-modal.component.styl
deleted file mode 100755
index 96122370af7177968c04be2b09df50a09995267b..0000000000000000000000000000000000000000
--- a/src/frontend/app/modal/warn-modal.component.styl
+++ /dev/null
@@ -1,11 +0,0 @@
-.mat-dialog-content,.mat-dialog-title {
- text-align:center !important;
-}
-.mat-dialog-title {
- color: #F5A623;
- font-weight: bold;
-}
-button {
- width:100%;
- margin:10px;
-}
\ No newline at end of file
diff --git a/src/frontend/app/pad/pad.component.scss b/src/frontend/app/pad/pad.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..af43b7ed44e43ecf9a72f1c394e39b4d6bfafafe
--- /dev/null
+++ b/src/frontend/app/pad/pad.component.scss
@@ -0,0 +1,42 @@
+.pad {
+ width: 100%;
+ height: 100%;
+ border: 1px solid rgba(151, 151, 151, 0.55);
+ border-radius: 5px;
+ &-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ padding: 10px 0;
+ &-boxed {
+ border-radius: 60px;
+ height: 60px;
+ background: #F1F4F4;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 20px;
+ }
+ }
+ &-draw {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .radio {
+ appearance: none;
+ position: relative;
+ margin: 5px;
+ width: 30px;
+ height: 30px;
+ border-radius: 30px;
+ border-width: none;
+ border-style: solid;
+ outline: none;
+ cursor: pointer;
+ transition: all 0.2s;
+ &:checked, &:hover {
+ transform: scale(1.5);
+ }
+ }
+}
diff --git a/src/frontend/app/pad/pad.component.styl b/src/frontend/app/pad/pad.component.styl
deleted file mode 100755
index b9a4857710cd3effc6ec1d48301bbe8ddfc65d85..0000000000000000000000000000000000000000
--- a/src/frontend/app/pad/pad.component.styl
+++ /dev/null
@@ -1,36 +0,0 @@
-.pad
- width 100%
- height 100%
- border 1px solid rgba(151,151,151,0.55)
- border-radius 5px
- &-actions
- display flex
- align-items center
- justify-content space-evenly
- padding 10px 0
- &-boxed
- border-radius 60px
- height 60px
- background #F1F4F4
- display flex
- justify-content center
- align-items center
- padding 0 20px
- &-draw
- display flex
- justify-content center
- align-items center
- .radio
- appearance none
- position relative
- margin 5px
- width 30px
- height 30px
- border-radius 30px
- border-width none
- border-style solid
- outline none
- cursor pointer
- transition all 0.2s
- &:checked, &:hover
- transform scale(1.5)
\ No newline at end of file
diff --git a/src/frontend/app/pad/pad.component.ts b/src/frontend/app/pad/pad.component.ts
index fecae2f731a5466eed9bd58021e38d57fa54a343..823d731ffab492cf3acaaf10e8bf9fe385254121 100755
--- a/src/frontend/app/pad/pad.component.ts
+++ b/src/frontend/app/pad/pad.component.ts
@@ -11,7 +11,7 @@ interface AfterViewInit {
@Component({
selector: 'app-pad',
templateUrl: 'pad.component.html',
- styleUrls: ['pad.component.styl']
+ styleUrls: ['pad.component.scss']
})
export class SignaturePadPageComponent implements AfterViewInit {
penColors = [{ id: 'black' }, { id: '#1a75ff' }, { id: '#FF0000'}];
diff --git a/src/frontend/app/profile/profile.component.scss b/src/frontend/app/profile/profile.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..45a2971bd5be72f1252fa92d17f292485ea7af5c
--- /dev/null
+++ b/src/frontend/app/profile/profile.component.scss
@@ -0,0 +1,100 @@
+@import '../../css/vars.scss';
+
+.sidebar {
+ position: relative;
+ height: 100%;
+ overflow: hidden;
+
+ &-header {
+ background: #F1F4F4;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ font-weight: 600;
+ padding-top: 10px;
+ &-icon {
+ margin-right: 15px;
+ position: relative;
+ &.notification {
+ &:after {
+ position: absolute;
+ right: -5px;
+ top: -5px;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: $warn;
+ content: "";
+ }
+ }
+ }
+ &-subtitle {
+ color: #9B9B9B;
+ }
+ }
+ &-btn {
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ }
+ .nav {
+ margin-top: 0px;
+ }
+}
+
+.profile-header {
+ background: $primary;
+ height: 95px;
+ display: flex;
+ justify-content: center;
+ position: relative;
+}
+
+.avatar {
+ position: absolute;
+ background: url(../../../../src/assets/user_sample.svg) $primary;
+ width: 65px;
+ height: 65px;
+ border-radius: 40px;
+ bottom: -20px;
+ border: solid 3px #ddd;
+ background-size: 100%;
+ background-repeat: no-repeat;
+ background-position-y: 10px;
+}
+
+
+.user {
+ color: white;
+ padding-top: 10px;
+ font-weight: bold;
+ font-size: 20px;
+}
+
+.input-row {
+ width: 100%;
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.profile-content {
+ padding: 10px;
+ text-align: center;
+}
+
+.actions {
+ position: absolute;
+ bottom: 0px;
+ left: 0;
+ display: flex;
+ width: 100%;
+ justify-content: center;
+}
+
+.actions button {
+ padding: 10px;
+ margin: 10px;
+}
diff --git a/src/frontend/app/profile/profile.component.styl b/src/frontend/app/profile/profile.component.styl
deleted file mode 100644
index eed941bdb51733b07bb2375b2fdd31240685cce3..0000000000000000000000000000000000000000
--- a/src/frontend/app/profile/profile.component.styl
+++ /dev/null
@@ -1,84 +0,0 @@
-.sidebar
- position relative
- height 100%
- overflow hidden
-
- &-header
- background #F1F4F4
- height 50px
- display flex
- align-items center
- justify-content center
- font-size 14px
- font-weight 600
- padding-top 10px
- &-icon
- margin-right 15px
- position relative
- &.notification
- &:after
- position absolute
- right -5px
- top -5px
- width 10px
- height 10px
- border-radius 50%
- background red
- content ""
- &-subtitle
- color #9B9B9B
- &-btn
- height 50px
- display flex
- align-items center
- justify-content space-around
- .nav
- margin-top 0px
-
-.profile-header
- background #135F7F
- height 95px
- display flex
- justify-content center
- position relative
-
-.avatar
- position absolute
- background url(../../../../src/assets/user_sample.svg) #135f7f
- width 65px
- height 65px
- border-radius 40px
- bottom -20px
- border solid 3px #ddd
- background-size: 100%;
- background-repeat: no-repeat;
- background-position-y: 10px;
-
-
-.user
- color white
- padding-top 10px
- font-weight bold
- font-size 20px
-
-.input-row
- width 100%
- padding-top 10px
- padding-bottom 10px
-
-.profile-content
- padding 10px
- text-align center
-
-.actions
- position absolute
- bottom 0px
- left 0
- display flex
- width 100%
- justify-content center
-
-.actions button
- padding 10px
- margin 10px
-
\ No newline at end of file
diff --git a/src/frontend/app/profile/profile.component.ts b/src/frontend/app/profile/profile.component.ts
index 217a6f175ba7efd3d727643e2517447981c3ef7f..15056375b09e6eb47aa22f59f8693fb2a901c822 100644
--- a/src/frontend/app/profile/profile.component.ts
+++ b/src/frontend/app/profile/profile.component.ts
@@ -10,7 +10,7 @@ import { CookieService } from 'ngx-cookie-service';
@Component({
selector: 'app-my-profile',
templateUrl: 'profile.component.html',
- styleUrls: ['profile.component.styl'],
+ styleUrls: ['profile.component.scss'],
})
export class ProfileComponent implements OnInit, AfterViewInit {
diff --git a/src/frontend/app/sidebar/sidebar.component.scss b/src/frontend/app/sidebar/sidebar.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c179b6c34f7ff554f06261f5dd2da625150dc931
--- /dev/null
+++ b/src/frontend/app/sidebar/sidebar.component.scss
@@ -0,0 +1,154 @@
+@import '../../css/vars.scss';
+
+.main-header {
+ height: 25%;
+ overflow: auto;
+}
+
+.sidebar {
+ position: relative;
+ height: 100%;
+ overflow: hidden;
+
+ &-header {
+ background: #F1F4F4;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ font-weight: 600;
+ padding-top: 10px;
+ &-icon {
+ margin-right: 15px;
+ position: relative;
+ &.notification {
+ &:after {
+ position: absolute;
+ right: -5px;
+ top: -5px;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: $warn;
+ content: "";
+ }
+ }
+ }
+ &-subtitle {
+ color: #9B9B9B;
+ }
+ }
+ &-btn {
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ }
+ .nav {
+ height: 75%;
+ overflow-y: scroll;
+ margin-top: 0px;
+ overflow-x: hidden;
+
+ &-item {
+ height: 70px;
+ display: flex;
+ align-items: center;
+ padding: 5px;
+ margin-right: 20px;
+ border-bottom: 1px solid #e6e6e6;
+ cursor: pointer;
+ &.active {
+ &:after {
+ position: absolute;
+ right: 10px;
+ content: "";
+ /*width 5px*/
+ height: 60px;
+ background: #F1F4F4;
+ }
+ }
+ &-left {
+ width: 50px;
+ .fas, .material-icons {
+ background: #f1f4f4;
+ border-radius: 50%;
+ color: #135f7f;
+ font-size: 22px;
+ height: 25px;
+ width: 25px;
+ padding: 10px;
+ margin-right: 10px;
+ }
+ }
+ &-middle {
+ width: 180px;
+ height: 50px;
+ font-size: 12px;
+ color: #4F4F4F;
+ }
+ &-title {
+ font-weight: 600;
+ color: #135F7F;
+ }
+ }
+ }
+}
+
+.loadList {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ background-color: #ffffffb3;
+ z-index: 1;
+ display: flex;
+ align-items: baseline;
+ justify-content: center;
+}
+
+.profile-header {
+ background: $primary;
+ height: 95px;
+ display: flex;
+ justify-content: center;
+ position: relative;
+}
+
+.avatar {
+ cursor: pointer;
+ position: absolute;
+ background: url(../../../../src/assets/user_sample.svg) $primary;
+ width: 65px;
+ height: 65px;
+ border-radius: 40px;
+ bottom: -20px;
+ border: solid 3px #ddd;
+ background-size: 100%;
+ background-repeat: no-repeat;
+ background-position-y: 10px;
+ transition: all 0.2s;
+}
+
+.avatar:hover {
+ box-shadow: 0px 0px 5px 0px #656565;
+}
+
+.user {
+ color: white;
+ padding-top: 10px;
+ font-weight: bold;
+ font-size: 20px;
+}
+
+.logout-button {
+ font-size: 30px;
+ color: white;
+ position: absolute;
+ right: 10px;
+}
+
+.filter.active {
+ background: $primary;
+}
diff --git a/src/frontend/app/sidebar/sidebar.component.styl b/src/frontend/app/sidebar/sidebar.component.styl
deleted file mode 100755
index 82f40b6e51873a2ad3816c92db001aaa0f53d4b1..0000000000000000000000000000000000000000
--- a/src/frontend/app/sidebar/sidebar.component.styl
+++ /dev/null
@@ -1,129 +0,0 @@
-.main-header
- height 25%
- overflow auto
-
-.sidebar
- position relative
- height 100%
- overflow hidden
-
- &-header
- background #F1F4F4
- height 50px
- display flex
- align-items center
- justify-content center
- font-size 14px
- font-weight 600
- padding-top 10px
- &-icon
- margin-right 15px
- position relative
- &.notification
- &:after
- position absolute
- right -5px
- top -5px
- width 10px
- height 10px
- border-radius 50%
- background red
- content ""
- &-subtitle
- color #9B9B9B
- &-btn
- height 50px
- display flex
- align-items center
- justify-content space-around
- .nav
- height 75%
- overflow-y scroll
- margin-top 0px
- overflow-x hidden
-
- &-item
- height 70px
- display flex
- align-items center
- padding 5px
- margin-right 20px
- border-bottom 1px solid #e6e6e6
- cursor pointer
- &.active
- &:after
- position absolute
- right 10px
- content ""
- /*width 5px*/
- height 60px
- background #F1F4F4
- &-left
- width 50px
- .fas, .material-icons
- background #f1f4f4
- border-radius 50%
- color #135f7f
- font-size 22px
- height 25px
- width 25px
- padding 10px
- margin-right 10px
- &-middle
- width 180px
- height 50px
- font-size 12px
- color #4F4F4F
- &-title
- font-weight 600
- color #135F7F
-
-.loadList
- position absolute
- width 100%
- height 100%
- left 0
- background-color #ffffffb3
- z-index 1
- display flex
- align-items baseline
- justify-content center
-
-.profile-header
- background #135F7F
- height 95px
- display flex
- justify-content center
- position relative
-
-.avatar
- cursor pointer
- position absolute
- background url(../../../../src/assets/user_sample.svg) #135f7f
- width 65px
- height 65px
- border-radius 40px
- bottom -20px
- border solid 3px #ddd
- background-size: 100%;
- background-repeat: no-repeat;
- background-position-y: 10px;
- transition all 0.2s
-
-.avatar:hover
- box-shadow: 0px 0px 5px 0px #656565;
-
-.user
- color white
- padding-top 10px
- font-weight bold
- font-size 20px
-
-.logout-button
- font-size 30px
- color white
- position absolute
- right 10px
-
-.filter.active
- background #135f7f
diff --git a/src/frontend/app/sidebar/sidebar.component.ts b/src/frontend/app/sidebar/sidebar.component.ts
index 052ee97868162f147a1a47c58ddcdeeaa3695254..e0abc01d3a439443a4dea27da805842eb76a9094 100755
--- a/src/frontend/app/sidebar/sidebar.component.ts
+++ b/src/frontend/app/sidebar/sidebar.component.ts
@@ -13,7 +13,7 @@ interface AppState {
@Component({
selector: 'app-sidebar',
templateUrl: 'sidebar.component.html',
- styleUrls: ['sidebar.component.styl']
+ styleUrls: ['sidebar.component.scss']
})
export class SidebarComponent implements OnInit, AfterViewInit {
sidebar$: Observable<boolean>;
diff --git a/src/frontend/app/signatures/signatures.component.scss b/src/frontend/app/signatures/signatures.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..923423b8a676684ab096b5ca392e7a4d344e5119
--- /dev/null
+++ b/src/frontend/app/signatures/signatures.component.scss
@@ -0,0 +1,47 @@
+@import '../../css/vars.scss';
+
+.signatures {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ &-top {
+ height: 105px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ border-bottom: 1px solid #e9e8e8;
+ }
+ .list {
+ width: 100%;
+ padding-top: 50px;
+ overflow: auto;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ scroll-behavior: smooth;
+ -webkit-overflow-scrolling: touch;
+ &-item {
+ transition: 0.5s all ease-in-out;
+ height: 190px;
+ width: 190px;
+ margin: 8px;
+ border: 1px solid rgba(151, 151, 151, 0.55);
+ border-radius: 5px;
+ background-color: #fff;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ &.create {
+ background-color: #F1F4F4;
+ flex-direction: column;
+ text-align: center;
+ }
+ &:hover, &:active {
+ transform: translateY(-40px);
+ cursor: pointer;
+ }
+ }
+ }
+}
diff --git a/src/frontend/app/signatures/signatures.component.styl b/src/frontend/app/signatures/signatures.component.styl
deleted file mode 100755
index 4a073591c7e0ccad676d8ddf9f7b6fe7c2d151ee..0000000000000000000000000000000000000000
--- a/src/frontend/app/signatures/signatures.component.styl
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../../css/vars.styl'
-
-.signatures
- display flex
- flex-direction column
- align-items center
- &-top
- height 105px
- width 100%
- display flex
- align-items center
- justify-content space-around
- border-bottom 1px solid #e9e8e8
- .list
- width 100%
- padding-top 50px
- overflow auto
- display flex
- justify-content center
- flex-wrap wrap
- scroll-behavior smooth
- -webkit-overflow-scrolling touch
- &-item
- transition 0.5s all ease-in-out
- height 190px
- width 190px
- margin 8px
- border 1px solid rgba(151,151,151,0.55)
- border-radius 5px
- background-color #fff
- box-shadow 0 2px 4px 0 rgba(0,0,0,0.04)
- display flex
- justify-content center
- align-items center
- &.create
- background-color #F1F4F4
- flex-direction column
- text-align center
- &:hover, &:active
- transform translateY(-40px)
- cursor pointer
\ No newline at end of file
diff --git a/src/frontend/app/signatures/signatures.component.ts b/src/frontend/app/signatures/signatures.component.ts
index 254632bf212400d97614a0ba56b8bcff4735ba9d..414573c19b48a5173369433a371633dc45512c00 100755
--- a/src/frontend/app/signatures/signatures.component.ts
+++ b/src/frontend/app/signatures/signatures.component.ts
@@ -11,7 +11,7 @@ import { NotificationService } from '../service/notification.service';
@Component({
selector: 'app-signatures',
templateUrl: 'signatures.component.html',
- styleUrls: ['signatures.component.styl'],
+ styleUrls: ['signatures.component.scss'],
animations: [
trigger('listAnimation', [
transition('* => *', [ // each time the binding value changes
diff --git a/src/frontend/css/atomic.styl b/src/frontend/css/atomic.styl
deleted file mode 100755
index c9da36f62dcb458920efa5b47f90226ad41bf404..0000000000000000000000000000000000000000
--- a/src/frontend/css/atomic.styl
+++ /dev/null
@@ -1,9 +0,0 @@
-@import 'vars.styl'
-.default
- color $color-main
-
-.red
- color red
-
-.green
- color $green
diff --git a/src/frontend/css/maarch-material.css b/src/frontend/css/maarch-material.css
new file mode 100644
index 0000000000000000000000000000000000000000..36e3d124859925b1fcc72563b3debe9e8ca02be2
--- /dev/null
+++ b/src/frontend/css/maarch-material.css
@@ -0,0 +1 @@
+.mat-badge-content{font-weight:600;font-size:12px;font-family:Roboto, "Helvetica Neue", sans-serif}.mat-badge-small .mat-badge-content{font-size:6px}.mat-badge-large .mat-badge-content{font-size:24px}.mat-h1,.mat-headline,.mat-typography h1{font:400 24px/32px Roboto, "Helvetica Neue", sans-serif;margin:0 0 16px}.mat-h2,.mat-title,.mat-typography h2{font:500 20px/32px Roboto, "Helvetica Neue", sans-serif;margin:0 0 16px}.mat-h3,.mat-subheading-2,.mat-typography h3{font:400 16px/28px Roboto, "Helvetica Neue", sans-serif;margin:0 0 16px}.mat-h4,.mat-subheading-1,.mat-typography h4{font:400 15px/24px Roboto, "Helvetica Neue", sans-serif;margin:0 0 16px}.mat-h5,.mat-typography h5{font:400 11.62px/20px Roboto, "Helvetica Neue", sans-serif;margin:0 0 12px}.mat-h6,.mat-typography h6{font:400 9.38px/20px Roboto, "Helvetica Neue", sans-serif;margin:0 0 12px}.mat-body-strong,.mat-body-2{font:500 14px/24px Roboto, "Helvetica Neue", sans-serif}.mat-body,.mat-body-1,.mat-typography{font:400 14px/20px Roboto, "Helvetica Neue", sans-serif}.mat-body p,.mat-body-1 p,.mat-typography p{margin:0 0 12px}.mat-small,.mat-caption{font:400 12px/20px Roboto, "Helvetica Neue", sans-serif}.mat-display-4,.mat-typography .mat-display-4{font:300 112px/112px Roboto, "Helvetica Neue", sans-serif;margin:0 0 56px;letter-spacing:-0.05em}.mat-display-3,.mat-typography .mat-display-3{font:400 56px/56px Roboto, "Helvetica Neue", sans-serif;margin:0 0 64px;letter-spacing:-0.02em}.mat-display-2,.mat-typography .mat-display-2{font:400 45px/48px Roboto, "Helvetica Neue", sans-serif;margin:0 0 64px;letter-spacing:-0.005em}.mat-display-1,.mat-typography .mat-display-1{font:400 34px/40px Roboto, "Helvetica Neue", sans-serif;margin:0 0 64px}.mat-bottom-sheet-container{font:400 14px/20px Roboto, "Helvetica Neue", sans-serif}.mat-button,.mat-raised-button,.mat-icon-button,.mat-stroked-button,.mat-flat-button,.mat-fab,.mat-mini-fab{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px;font-weight:500}.mat-button-toggle{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-card{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-card-title{font-size:24px;font-weight:500}.mat-card-header .mat-card-title{font-size:20px}.mat-card-subtitle,.mat-card-content{font-size:14px}.mat-checkbox{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-checkbox-layout .mat-checkbox-label{line-height:24px}.mat-chip{font-size:14px;font-weight:500}.mat-chip .mat-chip-trailing-icon.mat-icon,.mat-chip .mat-chip-remove.mat-icon{font-size:18px}.mat-table{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-header-cell{font-size:12px;font-weight:500}.mat-cell,.mat-footer-cell{font-size:14px}.mat-calendar{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-calendar-body{font-size:13px}.mat-calendar-body-label,.mat-calendar-period-button{font-size:14px;font-weight:500}.mat-calendar-table-header th{font-size:11px;font-weight:400}.mat-dialog-title{font:500 20px/32px Roboto, "Helvetica Neue", sans-serif}.mat-expansion-panel-header{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:15px;font-weight:400}.mat-expansion-panel-content{font:400 14px/20px Roboto, "Helvetica Neue", sans-serif}.mat-form-field{font-size:inherit;font-weight:400;line-height:1.125;font-family:Roboto, "Helvetica Neue", sans-serif}.mat-form-field-wrapper{padding-bottom:1.34375em}.mat-form-field-prefix .mat-icon,.mat-form-field-suffix .mat-icon{font-size:150%;line-height:1.125}.mat-form-field-prefix .mat-icon-button,.mat-form-field-suffix .mat-icon-button{height:1.5em;width:1.5em}.mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field-suffix .mat-icon-button .mat-icon{height:1.125em;line-height:1.125}.mat-form-field-infix{padding:.5em 0;border-top:.84375em solid transparent}.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34375em) scale(.75);width:133.33333%}.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34374em) scale(.75);width:133.33334%}.mat-form-field-label-wrapper{top:-.84375em;padding-top:.84375em}.mat-form-field-label{top:1.34375em}.mat-form-field-underline{bottom:1.34375em}.mat-form-field-subscript-wrapper{font-size:75%;margin-top:.66667em;top:calc(100% - 1.79167em)}.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-infix{padding:.4375em 0}.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(0.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(0.00101px);-ms-transform:translateY(-1.28124em) scale(.75);width:133.33334%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(0.00102px);-ms-transform:translateY(-1.28123em) scale(.75);width:133.33335%}.mat-form-field-appearance-legacy .mat-form-field-label{top:1.28125em}.mat-form-field-appearance-legacy .mat-form-field-underline{bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper{margin-top:.54167em;top:calc(100% - 1.66667em)}@media print{.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28122em) scale(.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28121em) scale(.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.2812em) scale(.75)}}.mat-form-field-appearance-fill .mat-form-field-infix{padding:.25em 0 .75em 0}.mat-form-field-appearance-fill .mat-form-field-label{top:1.09375em;margin-top:-.5em}.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-.59375em) scale(.75);width:133.33333%}.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-.59374em) scale(.75);width:133.33334%}.mat-form-field-appearance-outline .mat-form-field-infix{padding:1em 0 1em 0}.mat-form-field-appearance-outline .mat-form-field-label{top:1.84375em;margin-top:-.25em}.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59375em) scale(.75);width:133.33333%}.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59374em) scale(.75);width:133.33334%}.mat-grid-tile-header,.mat-grid-tile-footer{font-size:14px}.mat-grid-tile-header .mat-line,.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2),.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:12px}input.mat-input-element{margin-top:-.0625em}.mat-menu-item{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px;font-weight:400}.mat-paginator,.mat-paginator-page-size .mat-select-trigger{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px}.mat-radio-button{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-select{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-select-trigger{height:1.125em}.mat-slide-toggle-content{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-slider-thumb-label-text{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px;font-weight:500}.mat-stepper-vertical,.mat-stepper-horizontal{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-step-label{font-size:14px;font-weight:400}.mat-step-sub-label-error{font-weight:normal}.mat-step-label-error{font-size:14px}.mat-step-label-selected{font-size:14px;font-weight:500}.mat-tab-group{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-tab-label,.mat-tab-link{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px;font-weight:500}.mat-toolbar,.mat-toolbar h1,.mat-toolbar h2,.mat-toolbar h3,.mat-toolbar h4,.mat-toolbar h5,.mat-toolbar h6{font:500 20px/32px Roboto, "Helvetica Neue", sans-serif;margin:0}.mat-tooltip{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:10px;padding-top:6px;padding-bottom:6px}.mat-tooltip-handset{font-size:14px;padding-top:8px;padding-bottom:8px}.mat-list-item{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-list-option{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-list .mat-list-item,.mat-nav-list .mat-list-item,.mat-selection-list .mat-list-item{font-size:16px}.mat-list .mat-list-item .mat-line,.mat-nav-list .mat-list-item .mat-line,.mat-selection-list .mat-list-item .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-list .mat-list-item .mat-line:nth-child(n+2),.mat-nav-list .mat-list-item .mat-line:nth-child(n+2),.mat-selection-list .mat-list-item .mat-line:nth-child(n+2){font-size:14px}.mat-list .mat-list-option,.mat-nav-list .mat-list-option,.mat-selection-list .mat-list-option{font-size:16px}.mat-list .mat-list-option .mat-line,.mat-nav-list .mat-list-option .mat-line,.mat-selection-list .mat-list-option .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-list .mat-list-option .mat-line:nth-child(n+2),.mat-nav-list .mat-list-option .mat-line:nth-child(n+2),.mat-selection-list .mat-list-option .mat-line:nth-child(n+2){font-size:14px}.mat-list .mat-subheader,.mat-nav-list .mat-subheader,.mat-selection-list .mat-subheader{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px;font-weight:500}.mat-list[dense] .mat-list-item,.mat-nav-list[dense] .mat-list-item,.mat-selection-list[dense] .mat-list-item{font-size:12px}.mat-list[dense] .mat-list-item .mat-line,.mat-nav-list[dense] .mat-list-item .mat-line,.mat-selection-list[dense] .mat-list-item .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-list[dense] .mat-list-item .mat-line:nth-child(n+2),.mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2),.mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2){font-size:12px}.mat-list[dense] .mat-list-option,.mat-nav-list[dense] .mat-list-option,.mat-selection-list[dense] .mat-list-option{font-size:12px}.mat-list[dense] .mat-list-option .mat-line,.mat-nav-list[dense] .mat-list-option .mat-line,.mat-selection-list[dense] .mat-list-option .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-list[dense] .mat-list-option .mat-line:nth-child(n+2),.mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2),.mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2){font-size:12px}.mat-list[dense] .mat-subheader,.mat-nav-list[dense] .mat-subheader,.mat-selection-list[dense] .mat-subheader{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px;font-weight:500}.mat-option{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:16px}.mat-optgroup-label{font:500 14px/24px Roboto, "Helvetica Neue", sans-serif}.mat-simple-snackbar{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px}.mat-simple-snackbar-action{line-height:1;font-family:inherit;font-size:inherit;font-weight:500}.mat-tree{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-tree-node,.mat-nested-tree-node{font-weight:400;font-size:14px}.mat-ripple{overflow:hidden;position:relative}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(0)}@media screen and (-ms-high-contrast: active){.mat-ripple-element{display:none}}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}@media screen and (-ms-high-contrast: active){.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:0.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,0.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}@keyframes cdk-text-field-autofill-start{/*!*/}@keyframes cdk-text-field-autofill-end{/*!*/}.cdk-text-field-autofill-monitored:-webkit-autofill{animation-name:cdk-text-field-autofill-start}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation-name:cdk-text-field-autofill-end}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{height:auto !important;overflow:hidden !important;padding:2px 0 !important;box-sizing:content-box !important}.mat-ripple-element{background-color:rgba(0,0,0,0.1)}.mat-option{color:rgba(0,0,0,0.87)}.mat-option:hover:not(.mat-option-disabled),.mat-option:focus:not(.mat-option-disabled){background:rgba(0,0,0,0.04)}.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled){background:rgba(0,0,0,0.04)}.mat-option.mat-active{background:rgba(0,0,0,0.04);color:rgba(0,0,0,0.87)}.mat-option.mat-option-disabled{color:rgba(0,0,0,0.38)}.mat-primary .mat-option.mat-selected:not(.mat-option-disabled){color:#135f7f}.mat-accent .mat-option.mat-selected:not(.mat-option-disabled){color:#2ecc71}.mat-warn .mat-option.mat-selected:not(.mat-option-disabled){color:#e74c3c}.mat-optgroup-label{color:rgba(0,0,0,0.54)}.mat-optgroup-disabled .mat-optgroup-label{color:rgba(0,0,0,0.38)}.mat-pseudo-checkbox{color:rgba(0,0,0,0.54)}.mat-pseudo-checkbox::after{color:#fafafa}.mat-pseudo-checkbox-checked,.mat-pseudo-checkbox-indeterminate,.mat-accent .mat-pseudo-checkbox-checked,.mat-accent .mat-pseudo-checkbox-indeterminate{background:#2ecc71}.mat-primary .mat-pseudo-checkbox-checked,.mat-primary .mat-pseudo-checkbox-indeterminate{background:#135f7f}.mat-warn .mat-pseudo-checkbox-checked,.mat-warn .mat-pseudo-checkbox-indeterminate{background:#e74c3c}.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled{background:#b0b0b0}.mat-elevation-z0{box-shadow:0px 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 0px 0px 0px rgba(0,0,0,0.12)}.mat-elevation-z1{box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)}.mat-elevation-z2{box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)}.mat-elevation-z3{box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)}.mat-elevation-z4{box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)}.mat-elevation-z5{box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)}.mat-elevation-z6{box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)}.mat-elevation-z7{box-shadow:0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)}.mat-elevation-z8{box-shadow:0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)}.mat-elevation-z9{box-shadow:0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)}.mat-elevation-z10{box-shadow:0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)}.mat-elevation-z11{box-shadow:0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)}.mat-elevation-z12{box-shadow:0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)}.mat-elevation-z13{box-shadow:0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)}.mat-elevation-z14{box-shadow:0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)}.mat-elevation-z15{box-shadow:0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)}.mat-elevation-z16{box-shadow:0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)}.mat-elevation-z17{box-shadow:0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)}.mat-elevation-z18{box-shadow:0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)}.mat-elevation-z19{box-shadow:0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)}.mat-elevation-z20{box-shadow:0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)}.mat-elevation-z21{box-shadow:0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)}.mat-elevation-z22{box-shadow:0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)}.mat-elevation-z23{box-shadow:0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)}.mat-elevation-z24{box-shadow:0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)}.mat-app-background{background-color:#fafafa;color:rgba(0,0,0,0.87)}.mat-theme-loaded-marker{display:none}.mat-autocomplete-panel{background:#fff;color:rgba(0,0,0,0.87)}.mat-autocomplete-panel:not([class*='mat-elevation-z']){box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)}.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover){background:#fff}.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled){color:rgba(0,0,0,0.87)}.mat-badge-content{color:#fff;background:#135f7f}.mat-badge-accent .mat-badge-content{background:#2ecc71;color:#fff}.mat-badge-warn .mat-badge-content{color:#fff;background:#e74c3c}.mat-badge{position:relative}.mat-badge-hidden .mat-badge-content{display:none}.mat-badge-disabled .mat-badge-content{background:#b9b9b9;color:rgba(0,0,0,0.38)}.mat-badge-content{position:absolute;text-align:center;display:inline-block;border-radius:50%;transition:transform 200ms ease-in-out;transform:scale(0.6);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.mat-badge-content.mat-badge-active{transform:none}.mat-badge-small .mat-badge-content{width:16px;height:16px;line-height:16px}@media screen and (-ms-high-contrast: active){.mat-badge-small .mat-badge-content{outline:solid 1px;border-radius:0}}.mat-badge-small.mat-badge-above .mat-badge-content{top:-8px}.mat-badge-small.mat-badge-below .mat-badge-content{bottom:-8px}.mat-badge-small.mat-badge-before .mat-badge-content{left:-16px}[dir='rtl'] .mat-badge-small.mat-badge-before .mat-badge-content{left:auto;right:-16px}.mat-badge-small.mat-badge-after .mat-badge-content{right:-16px}[dir='rtl'] .mat-badge-small.mat-badge-after .mat-badge-content{right:auto;left:-16px}.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-8px}[dir='rtl'] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-8px}.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-8px}[dir='rtl'] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-8px}.mat-badge-medium .mat-badge-content{width:22px;height:22px;line-height:22px}@media screen and (-ms-high-contrast: active){.mat-badge-medium .mat-badge-content{outline:solid 1px;border-radius:0}}.mat-badge-medium.mat-badge-above .mat-badge-content{top:-11px}.mat-badge-medium.mat-badge-below .mat-badge-content{bottom:-11px}.mat-badge-medium.mat-badge-before .mat-badge-content{left:-22px}[dir='rtl'] .mat-badge-medium.mat-badge-before .mat-badge-content{left:auto;right:-22px}.mat-badge-medium.mat-badge-after .mat-badge-content{right:-22px}[dir='rtl'] .mat-badge-medium.mat-badge-after .mat-badge-content{right:auto;left:-22px}.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-11px}[dir='rtl'] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-11px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-11px}[dir='rtl'] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-11px}.mat-badge-large .mat-badge-content{width:28px;height:28px;line-height:28px}@media screen and (-ms-high-contrast: active){.mat-badge-large .mat-badge-content{outline:solid 1px;border-radius:0}}.mat-badge-large.mat-badge-above .mat-badge-content{top:-14px}.mat-badge-large.mat-badge-below .mat-badge-content{bottom:-14px}.mat-badge-large.mat-badge-before .mat-badge-content{left:-28px}[dir='rtl'] .mat-badge-large.mat-badge-before .mat-badge-content{left:auto;right:-28px}.mat-badge-large.mat-badge-after .mat-badge-content{right:-28px}[dir='rtl'] .mat-badge-large.mat-badge-after .mat-badge-content{right:auto;left:-28px}.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-14px}[dir='rtl'] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-14px}.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-14px}[dir='rtl'] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-14px}.mat-bottom-sheet-container{box-shadow:0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12);background:#fff;color:rgba(0,0,0,0.87)}.mat-button,.mat-icon-button,.mat-stroked-button{color:inherit;background:transparent}.mat-button.mat-primary,.mat-icon-button.mat-primary,.mat-stroked-button.mat-primary{color:#135f7f}.mat-button.mat-accent,.mat-icon-button.mat-accent,.mat-stroked-button.mat-accent{color:#2ecc71}.mat-button.mat-warn,.mat-icon-button.mat-warn,.mat-stroked-button.mat-warn{color:#e74c3c}.mat-button.mat-primary[disabled],.mat-button.mat-accent[disabled],.mat-button.mat-warn[disabled],.mat-button[disabled][disabled],.mat-icon-button.mat-primary[disabled],.mat-icon-button.mat-accent[disabled],.mat-icon-button.mat-warn[disabled],.mat-icon-button[disabled][disabled],.mat-stroked-button.mat-primary[disabled],.mat-stroked-button.mat-accent[disabled],.mat-stroked-button.mat-warn[disabled],.mat-stroked-button[disabled][disabled]{color:rgba(0,0,0,0.26)}.mat-button.mat-primary .mat-button-focus-overlay,.mat-icon-button.mat-primary .mat-button-focus-overlay,.mat-stroked-button.mat-primary .mat-button-focus-overlay{background-color:#135f7f}.mat-button.mat-accent .mat-button-focus-overlay,.mat-icon-button.mat-accent .mat-button-focus-overlay,.mat-stroked-button.mat-accent .mat-button-focus-overlay{background-color:#2ecc71}.mat-button.mat-warn .mat-button-focus-overlay,.mat-icon-button.mat-warn .mat-button-focus-overlay,.mat-stroked-button.mat-warn .mat-button-focus-overlay{background-color:#e74c3c}.mat-button[disabled] .mat-button-focus-overlay,.mat-icon-button[disabled] .mat-button-focus-overlay,.mat-stroked-button[disabled] .mat-button-focus-overlay{background-color:transparent}.mat-button .mat-ripple-element,.mat-icon-button .mat-ripple-element,.mat-stroked-button .mat-ripple-element{opacity:.1;background-color:currentColor}.mat-button-focus-overlay{background:#000}.mat-stroked-button:not([disabled]){border-color:rgba(0,0,0,0.12)}.mat-flat-button,.mat-raised-button,.mat-fab,.mat-mini-fab{color:rgba(0,0,0,0.87);background-color:#fff}.mat-flat-button.mat-primary,.mat-raised-button.mat-primary,.mat-fab.mat-primary,.mat-mini-fab.mat-primary{color:#fff}.mat-flat-button.mat-accent,.mat-raised-button.mat-accent,.mat-fab.mat-accent,.mat-mini-fab.mat-accent{color:#fff}.mat-flat-button.mat-warn,.mat-raised-button.mat-warn,.mat-fab.mat-warn,.mat-mini-fab.mat-warn{color:#fff}.mat-flat-button.mat-primary[disabled],.mat-flat-button.mat-accent[disabled],.mat-flat-button.mat-warn[disabled],.mat-flat-button[disabled][disabled],.mat-raised-button.mat-primary[disabled],.mat-raised-button.mat-accent[disabled],.mat-raised-button.mat-warn[disabled],.mat-raised-button[disabled][disabled],.mat-fab.mat-primary[disabled],.mat-fab.mat-accent[disabled],.mat-fab.mat-warn[disabled],.mat-fab[disabled][disabled],.mat-mini-fab.mat-primary[disabled],.mat-mini-fab.mat-accent[disabled],.mat-mini-fab.mat-warn[disabled],.mat-mini-fab[disabled][disabled]{color:rgba(0,0,0,0.26)}.mat-flat-button.mat-primary,.mat-raised-button.mat-primary,.mat-fab.mat-primary,.mat-mini-fab.mat-primary{background-color:#135f7f}.mat-flat-button.mat-accent,.mat-raised-button.mat-accent,.mat-fab.mat-accent,.mat-mini-fab.mat-accent{background-color:#2ecc71}.mat-flat-button.mat-warn,.mat-raised-button.mat-warn,.mat-fab.mat-warn,.mat-mini-fab.mat-warn{background-color:#e74c3c}.mat-flat-button.mat-primary[disabled],.mat-flat-button.mat-accent[disabled],.mat-flat-button.mat-warn[disabled],.mat-flat-button[disabled][disabled],.mat-raised-button.mat-primary[disabled],.mat-raised-button.mat-accent[disabled],.mat-raised-button.mat-warn[disabled],.mat-raised-button[disabled][disabled],.mat-fab.mat-primary[disabled],.mat-fab.mat-accent[disabled],.mat-fab.mat-warn[disabled],.mat-fab[disabled][disabled],.mat-mini-fab.mat-primary[disabled],.mat-mini-fab.mat-accent[disabled],.mat-mini-fab.mat-warn[disabled],.mat-mini-fab[disabled][disabled]{background-color:rgba(0,0,0,0.12)}.mat-flat-button.mat-primary .mat-ripple-element,.mat-raised-button.mat-primary .mat-ripple-element,.mat-fab.mat-primary .mat-ripple-element,.mat-mini-fab.mat-primary .mat-ripple-element{background-color:rgba(255,255,255,0.1)}.mat-flat-button.mat-accent .mat-ripple-element,.mat-raised-button.mat-accent .mat-ripple-element,.mat-fab.mat-accent .mat-ripple-element,.mat-mini-fab.mat-accent .mat-ripple-element{background-color:rgba(255,255,255,0.1)}.mat-flat-button.mat-warn .mat-ripple-element,.mat-raised-button.mat-warn .mat-ripple-element,.mat-fab.mat-warn .mat-ripple-element,.mat-mini-fab.mat-warn .mat-ripple-element{background-color:rgba(255,255,255,0.1)}.mat-stroked-button:not([class*='mat-elevation-z']),.mat-flat-button:not([class*='mat-elevation-z']){box-shadow:0px 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 0px 0px 0px rgba(0,0,0,0.12)}.mat-raised-button:not([class*='mat-elevation-z']){box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)}.mat-raised-button:not([disabled]):active:not([class*='mat-elevation-z']){box-shadow:0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)}.mat-raised-button[disabled]:not([class*='mat-elevation-z']){box-shadow:0px 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 0px 0px 0px rgba(0,0,0,0.12)}.mat-fab:not([class*='mat-elevation-z']),.mat-mini-fab:not([class*='mat-elevation-z']){box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)}.mat-fab:not([disabled]):active:not([class*='mat-elevation-z']),.mat-mini-fab:not([disabled]):active:not([class*='mat-elevation-z']){box-shadow:0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)}.mat-fab[disabled]:not([class*='mat-elevation-z']),.mat-mini-fab[disabled]:not([class*='mat-elevation-z']){box-shadow:0px 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 0px 0px 0px rgba(0,0,0,0.12)}.mat-button-toggle-standalone,.mat-button-toggle-group{box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{box-shadow:none}.mat-button-toggle{color:rgba(0,0,0,0.38)}.mat-button-toggle .mat-button-toggle-focus-overlay{background-color:rgba(0,0,0,0.12)}.mat-button-toggle-appearance-standard{color:rgba(0,0,0,0.87);background:#fff}.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay{background-color:#000}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:solid 1px rgba(0,0,0,0.12)}[dir='rtl'] .mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:none;border-right:solid 1px rgba(0,0,0,0.12)}.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle+.mat-button-toggle{border-left:none;border-right:none;border-top:solid 1px rgba(0,0,0,0.12)}.mat-button-toggle-checked{background-color:#e0e0e0;color:rgba(0,0,0,0.54)}.mat-button-toggle-checked.mat-button-toggle-appearance-standard{color:rgba(0,0,0,0.87)}.mat-button-toggle-disabled{color:rgba(0,0,0,0.26);background-color:#eee}.mat-button-toggle-disabled.mat-button-toggle-appearance-standard{background:#fff}.mat-button-toggle-disabled.mat-button-toggle-checked{background-color:#bdbdbd}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:solid 1px rgba(0,0,0,0.12)}.mat-card{background:#fff;color:rgba(0,0,0,0.87)}.mat-card:not([class*='mat-elevation-z']){box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)}.mat-card.mat-card-flat:not([class*='mat-elevation-z']){box-shadow:0px 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 0px 0px 0px rgba(0,0,0,0.12)}.mat-card-subtitle{color:rgba(0,0,0,0.54)}.mat-checkbox-frame{border-color:rgba(0,0,0,0.54)}.mat-checkbox-checkmark{fill:#fafafa}.mat-checkbox-checkmark-path{stroke:#fafafa !important}@media screen and (-ms-high-contrast: black-on-white){.mat-checkbox-checkmark-path{stroke:#000 !important}}.mat-checkbox-mixedmark{background-color:#fafafa}.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background,.mat-checkbox-checked.mat-primary .mat-checkbox-background{background-color:#135f7f}.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,.mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#2ecc71}.mat-checkbox-indeterminate.mat-warn .mat-checkbox-background,.mat-checkbox-checked.mat-warn .mat-checkbox-background{background-color:#e74c3c}.mat-checkbox-disabled.mat-checkbox-checked:not(.mat-checkbox-indeterminate) .mat-checkbox-background{background-color:#b0b0b0}.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame{border-color:#b0b0b0}.mat-checkbox-disabled .mat-checkbox-label{color:#b0b0b0}@media screen and (-ms-high-contrast: active){.mat-checkbox-disabled{opacity:0.5}}@media screen and (-ms-high-contrast: active){.mat-checkbox-background{background:none}}.mat-checkbox:not(.mat-checkbox-disabled).mat-primary .mat-checkbox-ripple .mat-ripple-element{background-color:#135f7f}.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#2ecc71}.mat-checkbox:not(.mat-checkbox-disabled).mat-warn .mat-checkbox-ripple .mat-ripple-element{background-color:#e74c3c}.mat-chip.mat-standard-chip{background-color:#e0e0e0;color:rgba(0,0,0,0.87)}.mat-chip.mat-standard-chip .mat-chip-remove{color:rgba(0,0,0,0.87);opacity:0.4}.mat-chip.mat-standard-chip .mat-chip-remove:hover{opacity:0.54}.mat-chip.mat-standard-chip:focus{box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)}.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{background-color:#135f7f;color:#fff}.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove{color:#fff;opacity:0.4}.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover{opacity:0.54}.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-ripple-element{background:rgba(255,255,255,0.1)}.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn{background-color:#e74c3c;color:#fff}.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove{color:#fff;opacity:0.4}.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover{opacity:0.54}.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-ripple-element{background:rgba(255,255,255,0.1)}.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent{background-color:#2ecc71;color:#fff}.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove{color:#fff;opacity:0.4}.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover{opacity:0.54}.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-element{background:rgba(255,255,255,0.1)}.mat-table{background:#fff}.mat-table thead,.mat-table tbody,.mat-table tfoot,mat-header-row,mat-row,mat-footer-row,[mat-header-row],[mat-row],[mat-footer-row],.mat-table-sticky{background:inherit}mat-row,mat-header-row,mat-footer-row,th.mat-header-cell,td.mat-cell,td.mat-footer-cell{border-bottom-color:rgba(0,0,0,0.12)}.mat-header-cell{color:rgba(0,0,0,0.54)}.mat-cell,.mat-footer-cell{color:rgba(0,0,0,0.87)}.mat-calendar-arrow{border-top-color:rgba(0,0,0,0.54)}.mat-datepicker-toggle,.mat-datepicker-content .mat-calendar-next-button,.mat-datepicker-content .mat-calendar-previous-button{color:rgba(0,0,0,0.54)}.mat-calendar-table-header{color:rgba(0,0,0,0.38)}.mat-calendar-table-header-divider::after{background:rgba(0,0,0,0.12)}.mat-calendar-body-label{color:rgba(0,0,0,0.54)}.mat-calendar-body-cell-content{color:rgba(0,0,0,0.87);border-color:transparent}.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:rgba(0,0,0,0.38)}.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background-color:rgba(0,0,0,0.04)}.mat-calendar-body-today:not(.mat-calendar-body-selected){border-color:rgba(0,0,0,0.38)}.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected){border-color:rgba(0,0,0,0.18)}.mat-calendar-body-selected{background-color:#135f7f;color:#fff}.mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:rgba(19,95,127,0.4)}.mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1px #fff}.mat-datepicker-content{box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);background-color:#fff;color:rgba(0,0,0,0.87)}.mat-datepicker-content.mat-accent .mat-calendar-body-selected{background-color:#2ecc71;color:#fff}.mat-datepicker-content.mat-accent .mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:rgba(46,204,113,0.4)}.mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1px #fff}.mat-datepicker-content.mat-warn .mat-calendar-body-selected{background-color:#e74c3c;color:#fff}.mat-datepicker-content.mat-warn .mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:rgba(231,76,60,0.4)}.mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1px #fff}.mat-datepicker-content-touch{box-shadow:0px 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 0px 0px 0px rgba(0,0,0,0.12)}.mat-datepicker-toggle-active{color:#135f7f}.mat-datepicker-toggle-active.mat-accent{color:#2ecc71}.mat-datepicker-toggle-active.mat-warn{color:#e74c3c}.mat-dialog-container{box-shadow:0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);background:#fff;color:rgba(0,0,0,0.87)}.mat-divider{border-top-color:rgba(0,0,0,0.12)}.mat-divider-vertical{border-right-color:rgba(0,0,0,0.12)}.mat-expansion-panel{background:#fff;color:rgba(0,0,0,0.87)}.mat-expansion-panel:not([class*='mat-elevation-z']){box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)}.mat-action-row{border-top-color:rgba(0,0,0,0.12)}.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused,.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused,.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover{background:rgba(0,0,0,0.04)}@media (hover: none){.mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true']) .mat-expansion-panel-header:hover{background:#fff}}.mat-expansion-panel-header-title{color:rgba(0,0,0,0.87)}.mat-expansion-panel-header-description,.mat-expansion-indicator::after{color:rgba(0,0,0,0.54)}.mat-expansion-panel-header[aria-disabled='true']{color:rgba(0,0,0,0.26)}.mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-title,.mat-expansion-panel-header[aria-disabled='true'] .mat-expansion-panel-header-description{color:inherit}.mat-form-field-label{color:rgba(0,0,0,0.6)}.mat-hint{color:rgba(0,0,0,0.6)}.mat-form-field.mat-focused .mat-form-field-label{color:#135f7f}.mat-form-field.mat-focused .mat-form-field-label.mat-accent{color:#2ecc71}.mat-form-field.mat-focused .mat-form-field-label.mat-warn{color:#e74c3c}.mat-focused .mat-form-field-required-marker{color:#2ecc71}.mat-form-field-ripple{background-color:rgba(0,0,0,0.87)}.mat-form-field.mat-focused .mat-form-field-ripple{background-color:#135f7f}.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent{background-color:#2ecc71}.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn{background-color:#e74c3c}.mat-form-field.mat-form-field-invalid .mat-form-field-label{color:#e74c3c}.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent,.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker{color:#e74c3c}.mat-form-field.mat-form-field-invalid .mat-form-field-ripple,.mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent{background-color:#e74c3c}.mat-error{color:#e74c3c}.mat-form-field-appearance-legacy .mat-form-field-label{color:rgba(0,0,0,0.54)}.mat-form-field-appearance-legacy .mat-hint{color:rgba(0,0,0,0.54)}.mat-form-field-appearance-legacy .mat-form-field-underline{background-color:rgba(0,0,0,0.42)}.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline{background-image:linear-gradient(to right, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.42) 33%, transparent 0%);background-size:4px 100%;background-repeat:repeat-x}.mat-form-field-appearance-standard .mat-form-field-underline{background-color:rgba(0,0,0,0.42)}.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline{background-image:linear-gradient(to right, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.42) 33%, transparent 0%);background-size:4px 100%;background-repeat:repeat-x}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:rgba(0,0,0,0.04)}.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex{background-color:rgba(0,0,0,0.02)}.mat-form-field-appearance-fill .mat-form-field-underline::before{background-color:rgba(0,0,0,0.42)}.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label{color:rgba(0,0,0,0.38)}.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline::before{background-color:transparent}.mat-form-field-appearance-outline .mat-form-field-outline{color:rgba(0,0,0,0.12)}.mat-form-field-appearance-outline .mat-form-field-outline-thick{color:rgba(0,0,0,0.87)}.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#135f7f}.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick{color:#2ecc71}.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick{color:#e74c3c}.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{color:#e74c3c}.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label{color:rgba(0,0,0,0.38)}.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{color:rgba(0,0,0,0.06)}.mat-icon.mat-primary{color:#135f7f}.mat-icon.mat-accent{color:#2ecc71}.mat-icon.mat-warn{color:#e74c3c}.mat-form-field-type-mat-native-select .mat-form-field-infix::after{color:rgba(0,0,0,0.54)}.mat-input-element:disabled,.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after{color:rgba(0,0,0,0.38)}.mat-input-element{caret-color:#135f7f}.mat-input-element::placeholder{color:rgba(0,0,0,0.42)}.mat-input-element::-moz-placeholder{color:rgba(0,0,0,0.42)}.mat-input-element::-webkit-input-placeholder{color:rgba(0,0,0,0.42)}.mat-input-element:-ms-input-placeholder{color:rgba(0,0,0,0.42)}.mat-accent .mat-input-element{caret-color:#2ecc71}.mat-warn .mat-input-element,.mat-form-field-invalid .mat-input-element{caret-color:#e74c3c}.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after{color:#e74c3c}.mat-list .mat-list-item,.mat-nav-list .mat-list-item,.mat-selection-list .mat-list-item{color:rgba(0,0,0,0.87)}.mat-list .mat-list-option,.mat-nav-list .mat-list-option,.mat-selection-list .mat-list-option{color:rgba(0,0,0,0.87)}.mat-list .mat-subheader,.mat-nav-list .mat-subheader,.mat-selection-list .mat-subheader{color:rgba(0,0,0,0.54)}.mat-list-item-disabled{background-color:#eee}.mat-list-option:hover,.mat-list-option:focus,.mat-nav-list .mat-list-item:hover,.mat-nav-list .mat-list-item:focus{background:rgba(0,0,0,0.04)}.mat-menu-panel{background:#fff}.mat-menu-panel:not([class*='mat-elevation-z']){box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)}.mat-menu-item{background:transparent;color:rgba(0,0,0,0.87)}.mat-menu-item[disabled],.mat-menu-item[disabled]::after{color:rgba(0,0,0,0.38)}.mat-menu-item .mat-icon:not([color]),.mat-menu-item-submenu-trigger::after{color:rgba(0,0,0,0.54)}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background:rgba(0,0,0,0.04)}.mat-paginator{background:#fff}.mat-paginator,.mat-paginator-page-size .mat-select-trigger{color:rgba(0,0,0,0.54)}.mat-paginator-decrement,.mat-paginator-increment{border-top:2px solid rgba(0,0,0,0.54);border-right:2px solid rgba(0,0,0,0.54)}.mat-paginator-first,.mat-paginator-last{border-top:2px solid rgba(0,0,0,0.54)}.mat-icon-button[disabled] .mat-paginator-decrement,.mat-icon-button[disabled] .mat-paginator-increment,.mat-icon-button[disabled] .mat-paginator-first,.mat-icon-button[disabled] .mat-paginator-last{border-color:rgba(0,0,0,0.38)}.mat-progress-bar-background{fill:#1a80ab}.mat-progress-bar-buffer{background-color:#1a80ab}.mat-progress-bar-fill::after{background-color:#135f7f}.mat-progress-bar.mat-accent .mat-progress-bar-background{fill:#54d98c}.mat-progress-bar.mat-accent .mat-progress-bar-buffer{background-color:#54d98c}.mat-progress-bar.mat-accent .mat-progress-bar-fill::after{background-color:#2ecc71}.mat-progress-bar.mat-warn .mat-progress-bar-background{fill:#ed7669}.mat-progress-bar.mat-warn .mat-progress-bar-buffer{background-color:#ed7669}.mat-progress-bar.mat-warn .mat-progress-bar-fill::after{background-color:#e74c3c}.mat-progress-spinner circle,.mat-spinner circle{stroke:#135f7f}.mat-progress-spinner.mat-accent circle,.mat-spinner.mat-accent circle{stroke:#2ecc71}.mat-progress-spinner.mat-warn circle,.mat-spinner.mat-warn circle{stroke:#e74c3c}.mat-radio-outer-circle{border-color:rgba(0,0,0,0.54)}.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle{border-color:#135f7f}.mat-radio-button.mat-primary .mat-radio-inner-circle,.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,.mat-radio-button.mat-primary:active .mat-radio-persistent-ripple{background-color:#135f7f}.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#2ecc71}.mat-radio-button.mat-accent .mat-radio-inner-circle,.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple,.mat-radio-button.mat-accent:active .mat-radio-persistent-ripple{background-color:#2ecc71}.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle{border-color:#e74c3c}.mat-radio-button.mat-warn .mat-radio-inner-circle,.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple,.mat-radio-button.mat-warn:active .mat-radio-persistent-ripple{background-color:#e74c3c}.mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-outer-circle,.mat-radio-button.mat-radio-disabled .mat-radio-outer-circle{border-color:rgba(0,0,0,0.38)}.mat-radio-button.mat-radio-disabled .mat-radio-ripple .mat-ripple-element,.mat-radio-button.mat-radio-disabled .mat-radio-inner-circle{background-color:rgba(0,0,0,0.38)}.mat-radio-button.mat-radio-disabled .mat-radio-label-content{color:rgba(0,0,0,0.38)}.mat-radio-button .mat-ripple-element{background-color:#000}.mat-select-value{color:rgba(0,0,0,0.87)}.mat-select-placeholder{color:rgba(0,0,0,0.42)}.mat-select-disabled .mat-select-value{color:rgba(0,0,0,0.38)}.mat-select-arrow{color:rgba(0,0,0,0.54)}.mat-select-panel{background:#fff}.mat-select-panel:not([class*='mat-elevation-z']){box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)}.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){background:rgba(0,0,0,0.12)}.mat-form-field.mat-focused.mat-primary .mat-select-arrow{color:#135f7f}.mat-form-field.mat-focused.mat-accent .mat-select-arrow{color:#2ecc71}.mat-form-field.mat-focused.mat-warn .mat-select-arrow{color:#e74c3c}.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow{color:#e74c3c}.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow{color:rgba(0,0,0,0.38)}.mat-drawer-container{background-color:#fafafa;color:rgba(0,0,0,0.87)}.mat-drawer{background-color:#fff;color:rgba(0,0,0,0.87)}.mat-drawer.mat-drawer-push{background-color:#fff}.mat-drawer:not(.mat-drawer-side){box-shadow:0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)}.mat-drawer-side{border-right:solid 1px rgba(0,0,0,0.12)}.mat-drawer-side.mat-drawer-end{border-left:solid 1px rgba(0,0,0,0.12);border-right:none}[dir='rtl'] .mat-drawer-side{border-left:solid 1px rgba(0,0,0,0.12);border-right:none}[dir='rtl'] .mat-drawer-side.mat-drawer-end{border-left:none;border-right:solid 1px rgba(0,0,0,0.12)}.mat-drawer-backdrop.mat-drawer-shown{background-color:rgba(0,0,0,0.6)}.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb{background-color:#2ecc71}.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar{background-color:rgba(46,204,113,0.54)}.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-ripple-element{background-color:#2ecc71}.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb{background-color:#135f7f}.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar{background-color:rgba(19,95,127,0.54)}.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-ripple-element{background-color:#135f7f}.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb{background-color:#e74c3c}.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar{background-color:rgba(231,76,60,0.54)}.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-ripple-element{background-color:#e74c3c}.mat-slide-toggle:not(.mat-checked) .mat-ripple-element{background-color:#000}.mat-disabled .mat-slide-toggle-thumb{background-color:#bdbdbd}.mat-disabled .mat-slide-toggle-bar{background-color:rgba(0,0,0,0.1)}.mat-slide-toggle-thumb{box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);background-color:#fafafa}.mat-slide-toggle-bar{background-color:rgba(0,0,0,0.38)}.mat-slider-track-background{background-color:rgba(0,0,0,0.26)}.mat-primary .mat-slider-track-fill,.mat-primary .mat-slider-thumb,.mat-primary .mat-slider-thumb-label{background-color:#135f7f}.mat-primary .mat-slider-thumb-label-text{color:#fff}.mat-accent .mat-slider-track-fill,.mat-accent .mat-slider-thumb,.mat-accent .mat-slider-thumb-label{background-color:#2ecc71}.mat-accent .mat-slider-thumb-label-text{color:#fff}.mat-warn .mat-slider-track-fill,.mat-warn .mat-slider-thumb,.mat-warn .mat-slider-thumb-label{background-color:#e74c3c}.mat-warn .mat-slider-thumb-label-text{color:#fff}.mat-slider-focus-ring{background-color:rgba(46,204,113,0.2)}.mat-slider:hover .mat-slider-track-background,.cdk-focused .mat-slider-track-background{background-color:rgba(0,0,0,0.38)}.mat-slider-disabled .mat-slider-track-background,.mat-slider-disabled .mat-slider-track-fill,.mat-slider-disabled .mat-slider-thumb{background-color:rgba(0,0,0,0.26)}.mat-slider-disabled:hover .mat-slider-track-background{background-color:rgba(0,0,0,0.26)}.mat-slider-min-value .mat-slider-focus-ring{background-color:rgba(0,0,0,0.12)}.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label{background-color:rgba(0,0,0,0.87)}.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label{background-color:rgba(0,0,0,0.26)}.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{border-color:rgba(0,0,0,0.26);background-color:transparent}.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb,.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb{border-color:rgba(0,0,0,0.38)}.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb,.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb{border-color:rgba(0,0,0,0.26)}.mat-slider-has-ticks .mat-slider-wrapper::after{border-color:rgba(0,0,0,0.7)}.mat-slider-horizontal .mat-slider-ticks{background-image:repeating-linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.7) 2px, transparent 0, transparent);background-image:-moz-repeating-linear-gradient(0.0001deg, rgba(0,0,0,0.7), rgba(0,0,0,0.7) 2px, transparent 0, transparent)}.mat-slider-vertical .mat-slider-ticks{background-image:repeating-linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7) 2px, transparent 0, transparent)}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover{background-color:rgba(0,0,0,0.04)}.mat-step-header .mat-step-label,.mat-step-header .mat-step-optional{color:rgba(0,0,0,0.54)}.mat-step-header .mat-step-icon{background-color:rgba(0,0,0,0.54);color:#fff}.mat-step-header .mat-step-icon-selected,.mat-step-header .mat-step-icon-state-done,.mat-step-header .mat-step-icon-state-edit{background-color:#135f7f;color:#fff}.mat-step-header .mat-step-icon-state-error{background-color:transparent;color:#e74c3c}.mat-step-header .mat-step-label.mat-step-label-active{color:rgba(0,0,0,0.87)}.mat-step-header .mat-step-label.mat-step-label-error{color:#e74c3c}.mat-stepper-horizontal,.mat-stepper-vertical{background-color:#fff}.mat-stepper-vertical-line::before{border-left-color:rgba(0,0,0,0.12)}.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after,.mat-stepper-horizontal-line{border-top-color:rgba(0,0,0,0.12)}.mat-sort-header-arrow{color:#757575}.mat-tab-nav-bar,.mat-tab-header{border-bottom:1px solid rgba(0,0,0,0.12)}.mat-tab-group-inverted-header .mat-tab-nav-bar,.mat-tab-group-inverted-header .mat-tab-header{border-top:1px solid rgba(0,0,0,0.12);border-bottom:none}.mat-tab-label,.mat-tab-link{color:rgba(0,0,0,0.87)}.mat-tab-label.mat-tab-disabled,.mat-tab-link.mat-tab-disabled{color:rgba(0,0,0,0.38)}.mat-tab-header-pagination-chevron{border-color:rgba(0,0,0,0.87)}.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron{border-color:rgba(0,0,0,0.38)}.mat-tab-group[class*='mat-background-'] .mat-tab-header,.mat-tab-nav-bar[class*='mat-background-']{border-bottom:none;border-top:none}.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(26,128,171,0.3)}.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar{background-color:#135f7f}.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar{background-color:#fff}.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(84,217,140,0.3)}.mat-tab-group.mat-accent .mat-ink-bar,.mat-tab-nav-bar.mat-accent .mat-ink-bar{background-color:#2ecc71}.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar,.mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar{background-color:#fff}.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(237,118,105,0.3)}.mat-tab-group.mat-warn .mat-ink-bar,.mat-tab-nav-bar.mat-warn .mat-ink-bar{background-color:#e74c3c}.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar,.mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar{background-color:#fff}.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(26,128,171,0.3)}.mat-tab-group.mat-background-primary .mat-tab-header,.mat-tab-group.mat-background-primary .mat-tab-links,.mat-tab-nav-bar.mat-background-primary .mat-tab-header,.mat-tab-nav-bar.mat-background-primary .mat-tab-links{background-color:#135f7f}.mat-tab-group.mat-background-primary .mat-tab-label,.mat-tab-group.mat-background-primary .mat-tab-link,.mat-tab-nav-bar.mat-background-primary .mat-tab-label,.mat-tab-nav-bar.mat-background-primary .mat-tab-link{color:#fff}.mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled,.mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled,.mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled,.mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled{color:rgba(255,255,255,0.4)}.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron{border-color:#fff}.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron{border-color:rgba(255,255,255,0.4)}.mat-tab-group.mat-background-primary .mat-ripple-element,.mat-tab-nav-bar.mat-background-primary .mat-ripple-element{background-color:rgba(255,255,255,0.12)}.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(84,217,140,0.3)}.mat-tab-group.mat-background-accent .mat-tab-header,.mat-tab-group.mat-background-accent .mat-tab-links,.mat-tab-nav-bar.mat-background-accent .mat-tab-header,.mat-tab-nav-bar.mat-background-accent .mat-tab-links{background-color:#2ecc71}.mat-tab-group.mat-background-accent .mat-tab-label,.mat-tab-group.mat-background-accent .mat-tab-link,.mat-tab-nav-bar.mat-background-accent .mat-tab-label,.mat-tab-nav-bar.mat-background-accent .mat-tab-link{color:#fff}.mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled,.mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled,.mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled,.mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled{color:rgba(255,255,255,0.4)}.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron{border-color:#fff}.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron{border-color:rgba(255,255,255,0.4)}.mat-tab-group.mat-background-accent .mat-ripple-element,.mat-tab-nav-bar.mat-background-accent .mat-ripple-element{background-color:rgba(255,255,255,0.12)}.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(237,118,105,0.3)}.mat-tab-group.mat-background-warn .mat-tab-header,.mat-tab-group.mat-background-warn .mat-tab-links,.mat-tab-nav-bar.mat-background-warn .mat-tab-header,.mat-tab-nav-bar.mat-background-warn .mat-tab-links{background-color:#e74c3c}.mat-tab-group.mat-background-warn .mat-tab-label,.mat-tab-group.mat-background-warn .mat-tab-link,.mat-tab-nav-bar.mat-background-warn .mat-tab-label,.mat-tab-nav-bar.mat-background-warn .mat-tab-link{color:#fff}.mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled,.mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled,.mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled,.mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled{color:rgba(255,255,255,0.4)}.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron{border-color:#fff}.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron{border-color:rgba(255,255,255,0.4)}.mat-tab-group.mat-background-warn .mat-ripple-element,.mat-tab-nav-bar.mat-background-warn .mat-ripple-element{background-color:rgba(255,255,255,0.12)}.mat-toolbar{background:#f5f5f5;color:rgba(0,0,0,0.87)}.mat-toolbar.mat-primary{background:#135f7f;color:#fff}.mat-toolbar.mat-accent{background:#2ecc71;color:#fff}.mat-toolbar.mat-warn{background:#e74c3c;color:#fff}.mat-toolbar .mat-form-field-underline,.mat-toolbar .mat-form-field-ripple,.mat-toolbar .mat-focused .mat-form-field-ripple{background-color:currentColor}.mat-toolbar .mat-form-field-label,.mat-toolbar .mat-focused .mat-form-field-label,.mat-toolbar .mat-select-value,.mat-toolbar .mat-select-arrow,.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow{color:inherit}.mat-toolbar .mat-input-element{caret-color:currentColor}.mat-tooltip{background:rgba(97,97,97,0.9)}.mat-tree{background:#fff}.mat-tree-node,.mat-nested-tree-node{color:rgba(0,0,0,0.87)}.mat-snack-bar-container{color:rgba(255,255,255,0.7);background:#323232;box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)}.mat-simple-snackbar-action{color:#2ecc71}
diff --git a/src/frontend/css/maarch-material.scss b/src/frontend/css/maarch-material.scss
new file mode 100644
index 0000000000000000000000000000000000000000..790a748ae3447e35ce4d31140e21de164cb73221
--- /dev/null
+++ b/src/frontend/css/maarch-material.scss
@@ -0,0 +1,53 @@
+@import 'vars.scss';
+
+@import './node_modules/@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// theme colors
+// @function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700)
+$mat-maarch-primary: (
+ 100: lighten( $primary, 10% ),
+ 500: $primary,
+ 700: darken( $primary, 10% ),
+ contrast: (
+ 100: $dark-primary-text,
+ 500: $light-primary-text,
+ 700: $light-primary-text
+ )
+);
+
+$mat-maarch-warn: (
+ 100: lighten( $warn, 10% ),
+ 500: $warn,
+ 700: darken( $warn, 10% ),
+ contrast: (
+ 100: $dark-primary-text,
+ 500: $light-primary-text,
+ 700: $light-primary-text
+ )
+);
+
+$mat-maarch-accent: (
+ 100: lighten( $accent, 10% ),
+ 500: $accent,
+ 700: darken( $accent, 10% ),
+ contrast: (
+ 100: $dark-primary-text,
+ 500: $light-primary-text,
+ 700: $light-primary-text
+ )
+);
+
+$primary: mat-palette($mat-maarch-primary,500);
+$accent: mat-palette($mat-maarch-accent,500);
+$warn: mat-palette($mat-maarch-warn,500);
+
+// create theme from palettes
+$theme: mat-light-theme($primary, $accent, $warn);
+// apply theme
+@include angular-material-theme($theme);
\ No newline at end of file
diff --git a/src/frontend/css/vars.scss b/src/frontend/css/vars.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d2d11364260c984a627211c50c90f1fc35353995
--- /dev/null
+++ b/src/frontend/css/vars.scss
@@ -0,0 +1,6 @@
+$color-main: #4F4F4F; // default color in application
+$primary: #135F7F; // main color theme of application
+$accent: #2ECC71; // accent color theme of application (like success buttons)
+$warn: rgb(231, 76, 60); // warning color theme of application
+
+// WARNING ! YOU MUST RECOMPILATE maarch-material.scss IF VALUES CHANGES
\ No newline at end of file
diff --git a/src/frontend/css/vars.styl b/src/frontend/css/vars.styl
deleted file mode 100755
index 898a7a7af7f61a7032662a12c2da351d67999b1f..0000000000000000000000000000000000000000
--- a/src/frontend/css/vars.styl
+++ /dev/null
@@ -1,6 +0,0 @@
-$container = 100vw
-$header-height = 80px
-$footer-height = 60px
-$color-main = #4F4F4F
-$active-color = #135F7F
-$green = #2ECC71
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f79b91b6d8f310cbd0dc6d49a888c1d04eb4a425
--- /dev/null
+++ b/src/styles.scss
@@ -0,0 +1,221 @@
+
+// CORE VARS COLOR
+@import './frontend/css/vars.scss';
+
+// COMPILATED MATERIAL THEMING
+@import './frontend/css/maarch-material.css';
+
+
+.default {
+ color: $color-main;
+}
+
+.primary {
+ color: $primary;
+}
+
+.red {
+ color: $warn;
+}
+
+.green {
+ color: $accent;
+}
+
+i, input, button, .mat-bottom-sheet-container, .mat-sidenav-container {
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.c-active-color {
+ color: $color-main;
+}
+.bold {
+ font-weight: bold;
+}
+
+html {
+ height: 100%;
+ position: fixed;
+ overflow: hidden;
+}
+
+body {
+ height: 100%;
+ width: 100%;
+ position: fixed;
+ overflow: hidden;
+}
+
+.mat-sidenav-container {
+ height: 100vh;
+ overflow-y: scroll;
+ -webkit-overflow-scrolling: touch;
+}
+.form-label {
+ display: flex;
+ align-items: center;
+}
+.btn {
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ font-size: 14px;
+ font-weight: bold;
+ border: 1px solid black;
+ background-color: #fff;
+ padding: 0 25px;
+ border-radius: 25px;
+ cursor: pointer;
+ outline: none;
+ &.btn-xs {
+ height: 35px;
+ }
+ &.green {
+ color: $accent;
+ border: 1px solid $accent;
+ }
+ &.red {
+ color: $warn;
+ border: 1px solid $warn;
+ }
+ &.blue {
+ color: $primary;
+ background: #fff;
+ border: 1px solid $primary;
+ &.active {
+ color: #fff;
+ background: $primary;
+ }
+ }
+ &:disabled {
+ opacity: 0.5;
+ color: #000;
+ border: 1px solid #000;
+ cursor: not-allowed;
+ }
+ .fas, i, .material-icons {
+ margin: 0 5px;
+ }
+}
+.toggle {
+ appearance: none;
+ position: relative;
+ width: 60px;
+ height: 38px;
+ border-radius: 19px;
+ outline: none;
+ transition: all 0.1s;
+ border: solid 1px #ECF0F1;
+ background: #ECF0F1;
+ &:after {
+ content: "";
+ position: absolute;
+ width: 34px;
+ height: 34px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #fff;
+ border: 1px solid #ECF0F1;
+ border-radius: 18px;
+ box-shadow: 0 1px 2px 0 rgba(9, 11, 15, 0.06);
+ }
+ &:checked {
+ border-color: $accent;
+ background: $accent;
+ &:after {
+ right: 0;
+ top: 0;
+ }
+ }
+}
+
+body {
+ margin: 0;
+ font-family: 'lato', sans-serif;
+ color: $color-main;
+ -webkit-font-smoothing: antialiased;
+}
+.header {
+ width: 100vw;
+ height: 80px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20px 0;
+ /*&-left
+ position absolute
+ top 15px
+ left -60px
+ &-right
+ position absolute
+ top 15px
+ right -60px*/
+ &-infos {
+ background: #F1F4F4;
+ border-radius: 5px;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ width: 100%;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ position: relative;
+ }
+ &-info {
+ border-right: 1px solid #979797;
+ width: 200px;
+ height: 60px;
+ font-size: 12px;
+ padding-left: 20px;
+ &:last-child {
+ border: none;
+ }
+ p {
+ margin: 0;
+ padding: 0;
+ }
+ }
+}
+
+.footer {
+ width: 100vw;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ position: fixed;
+ bottom: 10px;
+ z-index: 1;
+}
+
+button.disabled {
+ cursor: not-allowed;
+}
+
+.dragger {
+ position: absolute;
+ z-index: 10;
+ background: cyan;
+}
+
+.cdk-global-scrollblock {
+ overflow: hidden !important;
+}
+
+.mat-snack-bar-container {
+ text-align: center;
+ font-weight: bold;
+}
+
+.mat-snack-bar-container.error-snackbar {
+ color: $warn;
+ background: white;
+ border: solid 1px $warn;
+}
+
+.mat-snack-bar-container.success-snackbar {
+ color: $primary;
+ background: white;
+ border: solid 1px $primary;
+}
diff --git a/src/styles.styl b/src/styles.styl
deleted file mode 100755
index 06ed88cfe9072f996148f6ed47bd4f66e890c6f6..0000000000000000000000000000000000000000
--- a/src/styles.styl
+++ /dev/null
@@ -1,187 +0,0 @@
-@import './frontend/css/vars.styl'
-@import './frontend/css/atomic.styl'
-
-i, input, button, .mat-bottom-sheet-container, .mat-sidenav-container
- -webkit-tap-highlight-color rgba(0, 0, 0, 0)
-
-//COLORS
-.c-active-color
- color #135F7F
-.bold
- font-weight bold
-
-html
- height 100%
- position fixed
- overflow hidden
-
-body
- height 100%
- width 100%
- position fixed
- overflow hidden
-
-.mat-sidenav-container
- height: 100vh;
- overflow-y: scroll;
- -webkit-overflow-scrolling: touch;
-
-//forms
-.form-label
- display flex
- align-items center
-
-//Buttons
-.btn
- height 50px
- display flex
- align-items center
- justify-content space-around
- font-size 14px
- font-weight bold
- border 1px solid black
- background-color #fff
- padding 0 25px
- border-radius 25px
- cursor pointer
- outline none
- &.btn-xs
- height 35px
- &.green
- color $green
- border 1px solid $green
- &.red
- color #E74C3C
- border 1px solid #E74C3C
- &.blue
- color #135F7F
- background #fff
- border 1px solid #135F7F
- &.active
- color #fff
- background #135F7F
- &:disabled
- opacity 0.5
- color #000
- border 1px solid #000
- cursor not-allowed
- .fas, i, .material-icons
- margin 0 5px
-
-//toggle
-.toggle
- appearance none
- position relative
- width 60px
- height 38px
- border-radius 19px
- outline none
- transition all 0.1s
- border solid 1px #ECF0F1
- background #ECF0F1
- &:after
- content ""
- position absolute
- width 34px
- height 34px
- display flex
- align-items center
- justify-content center
- background #fff
- border 1px solid #ECF0F1
- border-radius 18px
- box-shadow 0 1px 2px 0 rgba(9, 11, 15, 0.06)
- &:checked
- border-color $green
- background $green
- &:after
- right 0
- top 0
-
-body
- margin 0
- font-family 'lato', sans-serif
- color $color-main
- -webkit-font-smoothing antialiased
-
-// .main
-
-//HEADER
- .header
- width $container
- height $header-height
- display flex
- justify-content center
- align-items center
- padding 20px 0
- /*&-left
- position absolute
- top 15px
- left -60px
- &-right
- position absolute
- top 15px
- right -60px*/
- &-infos
- background #F1F4F4
- border-radius 5px
- display flex
- justify-content space-between
- align-items flex-start
- width 100%
- padding-top 12px
- padding-bottom 12px
- position relative
- &-info
- border-right 1px solid #979797
- width 200px
- height 60px
- font-size 12px
- padding-left 20px
- &:last-child
- border none
- p
- margin 0
- padding 0
-
-.footer
- width $container
- height $footer-height
- display flex
- align-items center
- justify-content space-around
- position fixed
- bottom 10px
- z-index 1
-
-button.disabled
- cursor not-allowed
-
-
-.dragger
- position absolute
- // top 0
- // left 0
- // height 150px
- // width 150px
- z-index 10
- background cyan
-
-.cdk-global-scrollblock
- overflow : hidden !important
-
-.mat-snack-bar-container
- text-align: center
- font-weight bold
-
-.mat-snack-bar-container.error-snackbar {
- color #E74C3C
- background white
- border solid 1px #E74C3C
-}
-
-.mat-snack-bar-container.success-snackbar {
- color #135F7F
- background white
- border solid 1px #135F7F
-}
\ No newline at end of file