From 8bb5b44181fd8f46327af7e7fdb7ce2e23965793 Mon Sep 17 00:00:00 2001
From: "m.epshtein" <m.epshtein@micord.ru>
Date: Thu, 13 Jun 2024 20:13:46 +0300
Subject: [PATCH] btn

---
 frontend/src/resources/css/components-app.css | 451 +++++++++---------
 .../src/resources/css/components-lkrp.css     |  19 +
 frontend/src/resources/css/inbox-lkrp.css     |  19 +-
 3 files changed, 270 insertions(+), 219 deletions(-)

diff --git a/frontend/src/resources/css/components-app.css b/frontend/src/resources/css/components-app.css
index abaf1703..a5815c2e 100644
--- a/frontend/src/resources/css/components-app.css
+++ b/frontend/src/resources/css/components-app.css
@@ -1,6 +1,20 @@
 @charset "utf-8";
 
+.webbpm div[id="page"], 
+.webbpm div[id="page"] > div, 
+.webbpm div[id="page"] > div > div {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.webbpm [id="page"] > div > div > [page-object]:first-child {
+    padding-top: 15px;
+}
+
 .webbpm [id="page"] > div > div > [page-object] {
+    display: inherit;
+    margin-bottom: 10px;
     padding: 0 40px;
 }
 
@@ -15,33 +29,33 @@
 }
 
 .webbpm .sub-header {
-    color: #fff;
+    color: var(--white);
     font-weight: normal;
     padding: 0 20px;
     margin-top: 10px;
     border-radius: 20px;
-    background: #4c5969;
-}
+    background: var(--bg-secondary);
 
-.webbpm .sub-header > .form-group {
-    padding: 10px 0;
-    margin-bottom: 0;
-}
+    & > .form-group {
+        padding: 10px 0;
+        margin-bottom: 0;
+    }
 
-.webbpm .sub-header>div > div:last-of-type {
-    font-size: 18px;
-    padding: 0;
+    & > div > div:last-of-type {
+        font-size: 18px;
+        padding: 0;
+    }
 }
 
 .webbpm .form-signup input.ng-invalid.ng-touched,
 .webbpm .form-signup input.ng-invalid.ng-touched ~ .input-group-append > .input-group-text,
 .webbpm .form-signup input.ng-invalid.ng-dirty,
 .webbpm .form-signup input.ng-invalid.ng-dirty ~ .input-group-append > .input-group-text {
-    border-color: #1c92ea !important;
+    border-color: var(--color-link) !important;
 }
 
 .webbpm .form-signup .msg-alert {
-    color: #1c92ea;
+    color: var(--color-link);
 }
 
 .webbpm input[type="text"],
@@ -54,13 +68,13 @@
 .webbpm select,
 .webbpm .selectize-control.single .selectize-input,
 .webbpm .multi.plugin-remove_button .selectize-input {
-    color: #404954;
-    font-size: 16px;
+    color: var(--color-text-primary);
+    font-size: var(--size-text-primary);
     min-height: 38px;
     padding: 6px 8px;
-    border: 1px solid #e3e6ed;
+    border: 1px solid var(--border-light);
     border-radius: 8px;
-    background-color: #fff;
+    background-color: var(--white);
     background-image: none;
     box-shadow: none;
 }
@@ -73,12 +87,12 @@
 .webbpm .wb-touched.wb-invalid .input-group-addon:focus,
 .webbpm .wb-touched.wb-invalid .selectize-input,
 .webbpm .wb-touched.wb-invalid .selectize-input:focus {
-    border-color: #1c92ea !important;
+    border-color: var(--color-link) !important;
     box-shadow: none !important;
 }
 
 .webbpm select option:checked {
-    color: #1c92ea;
+    color: var(--color-link);
 }
 
 .webbpm .input-group input[name="password"],
