pcm-shared-components 2.0.14 → 2.0.16

package/dist/components/Platform/PlatformPaymentPlans/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
@@ -26,7 +25,6 @@ const platformPricingIcons = [mdiShimmer, mdiFire, mdiTorch];
  ```
  * 
  */
-
 export const PlatformPaymentPlans = props => {
   const {
     currentlySelectedPlatformPricingModelId,
@@ -42,22 +40,25 @@ export const PlatformPaymentPlans = props => {
   } = props;
   const planTypeDescriptions = [i18next.t('platform_plan_feature.plan_type_descriptions.free'), i18next.t('platform_plan_feature.plan_type_descriptions.standard'), i18next.t('platform_plan_feature.plan_type_descriptions.premium')];
   const compTheme = theme ? theme : useTheme();
-  const defaultTheme = createTheme(compTheme); //---------------------------------------------------
+  const defaultTheme = createTheme(compTheme);
+
+  //---------------------------------------------------
   // Hooks 
   //---------------------------------------------------
-
   const [selectedBillingPeriod, setSelectedBillingPeriod] = useState();
   const [hasMonthlyAndYearlyBillingPeriod, setHasMonthlyAndYearlyBillingPeriod] = useState(false);
-  const [showMoreInfo, setShowMoreInfo] = useState(false); //---------------------------------------------------
+  const [showMoreInfo, setShowMoreInfo] = useState(false);
+
+  //---------------------------------------------------
   // Use Effect 
   //---------------------------------------------------
-
   useEffect(() => {
     getUniqueBillingPeriodIds();
-  }, []); //---------------------------------------------------
+  }, []);
+
+  //---------------------------------------------------
   // Local Functions 
   //---------------------------------------------------
-
   const getUniqueBillingPeriodIds = () => {
     //Returns an array with the unique ids that we have for the billing_period_id.
     //This will allow us to determine if we need to display the monthly/yearly toggle button and which billing period id to use as the default
@@ -68,11 +69,11 @@ export const PlatformPaymentPlans = props => {
     } catch (error) {
       console.error(error);
     }
-  }; //---------------------------------------------------
+  };
+
+  //---------------------------------------------------
   // Local Component 
   //---------------------------------------------------
-
-
   const PlatformFeatureIcon = ({
     active = true
   }) => {
@@ -83,7 +84,6 @@ export const PlatformPaymentPlans = props => {
       }
     });
   };
-
   const NewPlatformFeatureIcon = ({
     active = true
   }) => {
@@ -95,7 +95,6 @@ export const PlatformPaymentPlans = props => {
       }
     });
   };
-
   const PlatformFeatureText = ({
     text = ''
   }) => {
@@ -106,7 +105,6 @@ export const PlatformPaymentPlans = props => {
       }
     }, text);
   };
-
   const PlatformListItem = ({
     active = true,
     text = '',
@@ -124,7 +122,6 @@ export const PlatformPaymentPlans = props => {
       text: text
     }));
   };
-
   const PriceCard = props => {
     const {
       id = -1,
@@ -132,7 +129,6 @@ export const PlatformPaymentPlans = props => {
       platform_plan_type_id = 1,
       billing_period_id = 1
     } = props;
-
     const handlePlanSelection = id => {
       try {
         let selectedPlatform = platformPricingModels.find(pricing_model => Number(pricing_model.id) === Number(id));
@@ -141,7 +137,6 @@ export const PlatformPaymentPlans = props => {
         console.error(error);
       }
     };
-
     return /*#__PURE__*/React.createElement("div", {
       className: "mx-0 px-4 w-full max-w-full md:max-w-288 bg-white rounded-lg drop-shadow hover:drop-shadow-2xl sm:p-8 border-t-8 transition-all ",
       style: {
@@ -211,7 +206,6 @@ export const PlatformPaymentPlans = props => {
       key: `list_item_${billing_period_id}_${plan.platform_plan_type_id}_${plan.feature_key}`
     })))));
   };
-
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement("div", {
@@ -260,31 +254,22 @@ PlatformPaymentPlans.defaultProps = {
 PlatformPaymentPlans.propTypes = {
   /** This is the platform tier 0=free 1=paying customer.  If the campground is on a free tier then we will display a grandfather free cause you lucky dog. */
   platformTier: PropTypes.oneOf([0, 1]),
-
   /** This is the current plan that is being used by the campground.  The platform button won't be enable and the text on the button will say Current so the user knows on which plan they currently are on. */
   currentlySelectedPlatformPricingModelId: PropTypes.any,
-
   /** This is the label that appears on the select platform button */
   selectPlatformButtonLabel: PropTypes.string,
-
   /** Toggles the view for the buttons on the platform cards */
   showSelectPlatformButton: PropTypes.bool,
-
   /** Displays the save up to image above the yearly toggle */
   saveYearlyImgPath: PropTypes.string,
-
   /** This is the platform features that are activated for each pricing model tier */
   platformPlanFeatures: PropTypes.array,
-
   /** This is the individual pricing models that are offered to our clients */
   platformPricingModels: PropTypes.array.isRequired,
-
   /** Callback when a plan is selected.  Returns the selected platform pricing model object. */
   onClickPlanSelection: PropTypes.func,
-
   /** i18next localization to use for the component. Don't use the library localization or else it won't load properly on the consuming application */
   i18next: PropTypes.any,
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used */
   theme: PropTypes.object
 };

package/dist/components/Platform/PlatformPlanPrices/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
+
 /**
  * ## Importing the component in your project
  * 
@@ -12,7 +13,6 @@ import { createTheme, useTheme } from '@mui/material/styles';
  ```
  * 
  */
