PluginProbe
Booking Calendar / 10.15.6
Booking Calendar v10.15.6
11.8.3 11.8.2 11.8.1 11.8 11.7 11.6.1 11.6 11.5 11.4.3 11.4.2 11.4.1 11.4 11.3 11.2.1 11.2 11.1 11.0 10.15.7 10.15.6 10.1.3 10.10 10.10.1 10.10.2 10.11 10.11.2 All 203 releases
booking / core / timeline / v2 / _src / timeline_v2.1.css

timeline_v2.1.css in Booking Calendar 10.15.6, at core/timeline/v2/_src/timeline_v2.1.css

1,326 lines 57.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* T i m e l i n e - C O L O R S K I N ****************************/
2 /*
3 * For better compatibility, please change here only following properties:
4 * background , background-color, background-repeat, background-image, background-repeat, background-position
5 * border
6 * box-shadow
7 * border-radius
8 * color
9 * font-weight
10 * text-shadow
11 * text-transform
12 *
13 */
14 :root {
15 --wpbc_timeline-row-height: 37px;
16 --wpbc_timeline-matrix-row-header-height: 58px;
17 --wpbc_timeline-single-row-header-height: 40px;
18
19 /* Pending Booking Pipeline Color */
20 --wpbc_timeline-booking-pending-color: #ffea99;
21 --wpbc_timeline-booking-pending-color-opacity: 50%;
22 --wpbc_timeline-past-booking-pending-color: rgb( from var(--wpbc_timeline-booking-pending-color) r g b / var(--wpbc_timeline-booking-pending-color-opacity) );
23 --wpbc_timeline-booking-pending-border-color: #68362e;
24
25 /* Approved Booking Pipeline Color */
26 --wpbc_timeline-booking-approved-color: #458c27;
27 --wpbc_timeline-booking-approved-color-opacity: 55%;
28 --wpbc_timeline-past-booking-approved-color: rgb( from var(--wpbc_timeline-booking-approved-color) r g b / var(--wpbc_timeline-booking-approved-color-opacity) );
29 --wpbc_timeline-booking-approved-border-color: #2b4421;
30
31 --wpbc_timeline-new-month-border-color: transparent; /*#C54*/
32 --wpbc_timeline-gen__text-color: var(--wpbc_ui__gen__text-color, #555);
33 }
34 /* ===================================================================================================================== */
35 /* ===================================================================================================================== */
36 /* Timeline Main Container */
37 .flex_tl_table {
38 display: flex;
39 flex-flow: column nowrap;
40 box-sizing: border-box;
41 }
42 /* Front End shadow */
43 .wpbc_timeline_client_border .flex_tl_table {
44 box-shadow: 0 2px 5px #00000014;
45 border: 1px solid #e7e7e7;
46 }
47
48 /* Timeline: Header, Dates number, all bookings Rows */
49 .flex_tl_table .flex_tl_table_header,
50 .flex_tl_table .flex_tl_table_titles,
51 .flex_tl_table .flex_tl_table_row_bookings {
52 flex: 1;
53 display: flex;
54 flex-flow: row nowrap;
55 justify-content: space-between;
56 }
57 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_1,
58 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_1,
59 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 {
60 flex:0 1 auto;
61 /*width: 180px;*/
62 min-width: 0;
63 word-wrap: break-word;
64
65 display: flex;
66 flex-flow: column nowrap;
67 justify-content: center;
68
69 }
70 /* Column 2 - dates/bookings */
71 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2,
72 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2,
73 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 {
74 flex: 1 1 0;
75 min-width: 0;
76 }
77 /* Make the same align of Dates title as Resource title //FixIn: 9.5.4.6 */
78 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2{
79 display: flex;
80 flex-flow: column nowrap;
81 justify-content: center;
82 }
83
84 /**********************************************************************************************************************/
85 @media (max-width: 782px) {
86
87 /* Wrap to New lines */
88 .flex_tl_table .flex_tl_table_header,
89 .flex_tl_table .flex_tl_table_titles,
90 .flex_tl_table .flex_tl_table_row_bookings {
91 flex-flow: row wrap;
92 }
93 /* Show booking resources in a ROW above the dates */
94 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_1,
95 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2,
96 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1,
97 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 {
98 width: 100%;
99 flex: 1 1 auto;
100 }
101 }
102 /**********************************************************************************************************************/
103 /* Ajax Header Nav */
104 /**********************************************************************************************************************/
105 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 .flex_tl_nav{
106 display: flex;
107 flex-flow: row nowrap;
108 justify-content: space-between;
109 align-items: baseline; /* //FixIn: 9.5.4.6 */
110 padding: 7px 0 0;
111 }
112 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 .flex_tl_nav .flex_tl_title {
113 flex: 1 1 0;
114 word-break: break-word;
115 min-width: 0;
116 color: #777
117 }
118 /**********************************************************************************************************************/
119 /* T i t l e D a t e s B a r - .flex_tl_table_titles */
120 /**********************************************************************************************************************/
121 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar {
122 display:flex;
123 flex-flow: row nowrap;
124 justify-content: space-between;
125 }
126 /* Header "Dates number" Cell */
127 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell {
128 flex: 1 1 0;
129 min-width: 0;
130
131 display:flex;
132 flex-flow: column nowrap;
133 justify-content: space-between;
134 }
135 /* "Top Month Line" & "Date Number CELL container" */
136 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_month_year,
137 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container {
138 flex: 1;
139 display: flex;
140 flex-flow: column wrap;
141 justify-content: center;
142 overflow: hidden;
143 }
144 /* Day Number & WeekDay - in - Title D a t e s B a r */
145 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container .in_cell_day_num,
146 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container .in_cell_day_week {
147 flex: 1;
148 display: flex;
149 flex-flow: column;
150 align-items: center;
151 justify-content: center;
152 /*font-size: 0.85em;*/
153 font-size: 14px;
154 font-weight: 600;
155 text-align: center;
156 }
157 .flex_tl_matrix_resources .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container .in_cell_day_num{
158 font-size: 10px;
159 font-weight: 400;
160 display: none;
161 }
162 .flex_tl_matrix_resources .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container .in_cell_day_week {
163 font-size: 14px;
164 }
165 .flex_tl_single_resource .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container .in_cell_day_week {
166 font-size: 14px;
167 }
168 .flex_frame_view_days_num_60 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container .in_cell_day_num{
169 display: none;
170 }
171 .flex_frame_view_days_num_60 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container .in_cell_day_week {
172 font-size: 14px;
173 }
174 /* Hide Months Number Titles - in single booking resource view in Month view */
175 .flex_tl_single_resource.flex_frame_view_days_num_365 .flex_tl_table_titles {
176 visibility: hidden;
177 height: 5px;
178 }
179 /**********************************************************************************************************************/
180 /* "Responsive Mode" - in - T i t l e D a t e s B a r */
181 @media (max-width: 782px) {
182 /* Show Scroller for Months and 2 Months view modes */
183 .flex_tl_matrix_resources.flex_frame_view_days_num_1,
184 .flex_tl_matrix_resources.flex_frame_view_days_num_30,
185 .flex_tl_matrix_resources.flex_frame_view_days_num_60,
186 .flex_tl_single_resource.flex_frame_view_days_num_30,
187 .flex_tl_single_resource.flex_frame_view_days_num_365 {
188 /*width: 100%;*/
189 /*overflow-x: scroll;*/
190 }
191 .flex_tl_matrix_resources.flex_frame_view_days_num_30 .flex_tl_table,
192 .flex_tl_single_resource.flex_frame_view_days_num_365 .flex_tl_table{
193 /*min-width: 500px;*/
194 }
195 .flex_tl_matrix_resources.flex_frame_view_days_num_1 .flex_tl_table,
196 .flex_tl_matrix_resources.flex_frame_view_days_num_60 .flex_tl_table,
197 .flex_tl_single_resource.flex_frame_view_days_num_30 .flex_tl_table {
198 /*min-width: 1000px;*/
199 }
200 }
201 /**********************************************************************************************************************/
202 /* "Top Month Line" - in - D a t e s B a r */
203 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar_month {
204 height: 3em;
205 flex: 0 1 auto;
206 overflow: hidden;
207 }
208 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar_month.flex_tl_dates_bar .flex_tl_day_cell {
209 border:none;
210 }
211 /* Header "Month Name" Cell */
212 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar_month .flex_tl_day_cell .in_cell_month_year {
213 overflow: visible;
214 word-wrap: normal;
215 white-space: nowrap;
216 }
217 /**********************************************************************************************************************/
218 /* "Time Slots" - in - D a t e s B a r */
219 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_time_section_in_day {
220 flex: 1;
221
222 display: flex;
223 flex-flow: row nowrap;
224 justify-content: space-between;
225 overflow: hidden;
226 }
227
228 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_time_section_in_day .in_cell_time_hour {
229 flex: 1 1 0;
230 min-width: 0;
231 }
232 /* Date Number during showing 1 day */
233 .flex_tl_matrix_resources.flex_frame_view_days_num_1 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container,
234 .flex_tl_single_resource.flex_frame_view_days_num_30 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container {
235 flex-flow: row nowrap;
236 align-items: center;
237 }
238
239 /**********************************************************************************************************************/
240 /* Dates in First Column during single resource view mode */
241 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container {
242 display: flex;
243 flex-flow: row wrap;
244 justify-content: space-around;
245 }
246 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container .flex_tl_resource_title_dates_days,
247 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container .flex_tl_resource_title_dates_weeks {
248 flex: 1 1 0;
249 text-align: left;
250
251 }
252 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container .flex_tl_resource_title_dates_weeks{
253 text-align: right;
254 padding:0 1em;
255 }
256 @media (max-width: 782px) {
257 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container {
258 justify-content: flex-start;
259 }
260 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container .flex_tl_resource_title_dates_days,
261 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container .flex_tl_resource_title_dates_weeks {
262 flex: 0 1 auto;
263 text-align: left;
264 padding:0 1em;
265 }
266 }
267 /**********************************************************************************************************************/
268 /* B o o k i n g s R o w - B o o k i n g s D a t e s B a r - .flex_tl_table_row_bookings */
269 /**********************************************************************************************************************/
270 /* Define Height of Bookings Row for .flex_tl_row_bar_show_bookings & .flex_tl_row_bar_show_dates */
271 .flex_tl_row_height,
272 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar{
273 min-height: var(--wpbc_timeline-row-height);
274 }
275 /* Move Bookings Row to Dates Row */
276 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_bookings {
277 margin-top: calc( -1 * var(--wpbc_timeline-row-height) );
278 }
279 /* Move Bookings Titles Row to Dates Row */
280 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_booking_titles {
281 margin-top: calc( -1 * var(--wpbc_timeline-row-height) );
282 overflow: hidden; /* Hide booking titles, that overflow timeline frame */
283 }
284 /* Bookings Row */
285 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar {
286 display:flex;
287 flex-flow: row nowrap;
288 justify-content: space-between;
289 }
290 /**********************************************************************************************************************/
291 /* B o o k i n g T i m e s C e l l */
292 /**********************************************************************************************************************/
293 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .in_cell_time_section_in_day {
294 flex: 1 1 0;
295 min-width: 0;
296
297 display:flex;
298 flex-flow: row nowrap;
299 justify-content: space-between;
300
301 }
302 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .in_cell_time_section_in_day .in_cell_time_hour {
303 flex: 1 1 0;
304 min-width: 0;
305
306 display:flex;
307 flex-flow: row nowrap;
308 justify-content: space-between;
309 }
310 /**********************************************************************************************************************/
311 /* B o o k i n g C e l l */
312 /**********************************************************************************************************************/
313 /* Cell - "Container" */
314 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell {
315 flex: 1 1 0;
316 min-width: 0;
317 display: flex;
318 flex-flow: row nowrap;
319 justify-content: space-between;
320 }
321 /* Cell - Date Number */
322 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_dates {
323 flex: 1 1 0;
324 display: flex;
325 flex-flow: row nowrap;
326 justify-content: center;
327 align-items: center;
328 }
329 /* Show Times in Cells during 1 day view mode */
330 .flex_timeline_frame.flex_frame_view_days_num_30.flex_tl_single_resource
331 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_dates,
332 .flex_timeline_frame.flex_frame_view_days_num_1.flex_tl_matrix_resources
333 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_dates{
334 justify-content: flex-start;
335 align-items: flex-start;
336 }
337 /* Cell - Booking Pipelines (container for several bookings in cell) */
338 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings {
339 flex: 1 1 0;
340 min-width: 0;
341 display: flex;
342 flex-flow: column nowrap; /* Show booking pipeline in a CELL - Horizontally */
343 /*flex-flow: row nowrap;*/ /* Show booking pipeline in a CELL - Vertically */
344 justify-content: space-between;
345 position: relative;
346 }
347 /* Cell - Booking Pipeline for specific one booking in Cell */
348 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id{
349 flex: 1 1 0;
350 min-width: 0;
351 word-wrap: normal;
352 white-space: nowrap;
353 }
354 /* Borders for several horizontal booking pipelines in day cell */
355 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.pending_booking{
356 border-bottom:1px dashed #555;
357 }
358 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking{
359 border-bottom:1px dashed #ccc;
360 }
361 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id:last-child{
362 border-bottom:none;
363 border-top: 1px solid;
364 border-bottom: 1px solid;
365 /*border-right: 1px solid;*/
366 /*margin-left: -2px;*/
367 }
368 /* Booking Pipeline ( background bar ) - Link for showing titles */
369 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id .in_cell_date_booking_pipeline_a:hover,
370 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id .in_cell_date_booking_pipeline_a:active,
371 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id .in_cell_date_booking_pipeline_a{
372 position: relative;
373 cursor: default;
374 outline : none;
375 box-shadow: none;
376 }
377 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id .in_cell_date_booking_pipeline_a .in_cell_date_booking_pipeline_a_sizer {
378 width: 100%;
379 height: 100%;
380 }
381 /* Cell - Show Booking Titles (container) *****************************************************************************/
382 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_booking_titles {
383 display: flex;
384 flex-flow: column wrap;
385 justify-content: flex-start;
386 }
387 /* Cell - Show Booking Title */
388 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_booking_titles .in_cell_date_booking_title{
389 overflow: visible;
390 white-space: nowrap;
391 word-wrap: initial;
392 padding: 0px 0.5em;
393 margin-left: 4px;
394 margin-top: 4px;
395 z-index: 1; /* Important for working links in neighborhood cells, when title overflow to them */
396 }
397 /* Cell - Do not show border for Booking Cell title */
398 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_booking_titles .flex_tl_day_cell{
399 border:none;
400 }
401 /**********************************************************************************************************************/
402
403
404 /**********************************************************************************************************************/
405 /* On initial Loading - Showing with JavaScript */
406 .flex_tl_table {
407 display:none;
408 }
409
410 /**********************************************************************************************************************/
411 /* P O P O V E R in T i m e l i n e ****************************************************/
412 /**********************************************************************************************************************/
413 .hidden_items {
414 display: none;
415 }
416 @media (max-width: 782px) {
417 .flex_timeline_frame .popover{
418 width:98%;
419 max-width:98%;
420 }
421 }
422 .flex_timeline_frame .popover {
423 border: 2px solid #555;
424 font-size: 12px;
425 max-width: 299px;
426 /* FixIn: 10.1.5.3 */
427 max-height: 425px;
428 overflow-y: auto;
429 scrollbar-width: thin;
430 scrollbar-gutter: unset;
431 }
432 hr.wpbc_tl_popover_booking_separator {
433 margin-bottom:0;
434 }
435 .wpbc-listing-collumn.field-system-info {
436 font-size: 9px;
437 font-style: normal;
438 line-height: 1.2em;
439 text-shadow: none;
440 white-space: nowrap;
441 padding: 2px 0 0 5px;
442 text-align: right;
443 color: #777;
444 }
445 /** P o p o v e r T i t l e **/
446 .flex_timeline_frame .popover .popover-title {
447 display: flex;
448 flex-flow:row wrap;
449 justify-content: flex-start;
450 align-items: center;
451
452 min-height: 2.5em;
453 margin:0;
454 padding: 5px 30px 5px 6px;
455 border-radius: 5px 0px 0 0;
456 background-color: #fff;
457 border-bottom: 1.5px solid #707980;
458 }
459 .flex_timeline_frame .popover .popover-title .popover-title-id {
460 flex: 0 0 auto;
461 width: 100%; /*Start with new line*/
462
463 font-size:14px;
464 font-weight: 500;
465 line-height: 1.8;
466 margin: 0;
467 padding: 0 12px 0 5px;
468 border: 0;
469 vertical-align: baseline;
470 }
471 /** Buttons **************************************/
472 .flex_timeline_frame .popover .popover-title .popover-title-buttons{
473 flex: 1 1 auto;
474
475 display: flex;
476 flex-flow: row wrap;
477 justify-content: flex-start;
478 margin: 2px 0;
479 }
480 .flex_timeline_frame .popover .popover-title .popover-title-buttons a,
481 .flex_timeline_frame .popover .popover-title .popover-title-buttons a:hover,
482 .flex_timeline_frame .popover .popover-title .popover-title-buttons a:focus {
483 flex: none;
484
485 box-sizing: border-box;
486 margin: 0 5px 0 0;
487 padding: 0 10px 1px;
488 font-size: 13px;
489 height: 28px;
490 line-height: 28px;
491 white-space: nowrap;
492 text-decoration: none;
493 cursor: pointer;
494 -webkit-appearance: none;
495 color: var( --wpbc_timeline-gen__text-color, #555 );
496 background: #f7f7f7;
497 border-radius: 3px;
498 border: 1px solid #d8d8d8;
499 box-shadow: none;
500
501 border: 1px solid #aaa0;
502 outline: 0;
503 background: transparent !important;
504 }
505 .flex_timeline_frame .popover .popover-title .popover-title-buttons a:hover {
506 background: #fafafa;
507 border-color: #ccc;
508 color: #23282d;
509
510 border: 1px solid #eee !important;;
511 color: #23282d;
512 }
513 .flex_timeline_frame .popover .popover-title .popover-title-buttons .wpbc-buttons-separator{
514 margin-right:1.5em;
515 }
516 /** Close X ********************************/
517 .flex_timeline_frame .popover .popover-close,
518 .flex_timeline_frame .popover .popover-close:hover {
519 position: absolute;
520 right: 0;
521 top: 0;
522 font-size: 20px;
523 line-height: 1.5em;
524 padding: 5px;
525 }
526 .flex_timeline_frame .popover .popover-close a,
527 .flex_timeline_frame .popover .popover-close a:hover,
528 .flex_timeline_frame .popover .popover-close a:active,
529 .flex_timeline_frame .popover .popover-close a:focus {
530 text-decoration: none;
531 border-style: none;
532 outline: 0;
533 color:#444;
534 background: transparent;
535 padding: 0 5px;
536 }
537 /**********************************************/
538 .flex_timeline_frame .popover.bottom > .arrow::after {
539 border-bottom-color: transparent;
540 }
541 /**********************************************************************************************************************/
542 /** P o p o v e r C o n t e n t **/
543 /**********************************************************************************************************************/
544 .popover-content .flex-popover-content-data {
545 display:flex;
546 flex-flow:column wrap;
547 justify-content: space-between;
548 }
549 .popover-content .flex-popover-content-data .flex-popover-bars,
550 .popover-content .wpbc-popover-content-data .wpbc-popover-cost-bar,
551 .popover-content .wpbc-popover-content-data .booking-labels,
552 .popover-content .wpbc-popover-content-data .wpbc-popover-booking-data,
553 .popover-content .wpbc-popover-content-data .wpbc-popover-booking-notes,
554 .popover-content .wpbc-popover-content-data .booking-dates{
555 flex: 1 1 auto; /* //FixIn: 8.7.9.4 */
556 }
557 .popover-content .flex-popover-content-data .flex-popover-bars {
558 display:flex;
559 flex-flow:row nowrap;
560 justify-content: space-between;
561 }
562 .popover-content .flex-popover-content-data .flex-popover-bars .flex-popover-labels-bar{
563 flex: 1 1 0;
564 clear: both;
565 }
566 .popover-content .flex-popover-content-data .flex-popover-bars .flex-popover-cost-bar {
567 flex: none;
568 padding: 0.3em 0;
569 margin: 0;
570 }
571 .popover-content .flex-popover-content-data .flex-popover-labels-bar{
572 display:flex;
573 flex-flow:row wrap;
574 justify-content: flex-start;
575 }
576
577 .popover-content .flex-popover-content-data .flex-popover-labels-bar .flex-label {
578 flex: 0 1 auto;
579 min-width: 0;
580 }
581 .popover-content .flex-popover-content-data .flex-label {
582 border: 0;
583 border-radius: 3px;
584 text-shadow: none;
585 box-shadow: 0 0 1px #ddd;
586 font-weight: 400;
587
588
589 line-height: 1.9;
590 padding: 0.2em 0.7em;
591 background-color: var(--wpbc_admin-resource-badge-color,#556e91);
592 color: #fff;
593 text-align: center;
594 vertical-align: middle;
595 margin: 0.15em 0.75em 0.5em 0;
596
597 word-wrap: break-word;
598 word-wrap: anywhere;
599 white-space: pre-wrap;
600 }
601 .popover-content .flex-popover-content-data .flex-label .label-prefix {
602 font-size: 70%;
603 font-weight: 400;
604 }
605 .popover-content .flex-popover-content-data .flex-label.flex-label-id {
606 box-shadow: none;
607 background-color: #fff;
608 border: 1px solid rgba(0, 0, 0, .1098039216);
609 color: #717171;
610 }
611 .popover-content .flex-popover-content-data .flex-label.flex-label-booking-status.label-pending {
612 background-color: #ed9f0a;
613 color: #fff;
614 box-shadow: 0 0 1px #fde4c9;
615 }
616 .popover-content .flex-popover-content-data .flex-label.flex-label-booking-status.label-approved {
617 background-color: #64aa45;
618 color: #f7fff4;
619 box-shadow: 0 0 1px #b8c6b1;
620 }
621 .popover-content .flex-popover-content-data .flex-label.flex-label-payment.payment-label-success {
622 background-color: #468847;
623 }
624 .popover-content .flex-popover-content-data .flex-label.flex-label-payment.payment-label-unknown {
625 background-color: #f2f2f3;
626 color: #717379;
627 border: 1px solid #e3e3e3;
628 }
629 .popover-content .flex-popover-content-data .flex-label.flex-label-trash {
630 background: #d94a48;
631 color: #fff;
632 text-shadow: 0 0 1px #e00;
633 }
634 .popover-content .flex-popover-content-data .flex-label.flex-label-resource {
635 text-align: left;
636 }
637 /* Move cost to right side*/
638 .popover-content .flex-popover-content-data .flex-label.flex-label-cost {
639 margin-left:auto;
640 background: transparent;
641 font-weight: 600;
642 color:#333;
643 box-shadow: none;
644 padding: 0;
645 margin: 0;
646 }
647
648 .popover-content .flex-popover-content-data .flex-popover-booking-data {
649 margin: 1em 0;
650 text-align: left;
651 font-size: 1.05em;
652 line-height: 1.8em;
653 color: #333;
654 max-width: 100%;
655 word-wrap: break-word;
656 word-wrap: anywhere;
657 }
658 .popover-content .flex-popover-content-data .flex-popover-booking-data span.fieldvalue {
659 background: transparent;
660 padding: 2px 2px;
661 border-radius: 1px;
662 margin:0 0.5em 0 0;
663 word-break: initial;
664 word-wrap: break-word;
665 }
666 .popover-content .flex-popover-content-data .flex-popover-booking-data label {
667 font-weight:600;
668 vertical-align: baseline;
669 }
670 .popover-content .flex-popover-content-data .flex-popover-booking-data * {
671 vertical-align: baseline;
672 line-height: 2em;
673 }
674 /* Notes ***************************************************/
675 .popover-content .flex-popover-content-data .wpbc-popover-booking-notes{
676 margin: 0 0 1em;
677 max-width: 100%;
678 word-break: break-word;
679 background: #fffbef;
680 padding: 5px 10px;
681 font-size: 90%;
682 line-height: 1.9;
683 }
684 /* Dates ***************************************************/
685 .popover-content .flex-popover-content-data .flex-label-dates {
686 display: flex;
687 flex-flow: row wrap;
688 justify-content: flex-start;
689 align-items: flex-start;
690 }
691 .popover-content .flex-popover-content-data .flex-label-dates .flex-label.field-booking-date{
692 flex:0 1 auto;
693 font-size: 103%;
694 padding: 0.1em .7em 0.1em;
695 margin: 0 0 0.2em;
696 }
697 .popover-content .flex-popover-content-data .flex-label-dates .date_tire{
698 flex:0 1 auto;
699 margin: 0 0.2em;
700 font-size: 175%;
701 line-height: 1em;
702 }
703 .popover-content .flex-popover-content-data .flex-label-dates .flex-label.field-booking-date .field-booking-time{
704 font-size: 0.7em;
705 font-weight: 400;
706 color:#23282d;
707 }
708 /* Pending Background */
709 .popover-content .flex-popover-content-data .flex-label-dates .flex-label.field-booking-date{
710 background-color: #ed9f0a;
711 color: #fff;
712 box-shadow: 0 0 1px #fde4c9;
713 }
714 /* Approved Background */
715 .popover-content .flex-popover-content-data .flex-label-dates .flex-label.field-booking-date.approved{
716 background-color: #64aa45;
717 color: #f7fff4;
718 box-shadow: 0 0 1px #b8c6b1;
719 }
720 /* HR separator for several bookings in popover */
721 .popover-content .wpbc_tl_popover_booking_separator {
722 margin: 20px 0;
723 border-top: 1px solid #ddd;
724 box-shadow: 0 1px 1px #f9f9f9;
725 }
726 /* == SKIN ============================================================================================================= */
727 /* ===================================================================================================================== */
728 /* Timeline Main Container */
729 .flex_tl_table {
730 background: #fff;
731 border: 0px solid #ddd;
732 box-shadow: 0 0 0px #eef;
733 font-size:12px;
734 border-radius: 4px 4px 0 0;
735 color: #777;
736 }
737 /* Timeline: Header //FixIn: 9.5.4.6 */
738 .flex_tl_table .flex_tl_table_header{
739 /*background: #e9e9e9;*/
740 background: transparent;
741 border-bottom: 1px solid #dfdfdf;
742 font-size: 15px;
743 font-weight: 600;
744 color: #606060;
745 text-shadow:none;
746 line-height: 3em;
747 height:3em;
748 overflow: hidden;
749 padding-left:1em;
750 border-radius: 4px 4px 0 0;
751 }
752 .wpbc_timeline_front_end .flex_tl_table .flex_tl_table_header{
753 padding:0 2px;
754 }
755 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_1,
756 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2{
757 font-weight: 600;
758 padding: 8px;
759 line-height: 1.42857143em;
760 }
761 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2{
762 text-align: center;
763 }
764
765 /**********************************************************************************************************************/
766 /* Ajax Navigation TOP menu */
767 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 .flex_tl_nav .flex_tl_title{
768 color:#777;
769 }
770 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 .flex_tl_nav .flex_tl_prev,
771 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 .flex_tl_nav .flex_tl_next{
772 font-size: 22px;
773 font-weight: 600;
774 line-height: 12px;
775 color:#777;
776 }
777 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 .flex_tl_nav .flex_tl_prev a,
778 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 .flex_tl_nav .flex_tl_next a,
779 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 .flex_tl_nav .flex_tl_prev a:hover,
780 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 .flex_tl_nav .flex_tl_next a:hover {
781 text-decoration: none;
782 color: #757575;
783 cursor: pointer;
784 }
785 /**********************************************************************************************************************/
786 /* Booking Rows - background colors */
787 .flex_tl_table .flex_tl_table_row_bookings {
788 border-top: 1px solid #dddddd;
789 }
790 .flex_tl_table .flex_tl_table_row_bookings:nth-of-type(2n+1) {
791 background-color: #fff;
792 }
793 /**********************************************************************************************************************/
794 /* 1st C o l u m n */
795 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_1,
796 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 {
797 font-weight: 600;
798 padding: 4px;
799 line-height: 1.42857143em;
800 box-shadow: none;
801 padding:0 0 0 4px;
802 }
803 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_row_height {
804 display: flex;
805 flex-flow: row nowrap;
806 justify-content: flex-start;
807 align-items: center;
808 }
809 /* Booking resources Titles*/
810 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_1,
811 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title{
812 font-weight: 400;
813 overflow: hidden;
814 white-space: nowrap;
815 text-overflow: ellipsis;
816 }
817 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title {
818 padding-left: 8px;
819 font-size: 0.95em;
820 }
821 /**********************************************************************************************************************/
822 /* Booking resources Links */
823 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title a {
824 border-bottom: 0 dashed;
825 color: var( --wpbc_timeline-gen__text-color, #555 );
826 text-decoration: none;
827 text-shadow: none;/*0 -1px 0 #EEEEEE;*/
828 margin: 0 0 0 2px;
829 box-shadow: none;
830 outline: none;
831 text-decoration: none;
832 }
833 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title a:hover,
834 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title a:focus,
835 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title a:active{
836 text-decoration: underline;
837 text-decoration-style: dashed;
838 text-decoration-thickness: 1px;
839 text-underline-offset: 3px;
840 }
841
842 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title.parent {
843 font-weight: 600;
844 }
845 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title.child {
846 margin-left: 20px;
847 }
848 /**********************************************************************************************************************/
849 /* 2nd C o l u m n - T i t l e D a t e s B a r - .flex_tl_table_titles */
850 /**********************************************************************************************************************/
851 /* TITLE - Header "Dates number" or Times header Row */
852 .flex_tl_single_resource .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar_month,
853 .flex_tl_single_resource.flex_frame_view_days_num_30 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_time_section_in_day,
854 .flex_tl_matrix_resources.flex_frame_view_days_num_1 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar{
855 display: none;
856 }
857 .flex_tl_matrix_resources.flex_frame_view_days_num_1 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar_month {
858 display: flex;
859 }
860
861 .flex_tl_matrix_resources.flex_frame_view_days_num_1 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar{
862 display: none;
863 }
864 .flex_tl_matrix_resources.flex_frame_view_days_num_1 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar_month {
865 display: flex;
866 }
867
868
869
870 /* Header "Dates number" Cell */
871 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell {
872 border-left:1px solid #eee;
873 }
874 /* Vertical Red line of new month */
875 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_booking_titles .flex_tl_day_cell.new_month,
876 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_matrix_resources .flex_tl_day_cell.new_month{
877 border-left: 1px solid #c32;
878 }
879 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell.new_month .in_cell_date_container{
880 border-left:2px solid var( --wpbc_timeline-new-month-border-color );
881 }
882 /* Weekend Days */
883 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell.flex_tl_weekday6,
884 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell.flex_tl_weekday7,
885 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell.flex_tl_weekday6 a,
886 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell.flex_tl_weekday7 a{
887 color: #c32;
888 background: #fff;
889 }
890 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell.flex_tl_weekday6 .in_cell_date_container_show_dates,
891 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell.flex_tl_weekday7 .in_cell_date_container_show_dates{
892 color: #c32;
893 background: #fff;
894 }
895 /* Header "Top Dates Line" */
896 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell a,
897 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell a:hover{
898 color: var( --wpbc_timeline-gen__text-color, #555 );
899 text-decoration: none;
900 /*text-shadow: 0 -1px 0 #EEEEEE;*/
901 outline: 0;
902 flex: 0 0 auto;
903 width: auto;
904 align-self: center;
905 padding: 2px 5px;
906 }
907 /**********************************************************************************************************************/
908 /* "Top Month Line" - in - T i t l e D a t e s B a r */
909 .flex_tl_single_resource .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar_month { /* //FixIn: 9.5.4.6 */
910
911 }
912 /* Month Title in Matrix for 1 Day View (times timeline) */
913 .flex_tl_matrix_resources.flex_frame_view_days_num_1 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar_month {
914 height: 100%;
915 font-size: 18px;
916 text-align: center;
917 }
918 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar_month {
919 border-bottom:1px solid #eee;
920 border-left:1px solid #eee;
921 }
922 /* Header "Month Name" Cell */
923 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_month_year {
924 color: #c32;
925 font-size: 0.85em;
926 font-weight: 600;
927 padding:0 0.5em;
928 }
929 /**********************************************************************************************************************/
930 /* "Time Slots" - in - T i t l e D a t e s B a r */
931 .flex_tl_matrix_resources .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar,
932 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_time_section_in_day {
933 /*display: none;*/
934 }
935 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_time_section_in_day .in_cell_time_hour {
936 border-left:1px solid #eee;
937 border-top:1px solid #eee;
938
939 display: flex;
940 justify-content:flex-start;
941 align-items: center;
942 padding: 0 0 0 2px;
943
944 white-space: nowrap;
945 overflow: hidden;
946 min-height: 12px;
947
948 font-size: 0.8em;
949 font-weight: 600;
950 }
951 /* Date Number during showing 1 day */
952 .flex_tl_matrix_resources.flex_frame_view_days_num_1 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container .in_cell_day_num,
953 .flex_tl_single_resource.flex_frame_view_days_num_30 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container .in_cell_day_num{
954 /*font-size: 0.85em;*/
955 /*font-weight:600;*/
956 /*text-align: left;*/
957 /*padding: 0 1em;*/
958 }
959 /**********************************************************************************************************************/
960 /* Dates in First Column during single resource view mode */
961 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container .flex_tl_resource_title_dates_days.flex_tl_weekday6,
962 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container .flex_tl_resource_title_dates_days.flex_tl_weekday7,
963 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container .flex_tl_resource_title_dates_weeks.flex_tl_weekday6,
964 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_1 .flex_tl_resource_title_dates_container .flex_tl_resource_title_dates_weeks.flex_tl_weekday7{
965 color: #bd7f78;
966 }
967 /**********************************************************************************************************************/
968 /* B o o k i n g s R o w - B o o k i n g s D a t e s B a r - .flex_tl_table_row_bookings */
969 /**********************************************************************************************************************/
970 /* Header "Dates number" Row */
971 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar {
972
973 }
974 /* Header "Dates number" Cell */
975 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell {
976 border-left:1px solid #f1f1f1;
977 color: var( --wpbc_timeline-gen__text-color, #555 );
978 font-weight: 400;
979 font-size: 10px;
980 text-shadow: none;
981 }
982 /* New Month */
983 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell.new_month .in_cell_time_hour:first-child .in_cell_date_container{
984 border-left:2px solid var( --wpbc_timeline-new-month-border-color );
985 }
986 /* Cross months - booking on 1st day of some month */
987 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell.new_month.exist_booking_in_cell .in_cell_time_hour:first-child .in_cell_date_container{
988 border-left:1px solid var( --wpbc_timeline-new-month-border-color );
989 }
990 /**********************************************************************************************************************/
991 /* B o o k i n g C e l l */
992 /**********************************************************************************************************************/
993 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id{
994 background: none repeat scroll 0 0 #FC4;
995 margin-left: -1px; /* Hide White 1px border in Cells in booking pipeline */
996 margin-top:2px;
997 margin-bottom:3px;
998 }
999 /* Show several time slot bookings //FixIn: 10.5.0.1*/
1000 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings.in_cell_date_container_has_several_bookings .booking_id{
1001 margin-top:0.2px;
1002 margin-bottom:0.3px;
1003 }
1004 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings.in_cell_date_container_has_several_bookings .booking_id:first-child{
1005 margin-top:2px;
1006 }
1007 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings.in_cell_date_container_has_several_bookings .booking_id:last-child{
1008 margin-bottom:3px;
1009 }
1010 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings.in_cell_date_container_has_several_bookings .booking_id.start_new_booking {
1011 border-radius: 0;
1012 }
1013 /* Start New Booking */
1014 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.start_new_booking{
1015 border-left: 2px solid var(--wpbc_timeline-booking-pending-border-color, #68362e);
1016 border-radius:3px 0 0 3px;
1017 }
1018 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking {
1019 background-color: #78A;
1020 }
1021 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking.start_new_booking{
1022 border-color: var(--wpbc_timeline-booking-approved-border-color, #2b4421);
1023 }
1024 /* Bookings in a Past*/
1025 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.past_date{
1026 background-color:#f0cf77;
1027 }
1028 /* Bookings in a Past Approved */
1029 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking.past_date{
1030 background-color:#9099aa;
1031 }
1032 /* Trash Booking */
1033 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.start_new_booking.booking_trash {
1034 border-left:2px solid #901c1a;
1035 }
1036 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.booking_trash {
1037 background-color:#DB6F6D;
1038 }
1039 /** T O D A Y ******************************************************************/
1040 /* Today Background for DAYS */
1041 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_dates .flex_tl_day_cell.today_date .in_cell_time_section_in_day{
1042 /*background-color: #efc;*/
1043 }
1044 /* Today Border for DAYS */
1045 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_booking_titles .flex_tl_day_cell.today_date .in_cell_time_section_in_day{
1046 border-left: 1px solid #090;
1047 }
1048 /* Disasable Today Border for DAYS in 1 day view mode */
1049 .flex_timeline_frame.flex_frame_view_days_num_30.flex_tl_single_resource
1050 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_booking_titles .flex_tl_day_cell.today_date .in_cell_time_section_in_day,
1051 .flex_timeline_frame.flex_frame_view_days_num_1.flex_tl_matrix_resources
1052 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_booking_titles .flex_tl_day_cell.today_date .in_cell_time_section_in_day{
1053 border-left: none;
1054 }
1055 /* Today Border for Hours in 1 day view mode */
1056 .flex_timeline_frame.flex_frame_view_days_num_30.flex_tl_single_resource
1057 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_booking_titles .flex_tl_day_cell .in_cell_time_section_in_day .in_cell_time_hour.today_time,
1058 .flex_timeline_frame.flex_frame_view_days_num_1.flex_tl_matrix_resources
1059 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar.flex_tl_row_bar_show_booking_titles .flex_tl_day_cell .in_cell_time_section_in_day .in_cell_time_hour.today_time {
1060 border-left: 1px solid #77ce0f;
1061 }
1062
1063 /********************************************************************************/
1064 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id a {
1065 font-size:7px;
1066 font-weight:600;
1067 color:#fff;
1068 cursor: pointer;
1069 }
1070 /* Show Booking Titles ***************************/
1071 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_booking_titles .in_cell_date_booking_title{
1072 background: #777;
1073 color: #fff;
1074 border-left: 2px solid #555;
1075 cursor: pointer;
1076 border-radius: 3px;
1077 }
1078 /* Title for Several bookings in cell */
1079 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_booking_titles .in_cell_date_booking_title.several_bookings_in_cell{
1080 font-weight: 600;
1081 background: #faf9f8;
1082 color: #455366;
1083 border-left: 2px solid var(--wpbc_timeline-booking-pending-border-color, #68362e);
1084 }
1085 /* Show Times in Cells during 1 day view mode */
1086 .flex_timeline_frame.flex_frame_view_days_num_30.flex_tl_single_resource
1087 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_dates,
1088 .flex_timeline_frame.flex_frame_view_days_num_1.flex_tl_matrix_resources
1089 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_dates{
1090 border-left:1px solid #eee;
1091 border-top:1px solid #eee;
1092
1093 font-size:0.8em;
1094 word-wrap: normal;
1095 white-space: nowrap;
1096 overflow: hidden;
1097 padding:0 2px;
1098 }
1099
1100 /* Calendar Overview - New simple Header 2024-04-11 //FixIn: 10.0.0.25 */
1101 .wpbc_calendar_overview__header {
1102 position: relative;
1103 width: 100%;
1104 }
1105
1106 .wpbc_calendar_overview__header .nav-tabs {
1107 box-shadow: 0 3px 8px #eaeaea;
1108 border-bottom: 1px solid #e3e3e3;
1109 display: flex;
1110 flex-flow: row wrap;
1111 justify-content: flex-start;
1112 align-items: center;
1113 }
1114
1115 .wpbc_calendar_overview__header .wpbc_calendar_overview__navigation {
1116 display: flex;
1117 flex-flow: row wrap;
1118 justify-content: flex-end;
1119 align-items: center;
1120 margin-left: auto;
1121 margin-right: 5px;
1122 margin-top: 4px;
1123 margin-bottom: 4px;
1124 }
1125
1126 .wpbc_calendar_overview__container {
1127 padding: 0px 1px 0;
1128 margin-top: 0px;
1129 border: 1px solid #d5d5d5;
1130 background: #fff;
1131 font-size: 13px;
1132 border-radius: 0 0 3px 3px;
1133 box-shadow: 0 0px 8px #dadada;
1134 margin-bottom: 25px;
1135 }
1136
1137
1138 .wpbc_calendar_overview__container .flex_tl_table {
1139 border-radius: 0;
1140 border-top: none;
1141 font-size: 13px;
1142 }
1143
1144 /* == 2024-07-26 =================================================================================================== */
1145 .flex_tl__scrolling_sections {
1146 display: flex;
1147 flex-flow: row nowrap;
1148 justify-content: flex-start;
1149 align-items: flex-start;
1150
1151 overflow-y: auto;
1152 scrollbar-width: thin;
1153 /*max-height: calc(100vh - 250px);*/
1154 }
1155 .flex_tl__scrolling_sections .flex_tl__scrolling_section1{
1156 width: 220px;
1157 overflow-x: auto;
1158 scrollbar-width: thin;
1159 box-shadow: 0 0 10px 1px #00000025;
1160 z-index: 1;
1161 padding: 0;
1162 }
1163 .flex_tl__scrolling_sections .flex_tl__scrolling_section1 > div {
1164 flex: 0 1 180px;
1165 /*border-right: 1px solid #dfdfdf;*/
1166 }
1167 .flex_tl__scrolling_sections .flex_tl__scrolling_section1 > div.flex_tl_table_titles{
1168 /*border-right: 1px solid transparent;*/
1169 }
1170 .flex_tl__scrolling_sections .flex_tl__scrolling_section2 {
1171 flex: 1 1 100%;
1172 overflow-x: auto;
1173 scrollbar-width: thin;
1174 }
1175 /* 1 D */
1176 .flex_tl_single_resource.flex_frame_view_days_num_30 .flex_tl__scrolling_sections .flex_tl__scrolling_section2 .flex_tl_row_max_width{
1177 min-width: 900px;
1178 }
1179 /* 1 W */
1180 .flex_tl_single_resource.flex_frame_view_days_num_90 .flex_tl__scrolling_sections .flex_tl__scrolling_section2 .flex_tl_row_max_width{
1181 min-width: 350px;
1182 }
1183 /* 1 Y */
1184 .flex_tl_single_resource.flex_frame_view_days_num_365 .flex_tl__scrolling_sections .flex_tl__scrolling_section2 .flex_tl_row_max_width{
1185 min-width: 1400px;
1186 }
1187 /* 1 D */
1188 .flex_tl_matrix_resources.flex_frame_view_days_num_1 .flex_tl__scrolling_sections .flex_tl__scrolling_section2 .flex_tl_row_max_width{
1189 min-width: 900px;
1190 }
1191 /* 1 W */
1192 .flex_tl_matrix_resources.flex_frame_view_days_num_7 .flex_tl__scrolling_sections .flex_tl__scrolling_section2 .flex_tl_row_max_width{
1193 min-width: 300px;
1194 }
1195 /* 1 M */
1196 .flex_tl_matrix_resources.flex_frame_view_days_num_30 .flex_tl__scrolling_sections .flex_tl__scrolling_section2 .flex_tl_row_max_width{
1197 min-width: 1400px;
1198 }
1199 /* 2 M */
1200 .flex_tl_matrix_resources.flex_frame_view_days_num_60 .flex_tl__scrolling_sections .flex_tl__scrolling_section2 .flex_tl_row_max_width{
1201 min-width: 2800px;
1202 }
1203
1204 /* Headers Height */
1205 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_1,
1206 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_1,
1207 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2,
1208 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2{
1209 height: var(--wpbc_timeline-single-row-header-height);
1210 overflow: hidden;
1211 }
1212 .flex_tl_matrix_resources {
1213 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_1,
1214 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_1,
1215 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2,
1216 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2{
1217 height: var(--wpbc_timeline-matrix-row-header-height);
1218
1219 }
1220 }
1221 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2,
1222 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2{
1223 display: flex;
1224 flex-flow: column nowrap;
1225 justify-content: flex-start;
1226 align-items: stretch;
1227 }
1228 .flex_tl_table .flex_tl_table_header .flex_tl_collumn_2 > div,
1229 .flex_tl_table .flex_tl_table_titles .flex_tl_collumn_2 > div{
1230 flex:1 1 100%;
1231 }
1232
1233 /* Add Transparency and Redefine Colors */
1234 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id {
1235 opacity: 0.8;
1236 }
1237 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.start_new_booking {
1238 border-left: 2px solid var(--wpbc_timeline-booking-pending-border-color, #68362e);
1239 }
1240 /* == Bookings Colors ================================================================================================= */
1241 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id {
1242 background: none repeat scroll;
1243 background-color: var(--wpbc_timeline-booking-pending-color);
1244 }
1245 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking {
1246 background-color: var(--wpbc_timeline-booking-approved-color);
1247 }
1248 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.past_date {
1249 background-color: var(--wpbc_timeline-past-booking-pending-color);
1250 }
1251 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking.past_date {
1252 background-color: var(--wpbc_timeline-past-booking-approved-color);
1253 }
1254 /* == Check In / Out ================================================================================================= */
1255 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.booking_change_over {
1256 border:none;
1257 height: calc(100% - 5px);
1258 position: absolute;
1259
1260 width: calc( 100% + 1px );
1261 margin: 0 -1px;
1262 margin-top: 2px;
1263 }
1264 /* pending check in/out */
1265 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.booking_check_in {
1266 background: linear-gradient(to bottom right, #fff0 0%, #fff0 50%, var( --wpbc_timeline-booking-pending-border-color ) 50%, var( --wpbc_timeline-booking-pending-border-color ) 52%, var( --wpbc_timeline-booking-pending-color ) 52%, var( --wpbc_timeline-booking-pending-color ) 100%);
1267 border-bottom:1px solid;
1268 }
1269 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.booking_check_out {
1270 background: linear-gradient(to top left, #fff0 0%, #fff0 50%, var( --wpbc_timeline-booking-pending-color ) 50%, var( --wpbc_timeline-booking-pending-color ) 100%);
1271 border-top:1px solid;
1272 }
1273 /* Approved check in/out */
1274 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking.booking_check_in {
1275 background: linear-gradient(to bottom right, #fff0 0%, #fff0 50%, var( --wpbc_timeline-booking-approved-border-color ) 50%, var( --wpbc_timeline-booking-approved-border-color ) 52%, var( --wpbc_timeline-booking-approved-color ) 52%, var( --wpbc_timeline-booking-approved-color ) 100%);
1276 }
1277 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking.booking_check_out {
1278 background: linear-gradient(to top left, #fff0 0%, #fff0 50%, var( --wpbc_timeline-booking-approved-color ) 50%, var( --wpbc_timeline-booking-approved-color ) 100%);
1279 }
1280 /* :: PAST :: Bookings */
1281 /* pending check in/out */
1282 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.booking_check_in.past_date {
1283 background: linear-gradient(to bottom right, #fff0 0%, #fff0 50%, var( --wpbc_timeline-booking-pending-border-color ) 50%, var( --wpbc_timeline-booking-pending-border-color ) 52%, var( --wpbc_timeline-past-booking-pending-color ) 52%, var( --wpbc_timeline-past-booking-pending-color ) 100%);
1284 }
1285 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.booking_check_out.past_date {
1286 background: linear-gradient(to top left, #fff0 0%, #fff0 50%, var( --wpbc_timeline-past-booking-pending-color ) 50%, var( --wpbc_timeline-past-booking-pending-color ) 100%);
1287 }
1288 /* Approved check in/out */
1289 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking.booking_check_in.past_date {
1290 background: linear-gradient(to bottom right, #fff0 0%, #fff0 50%, var( --wpbc_timeline-booking-approved-border-color ) 50%, var( --wpbc_timeline-booking-approved-border-color ) 52%, var( --wpbc_timeline-past-booking-approved-color ) 52%, var( --wpbc_timeline-past-booking-approved-color ) 100%);
1291 }
1292 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_bookings .booking_id.approved_booking.booking_check_out.past_date {
1293 background: linear-gradient(to top left, #fff0 0%, #fff0 50%, var( --wpbc_timeline-past-booking-approved-color ) 50%, var( --wpbc_timeline-past-booking-approved-color ) 100%);
1294 }
1295
1296 /* == Dates Font Size ================================================================================================= */
1297
1298 /* Booking Title Size */
1299 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_booking_titles .in_cell_date_booking_title {
1300 font-size:10px;
1301 }
1302 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_booking_titles .in_cell_date_booking_title:hover,
1303 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_booking_titles .in_cell_date_booking_title:active,
1304 .flex_tl_table .flex_tl_table_row_bookings .flex_tl_collumn_2 .flex_tl_dates_bar .flex_tl_day_cell .in_cell_date_container_show_booking_titles .in_cell_date_booking_title:focus{
1305 outline: 0;
1306 box-shadow: 0 0 0 2px #a6bbe5;
1307 box-shadow: 0 0 4px -1px #000;
1308 text-decoration-style: dashed;
1309 text-decoration-thickness: 0px;
1310 text-underline-offset: 2px;
1311 }
1312
1313 /* Transparent Big Nav Buttons in Calendar Overview page FixIn: 2024-08-06 ============================ */
1314 .wp-core-ui .wpbc_page .wpbc_calendar_overview__navigation .wpbc_button_no_background {
1315 background: transparent;
1316 border: none !important;
1317 box-shadow: none !important;
1318 color:var( --wpbc_timeline-gen__text-color, #555 );
1319 }
1320 .wp-core-ui .wpbc_page .wpbc_calendar_overview__navigation .wpbc_button_no_background .menu_icon:before {
1321 font-size: 19px;
1322 }
1323 .wp-core-ui .wpbc_page .wpbc_calendar_overview__navigation .wpbc_button_no_background {
1324 line-height: 2.5;
1325 }
1326 /* ================================================================================================================= */