@@ -92,8 +106,8 @@
 .webbpm .input-group input[name="password"] ~ .input-group-append > .input-group-text,
 .webbpm .input-group input[name="confirmPassword"] ~ .input-group-append > .input-group-text,
 .webbpm .date input ~ .input-group-addon {
-    color: #404954;
-    border-color: #e3e6ed;
+    color: var(--color-text-primary);
+    border-color: var(--border-light);
     border-radius: 8px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;    
@@ -103,8 +117,8 @@
 .webbpm .input-group input[name="password"] ~ .input-group-append > .input-group-text,
 .webbpm .input-group input[name="confirmPassword"] ~ .input-group-append > .input-group-text,
 .webbpm .date input ~ .input-group-addon {
-    color: #404954;
-    border-color: #e3e6ed;
+    color: var(--color-text-primary);
+    border-color: var(--border-light);
     border-radius: 8px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;    
@@ -114,21 +128,21 @@
 .webbpm international-phone-number .input-group-addon.flagInput {
     border: 0;
     background-color: transparent;
-}
 
-.webbpm international-phone-number .input-group-addon.flagInput .btn {
-    border: 1px solid #e3e6ed;
-    border-right: 0;
-    border-radius: 10px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;      
-}
+    .btn {
+        border: 1px solid var(--border-light);
+        border-right: 0;
+        border-radius: 10px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;      
+    }
 
-.webbpm international-phone-number .input-group-addon.flagInput ~ input {
-    border-right: 1px solid #e3e6ed;
-    border-radius: 10px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;    
+    & ~ input {
+        border-right: 1px solid var(--border-light);
+        border-radius: 10px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;    
+    }
 }
 
 .webbpm .selectize-dropdown {
@@ -136,14 +150,14 @@
 }
 
 .webbpm .selectize-dropdown-content {
-    border: 1px solid #e3e6ed;
+    border: 1px solid var(--border-light);
     border-radius: 10px;
-    background-color: #fff;
+    background-color: var(--white);
     box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
 }
 
 .webbpm .selectize-dropdown .active {
-    color: #1c92ea;
+    color: var(--color-link);
     background-color: transparent;
 }
 
@@ -167,7 +181,7 @@
 .webbpm .date .form-control[readonly] ~ .input-group-addon,
 .webbpm fieldset[disabled] .form-control,
 .webbpm .selectize-control .selectize-input.disabled {
-    background-color: #f5f7fa;  
+    background-color: var(--bg-light);  
 }
 
 .webbpm .selectize-control.form-control {
@@ -184,9 +198,9 @@
 }
 
 .webbpm drop-down-button .dropdown-menu.show {
-    border: 1px solid #e3e6ed;
+    border: 1px solid var(--border-light);
     border-radius: 10px;
-    background-color: #fff;
+    background-color: var(--white);
     box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
 }
 
@@ -198,17 +212,17 @@
 }
 
 .webbpm .selectize-dropdown-content {
-    font-size: 16px;
+    font-size: var(--size-text-primary);
 }
 
 .webbpm .selectize-dropdown .more_values {
-    color: #404954;
+    color: var(--color-text-primary);
     background-color: #f0f7fd;
 }
 
 /*----------------- Button ---------------- */
 .webbpm .btn {
-    font-size: 16px;
+    font-size: var(--size-text-primary);
     font-family: 'SegoeSB';
     padding: 6px 14px;
     margin-bottom: 0;
@@ -227,9 +241,9 @@
 
 .webbpm .btn-main > * > .btn,
 .webbpm .btn-primary {
-    color: #fff !important;
-    border-color: #1c92ea;
-    background: #1c92ea;
+    color: var(--white) !important;
+    border-color: var(--color-link);
+    background: var(--color-link);
     box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
 }
 .webbpm .btn-main > * > .btn:not(:disabled):not(.disabled):hover,
@@ -248,23 +262,23 @@
 
 .webbpm .btn-secondary,
 .webbpm .btn-default {
-    color: #404954;
-    border: 1px solid #e3e6ed;
-    background: #fff;
+    color: var(--color-text-primary);
+    border: 1px solid var(--border-light);
+    background: var(--white);
     box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
 }
 .webbpm .btn-secondary:not(:disabled):not(.disabled):hover,
 .webbpm .btn-secondary:not(:disabled):not(.disabled):active,
 .webbpm .btn-default:not(:disabled):not(.disabled):hover,
 .webbpm .btn-default:not(:disabled):not(.disabled):active {
-    color: #1c92ea;
-    border-color: #e3e6ed;
-    background-color: #fff;
+    color: var(--color-link);
+    border-color: var(--border-light);
+    background-color: var(--white);
 }
 .webbpm .btn-secondary:not(:disabled):not(.disabled):focus,
 .webbpm .btn-default:not(:disabled):not(.disabled):focus {
-    border-color: #e3e6ed;
-    background-color: #fff;
+    border-color: var(--border-light);
+    background-color: var(--white);
     box-shadow: none;
 }
 
@@ -281,14 +295,14 @@
 .webbpm .btn-main .btn.disabled,
 .webbpm .btn-main .btn:disabled {
     color: rgba(255, 255, 255, 0.8) !important;
-    border-color: #1c92ea;
-    background-color: #1c92ea;
+    border-color: var(--color-link);
+    background-color: var(--color-link);
     box-shadow: none;
 }
 
 .webbpm ag-grid-angular .state-btn-edit,
 .webbpm ag-grid-angular .state-btn-delete {
-    color: #1c92ea !important;
+    color: var(--color-link) !important;
     border: 0;
     background: transparent;
     box-shadow: none;
@@ -305,51 +319,52 @@
     flex-direction: column;
     max-width: 800px;
     margin-top: 20px;
-}
 
-.webbpm bread-crumb .status_bar {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: stretch;
-}
+    .status_bar {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: stretch;
 
-.webbpm bread-crumb .status_bar .crumb-element {
-    color: #fff;
-    font-size: 14px;
-    padding: 4px 15px;
-    background-color: #4c5969;
-    border-radius: 20px;
-    z-index: 1;
-}
+        .crumb-element {
+            color: var(--white);
+            font-size: var(--size-text-secondary);
+            padding: 4px 15px;
+            background-color: var(--bg-secondary);
+            border-radius: 20px;
+            z-index: 1;
+        }
 
-.webbpm bread-crumb .status_bar > div + div {
-    position: relative;
-    display: flex;
-    justify-content: end;
-    flex: 1;
-}
-.webbpm bread-crumb .status_bar > div + div::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    height: 2px;
-    background-color: #4c5969;
-}
+        & > div + div {
+            position: relative;
+            display: flex;
+            justify-content: end;
+            flex: 1;
 
-.webbpm bread-crumb .status_bar > div.active ~ div::before {
-    background-color: #e3e6ed;
-}
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 50%;
+                height: 2px;
+                background-color: var(--bg-secondary);
+            }
+        }
 
-.webbpm bread-crumb .status_bar > div.active .crumb-element {
-    background-color: #1c92ea;
-}
+        & > div.active ~ div::before {
+            background-color: var(--border-light);
+        }
 
-.webbpm bread-crumb .status_bar > div.active ~ div .crumb-element {
-    color: #989fa8;
-    background-color: #e3e6ed;
+        & > div.active .crumb-element {
+            background-color: var(--color-link);
+        }
+
+        & > div.active ~ div .crumb-element {
+            color: #989fa8;
+            background-color: var(--border-light);
+        }
+    }
 }
 /*--------------- end Bread-crumb ------------ */
 