-
 export const PlatformPlanPrices = props => {
   const {
     billing_period_id,
@@ -26,7 +26,8 @@ export const PlatformPlanPrices = props => {
   } = props;
   const compTheme = theme ? theme : useTheme();
   const defaultTheme = createTheme(compTheme);
-  const MONTHLY_BILLING_PERIOD = 1; // const YEARLY_BILLING_PERIOD = 2;
+  const MONTHLY_BILLING_PERIOD = 1;
+  // const YEARLY_BILLING_PERIOD = 2;
 
   const PriceDescription = props => {
     const {
@@ -54,7 +55,6 @@ export const PlatformPlanPrices = props => {
       className: "leading-none ml-1 text-base font-600 "
     }, "/", description));
   };
-
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement("div", {
@@ -88,25 +88,18 @@ PlatformPlanPrices.defaultProps = {
 PlatformPlanPrices.propTypes = {
   /** This is the billing period types 1=monthly, 2=yearly*/
   billing_period_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** This is the monthly fee we are charging*/
   monthly_fee: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** This is the per reservation fee we are charging*/
   per_reservation_fee: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** This is the expected monthly fee, used to simulate what should be the expected price such as a discount*/
   expected_monthly_fee: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** This is the expected per reservation fee, used to simulate what should be the expected price such as a discount*/
   expected_per_reservation_fee: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** This is the color of the plan*/
   color: PropTypes.string,
-
   /** i18next localization to use for the component. Don't use the library localization or else it won't load properly on the consuming application */
   i18next: PropTypes.any,
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used */
   theme: PropTypes.object
 };

package/dist/components/Platform/PlatformPlanTitles/index.js

@@ -15,7 +15,6 @@ const platformPricingIcons = [mdiShimmer, mdiFire, mdiTorch];
  ```
  * 
  */
-
 export const PlatformPlanTitles = props => {
   const {
     platform_plan_type_id,
@@ -59,19 +58,14 @@ PlatformPlanTitles.defaultProps = {
 PlatformPlanTitles.propTypes = {
   /** This is the platform plan type id, we should only ever have three types 1=free, 2=standard, 3=premium*/
   platform_plan_type_id: PropTypes.any,
-
   /** This is the color of the plan*/
   color: PropTypes.string,
-
   /** This is the Title*/
   name: PropTypes.string,
-
   /** This is the Sub Title*/
   sub_name: PropTypes.string,
-
   /** i18next localization to use for the component. Don't use the library localization or else it won't load properly on the consuming application */
   i18next: PropTypes.any,
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used */
   theme: PropTypes.object
 };

package/dist/components/Sandbox/ScrollingInnerDiv/index.js

@@ -2,10 +2,9 @@ import { height } from '@mui/system';
 import React from 'react';
 import ImageCanvasDraw from '../../Drawing/ImageCanvasDraw';
 import { cedarShade } from '../../Drawing/ImageCanvasDraw/storybook/testMap.test';
-import Grid from '@mui/material/Grid'; // import './example2.css';
-
+import Grid from '@mui/material/Grid';
+// import './example2.css';
 import PCMScrollbar from '../../Tools/PCMScrollbar';
-
 const ScrollingColumns = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
   className: "flex flex-col border-2 absolute top-0 bottom-0 left-0 right-0"
 }, /*#__PURE__*/React.createElement("div", null, "some content here... some content here... some content here..."), /*#__PURE__*/React.createElement("div", {
@@ -21,9 +20,7 @@ const ScrollingColumns = () => /*#__PURE__*/React.createElement(React.Fragment,
     backgroundColor: "lightblue"
   }
 }, /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2"), /*#__PURE__*/React.createElement("h1", null, "Column 2")))));
-
 const ScrollingInnerDiv = () => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, "Something here", /*#__PURE__*/React.createElement(ScrollingColumns, null));
 };
-
 export default ScrollingInnerDiv;

package/dist/components/TextBoxes/CurrencyTextInput/index.js

@@ -8,6 +8,7 @@ import Input from '@mui/material/Input';
 import { InputAdornment } from '@mui/material';
 import TextField from '@mui/material/TextField';
 let debounce;
+
 /**
  * ## Importing the component in your project
  * 
@@ -18,7 +19,6 @@ let debounce;
  ```
  * 
  */
-
 export const CurrencyTextInput = props => {
   const {
     id,
@@ -44,10 +44,11 @@ export const CurrencyTextInput = props => {
     theme
   } = props;
   const compTheme = theme ? theme : useTheme();
-  const defaultTheme = createTheme(compTheme); //---------------------------------------------------
+  const defaultTheme = createTheme(compTheme);
+
+  //---------------------------------------------------
   // Functions used to sanitize the number 
   //---------------------------------------------------
-
   const sanitizeDecimalDots = value => {
     //Ensures we only have one decimal dot in our number
     try {
@@ -55,30 +56,27 @@ export const CurrencyTextInput = props => {
     } catch (error) {
       console.error(error);
     }
-
     return value;
   };
-
   const sanitizeDigits = value => {
     //Ensures we only have digits in our number
     try {
       //Allow normal numbers, negative number and dots
       const isNegativeNumber = value[0] === '-';
       let returnVal = String(value).replace(/[^\d.]/gi, '');
-      return `${isNegativeNumber ? '-' : ''}${returnVal}`; //Only allow numbers and dots
+      return `${isNegativeNumber ? '-' : ''}${returnVal}`;
+
+      //Only allow numbers and dots
       // return String(value).replace(/[^\d.]/gi, '');
     } catch (error) {
       console.error(error);
     }
-
     return value;
   };
-
   const sanitizeDecimalPlaces = value => {
     try {
       // Only apply this rule if we have a decimal place with something in it or else skip because it's causing inconsistent number formatting when entering the digits
       const decimalCheck = String(value).split('.');
-
       if (decimalCheck.length === 2 && decimalCheck[1].length > 0) {
         return Number(value).toLocaleString(undefined, {
           minimumFractionDigits: Number(decimalPlaces) > 0 ? 1 : 0,
@@ -89,17 +87,14 @@ export const CurrencyTextInput = props => {
     } catch (error) {
       console.error(error);
     }
-
     return value;
   };
-
   const sanitizeMinMaxValues = value => {
     try {
       if (!isNaN(value)) {
         if (Number(value) > maximumValue) {
           return maximumValue;
         }
-
         if (Number(value) < minimumValue) {
           return minimumValue;
         }
@@ -107,21 +102,17 @@ export const CurrencyTextInput = props => {
     } catch (error) {
       console.error(error);
     }
-
     return value;
   };
-
   const sanitizeThousandPlaces = value => {
     try {
       // Only apply the thousand grouping on the numbers before the decimal
       if (useThousandSeparator && !isNaN(value)) {
         const digits = String(value).split('.');
-
         if (digits[0].length > 0) {
           const thousandFormatted = Number(digits[0]).toLocaleString(undefined, {
             useGrouping: true
           });
-
           if (digits.length === 2) {
             //Let's keep any additional DOT and decimal places even if they are empty
             return `${thousandFormatted}.${digits[1]}`;
@@ -133,13 +124,10 @@ export const CurrencyTextInput = props => {
     } catch (error) {
       console.error(error);
     }
-
     return value;
   };
-
   const handleCurrencyFormatting = value => {
     let returnVal = value;
-
     try {
       returnVal = sanitizeMinMaxValues(returnVal);
       returnVal = sanitizeDecimalDots(returnVal);
@@ -149,16 +137,13 @@ export const CurrencyTextInput = props => {
     } catch (error) {
       console.error(error);
     }
-
     return returnVal;
   };
-
   const handleOnChange = event => {
     //Sanitize the output same as the input
     event.target.value = handleCurrencyFormatting(event.target.value);
     onChange(event);
   };
-
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement(TextField, {
@@ -222,64 +207,44 @@ CurrencyTextInput.defaultProps = {
 CurrencyTextInput.propTypes = {
   /** Unique id of the component */
   id: PropTypes.string,
-
   /** The text color*/
   textColor: PropTypes.string,
-
   /** Name of the target often used to update state*/
   name: PropTypes.string,
-
   /** Value to be enter and display in input */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** The label content*/
   label: PropTypes.string,
-
   /** Controls the look of the text field*/
   variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
-
   /** Determines if the text field will be in an error state*/
   error: PropTypes.bool,
-
   /** Determines if the text field is disabled of not*/
   disabled: PropTypes.bool,
-
   /** Helper text to display below the field*/
   helperText: PropTypes.string,
-
   /** Determines if the text field will be full width or fit content*/
   fullWidth: PropTypes.bool,
-
   /** Determines if the final number grouping will contain the thousand separator */
   useThousandSeparator: PropTypes.bool,
-
   /** Callback fired when the value is changed*/
   onChange: PropTypes.func,
-
   /** Defines the currency symbol string.*/
   currencySymbol: PropTypes.string,
-
   /** Classes to add to the wrapper control*/
   className: PropTypes.string,
-
   /** Controls the font size in in pt example: 14*/
   fontSize: PropTypes.number,
-
   /** Controls the padding around the font */
   textPadding: PropTypes.number,
-
   /** Defines the default number of decimal places to show on the formatted value.*/
   decimalPlaces: PropTypes.number,
-
   /** Maximum value that can be enter*/
   maximumValue: PropTypes.number,
-
   /** Minimum value that can be entered*/
   minimumValue: PropTypes.number,
-
   /** Align the numbers in the textField.*/
   textAlign: PropTypes.oneOf(['left', 'right']),
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/TextBoxes/SearchBar/index.js

@@ -8,6 +8,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import CloseIcon from "@mui/icons-material/Close";
 import clsx from "clsx";
 let searchDebounce;
+
 /**
  * This will allow to add a quick search tool bar to filter out any ui object.
  *
@@ -20,7 +21,6 @@ let searchDebounce;
  ```
  * 
  */
-
 export const SearchBar = props => {
   // Extract the passed down props
   const {
@@ -33,11 +33,13 @@ export const SearchBar = props => {
     showDropdown,
     className,
     theme
-  } = props; //Hooks
+  } = props;
 
-  const [localValue, setLocalValue] = useState(value); // Use the user specified theme passed via the props
-  // OR use the HOC theme passed downed by the parent component if the theme is undefined
+  //Hooks
+  const [localValue, setLocalValue] = useState(value);
 
+  // Use the user specified theme passed via the props
+  // OR use the HOC theme passed downed by the parent component if the theme is undefined
   const componentTheme = createTheme(theme ? theme : useTheme());
   useEffect(() => {
     try {
@@ -116,8 +118,9 @@ export const SearchBar = props => {
     }, /*#__PURE__*/React.createElement(CloseIcon, null))))
   );
 };
-export default SearchBar; // Specifies the default values for the props:
+export default SearchBar;
 
+// Specifies the default values for the props:
 SearchBar.defaultProps = {
   onCancelSearch: () => {},
   onChange: () => {},
@@ -128,33 +131,26 @@ SearchBar.defaultProps = {
   showDropdown: true,
   className: "",
   theme: undefined
-}; // Specifies the types to use for each props:
+};
 
+// Specifies the types to use for each props:
 SearchBar.propTypes = {
   /** Fired when the search is cancelled.  */
   onCancelSearch: PropTypes.func,
-
   /** Fired when the text value changes. Returns the new value */
   onChange: PropTypes.func,
-
   /** Same as onChange except only fires 700ms after the users has completed typing to prevent performance issues. Returns the new value */
   onChangeDebounce: PropTypes.func,
-
   /** Sets placeholder text for the embedded text field. */
   placeholder: PropTypes.string,
-
   /** The value of the text field. */
   value: PropTypes.string,
-
   /** Disables text field.  */
   disabled: PropTypes.bool,
-
   /** Show the dropdown around the text field component  */
   showDropdown: PropTypes.bool,
-
   /** Override or extend the styles applied to the component.  */
   className: PropTypes.string,
-
   /** The manual theme to apply to the component */
   theme: PropTypes.object
 };

package/dist/components/Timelines/ReservationTimelineComponent/components/SearchLotsTextBox.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import TextField from '@mui/material/TextField';
+import i18next from 'i18next';
+const SearchLotsTextBox = props => {
+  const {
+    lot_search,
+    setLotSearch,
+    setFocusOnFilter
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {}
+  }, /*#__PURE__*/React.createElement(TextField, {
+    style: {
+      paddingTop: 12,
+      paddingBottom: 12
+    },
+    id: "lot_filter_search",
+    label: i18next.t('reservation_grid.header.lot_number'),
+    value: lot_search,
+    onChange: e => {
+      setLotSearch(e.target.value);
+    },
+    onClick: () => {
+      setFocusOnFilter({
+        should_focus_on_lot_filter: true
+      });
+      setTimeout(() => {
+        document.getElementById('lot_filter_search').focus();
+      }, 100);
+    }
+  }));
+};
+SearchLotsTextBox.propTypes = {};
+export default /*#__PURE__*/React.memo(SearchLotsTextBox);

package/dist/components/Timelines/ReservationTimelineComponent/components/TimelinePopUp.js

@@ -0,0 +1,11 @@
+import React from 'react';
+const TimelinePopUp = props => {
+  const {
+    res,
+    addNewResOnClick,
+    getTimeDifference,
+    showAddNewReservationButtonInPopup
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, "some popup");
+};
+export default TimelinePopUp;

package/dist/components/Timelines/ReservationTimelineComponent/css/header.css

@@ -0,0 +1,98 @@
+:root {
+    /* Colors */
+    --color-white: #fff;
+    --color-black: #000;
+    --color-border-lightgray: rgba(0, 0, 0, 0.16);
+    --color-lightgray: #f0f3f4;
+    --color-red: #d32f2f;
+  
+    /* Dimensions */
+    --footer-menu-height: 60px;
+  }
+  /* Header */
+  .sticky {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 0;
+    z-index: 2000;
+  }
+  
+  
+  .react-calendar-timeline .rct-header-root {
+    border-bottom: none;
+    font-size: medium;
+    /* box-shadow: var(--color-border-lightgray) 0 0 1rem; */
+    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3); 
+    border: solid 1px var(--color-border-lightgray);
+    border-radius: 5px;
+    text-align: center;
+  }
+  
+  .react-calendar-timeline .rct-header-root{
+    background-color: white;
+  }
+  .left-header{
+    background-color: white !important;
+    justify-items: center;
+    text-align: center;
+    margin:auto;
+    height: 100%;
+    display:inline-block;
+  }
+  
+  .react-calendar-timeline .rct-calendar-header {
+    border: none;
+  }
+  
+  .rct-header-root.undefined {
+    background-color: white;
+  }
+  
+  .react-calendar-timeline .rct-dateHeader {
+    position: relative;
+    pointer-events: none;
+    border: none;
+    /* border-right: dashed 1px rgb(175, 175, 175) !important; */
+    border-bottom:none;
+    border-right:none;
+    background: var(--color-white);
+    font-size: 0.9rem;
+    font-weight: 200;
+    padding-top: 15px;
+  }
+
+  /* creates the half line beside the dates */
+  .rct-dateHeader:after {
+    content : "";
+    position: absolute;
+    right    : 0;
+    z-index: 100;
+    top  : 40%;
+    width  : 3px;
+    height   : 100%;  /* or 100px */
+  /*   background: #555; */
+    border-right: dashed 1px rgb(189, 188, 188)!important
+  }
+  
+  .react-calendar-timeline .rct-dateHeader-primary {
+    color: var(--color-black);
+    padding-right: 2.6rem;
+    text-transform: uppercase;
+  }
+  
+  /* Vertical lines */
+  .react-calendar-timeline .rct-vertical-lines .rct-vl {
+    border-left: dashed 1px #9292923a;
+    /* border-left: none; */
+  }
+  
+  .react-calendar-timeline .rct-vertical-lines .rct-vl:nth-child(odd) {
+    /* background: var(--color-white); */
+  }
+  
+  .react-calendar-timeline .rct-vertical-lines .rct-vl:nth-child(even) {
+    /* background: var(--color-lightgray); */
+  }
+