PluginProbe
Booking Calendar / 10.11.3
Booking Calendar v10.11.3
11.8.4 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 All 204 releases
booking / core / timeline / v2 / _src / timeline_v2.1.css

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

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