@@ -396,13 +411,13 @@
 .webbpm ag-grid-angular .ag-header {
     border: 0;
     border-radius: 12px;
-    background: #f5f7fa;
+    background: var(--bg-light);
 }
 
 .webbpm ag-grid-angular .ag-header-row {
-    color: #404954;
+    color: var(--color-text-primary);
     font-family: 'SegoeSB';
-    font-size: 14px;
+    font-size: var(--size-text-secondary);
     font-weight: normal;
 }
 
@@ -413,7 +428,7 @@
 
 .webbpm ag-grid-angular .ag-header-group-cell {
     font-family: 'SegoeB';
-    font-size: 16px;
+    font-size: var(--size-text-primary);
 }
 
 .webbpm ag-grid-angular .ag-header-cell>.ag-cell-label-container>.ag-header-cell-label>.ag-header-cell-text {
@@ -422,16 +437,15 @@
 
 .webbpm ag-grid-angular .ag-header .ag-floating-filter-body input {
     font-family: 'Segoe';
-    font-size: 14px;
+    font-size: var(--size-text-secondary);
     min-height: 20px;
     padding: 2px;
-    border: 1px solid #e3e6ed;
+    border: 1px solid var(--border-light);
     border-radius: 4px;
     background: transparent;
 }
 
-.webbpm ag-grid-angular .ag-root,
-.webbpm ag-grid-angular .ag-header-row {
+.webbpm ag-grid-angular :is(.ag-root, .ag-header-row) {
     border: 0;
 }
 
@@ -440,7 +454,7 @@
 }
 
 .webbpm ag-grid-angular .ag-row {
-    border-color: #e3e6ed;
+    border-color: var(--border-light);
 }
 .webbpm ag-grid-angular .ag-row::before {
     display: none;
@@ -454,13 +468,12 @@
     border-width: 1px 0;
 }
 
-.webbpm ag-grid-angular .ag-row.ag-row-odd,
-.webbpm ag-grid-angular .ag-row.ag-row-selected {
+.webbpm ag-grid-angular :is(.ag-row.ag-row-odd, .ag-row.ag-row-selected) {
     background-color: inherit !important;
 }
 
 .webbpm ag-grid-angular .ag-row.ag-row-selected .ag-cell {
-    color: #1c92ea;
+    color: var(--color-link);
 }
 
 .webbpm ag-grid-angular .ag-body-viewport .ag-row.ag-row-hover {
@@ -483,8 +496,8 @@
 
 .webbpm ag-grid-angular .ag-row .ag-cell {
     display: inline-flex;
-    color: #404954;
-    font-size: 16px;
+    color: var(--color-text-primary);
+    font-size: var(--size-text-primary);
     padding: 0 10px;
     border: 1px solid transparent;
 }
@@ -532,7 +545,7 @@
 }
 
 .webbpm ag-grid-angular .ag-cell.ag-cell-focus.ag-cell-inline-editing input {
-    font-size: 16px; 
+    font-size: var(--size-text-primary); 
     padding: 0;
     border: 0;
     background: transparent;
@@ -540,41 +553,42 @@
 }
 
 .webbpm ag-grid-angular .ag-paging-panel {
-    color: #404954;
-    font-size: 14px;
+    color: var(--color-text-primary);
+    font-size: var(--size-text-secondary);
     border: 0;
     border-radius: 12px;
-    background: #f5f7fa;
-}
+    background: var(--bg-light);
 
-.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button {
-    display: flex;
-    width: 32px;
-    height: 32px;
-    border: 1px solid #e3e6ed;
-    border-radius: 16px;
-    box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
-}
-.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button:not(:disabled) {
-    opacity: 1;
-}
+    .ag-paging-button {
+        display: flex;
+        width: 32px;
+        height: 32px;
+        border: 1px solid var(--border-light);
+        border-radius: 16px;
+        box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
 
-.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button > span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-}
+        &:not(:disabled) {
+            opacity: 1;
+        }
 
-.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button + .ag-paging-button {
-    margin-left: 8px;
-}
+        & > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+        }
 
-.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button[ref="btPrevious"] {
-    margin-right: 16px;
-}
-.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button[ref="btNext"]{
-    margin-left: 16px;
+        & + .ag-paging-button {
+            margin-left: 8px;
+        }
+
+        &[ref="btPrevious"] {
+            margin-right: 16px;
+        }
+        &[ref="btNext"]{
+            margin-left: 16px;
+        }
+    }
 }
 
 .webbpm ag-grid-angular .ag-floating-bottom {
@@ -588,9 +602,9 @@
 }
 
 .webbpm ag-grid-angular .ag-floating-bottom-container input {
-    color: #404954;
+    color: var(--color-text-primary);
     font-family: 'SegoeSB';
-    font-size: 16px;
+    font-size: var(--size-text-primary);
     height: 20px;
     padding: 0;
     border: 0;
@@ -612,16 +626,16 @@
 
 .webbpm .grid-mtm {
     width: 46%;
-}
-.webbpm .grid-mtm + .many-to-many-move-buttons {
-    width: 8%;
-}
-.webbpm .grid-mtm + .many-to-many-move-buttons button.btn {
-    width: 100%;
+    & + .many-to-many-move-buttons {
+        width: 8%;
+        & button.btn {
+            width: 100%;
+        }
+    }
 }
 
 .webbpm ag-grid-angular .ag-overlay-loading-center {
-    border: 1px solid #e3e6ed;
+    border: 1px solid var(--border-light);
     box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
 }
 
@@ -719,7 +733,7 @@
 }
 
 .webbpm editable-grid ag-grid-angular text-area-grid-editor .form-control {
-    font-size: 16px;
+    font-size: var(--size-text-primary);
     min-height: 100px;
     border: 0;
     background-color: #f0f7fd;
@@ -808,7 +822,7 @@
 }
 
 .webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor + button-component .btn {
-    color: #404954 !important;
+    color: var(--color-text-primary) !important;
     white-space: nowrap;
     padding: 0;
     background-color: transparent !important;
@@ -821,13 +835,13 @@
     padding: 6px;
     border: 1px solid #f5f5f5;
     border-radius: 12px;
-    background-color: #fff;
+    background-color: var(--white);
     box-shadow: 0px 100px 80px rgb(0 0 0 / 7%), 0px 40px 30px rgb(0 0 0 / 5%), 0px 22px 18px rgb(0 0 0 / 4%), 0px 12.5px 10px rgb(0 0 0 / 4%), 0px 6.5px 5px rgb(0 0 0 / 3%), 0px 2.5px 2px rgb(0 0 0 / 2%);
 }
 
 .webbpm ag-grid-angular .ag-tab-header {
     border: 0;
-    background-color: #fff;
+    background-color: var(--white);
 }
 
 .webbpm ag-grid-angular .ag-tab-header .ag-tab {
@@ -850,8 +864,8 @@
 }
 
 .webbpm ag-grid-angular .ag-tab-body {
-    color: #404954;
-    font-size: 14px;
+    color: var(--color-text-primary);
+    font-size: var(--size-text-secondary);
     padding: 0;
 }
 
