cronapp-framework-mobile-js 2.9.6-SP.9 → 3.0.0-SP.1

package/css/themes/custom/krypton/custom-krypton.css

@@ -43,7 +43,7 @@
     --backgroundColor20: #a3a3a3;
     --backgroundColor30: #546270;
     --backgroundColor40: #090f13;
-    --backgroundColor50: #080d11;
+    --backgroundColor50: #3A434B;
     --backgroundColor60: #070b0e;
     --backgroundColor70: #05080a;
 
@@ -475,6 +475,10 @@ h6,
     font-family: var(--fontFamily, "Open Sans", "Arial", sans-serif);
 }
 
+h2 {
+    font-size: 18px;
+}
+
 a,
 a:focus,
 a:active,
@@ -580,6 +584,15 @@ a.stable,
     color: var(--textColor10, #f0f0f0);
 }
 
+#menu-blue .item:hover {
+    background: var(--backgroundColor30, #546270);
+}
+
+#menu-blue .item:active,
+#menu-blue .item.actived {
+    background: var(--backgroundColor50, #3A434B);
+}
+
 /* Button Positive */
 .button.button-positive {
     background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
@@ -587,7 +600,7 @@ a.stable,
 
 .button.button-positive:active,
 .button.button-positive.activated {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: var(--colorPrimary70, #09467F);
 }
 
 /* Light - Outline */
@@ -624,7 +637,43 @@ a.stable,
 /* Rodapé com ícone */
 
 .tabs-striped.background-default .tabs {
-    background: var(--textColorDefault40, #f0f0f0);
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+}
+
+.tabs-striped.background-positive .tabs {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+}
+
+.tabs-striped.background-balanced .tabs {
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
+}
+
+.tabs-striped.background-calm .tabs {
+    background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
+}
+
+.tabs-striped.background-energized .tabs {
+    background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
+}
+
+.tabs-striped.background-assertive .tabs {
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+}
+
+.tabs-striped.background-light .tabs {
+    background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
+}
+
+.tabs-striped.background-stable .tabs {
+    background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
+}
+
+.tabs-striped.background-royal .tabs {
+    background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
+}
+
+.tabs-striped.background-dark .tabs {
+    background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
 }
 
 .tabs-striped.tabs-icon-default .tab-item {
@@ -633,20 +682,73 @@ a.stable,
     opacity: 0.5;
 }
 
+/* Rodapé com botões*/
+.bar.bar-default.bar-footer,
+.bar.bar-default {
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+}
+
+.bar.bar-positive.bar-footer,
+.bar.bar-positive {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+}
+
+.bar.bar-balanced.bar-footer,
+.bar.bar-balanced {
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
+}
+
+.bar.bar-calm.bar-footer,
+.bar.bar-calm {
+    background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
+}
+
+.bar.bar-energized.bar-footer,
+.bar.bar-energized {
+    background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
+}
+
+.bar.bar-assertive.bar-footer,
+.bar.bar-assertive {
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+}
+
+.bar.bar-light.bar-footer,
+.bar.bar-light {
+    background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
+}
+
+.bar.bar-stable.bar-footer,
+.bar.bar-stable {
+    background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
+}
+
+.bar.bar-royal.bar-footer,
+.bar.bar-royal {
+    background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
+}
+
+.bar.bar-dark.bar-footer,
+.bar.bar-dark {
+    background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
+}
+
 .item-input .icon {
     font-size: 12px;
 }
 
-#menu-blue .item:hover {
-    background: var(--backgroundColor30, #f4f4f4);
+.button.button-default {
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
 }
 
 .button.button-default:hover {
     background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    box-shadow: 0px 0px 3px 0px #3A4753;
 }
 
-.button.button-default:active {
-    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+.button.button-default:active,
+.button.button-default.activated {
+    background: var(--colorDefault60, #1c2025);
 }
 
 .login-mobile .button.button-light {
@@ -722,6 +824,7 @@ input::-ms-input-placeholder {
     background: var(--backgroundColor10, #CED0D2);
     color: var(--textColor70, #434343);
     border-radius: 20px;
+    border-bottom: 0;
 }
 
 .modal .item {
@@ -731,6 +834,14 @@ input::-ms-input-placeholder {
     color: var(--textColor40, #f0f0f0);
 }
 
+.k-widget.k-window .k-window-titlebar .k-window-title {
+    color: var(--textColor40, #f0f0f0);
+}
+
+.k-widget.k-window {
+    border-radius: 20px;
+}
+
 
 .item-input-wrapper {
     background: var(--backgroundColor40, #f2f2f2);
@@ -759,6 +870,10 @@ input[type="password"] {
     letter-spacing: 0px;
 }
 
+.button.button {
+    border-radius: 20px;
+}
+
 button#crn-button-signup {
     letter-spacing: 0px;
     border-radius: 0px;
@@ -806,20 +921,25 @@ button#crn-button-signup:hover {
     color: var(--textColor40, #f0f0f0);
 }
 
-.button.button-default {
-    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
-    border-radius: 20px;
-}
-
 /*Secundary*/
 .button.button-positive {
     background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
 }
 
+.button.button-positive:hover {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    box-shadow: 0px 0px 3px 0px #187AD4;
+}
+
+.button.button-positive:active {
+    background: var(--colorPrimary70, #09467F);
+}
+
 .button.button-positive.button-outline {
     background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
     border-color: transparent;
     color: var(--textColorDefault40, #f0f0f0);
+    border-bottom: 0;
 }
 
 .button.button-positive.button-outline span {
@@ -828,6 +948,7 @@ button#crn-button-signup:hover {
 
 .button.button-positive.button-outline:active {
     background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    border-bottom: 0;
 }
 
 .button.button-positive.button-outline i {
@@ -839,10 +960,20 @@ button#crn-button-signup:hover {
     background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
 }
 
+.button.button-balanced:hover {
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
+    box-shadow: 0px 0px 3px 0px #2FFC2B;
+}
+
+.button.button-balanced:active {
+    background: var(--colorSuccess70, #108D0D);
+}
+
 .button.button-balanced.button-outline {
     background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
     border-color: transparent;
     color: var(--textColorDefault40, #f0f0f0);
+    border-bottom: 0;
 }
 
 .button.button-balanced.button-outline span {
@@ -862,10 +993,20 @@ button#crn-button-signup:hover {
     background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
 }
 
+.button.button-calm:hover {
+    background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
+    box-shadow: 0px 0px 3px 0px #42DCD3;
+}
+
+.button.button-calm:active {
+    background: var(--colorCalm60, #169F97);
+}
+
 .button.button-calm.button-outline {
     background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
     border-color: transparent;
     color: var(--textColorDefault40, #f0f0f0);
+    border-bottom: 0;
 }
 
 .button.button-calm.button-outline span {
@@ -885,10 +1026,20 @@ button#crn-button-signup:hover {
     background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
 }
 
+.button.button-energized:hover {
+    background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
+    box-shadow: 0px 0px 3px 0px #F58D11;
+}
+
+.button.button-energized:active {
+    background: var(--colorWarning60, #B46406);
+}
+
 .button.button-energized.button-outline {
     background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
     border-color: transparent;
     color: var(--textColorDefault40, #f0f0f0);
+    border-bottom: 0;
 }
 
 .button.button-energized.button-outline span {
@@ -906,6 +1057,16 @@ button#crn-button-signup:hover {
 /*Danger*/
 .button.button-assertive {
     background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+    border-bottom: 0;
+}
+
+.button.button-assertive:hover {
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+    box-shadow: 0px 0px 3px 0px #DE3636;
+}
+
+.button.button-assertive:active {
+    background: var(--colorDanger60, #7E2121);
 }
 
 .button.button-assertive.button-outline {
@@ -929,6 +1090,16 @@ button#crn-button-signup:hover {
 /*Light*/
 .button.button-light {
     background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
+    border-bottom: 0;
+}
+
+.button.button-light:hover {
+    background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
+    box-shadow: 0px 0px 3px 0px #8DA0B2;
+}
+
+.button.button-light:active {
+    background: var(--colorLight60, #303B46);
 }
 
 .button.button-light.button-outline {
@@ -952,6 +1123,17 @@ button#crn-button-signup:hover {
 /*Stable*/
 .button.button-stable {
     background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
+    border-bottom: 0;
+}
+
+.button.button-stable:hover {
+    background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
+    box-shadow: 0px 0px 3px 0px #7B7B7B;
+}
+
+.button.button-stable:active,
+.button.button-stable.activated {
+    background: var(--colorStable50, #4D4D4D);
 }
 
 .button.button-stable.button-outline {
@@ -975,6 +1157,17 @@ button#crn-button-signup:hover {
 /*Royal*/
 .button.button-royal {
     background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
+    border-bottom: 0;
+}
+
+.button.button-royal:hover {
+    background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
+    box-shadow: 0px 0px 3px 0px #11375D;
+}
+
+.button.button-royal:active,
+.button.button-royal.activated {
+    background: var(--colorRoyal70, #1A2E43);
 }
 
 .button.button-royal.button-outline {
@@ -999,13 +1192,26 @@ button#crn-button-signup:hover {
 
 .button.button-dark {
     background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
+}
 
+.button.button-dark:hover {
+    background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
+    box-shadow: 0px 0px 3px 0px #132639;
+}
+
+.button.button-dark:active,
+.button.button-dark.activated {
+    background: var(--colorDark50, #0A141E);
+    border-bottom: 0;
+    border-top: 0;
 }
 
 .button.button-dark.button-outline {
     background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
     border-color: transparent;
     color: var(--textColorDark40, #f0f0f0);
+    border-bottom: 0;
+    border-top: 0;
 }
 
 .button.button-dark.button-outline span {
@@ -1064,12 +1270,400 @@ button#crn-button-signup {
 }
 
 .item h3:last-child,
-.item h3,
-.item h2 {
+.item h3 {
     color: var(--textColorDark40, #f0f0f0);
 }
 
-.item-icon-left .icon:before,
-.item-complex .item-content {
+/*Abas*/
+.crn-ion-segment-classic ul li a {
+    border-radius: 20px;
+}
+
+.crn-ion-segment-classic ul.active-background-default li.active a {
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+.crn-ion-segment-classic ul.active-background-positive li.active a {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+.crn-ion-segment-classic ul.active-background-balanced li.active a {
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+.crn-ion-segment-classic ul.active-background-calm li.active a {
+    background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+.crn-ion-segment-classic ul.active-background-energized li.active a {
+    background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+.crn-ion-segment-classic ul.active-background-assertive li.active a {
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+.crn-ion-segment-classic ul.active-background-light li.active a {
+    background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+.crn-ion-segment-classic ul.active-background-stable li.active a {
+    background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+.crn-ion-segment-classic ul.active-background-royal li.active a {
+    background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+.crn-ion-segment-classic ul.active-background-dark li.active a {
+    background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
+    color: var(--textColor40, #f0f0f0);
+}
+
+canvas {
+    background: var(--backgroundColor10, #CED0D2);
+}
+
+/* Cores icones*/
+.default {
+    color: var(--colorDefault40, #262C32);
+}
+
+.positive {
+    color: var(--colorPrimary40, #197fdd);
+}
+
+.balanced {
+    color: var(--colorSuccess40, #2ffc2b);
+}
+
+.calm {
+    color: var(--colorCalm40, #44e1d8);
+}
+
+.energized {
+    color: var(--colorWarning40, #f58d11);
+}
+
+.assertive {
+    color: var(--colorDanger40, #f03a3a);
+}
+
+.light {
+    color: var(--colorLight40, #8da0b2);
+}
+
+.stable {
+    color: var(--colorStable40, #818181);
+}
+
+.royal {
+    color: var(--colorRoyal40, #0e3760);
+}
+
+.dark {
+    color: var(--colorDark40, #000000);
+}
+
+/* Cores Links*/
+.color-default {
+    color: var(--colorDefault40, #262C32);
+}
+
+.color-positive {
+    color: var(--colorPrimary40, #197fdd);
+}
+
+.color-balanced {
+    color: var(--colorSuccess40, #2ffc2b);
+}
+
+.color-calm {
+    color: var(--colorCalm40, #44e1d8);
+}
+
+.color-energized {
+    color: var(--colorWarning40, #f58d11);
+}
+
+.color-assertive {
+    color: var(--colorDanger40, #f03a3a);
+}
+
+.color-light {
+    color: var(--colorLight40, #8da0b2);
+}
+
+.color-stable {
+    color: var(--colorStable40, #818181);
+}
+
+.color-royal {
+    color: var(--colorRoyal40, #0e3760);
+}
+
+.color-dark {
+    color: var(--colorDark40, #000000);
+}
+
+
+/*Cores Checkbox*/
+.checkbox input:before {
+    border-radius: 2px;
+}
+
+.checkbox-default input:checked:before {
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    border-color: var(--colorDefault40, #262c32);
+    border-radius: 2px;
+}
+
+.checkbox-positive input:checked:before {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    border-color: var(--colorPrimary40, #197fdd);
+    border-radius: 2px;
+}
+
+.checkbox-balanced input:checked:before {
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
+    border-color: var(--colorSuccess60, #22b920);
+    border-radius: 2px;
+}
+
+.checkbox-calm input:checked:before {
+    background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
+    border-color: var(--colorCalm40, #44e1d8);
+    border-radius: 2px;
+}
+
+.checkbox-energized input:checked:before {
+    background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
+    border-color: var(--colorWarning40, #f58d11);
+    border-radius: 2px;
+}
+
+.checkbox-assertive input:checked:before {
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+    border-color: var(--colorDanger40, #f03a3a);
+    border-radius: 2px;
+}
+
+.checkbox-light input:checked:before {
+    background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
+    border-color: var(--colorLight40, #8da0b2);
+    border-radius: 2px;
+}
+
+.checkbox-stable input:checked:before {
+    background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
+    border-color: var(--colorStable40, #818181);
+    border-radius: 2px;
+}
+
+.checkbox-royal input:checked:before {
+    background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
+    border-color: var(--colorRoyal40, #0e3760);
+    border-radius: 2px;
+}
+
+.checkbox-dark input:checked:before {
+    background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
+    border-color: var(--colorDark40, #000000);
+    border-radius: 2px;
+}
+
+/*Toogle*/
+.toggle.toggle-default input:checked+.track {
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+}
+
+.toggle.toggle-positive input:checked+.track {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+}
+
+.toggle.toggle-balanced input:checked+.track {
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
+}
+
+.toggle.toggle-calm input:checked+.track {
+    background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
+}
+
+.toggle.toggle-energized input:checked+.track {
+    background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
+}
+
+.toggle.toggle-assertive input:checked+.track {
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+}
+
+.toggle.toggle-light input:checked+.track {
+    background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
+}
+
+.toggle.toggle-stable input:checked+.track {
+    background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
+}
+
+.toggle.toggle-royal input:checked+.track {
+    background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
+}
+
+.toggle.toggle-dark input:checked+.track {
+    background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
+}
+
+.k-combobox .k-dropdown-wrap .k-input,
+.k-combobox .k-dropdown-wrap .k-select {
+    background: var(--colorDark50, #0A141E);
+    color: var(--textColor40, #f0f0f0);
+}
+
+.tabs-striped .tabs,
+.tabs-striped.tabs-icon-default .tab-item.active,
+.tabs-striped .tabs .tab-item {
+    margin-top: 0px;
+    border-style: 0px;
+    border-width: 0px;
+    border-color: 0px;
+    padding: 0px;
+}
+
+.k-list .k-item {
+    background: var(--colorDark50, #0A141E);
     color: var(--textColorDark40, #f0f0f0);
+}
+
+.k-list .k-item:focus,
+.k-list .k-item:hover {
+    background: var(--backgroundColor10, #CED0D2);
+    color: var(--textColor70, #434343);
+}
+
+.k-list .k-item.k-state-selected {
+    background: var(--colorStable20, #c6c6c6);
+    color: var(--textColor70, #434343);
+}
+
+h5 {
+    font-size: 18px;
+}
+
+.k-dialog .k-dialog-titlebar:before {
+    margin-right: -35px;
+}
+
+.k-dialog-buttongroup {
+    width: 150px;
+    margin-left: 74px;
+    margin-bottom: 20px;
+}
+
+.k-dialog[data-dialog-type="success"] .k-dialog-titlebar,
+.k-dialog[data-dialog-type="success"] .k-dialog-title,
+.k-dialog[data-dialog-type="success"] .k-dialog-titlebar:before {
+    background-color: var(--backgroundColor30, #546270);
+    color: var(--colorSuccess40, #2ffc2b);
+    border: none;
+    border-radius: 30px;
+    margin-left: 45px;
+    margin-top: 20px;
+}
+
+.k-button.k-primary:hover {
+    background: var(--colorSuccess60, #22b920);
+    border-radius: 30px;
+    border: none;
+}
+
+.k-button.k-primary:active {
+    background: var(--colorSuccess70, #108D0D);
+    border-radius: 30px;
+    border: none;
+}
+
+.k-window {
+    background: var(--backgroundColor30, #546270);
+    border-radius: 30px;
+    border: none;
+    margin-top: 20px;
+}
+
+.k-window-content {
+    background: var(--backgroundColor30, #546270);
+    border-radius: 30px;
+    border: none;
+}
+
+.k-dialog[data-dialog-type="info"] .k-dialog-titlebar,
+.k-dialog[data-dialog-type="info"] .k-dialog-title,
+.k-dialog[data-dialog-type="info"] .k-dialog-titlebar:before {
+    background-color: var(--backgroundColor30, #546270);
+    color: var(--colorWarning40, #f58d11);
+    border-radius: 30px;
+    border: none;
+    margin-left: 37px;
+    margin-top: 20px;
+}
+
+.k-dialog[data-dialog-type="error"] .k-dialog-titlebar,
+.k-dialog[data-dialog-type="error"] .k-dialog-title,
+.k-dialog[data-dialog-type="error"] .k-dialog-titlebar:before {
+    background-color: var(--backgroundColor30, #546270);
+    color: var(--colorDanger40, #f03a3a);
+    border-radius: 30px;
+    border: none;
+    margin-left: 45px;
+    margin-top: 20px;
+}
+
+.k-dialog[data-dialog-type="warning"] .k-dialog-titlebar,
+.k-dialog[data-dialog-type="warning"] .k-dialog-title,
+.k-dialog[data-dialog-type="warning"] .k-dialog-titlebar:before {
+    background-color: var(--backgroundColor30, #546270);
+    color: var(--colorWarning40, #f58d11);
+    border-radius: 30px;
+    border: none;
+    margin-left: 45px;
+    margin-top: 20px;
+}
+
+.k-dialog-button-layout-stretched .k-primary:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
+    color: var(--textColorSuccess40, #f0f0f0);
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%)) !important;
+    border-radius: 20px;
+}
+
+.k-dialog-button-layout-stretched .k-button:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
+    color: var(--textColorDanger40, #f0f0f0);
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+    border-radius: 20px;
+    margin: 3px;
+}
+
+.k-dialog-buttongroup .k-button {
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%)) !important;
+}
+
+.k-dialog-button-layout-stretched .k-button~.k-button {
+    margin: 0;
+    border-left-width: 1px;
+    border-radius: 20px;
+    color: var(--textColorDanger40, #f0f0f0);
+    box-shadow: 0px 0px 3px 0px #DE3636;
+}
+
+.k-dialog-button-layout-stretched .k-button.k-primary:hover {
+    color: var(--textColorSuccess40, #f0f0f0);
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%)) !important;
+    box-shadow: 0px 0px 3px 0px #2FFC2B;
 }