@vitrosoftware/common-ui-ts 1.1.49 → 1.1.51

package/css/std/controls/breadcrumbs/breadcrumbs.css

@@ -6,6 +6,17 @@
     height: 24px;
 }
 
+.vitro-breadcrumbs li {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-breadcrumbs li > div {
+    display: inline-flex;
+    align-items: center;
+}
+
 .vitro-breadcrumbs-list-wrap {
     display: flex;
     position: relative;
@@ -30,8 +41,8 @@
     align-items: center;
 }
 
-.vitro-breadcrumbs-list > li::after, .vitro-breadcrumbs-button::after, .vitro-root::after {
-    content: '';
+.vitro-separator,
+.vitro-breadcrumbs-button::after {
     display: inline-block;
     margin: 0 4px;
     height: 16px;
@@ -43,15 +54,17 @@
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.1851C6 12.3633 6.21543 12.4525 6.34142 12.3265L10.5252 8.14272C10.6034 8.06462 10.6034 7.93799 10.5252 7.85988L6.34142 3.67606C6.21543 3.55006 6 3.6393 6 3.81748L6 12.1851Z' fill='%238E98A3'/%3E%3C/svg%3E%0A");
 }
 
+.vitro-breadcrumbs-button::after {
+    content: '';
+    margin-left: 24px;
+    height: 20px;
+}
+
 .vitro-breadcrumbs-list > li:last-child{
     color: #222D44;
     font-family: 'InterMedium';
 }
 
-.vitro-breadcrumbs-list > li:last-child::after {
-    display: none;
-}
-
 .vitro-breadcrumbs-button {
     height: 20px;
     width: 20px;
@@ -66,21 +79,17 @@
 
 .vitro-root {
     cursor: pointer;
-    margin-right: 24px;
     list-style-type: none;
     line-height: 16px;
     background-repeat: no-repeat;
     width: 20px;
+    height: 20px;
+    display: inline-block;
     background-size: 100%;
     /* root-folder.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V18C21.5 19.3807 20.3807 20.5 19 20.5H5C3.61929 20.5 2.5 19.3807 2.5 18V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355Z' stroke='%23999B9D' stroke-linejoin='round'/%3E%3Cpath d='M8 16L12 10' stroke='%23999B9D' stroke-linecap='round'/%3E%3Cpath d='M12 16L16 16' stroke='%23999B9D' stroke-linecap='round'/%3E%3C/svg%3E%0A") !important;
 }
 
-.vitro-root::after, .vitro-breadcrumbs-button::after {
-    margin-left: 24px;
-    height: 20px;
-}
-
 .vitro-drop-down-list {
     z-index: 1000;
     background: white;
@@ -118,6 +127,7 @@
     color: #4A556C;
     margin-bottom: 0px;
     overflow: hidden;
+    border-radius: 4px;
 }
 
 .vitro-drop-down-list ul li {

package/css/std/controls/input/input.css

@@ -7,6 +7,7 @@
 .vitro-control input,
 .vitro-control textarea {
     width: 100%;
+    min-height: 40px;
     padding: 8px 16px;
     background: #fff;
     border: 1px solid #C0CAD5;
@@ -18,7 +19,6 @@
 }
 
 .vitro-control input {
-    min-height: 40px;
     white-space: normal;
 }
 

package/css/std/controls/table-view/treegrid.css

@@ -136,7 +136,8 @@
     background-color: #DCEEFF !important;
 }
 
-.TWMenuMain {
+.TWCellMenuMain,
+.TWFilterMenuMain {
     width: 241px !important;
     margin-top: 24px !important;
     margin-left: -34px;
@@ -145,7 +146,8 @@
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
 }
 
-.TWMenuMain::before {
+.TWCellMenuMain::before,
+.TWFilterMenuMain::before {
     content: '';
     display: block;
     height: 11px;
@@ -160,7 +162,8 @@
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
 }
 
-.TWMenuOuter {
+.TWCellMenuMain .TWMenuOuter,
+.TWFilterMenuMain .TWMenuOuter {
     padding: 0;
     margin: 0;
     border-radius: 4px !important;
@@ -168,36 +171,45 @@
     min-width: 241px !important;
 }
 
-.TWMenuBody {
+.TWCellMenuMain .TWMenuBody,
+.TWFilterMenuMain .TWMenuBody {
     margin: 0 !important;
     width: 100%;
 }
 
-.TWMenuBody {
+.TWCellMenuMain .TWMenuBody,
+.TWFilterMenuMain .TWMenuBody {
     cursor: default;
     margin: 0px 1px 0px 1px;
 }
 
-.TWMenuFocus, .TWMenuHover {
+.TWCellMenuMain .TWMenuFocus,
+.TWCellMenuMain .TWMenuHover,
+.TWFilterMenuMain .TWMenuHover,
+.TWFilterMenuMain .TWMenuHover {
     background: #F3F8FF !important;
 }
 
-.TWMenuItem {
+.TWCellMenuMain .TWMenuItem,
+.TWFilterMenuMain .TWMenuItem {
     margin: 0 !important;
     padding: 8px 0 !important;
 }
 
-.TWMenuItemText {
+.TWCellMenuMain .TWMenuItemText,
+.TWFilterMenuMain .TWMenuItemText {
     line-height: 150%;
     padding-left: 12px;
     white-space: normal;
 }
 
-div.TWMenuItemText {
+.TWCellMenuMain div.TWMenuItemText,
+.TWFilterMenuMain div.TWMenuItemText {
     margin-left: 32px;
 }
 
-.TWMenuItemIcon {
+.TWCellMenuMain .TWMenuItemIcon,
+.TWFilterMenuMain .TWMenuItemIcon {
     height: 20px;
     width: 32px;
     background-size: 20px;
@@ -418,14 +430,6 @@ div.TWMenuItemText {
     font-size: 10pt;
 }
 
-.TWMessage .TWMessageButtons {
-    display: flex;
-    width: 100%;
-    padding: 0;
-    justify-content: flex-end;
-    margin: 0;
-}
-
 .TWMessage .vitro-icon-before {
     /* ico-question.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg width='49' height='49' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1631 44.1426C35.2088 44.1426 44.1631 35.1883 44.1631 24.1426C44.1631 13.0969 35.2088 4.14258 24.1631 4.14258C13.1174 4.14258 4.16309 13.0969 4.16309 24.1426C4.16309 35.1883 13.1174 44.1426 24.1631 44.1426Z' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M18.3428 18.1426C18.813 16.806 19.7411 15.6788 20.9627 14.9609C22.1843 14.2429 23.6206 13.9805 25.0171 14.22C26.4137 14.4596 27.6804 15.1857 28.5929 16.2697C29.5055 17.3537 30.0049 18.7257 30.0028 20.1426C30.0028 24.1426 24.0028 26.1426 24.0028 26.1426' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M24.1631 34.1426H24.1831' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
@@ -437,49 +441,6 @@ div.TWMenuItemText {
     flex-shrink: 0;
 }
 
-.TWMessage .TWMessageButtons > button, .TWLow .TWMenuButton, .TWProgressButtons > button {
-    height: 32px;
-    line-height: 32px;
-    background: #0097ff;
-    color: #fff;
-    width: auto;
-    padding: 0 12px;
-    min-width: 96px;
-    margin: 8px 0 0 8px;
-    border-radius: 8px;
-    border: none;
-    padding: 0 !important;
-    font-weight: 500;
-    outline: none;
-    font-family: GraphikRegular;
-    font-size: 10pt;
-}
-
-.TWMessage .TWMessageButtons > button:hover, .TWLow .TWMenuButton:hover, .TWProgressButtons > button:hover {
-    background: rgba(0, 151, 255, .8);
-    border-color: transparent;
-}
-
-.TWMessage .TWMessageButtons > button:first-child {
-    margin-left: 0;
-}
-
-.TWMessage .TWMessageButtons > button:last-child,
-.TWMenuFoot > button:last-child,
-.TWProgressButtons > button:last-child {
-    background: #fff;
-    color: #0097ff;
-    border: 1px solid #0097ff;
-}
-
-.TWMessage .TWMessageButtons > button:last-child:hover,
-.TWMenuFoot > button:last-child:hover,
-.TWProgressButtons > button:last-child {
-    background: #fff;
-    border-color: rgba(0, 151, 255, .8);
-    color: rgba(0, 151, 255, .8);
-}
-
 .TWFilter12Left, .TWFilter12Right, .TWFilter12Menu {
      /*ico-tableview-contains-not.svg URL-encoder for SVG*/ 
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Cpolygon points='12,24 12,40 24,32'/%3E%3Cpolygon points='52,40 52,24 40,32'/%3E%3Cpolygon points='28,33.3 36,28 36,20 40,20 40,12 24,12 24,20 28,20'/%3E%3Cpolygon points='36,32 28,37.3 28,44 24,44 24,52 40,52 40,44 36,44'/%3E%3Cpolygon fill='%23ff5b2d' points='48,20 48,16 12,40 12,44'/%3E%3C/g%3E%3C/svg%3E") !important;
@@ -731,4 +692,101 @@ div.TWMenuItemText {
 
 .TWHeaderGroupCustom {
     padding: 0;
+}
+
+.TWCfgMenuItem {
+    margin: 0;
+    background: #fff !important;
+    padding: 0 16px !important;
+}
+
+.TWCfgMenuItem .TWCfgMenuItemText {
+    padding: 4px 0;
+}
+
+.TWCfgMenuItem .TWCfgMenuBoolIconRight {
+    background-size: 16px;
+}
+
+.TWCfgMenuMain {
+    margin-top: -5%;
+    border-radius: 4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
+}
+
+.TWMenuButton {
+    border-radius: 4px;
+    background: #347FDE;
+    padding: 8px 16px !important;
+    color: #fff !important;
+    margin: 0 !important;
+}
+
+.TWMenuButton:hover,
+.TWMenuButton:active {
+    background: #3274E0;
+}
+
+.TWDialogButtonCancel {
+    color: #222D44 !important;
+    background: #fff;
+}
+
+.TWDialogButtonCancel:hover,
+.TWDialogButtonCancel:active {
+    color: #222D44 !important;
+    background: #F3F8FF;
+}
+
+.TWCfgMenuCaption {
+    font-weight: normal;
+    line-height: 150%;
+    padding: 4px;
+}
+
+.TWCfgMenuHead {
+    background: #fff;
+    border-bottom: 1px solid #E4E6EC;
+    padding: 20px 16px 20px 16px !important;
+}
+
+.TWCfgMenuHeadText {
+    font-size: 20px;
+    line-height: 24px;
+    text-align: left;
+}
+
+.TWCfgMenuClose {
+    position: absolute;
+    height: 60px;
+    width: 60px !important;
+    top: -9px;
+    right: -64px;
+    background-size: 100%;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cpath d='M16.8906 43.1056L29.9981 29.9981L43.1056 43.1056M43.1056 16.8906L29.9956 29.9981L16.8906 16.8906' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.TWCfgMenuBody {
+    margin: 0;
+    width: 100%;
+    padding: 8px 0;
+}
+
+.TWCfgMenuFoot {
+    border-top: 1px solid #E4E6EC;
+    padding: 16px 16px !important;
+    display: flex;
+    grid-gap: 12px;
+    justify-content: flex-start;
+    flex-direction: row-reverse;
+}
+
+.TWCfgMenuOuterBottom {
+    padding: 0 !important;
+    border-radius: 4px;
+}
+
+.GridDisabled {
+    background: #222D44;
+    opacity: 0.2;
 }

package/dist/controls/Breadcrumbs/Item.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 interface ItemProps {
     onClick?: () => void;
-    text?: string;
     id: string;
     className?: string;
+    isShowSeparator: boolean;
+    children: React.ReactNode;
 }
 export declare const Item: (props: ItemProps) => JSX.Element;
 export {};

package/dist/controls/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface DatePickerProps {
     name?: string;
     culture?: string;
@@ -22,5 +22,5 @@ interface DatePickerProps {
     onClose?: (value: any, name?: string) => void;
     className?: string;
 }
-export declare const DatePicker: (props: DatePickerProps) => JSX.Element;
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/FieldIterator/FieldIterator.d.ts

@@ -19,5 +19,5 @@ interface FieldIteratorProps {
     }[];
     isReadOnly?: boolean;
 }
-export declare const FieldIterator: (props: FieldIteratorProps) => JSX.Element;
+export declare const FieldIterator: React.ForwardRefExoticComponent<FieldIteratorProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/Input/Input.d.ts

@@ -28,5 +28,5 @@ interface InputProps {
     children?: React.ReactNode;
     className?: string;
 }
-export declare const Input: (props: InputProps) => JSX.Element;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/LookupPicker/LookupPicker.d.ts

@@ -33,5 +33,5 @@ interface LookupPickerProps {
     className?: string;
     getAllValueList?: () => Promise<any>;
 }
-export declare const LookupPicker: (props: LookupPickerProps) => JSX.Element;
+export declare const LookupPicker: React.ForwardRefExoticComponent<LookupPickerProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/TimePicker/TimePicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface TimePickerProps {
     value?: string | Date;
     format?: string;
@@ -16,5 +16,5 @@ interface TimePickerProps {
     onClose?: (e: any, container: any) => void;
     className?: string;
 }
-export declare const TimePicker: (props: TimePickerProps) => JSX.Element;
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/UserLookupPicker/UserLookupPicker.d.ts

@@ -34,5 +34,5 @@ interface UserLookupPickerProps {
     children?: React.ReactNode;
     className?: string;
 }
-export declare const UserLookupPicker: (props: UserLookupPickerProps) => JSX.Element;
+export declare const UserLookupPicker: React.ForwardRefExoticComponent<UserLookupPickerProps & React.RefAttributes<unknown>>;
 export {};

package/dist/index.css

@@ -50,60 +50,6 @@
         align-items: flex-start;
     }
 }
-._scrollbar_vitro-scrollbar-content_3HXSt5u {
-    height: 100%;
-    width: 100%;
-}
-
-.ps {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.ps__rail-y {
-    background-color: #fff !important;
-    width: 12px !important;
-    border-left: 1px solid #F7F9FC;
-    border-top: 1px solid #F7F9FC;
-    opacity: 1 !important;
-}
-
-.ps__rail-x {
-    background-color: #fff !important;
-    height: 12px !important;
-    border-top: 1px solid #F7F9FC;
-    opacity: 1 !important;
-}
-
-.ps__thumb-x, .ps__thumb-y {
-    background-color: #E4E6EC !important;
-    border-radius: 4px;
-}
-
-.ps__thumb-y {
-    width: 4px !important;
-    right: 3px !important;
-}
-
-.ps__thumb-x {
-    height: 4px !important;
-    top: 3px !important;
-}
-
-.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, 
-.ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
-    background-color: #fff;
-    opacity: 1;
-}
-
-.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
-    background-color: #E4E6EC;
-}
-
-.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
-    background-color: #E4E6EC;
-}
 ._breadcrumbs_vitro-breadcrumbs_3r4NcQY {
     display: flex;
     flex-direction: column;
@@ -112,6 +58,17 @@
     height: 24px;
 }
 
+._breadcrumbs_vitro-breadcrumbs_3r4NcQY li {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+}
+
+._breadcrumbs_vitro-breadcrumbs_3r4NcQY li > div {
+    display: inline-flex;
+    align-items: center;
+}
+
 ._breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0 {
     display: flex;
     position: relative;
@@ -136,8 +93,8 @@
     align-items: center;
 }
 
-._breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ > li::after, ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after, ._breadcrumbs_vitro-root_1S5-6AY::after {
-    content: '';
+._breadcrumbs_vitro-separator_3RKZZBc,
+._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after {
     display: inline-block;
     margin: 0 4px;
     height: 16px;
@@ -149,15 +106,17 @@
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.1851C6 12.3633 6.21543 12.4525 6.34142 12.3265L10.5252 8.14272C10.6034 8.06462 10.6034 7.93799 10.5252 7.85988L6.34142 3.67606C6.21543 3.55006 6 3.6393 6 3.81748L6 12.1851Z' fill='%238E98A3'/%3E%3C/svg%3E%0A");
 }
 
+._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after {
+    content: '';
+    margin-left: 24px;
+    height: 20px;
+}
+
 ._breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ > li:last-child{
     color: #222D44;
     font-family: 'InterMedium';
 }
 
-._breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ > li:last-child::after {
-    display: none;
-}
-
 ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c {
     height: 20px;
     width: 20px;
@@ -172,21 +131,17 @@
 
 ._breadcrumbs_vitro-root_1S5-6AY {
     cursor: pointer;
-    margin-right: 24px;
     list-style-type: none;
     line-height: 16px;
     background-repeat: no-repeat;
     width: 20px;
+    height: 20px;
+    display: inline-block;
     background-size: 100%;
     /* root-folder.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V18C21.5 19.3807 20.3807 20.5 19 20.5H5C3.61929 20.5 2.5 19.3807 2.5 18V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355Z' stroke='%23999B9D' stroke-linejoin='round'/%3E%3Cpath d='M8 16L12 10' stroke='%23999B9D' stroke-linecap='round'/%3E%3Cpath d='M12 16L16 16' stroke='%23999B9D' stroke-linecap='round'/%3E%3C/svg%3E%0A") !important;
 }
 
-._breadcrumbs_vitro-root_1S5-6AY::after, ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after {
-    margin-left: 24px;
-    height: 20px;
-}
-
 ._breadcrumbs_vitro-drop-down-list_2PhrR2a {
     z-index: 1000;
     background: white;
@@ -225,6 +180,7 @@
     color: #4A556C;
     margin-bottom: 0px;
     overflow: hidden;
+    border-radius: 4px;
 }
 
 ._breadcrumbs_vitro-drop-down-list_2PhrR2a ul li {
@@ -243,6 +199,60 @@
         margin-bottom: 12px;
     }
 }
+._scrollbar_vitro-scrollbar-content_3HXSt5u {
+    height: 100%;
+    width: 100%;
+}
+
+.ps {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.ps__rail-y {
+    background-color: #fff !important;
+    width: 12px !important;
+    border-left: 1px solid #F7F9FC;
+    border-top: 1px solid #F7F9FC;
+    opacity: 1 !important;
+}
+
+.ps__rail-x {
+    background-color: #fff !important;
+    height: 12px !important;
+    border-top: 1px solid #F7F9FC;
+    opacity: 1 !important;
+}
+
+.ps__thumb-x, .ps__thumb-y {
+    background-color: #E4E6EC !important;
+    border-radius: 4px;
+}
+
+.ps__thumb-y {
+    width: 4px !important;
+    right: 3px !important;
+}
+
+.ps__thumb-x {
+    height: 4px !important;
+    top: 3px !important;
+}
+
+.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, 
+.ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
+    background-color: #fff;
+    opacity: 1;
+}
+
+.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
+    background-color: #E4E6EC;
+}
+
+.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
+    background-color: #E4E6EC;
+}
 ._top-level-menu_vitro-top-level-menu_38-ZEUx {
     display: flex;
     justify-content: space-between;
@@ -1765,6 +1775,7 @@
 ._input_vitro-control_1DmPFkF input,
 ._input_vitro-control_1DmPFkF textarea {
     width: 100%;
+    min-height: 40px;
     padding: 8px 16px;
     background: #fff;
     border: 1px solid #C0CAD5;
@@ -1776,7 +1787,6 @@
 }
 
 ._input_vitro-control_1DmPFkF input {
-    min-height: 40px;
     white-space: normal;
 }