@@ -860,8 +874,8 @@
 }
 
 .webbpm ag-grid-angular .ag-menu .ag-menu-option {
-    color: #404954;
-    font-size: 14px;
+    color: var(--color-text-primary);
+    font-size: var(--size-text-secondary);
 }
 
 .webbpm ag-grid-angular .ag-menu .ag-menu-option-active {
@@ -896,14 +910,14 @@
     width: 300px;
     border: 1px solid #efefef;
     border-radius: 12px 0 0 12px;
-    background: #fff;
+    background: var(--white);
     box-shadow: -2px 0px 12px -6px rgb(0 0 0 / 20%);
 }
 
 .webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper,
 .webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper .ag-filter-toolpanel-header {    
-    color: #404954;
-    font-size: 16px;
+    color: var(--color-text-primary);
+    font-size: var(--size-text-primary);
     font-weight: normal;
     background: transparent;
 }
@@ -924,9 +938,9 @@
 }
 
 .webbpm ag-grid-angular .ag-side-bar .ag-side-buttons .ag-side-button button {
-    color: #404954;
+    color: var(--color-text-primary);
     font-family: 'Segoe';
-    font-size: 14px;
+    font-size: var(--size-text-secondary);
     border: 0;
     border-radius: 10px;
 }
@@ -993,7 +1007,7 @@
 
 .webbpm ag-grid-angular .ag-side-bar .card-header i {
     float: none;
-    font-size: 14px;
+    font-size: var(--size-text-secondary);
     text-align: center;
     width: 16px;
     margin: 0;
@@ -1011,12 +1025,12 @@
 }
 
 .webbpm ag-grid-angular .ag-side-bar .card-block button {
-    color: #404954;
+    color: var(--color-text-primary);
     min-height: 35px;
     margin-bottom: 6px;
-    border: 1px solid #e3e6ed;
+    border: 1px solid var(--border-light);
     border-radius: 8px;
-    background: #fff;
+    background: var(--white);
     box-shadow: 0px 2px 3px -2px rgb(0 0 0 / 20%);
 }
 
