1+ .vp-pp-box {
2+ display : grid;
3+ grid-template-columns : 240px calc (100% - 240px );
4+ column-gap : 5px ;
5+ width : 100% ;
6+ height : 100% ;
7+ }
8+ .vp-pp-left-box {
9+ height : 100% ;
10+ display : grid;
11+ grid-template-rows : 35px calc (100% - 35px );
12+ border-right : 0.25px solidvar (--vp-border-gray-color );
13+ padding-right : 5px ;
14+ overflow : hidden;
15+ }
16+ .vp-pp-right-box {
17+ display : grid;
18+ grid-template-rows : 35px 10px calc (100% - 45px );
19+ padding-left : 5px ;
20+ overflow : auto;
21+ }
22+ .vp-pp-template-selector {
23+ display : grid;
24+ grid-template-columns : 70px 160px
25+ }
26+ .vp-pp-template-selector label {
27+ line-height : 30px ;
28+ }
29+ .vp-pp-template {
30+ border : 0.25px solidvar (--vp-border-gray-color );
31+ height : 100% ;
32+ }
33+ .vp-pp-item {
34+ height : 40px ;
35+ border : 0.25px solidvar (--vp-gray-color );
36+ line-height : 40px ;
37+ padding : 0 10px ;
38+ position : relative;
39+ margin : 25px 10px ;
40+ border-radius : 15px ;
41+ }
42+ .vp-pp-item : before , .vp-pp-item : after {
43+ content : "" ;
44+ display : block;
45+ position : absolute;
46+ transition : all0.5s ease-in-out;
47+ }
48+ .vp-pp-item : not (: last-child ): before {
49+ border : 0.25px solidvar (--vp-gray-color );
50+ border-width : 0 4px 4px 0 ;
51+ display : inline-block;
52+ padding : 4px ;
53+ transform : rotate (45deg );
54+ -webkit-transform : rotate (45deg );
55+ top : 47px ;
56+ left : 100px ;
57+ }
58+ .vp-pp-item : not (: last-child ): after {
59+ border : 0.25px solidvar (--vp-gray-color );
60+ border-width : 0 4px 0 0 ;
61+ height : 15px ;
62+ display : inline-block;
63+ top : 42px ;
64+ left : 104px ;
65+ }
66+ .vp-pp-item [data-flag = "enabled" ].selected {
67+ background-color : var (--vp-highlight-color );
68+ border : 0.25px solidvar (--vp-highlight-color );
69+ color : white;
70+ }
71+ .vp-pp-item [data-flag = "enabled" ]: not (.selected ): hover {
72+ background-color : var (--vp-light-gray-color );
73+ color : var (--vp-highlight-color );
74+ cursor : pointer;
75+ }
76+ .vp-pp-item [data-flag = "disabled" ] {
77+ background-color : var (--vp-border-gray-color );
78+ }
79+ .vp-pp-item-menu {
80+ display : inline-flex;
81+ flex-flow : row;
82+ margin-top : 1px ;
83+ right : 10px ;
84+ position : absolute;
85+ }
86+ .vp-pp-item-toggle {
87+ display : inline-block;
88+ width : 18px ;
89+ height : 18px ;
90+ cursor : pointer;
91+ }
92+ /* .vp-pp-item[data-flag="enabled"] .vp-pp-item-toggle {
93+ background: center / contain no-repeat url(../../img/item_disable.svg);
94+ }
95+ .vp-pp-item[data-flag="enabled"] .vp-pp-item-toggle:hover {
96+ background: center / contain no-repeat url(../../img/item_disable_hover.svg);
97+ }
98+ .vp-pp-item[data-flag="disabled"] .vp-pp-item-toggle {
99+ background: center / contain no-repeat url(../../img/item_enable.svg);
100+ }
101+ .vp-pp-item[data-flag="disabled"] .vp-pp-item-toggle:hover {
102+ background: center / contain no-repeat url(../../img/item_enable_hover.svg);
103+ } */
104+ .vp-pp-item-status {
105+ /* display: inline-block; */
106+ display : none;
107+ width : 18px ;
108+ height : 18px ;
109+ }
110+ .vp-pp-item [data-status = "red" ] .vp-pp-item-status {
111+ background : center/ contain no-repeat url(../ ../ img/status_red.svg);
112+ }
113+ .vp-pp-item [data-status = "orange" ] .vp-pp-item-status {
114+ background : center/ contain no-repeat url(../ ../ img/status_orange.svg);
115+ }
116+ .vp-pp-item [data-status = "green" ] .vp-pp-item-status {
117+ background : center/ contain no-repeat url(../ ../ img/status_green.svg);
118+ }
119+ .vp-pp-item [data-flag = "disabled" ] .vp-pp-item-status {
120+ background : none;
121+ }
122+ .vp-pp-step-title {
123+ line-height : 35px ;
124+ }
125+ .vp-pp-step-content {
126+ max-height : 100% ;
127+ overflow : scroll;
128+ height : 100% ;
129+ }
130+ .vp-pp-step-content : empty ::after {
131+ content : 'Select the template and Follow the pipeline to generate simple ML code.'
132+ }