cronapp-framework-js 2.9.2-SP.7 → 2.9.2-SP.9

package/css/themes/custom/slate/custom-slate.css

@@ -265,18 +265,42 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
-    --btnLink: var(--colorPrimary40, #7a8288);
-    --btnDefault: var(--colorDefault40, #3a3f44);
-    --btnPrimary: var(--colorPrimary40, #7a8288);
-    --btnSuccess: var(--colorSuccess40, #62c462);
-    --btnCalm: var(--colorCalm40, #5bc0de);
-    --btnWarning: var(--colorWarning40, #f89406);
-    --btnDanger: var(--colorDanger40, #ee5f5b);
-    --btnLight: var(--colorLight40, #e9ecef);
-    --btnStable: var(--colorStable40, #f8f8f8);
-    --btnRoyal: var(--colorRoyal40, #886aea);
-    --btnDark: var(--colorDark40, #272b30);
+    --btnLink: var(--textColorDefault40, #ffffff);
+    --btnDefault: linear-gradient(var(--colorDefault40, #3a3f44), var(--colorDefault40, #3a3f44) 60%, var(--colorDefault50, #33373c));
+    --btnPrimary: linear-gradient(var(--colorPrimary60, #595f64), var(--colorPrimary60, #595f64) 40%, var(--colorPrimary50, #6b7277));
+    --btnSuccess: linear-gradient(var(--colorSuccess40, #62c462), var(--colorSuccess40, #62c462) 60%, var(--colorSuccess50, #56ac56));
+    --btnCalm: linear-gradient(var(--colorCalm40, #5bc0de), var(--colorCalm40, #5bc0de) 60%, var(--colorCalm50, #50a8c2));
+    --btnWarning: linear-gradient(var(--colorWarning40, #f89406), var(--colorWarning40, #f89406) 60%, var(--colorWarning50, #d98205));
+    --btnDanger: linear-gradient(var(--colorDanger40, #ee5f5b), var(--colorDanger40, #ee5f5b) 60%, var(--colorDanger50, #d05350));
+    --btnLight: linear-gradient(var(--colorLight40, #e9ecef), var(--colorLight40, #e9ecef) 60%, var(--colorLight50, #cccfd1));
+    --btnStable: linear-gradient(var(--colorStable40, #f8f8f8), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
+    --btnRoyal: linear-gradient(var(--colorRoyal40, #886aea), var(--colorRoyal40, #886aea) 60%, var(--colorRoyal50, #775dcd));
+    --btnDark: linear-gradient(var(--colorDark40, #272b30), var(--colorDark40, #272b30) 60%, var(--colorDark50, #22262a));
+
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault70, #202325);
+    --borderBtnPrimary: var(--colorPrimary70, #43474a);
+    --borderBtnSuccess: var(--colorSuccess70, #366b36);
+    --borderBtnCalm: var(--colorCalm70, #32697a);
+    --borderBtnWarning: var(--colorWarning70, #885103);
+    --borderBtnDanger: var(--colorDanger70, #823432);
+    --borderBtnLight: var(--colorLight70, #808183);
+    --borderBtnStable: var(--colorStable70, #888888);
+    --borderBtnRoyal: var(--colorRoyal70, #4a3a80);
+    --borderBtnDark: var(--colorDark70, #15181a);
 
     /* Components - Text color */
     --colorDefault: var(--colorDefault30, #858789);
@@ -302,6 +326,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark30, #808182);
 
+    --borderCheckboxDefault: var(--colorDefault30, #858789);
+    --borderCheckboxPrimary: var(--colorPrimary40, #7a8288);
+    --borderCheckboxSuccess: var(--colorSuccess40, #62c462);
+    --borderCheckboxCalm: var(--colorCalm40, #5bc0de);
+    --borderCheckboxWarning: var(--colorWarning40, #f89406);
+    --borderCheckboxDanger: var(--colorDanger40, #ee5f5b);
+    --borderCheckboxLight: var(--colorLight40, #e9ecef);
+    --borderCheckboxStable: var(--colorStable40, #f8f8f8);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark30, #808182);
+
     /* Components - Combobox */
     --comboboxDefault: var(--colorDefault40, #3a3f44);
     --comboboxPrimary: var(--colorPrimary40, #7a8288);
@@ -314,6 +349,17 @@
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #272b30);
 
+    --borderComboboxDefault: var(--colorDefault50, #33373c);
+    --borderComboboxPrimary: var(--colorPrimary50, #6b7277);
+    --borderComboboxSuccess: var(--colorSuccess50, #56ac56);
+    --borderComboboxCalm: var(--colorCalm50, #50a8c2);
+    --borderComboboxWarning: var(--colorWarning50, #d98205);
+    --borderComboboxDanger: var(--colorDanger50, #d05350);
+    --borderComboboxLight: var(--colorLight50, #cccfd1);
+    --borderComboboxStable: var(--colorStable50, #d9d9d9);
+    --borderComboboxRoyal: var(--colorRoyal50, #775dcd);
+    --borderComboboxDark: var(--colorDark50, #22262a);
+
     /* Components - Radio input */
     --optionDefault: var(--colorDefault30, #858789);
     --optionPrimary: var(--colorPrimary40, #7a8288);
@@ -326,6 +372,17 @@
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark30, #808182);
 
+    --borderOptionDefault: var(--colorDefault30, #858789);
+    --borderOptionPrimary: var(--colorPrimary40, #7a8288);
+    --borderOptionSuccess: var(--colorSuccess40, #62c462);
+    --borderOptionCalm: var(--colorCalm40, #5bc0de);
+    --borderOptionWarning: var(--colorWarning40, #f89406);
+    --borderOptionDanger: var(--colorDanger40, #ee5f5b);
+    --borderOptionLight: var(--colorLight40, #e9ecef);
+    --borderOptionStable: var(--colorStable40, #f8f8f8);
+    --borderOptionRoyal: var(--colorRoyal40, #886aea);
+    --borderOptionDark: var(--colorDark30, #808182);
+
     /* Components - Panel */
     --panelDefault: var(--colorPrimary40, #7a8288);
     --panelPrimary: var(--colorDefault40, #3a3f44);
@@ -337,6 +394,20 @@
     --panelStable: var(--colorStable40, #f8f8f8);
     --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark30, #808182);
+
+    --borderPanelLink: transparent;
+    --borderPanelDefault: transparent;
+    --borderPanelPrimary: transparent;
+    --borderPanelSuccess: transparent;
+    --borderPanelCalm: transparent;
+    --borderPanelWarning: transparent;
+    --borderPanelDanger: transparent;
+    --borderPanelLight: transparent;
+    --borderPanelStable: transparent;
+    --borderPanelRoyal: transparent;
+    --borderPanelDark: transparent;
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 .color-default {
@@ -427,17 +498,12 @@ a:hover {
 /* Page login */
 .bg,
 .siginPanel,
-.bg-login #container-second,
 .login-view {
     background: var(--backgroundLogin40, #ffffff);
 }
 
-.bg-login #container-second h1,
-.bg-login #container-second p,
-#crn-botao-cadastre,
-.login-view .sign-up,
-.crn-anchor-signup-back {
-    color: var(--textColor40, #555555);
+.bg-login #container-first h1 {
+    color: var(--textColorPrimary40, #ffffff);
 }
 
 .bg-login #container-first .btn-login-mutual,
@@ -459,10 +525,40 @@ a:hover {
     color: var(--textColorPrimary40, #ffffff);
 }
 
+.bg-login #container-first .img-login[src="node_modules/cronapp-framework-js/img/cronapp-logo-login.png"],
 .login-view img[src="node_modules/cronapp-framework-js/img/cronapp-logo-login.png"] {
     filter: brightness(0) invert(1);
 }
 
+.bg-login #container-second {
+    background: linear-gradient(-140deg, var(--colorDefault20, #b3b4b5), var(--colorDefault30, #858789), var(--colorDefault40, #3a3f44), var(--colorDefault50, #33373c), var(--colorDefault60, #2a2e32));
+}
+
+.bg-login #container-first #crn-botao-signup {
+    color: var(--colorPrimary40, #7a8288);
+}
+
+.bg-login #container-first #crn-botao-signup:hover {
+    color: var(--colorPrimary50, #6b7277);
+}
+
+.bg-login #container-first {
+    background: var(--colorDefault50, #33373c);
+    border-style: solid;
+    border-width: 1px 0 1px 1px;
+    border-color: var(--colorDefault50, #33373c);
+    box-shadow: none;
+}
+
+#bg-signup1.bg-login1 #container-first {
+    box-shadow: none;
+}
+
+.bg-login2 #container-first {
+    border-width: 0;
+    background: transparent;
+}
+
 /* Input */
 .k-autocomplete .k-input,
 .k-multiselect-wrap,
@@ -661,20 +757,7 @@ a:hover {
 .k-checkbox:hover+.k-checkbox-label:before,
 .k-checkbox:checked+.k-checkbox-label:after,
 .k-checkbox:indeterminate+.k-checkbox-label:after,
-.k-checkbox-label:before,
-.checkbox-default .k-checkbox:checked+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:indeterminate+.k-checkbox-label:before,
-.checkbox-default .k-checkbox-label:hover:before,
-.checkbox-default .k-checkbox:checked+.k-checkbox-label:hover:before,
-.checkbox-default .k-checkbox:checked:hover+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:hover+.k-checkbox-label:before,
-.checkbox-default .k-checkbox-label:active:before,
-.checkbox-default .k-checkbox:active+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:focus+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:hover+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:checked+.k-checkbox-label:after,
-.checkbox-default .k-checkbox:indeterminate+.k-checkbox-label:after,
-.checkbox-default .k-checkbox-label:before {
+.k-checkbox-label:before {
     border-color: var(--colorDefault30, #858789);
 }
 
@@ -683,24 +766,14 @@ a:hover {
 .k-checkbox:checked:hover+.k-checkbox-label:before,
 .k-checkbox:hover+.k-checkbox-label:before,
 .k-checkbox:focus+.k-checkbox-label:before,
-.k-checkbox:hover+.k-checkbox-label:before,
-.checkbox-default .k-checkbox-label:hover:before,
-.checkbox-default .k-checkbox:checked+.k-checkbox-label:hover:before,
-.checkbox-default .k-checkbox:checked:hover+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:hover+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:focus+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:hover+.k-checkbox-label:before {
+.k-checkbox:hover+.k-checkbox-label:before {
     box-shadow: 0 0 5px 0 var(--colorDefault20, #b3b4b5);
 }
 
 .k-checkbox:checked+.k-checkbox-label:before,
 .k-checkbox:indeterminate+.k-checkbox-label:before,
 .k-checkbox:checked+.k-checkbox-label:after,
-.k-checkbox:indeterminate+.k-checkbox-label:after,
-.checkbox-default .k-checkbox:checked+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:indeterminate+.k-checkbox-label:before,
-.checkbox-default .k-checkbox:checked+.k-checkbox-label:after,
-.checkbox-default .k-checkbox:indeterminate+.k-checkbox-label:after {
+.k-checkbox:indeterminate+.k-checkbox-label:after {
     background: var(--colorDefault30, #858789);
     color: var(--textColorDefault40, #ffffff);
 }
@@ -1176,4 +1249,31 @@ td.k-state-focused.k-state-selected {
 .k-scheduler-monthview .k-scheduler-table .k-today {
     background: var(--colorPrimary40, #7a8288);
     color: var(--textColorPrimary40, #ffffff);
+}
+
+/* Input with icon */
+.layout-template-modern {
+    background: var(--colorNeutral00, #ffffff);
+    border-radius: var(--borderRadiusSmallest, 5px);
+    padding: 0;
+    border: 1px solid var(--backgroundColor50, #dddddd);
+}
+
+.layout-template-modern:focus-within {
+    background: var(--colorNeutral00, #ffffff);
+    outline: 0;
+    border-color: var(--colorCalm40, #5bc0de);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--colorCalm40, #5bc0de);
+}
+
+.layout-template-modern input.k-textbox:hover,
+.layout-template-modern input.k-textbox {
+    padding-left: 0;
+    box-shadow: none;
+}
+
+div[data-component^='crn-textinputicon'] .layout-template-modern .k-button,
+div[data-component^='crn-textinputicon'] .layout-template-modern .k-button:hover {
+    border: 0;
+    color: var(--colorDefault40, #3b448e);
 }

package/css/themes/custom/slate/panel-slate.css

@@ -1,87 +1,85 @@
 .panel {
     background: var(--backgroundColor40, #ffffff);
     box-shadow: none;
-    border: 1px solid var(--colorDefault70, #fafafa);
+    border: 1px solid #000;
 }
 
-.panel-heading,
-.panel-footer {
-    border: 0;
-    border-bottom: 1px solid;
+.panel-heading {
+    border-bottom: 1px solid #000;
 }
 
 .panel-footer {
     color: var(--textColorDefault40, #ffffff);
     background: var(--colorDefault40, #3a3f44);
-    border-color: var(--colorDefault70, #202325);
+    border-top: 1px solid #000;
 }
 
 /* Default */
 .panel-default .panel-heading {
     color: var(--textColorPrimary40, #ffffff);
     background: var(--colorPrimary40, #7a8288);
-    border-color: var(--colorPrimary70, #43474a);
+    border-color: #000;
 }
 
 /* Primary */
 .panel-primary .panel-heading {
     color: var(--textColorDefault40, #ffffff);
     background: var(--colorDefault40, #3a3f44);
-    border-color: var(--colorDefault70, #202325);
+    border-color: #000;
 }
 
 /* Success */
 .panel-success .panel-heading {
     color: var(--textColorSuccess40, #ffffff);
     background: var(--colorSuccess40, #73a839);
-    border-color: var(--colorSuccess70, #202325);
+    border-color: #000;
 }
 
 /* Info */
 .panel-info .panel-heading {
     color: var(--textColorCalm40, #ffffff);
     background: var(--colorCalm40, #5bc0de);
-    border-color: var(--colorInfo70, #32697a);
+    border-color: #000;
 }
 
 /* Warning */
 .panel-warning .panel-heading {
     color: var(--textColorWarning40, #ffffff);
     background: var(--colorWarning40, #f89406);
-    border-color: var(--colorWarning70, #885103);
+    border-color: #000;
 }
 
 /* Danger */
 .panel-danger .panel-heading {
     color: var(--textColorDanger40, #ffffff);
     background: var(--colorDanger40, #ee5f5b);
-    border-color: var(--colorDanger70, #823432);
+    border-color: #000;
 }
 
 /* Light */
 .panel-light .panel-heading {
     color: var(--textColorLight40, #444444);
     background: var(--colorLight40, #e9ecef);
-    border-color: var(--colorLight70, #000000);
+    border-color: #000;
 }
 
 /* Stable */
-.panel-stable>.panel-heading{
+.panel-stable>.panel-heading {
     color: var(--textColorStable40, #444444);
     background: var(--colorStable40, #f8f8f8);
-    border-color: transparent
+    border-color: #000;
 }
 
 /* Royal */
 .panel-royal>.panel-heading {
     color: var(--textColorRoyal40, #ffffff);
     background: var(--colorRoyal40, #886aea);
-    border-color: transparent
+    border-color: #000;
 }
 
 /* Dark */
 .panel-dark>.panel-heading {
     color: var(--textColorDark40, #ffffff);
     background: var(--colorDark30, #272b30);
-    border-color: transparent
+    border-color: #000;
 }

package/css/themes/custom/spacelab/custom-spacelab.css

@@ -97,7 +97,6 @@
     --textColorDefault60: #ffffff;
     --textColorDefault70: #ffffff;
 
-
     /* Color - Primary (web) - Positive (mobile) */
     --colorPrimary10: #d9dee6;
     --colorPrimary20: #b5bfcf;
@@ -170,7 +169,6 @@
     --colorRoyal50: #775dcd;
     --colorRoyal60: #644eab;
     --colorRoyal70: #4a3a80;
-
     --textColorRoyal10: #8c8c8c;
     --textColorRoyal20: #bbbbbb;
     --textColorRoyal30: #dfdfdf;
@@ -268,18 +266,42 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
-    --btnLink: var(--colorPrimary40, #446e9b);
-    --btnDefault: var(--colorDefault40, #474949);
-    --btnPrimary: var(--colorPrimary40, #446e9b);
-    --btnSuccess: var(--colorSuccess40, #3cb521);
-    --btnCalm: var(--colorCalm40, #3399f3);
-    --btnWarning: var(--colorWarning40, #d47500);
-    --btnDanger: var(--colorDanger40, #cd0200);
-    --btnLight: var(--colorLight40, #eeeeee);
-    --btnStable: var(--colorStable40, #f8f8f8);
-    --btnRoyal: var(--colorRoyal40, #886aea);
-    --btnDark: var(--colorDark40, #333333);
+    --btnLink: var(--colorCalm40, #3399f3);
+    --btnDefault: linear-gradient(var(--colorDefault30, #8a8b8b), var(--colorDefault40, #474949) 50%, var(--colorDefault50, #3e4040));
+    --btnPrimary: linear-gradient(var(--colorPrimary30, #899cb7), var(--colorPrimary40, #446e9b) 50%, var(--colorPrimary50, #3c6088));
+    --btnSuccess: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521) 50%, var(--colorSuccess50, #359e1d));
+    --btnCalm: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #474949) 50%, var(--colorCalm50, #2d86d5));
+    --btnWarning: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500) 50%, var(--colorWarning50, #ba6600));
+    --btnDanger: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200) 50%, var(--colorDanger50, #b30200));
+    --btnLight: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight50, #d0d0d0));
+    --btnStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 50%, var(--colorStable50, #d9d9d9));
+    --btnRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 50%, var(--colorRoyal50, #775dcd));
+    --btnDark: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333) 50%, var(--colorDark50, #2d2d2d));
+
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault40, #474949);
+    --borderBtnPrimary: var(--colorPrimary40, #446e9b);
+    --borderBtnSuccess: var(--colorSuccess40, #3cb521);
+    --borderBtnCalm: var(--colorCalm40, #3399f3);
+    --borderBtnWarning: var(--colorWarning40, #d47500);
+    --borderBtnDanger: var(--colorDanger40, #cd0200);
+    --borderBtnLight: var(--colorLight40, #eeeeee);
+    --borderBtnStable: var(--colorStable40, #f8f8f8);
+    --borderBtnRoyal: var(--colorRoyal40, #886aea);
+    --borderBtnDark: var(--colorDark40, #333333);
 
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #474949);
@@ -305,6 +327,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #333333);
 
+    --borderCheckboxDefault: var(--colorDefault40, #474949);
+    --borderCheckboxPrimary: var(--colorPrimary40, #446e9b);
+    --borderCheckboxSuccess: var(--colorSuccess40, #3cb521);
+    --borderCheckboxCalm: var(--colorCalm40, #3399f3);
+    --borderCheckboxWarning: var(--colorWarning40, #d47500);
+    --borderCheckboxDanger: var(--colorDanger40, #cd0200);
+    --borderCheckboxLight: var(--colorLight50, #d0d0d0);
+    --borderCheckboxStable: var(--colorStable50, #d9d9d9);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark40, #333333);
+
     /* Components - Combobox */
     --comboboxDefault: var(--colorDefault40, #474949);
     --comboboxPrimary: var(--colorPrimary40, #446e9b);
@@ -317,6 +350,17 @@
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #333333);
 
+    --borderComboboxDefault: var(--colorDefault50, #ffffff);
+    --borderComboboxPrimary: var(--colorPrimary50, #4582ec);
+    --borderComboboxSuccess: var(--colorSuccess50, #3fad46);
+    --borderComboboxCalm: var(--colorCalm50, #11c1f3);
+    --borderComboboxWarning: var(--colorWarning50, #f0ad4e);
+    --borderComboboxDanger: var(--colorDanger50, #d9534f);
+    --borderComboboxLight: var(--colorLight50, #d0d0d0);
+    --borderComboboxStable: var(--colorStable50, #d9d9d9);
+    --borderComboboxRoyal: var(--colorRoyal50, #886aea);
+    --borderComboboxDark: var(--colorDark50, #444444);
+
     /* Components - Radio input */
     --optionDefault: var(--colorDefault40, #474949);
     --optionPrimary: var(--colorPrimary40, #446e9b);
@@ -329,6 +373,17 @@
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark40, #333333);
 
+    --borderOptionDefault: var(--colorDefault40, #474949);
+    --borderOptionPrimary: var(--colorPrimary40, #446e9b);
+    --borderOptionSuccess: var(--colorSuccess40, #3cb521);
+    --borderOptionCalm: var(--colorCalm40, #3399f3);
+    --borderOptionWarning: var(--colorWarning40, #d47500);
+    --borderOptionDanger: var(--colorDanger40, #cd0200);
+    --borderOptionLight: var(--colorLight50, #d0d0d0);
+    --borderOptionStable: var(--colorStable50, #d9d9d9);
+    --borderOptionRoyal: var(--colorRoyal40, #886aea);
+    --borderOptionDark: var(--colorDark40, #333333);
+
     /* Components - Panel */
     --panelDefault: var(--colorPrimary40, #446e9b);
     --panelPrimary: var(--colorDefault40, #474949);
@@ -340,6 +395,19 @@
     --panelStable: var(--colorStable50, #d9d9d9);
     --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark40, #333333);
+
+    --borderPanelDefault: var(--colorPrimary50, #bbbbbb);
+    --borderPanelPrimary: var(--colorDefault50, #335fad);
+    --borderPanelSuccess: var(--colorSuccess50, #2e7f33);
+    --borderPanelCalm: var(--colorCalm50, #0c8db2);
+    --borderPanelWarning: var(--colorWarning50, #b07f39);
+    --borderPanelDanger: var(--colorDanger50, #9f3d3a);
+    --borderPanelLight: var(--colorLight50, #d0d0d0);
+    --borderPanelStable: var(--colorStable50, #d9d9d9);
+    --borderPanelRoyal: var(--colorRoyal50, #886aea);
+    --borderPanelDark: var(--colorDark50, #444444);
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 .color-light {
@@ -493,17 +561,20 @@ a:hover {
 /* Page login */
 .bg,
 .siginPanel,
-.bg-login #container-second,
 .login-view {
     background: var(--backgroundLogin40, #ffffff);
 }
 
-.bg-login #container-second h1,
-.bg-login #container-second p,
-#crn-botao-cadastre:hover,
-.login-view .sign-up:hover,
-.crn-anchor-signup-back:hover {
-    color: var(--textColor40, #666666);
+.bg-login #container-first {
+    background: transparent;
+    border-style: solid;
+    border-width: 1px 0 1px 1px;
+    border-color: var(--colorStable50, #d9d9d9);
+    box-shadow: none;
+}
+
+.bg-login2 #container-first {
+    border-width: 0;
 }
 
 .bg-login #container-first .btn-login-mutual,
@@ -524,6 +595,10 @@ a:hover {
     outline: none;
 }
 
+.bg-login #container-second {
+    background: linear-gradient(-140deg, var(--colorPrimary20, #b5bfcf), var(--colorPrimary30, #899cb7), var(--colorPrimary40, #446e9b), var(--colorPrimary50, #3c6088), var(--colorPrimary60, #325172));
+}
+
 /* button - btn-fab */
 .btn.btn-fab,
 .btn-fab {
@@ -872,4 +947,31 @@ td.k-state-focused.k-state-selected,
 
 .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
     border-top-color: var(--backgroundColor40, #ffffff);
+}
+
+/* Input with icon */
+.layout-template-modern {
+    background: var(--backgroundColor40, #fff);
+    border-radius: var(--borderRadiusSmallest, 5px);
+    padding: 0;
+    border: 1px solid var(--backgroundColor50, #ccc);
+}
+
+.layout-template-modern:focus-within {
+    background: var(--backgroundColor40, #fff);
+    outline: 0;
+    border-color: var(--colorCalm40, #3399f3);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--colorCalm40, #3399f3);
+}
+
+.layout-template-modern input.k-textbox:hover,
+.layout-template-modern input.k-textbox {
+    padding-left: 0;
+    box-shadow: none;
+}
+
+.layout-template-modern .k-button,
+.layout-template-modern .k-button:hover {
+    border: 0;
+    color: var(--colorDefault40, #3b448e);
 }