@@ -1042,18 +1056,18 @@
 }
 
 .webbpm ag-grid-angular .ag-popup .ag-select-list-item {
-    font-size: 16px;
+    font-size: var(--size-text-primary);
     background: transparent;
 }
 .webbpm ag-grid-angular .ag-popup .ag-select-list-item.ag-active-item {
-    color: #1c92ea;
+    color: var(--color-link);
 }
 
 .webbpm ag-grid-angular .ag-popup .ag-popup-child:not(.ag-tooltip-custom) {    
   padding: 6px 4px;
   border: 0;
   border-radius: 10px;
-  background-color: #fff;
+  background-color: var(--white);
   box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 12%);
 }
 
@@ -1095,7 +1109,7 @@
     height: 16px;
     left: -24px;
     top: 0;
-    border: 1px solid #fff;
+    border: 1px solid var(--white);
     border-radius: 8px;
     box-shadow: 0px 1px 2px -1px rgb(0 0 0 / 45%);
 }
@@ -1110,12 +1124,12 @@
 }
 
 .webbpm ag-grid-angular .ag-overlay-loading-center {
-    color: #404954;
-    font-size: 14px;
+    color: var(--color-text-primary);
+    font-size: var(--size-text-secondary);
     padding: 20px;
     border: 1px solid #f5f5f5;
     border-radius: 12px;
-    background: #fff;
+    background: var(--white);
     box-shadow: 0px 100px 80px rgb(0 0 0 / 7%), 0px 40px 30px rgb(0 0 0 / 5%), 0px 22px 18px rgb(0 0 0 / 4%), 0px 12.5px 10px rgb(0 0 0 / 4%), 0px 6.5px 5px rgb(0 0 0 / 3%), 0px 2.5px 2px rgb(0 0 0 / 2%);
 }
 
@@ -1138,7 +1152,7 @@
 }
 
 .webbpm ag-grid-angular .ag-filter label {
-    font-size: 16px;
+    font-size: var(--size-text-primary);
     width: auto;
     margin: 0;
 }
@@ -1151,11 +1165,11 @@
     border: 0;
     border-radius: 15px;
     box-shadow: 0px 0px 30px 2px rgb(77 72 91 / 12%);
-    background-color: #fff;
+    background-color: var(--white);
 }
 
 .webbpm .modal-header {
-    border-bottom: 1px solid #e3e6ed;
+    border-bottom: 1px solid var(--border-light);
 }
 
 /*-------------- Containers --------------- */
@@ -1176,7 +1190,7 @@
     margin-bottom: 30px;
     border: 0;
     border-radius: 20px;
-    background-color: #e3e6ed;
+    background-color: var(--border-light);
 }
 
 .webbpm .nav-tabs .nav-item {
@@ -1184,7 +1198,7 @@
 }
 
 .webbpm .nav-tabs .nav-link {
-    color: #404954;
+    color: var(--color-text-primary);
     padding: 6px 14px;
     border: 0;
     background-color: transparent;
@@ -1197,10 +1211,10 @@
 }
 
 .webbpm .nav-tabs .active .nav-link {
-    color: #fff;
+    color: var(--white);
     border: 0;
     border-radius: 20px;
-    background-color: #1c92ea;
+    background-color: var(--color-link);
     box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 24%);
 }
 
@@ -1217,7 +1231,7 @@
 .webbpm .fieldset {
     border: 0;
     border-radius: 8px;
-    background-color: #f5f7fa;
+    background-color: var(--bg-light);
 }
 
 .webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card-header,
@@ -1243,7 +1257,7 @@
 
 .webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card i {
     float: none;
-    font-size: 14px;
+    font-size: var(--size-text-secondary);
     margin-right: 6px;
     margin-left: 0;
 }
@@ -1321,32 +1335,32 @@
 }
 
 .webbpm .calendar .month .day {
-    font-size: 14px;
+    font-size: var(--size-text-secondary);
 }
 
 .webbpm .calendar .month .day.day-start {
-    color: #fff;
+    color: var(--white);
     border-radius: 4px;
-    background-color: #1c92ea !important;
+    background-color: var(--color-link) !important;
 }
 .webbpm .calendar .month .day.day-start .day-content:hover {
-    color: #fff;
+    color: var(--white);
 }
 
 .webbpm .calendar .month .day .day-content:hover {
-    color: #1c92ea;
+    color: var(--color-link);
     background-color: transparent;   
 }
 
 .webbpm .date .bootstrap-datetimepicker-widget {
-    color: #404954;
+    color: var(--color-text-primary);
     width: min-content;
     padding: 10px;
     margin: 0;    
-    border: 1px solid #e3e6ed;
+    border: 1px solid var(--border-light);
 
     border-radius: 10px;
-    background-color: #fff;
+    background-color: var(--white);
     box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
 }
 .webbpm .date .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
@@ -1356,7 +1370,7 @@
 }
 
 .webbpm .date .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
-    color: #1c92ea;
+    color: var(--color-link);
     background-color: transparent;
 }
 
@@ -1364,18 +1378,18 @@
 .webbpm .bootstrap-datetimepicker-widget table td.hour:hover,
 .webbpm .bootstrap-datetimepicker-widget table td.minute:hover,
 .webbpm .bootstrap-datetimepicker-widget table td.second:hover {
-    color: #1c92ea;
+    color: var(--color-link);
     background-color: transparent;
 }
 
 .webbpm .date .bootstrap-datetimepicker-widget table td.today,
 .webbpm .date .bootstrap-datetimepicker-widget table td.today:hover {
-    color: #fff !important;
-    background-color: #1c92ea;  
+    color: var(--white) !important;
+    background-color: var(--color-link);  
 }
 
 .webbpm .date .bootstrap-datetimepicker-widget table td.active {
-    color: #404954 !important;
+    color: var(--color-text-primary) !important;
     text-shadow: none;
     background-color: #f9f9f9;  
 }
@@ -1393,9 +1407,9 @@
 }
 
 .webbpm .btn-group-viewperiod.btn-group .btn.active {
-    color: #fff !important;
-    border-color: #1c92ea !important;
-    background: #1c92ea !important;
+    color: var(--white) !important;
+    border-color: var(--color-link) !important;
+    background: var(--color-link) !important;
     box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
 }
 .webbpm .btn-group-viewperiod.btn-group .btn.active:hover,
@@ -1415,23 +1429,23 @@
 }
 
 .webbpm .cal-week-view .cal-header.cal-weekend span {
-    color: #1c92ea;
+    color: var(--color-link);
     opacity: 0.7;
 }
 
 .webbpm .cal-month-view .cal-day-badge {
     height: 20px;
-    background-color: #1c92ea;
+    background-color: var(--color-link);
 }
 
 .webbpm .cal-month-view .cal-open-day-events {
-    color: #404954;
+    color: var(--color-text-primary);
     background-color: #e6ebee;
     box-shadow: none;
 }    
 
 .webbpm .cal-week-view .cal-event {
-    color: #1c92ea;  
+    color: var(--color-link);  
 }
 /*------------- Calendar - end ------------ */
 
@@ -1443,22 +1457,23 @@
     margin: 30px auto;
     border: 0;
     border-radius: 15px;
-    background-color: #fff;
+    background-color: var(--white);
     box-shadow: 0px 0px 30px 2px rgb(77 72 91 / 12%);
-}
-.webbpm .block-dialog::before {
-    content: "\f332";
-    position: absolute;
-    color: #1c92ea;
-    font-family: bootstrap-icons !important;
-    font-size: 30px;
-    top: 60px;
-    left: 60px;
-}
 
-.webbpm .block-dialog .title,
-.webbpm .block-dialog .title > div > div:last-of-type{
-    padding: 0;
+    &::before {
+        content: "\f332";
+        position: absolute;
+        color: var(--color-link);
+        font-family: bootstrap-icons !important;
+        font-size: 30px;
+        top: 60px;
+        left: 60px;
+    }
+
+    .title,
+    .title > div > div:last-of-type{
+        padding: 0;
+    }
 }
 /*---------- Block-dialog - end ----------- */
 
@@ -1559,7 +1574,7 @@
 .webbpm .modal-backdrop.show {
     filter: alpha(opacity=25);    
     opacity: 0.25;
-    background-color: #000;
+    background-color: var(--black);
 }
 
 /*------------------  FilePreview  ------------------*/
diff --git a/frontend/src/resources/css/components-lkrp.css b/frontend/src/resources/css/components-lkrp.css
index 8b137891..3f04adbe 100644
--- a/frontend/src/resources/css/components-lkrp.css
+++ b/frontend/src/resources/css/components-lkrp.css
@@ -1 +1,20 @@
 
+.webbpm.ervu_lkrp_ul .btn {
+    font-size: var(--size-text-secondary);
+    font-family: 'Inter';
+    color: #fff;
+    padding: 14px 40px;
+    border: 0;
+    border-radius: 4px;
+    background: var(--color-primary);
+    box-shadow: none;  
+}
+
+.webbpm.ervu_lkrp_ul .field-set {
+	padding: 24px;
+	margin-bottom: 32px;
+	border: 1px solid var(--border-light);
+    border-radius: 4px;
+    background-color: var(--bg-light);	
+    box-shadow: none;
+}
\ No newline at end of file
diff --git a/frontend/src/resources/css/inbox-lkrp.css b/frontend/src/resources/css/inbox-lkrp.css
index 62c616d7..287f114a 100644
--- a/frontend/src/resources/css/inbox-lkrp.css
+++ b/frontend/src/resources/css/inbox-lkrp.css
@@ -30,20 +30,37 @@ body {
 }
 
 .webbpm.ervu_lkrp_ul {
-    --black: #1d1e21;
+    --color-text-primary: #1d1e21;
     --color-bg-main: #223d36;
+    --color-primary: #c64e1b;
+    --bg-light: #fafafa;
+    --border-light: #d2d2d2;
 
     --h-header: 64px;
     --h-footer: 120px;
+
+    --size-text-primary: 18px;
+    --size-text-secondary: 16px;    
 }
 
+
 .webbpm.ervu_lkrp_ul .header {
     min-height: var(--h-header);
     border: 0;
     background-color: var(--color-bg-main);
 }
 
+.webbpm.ervu_lkrp_ul footer {
+    height: var(--h-footer);
+    border: 0;
+    background-color: var(--color-text-primary);
+}
+
 .webbpm.ervu_lkrp_ul .container {
     padding-top: var(--h-header);
     bottom: var(--h-footer);
+}
+
+.webbpm.ervu_lkrp_ul .container .container-inside {
+    font-family: 'Inter';
 }
\ No newline at end of file