pcm-shared-components 2.0.18 → 2.0.21

package/dist/app/tools/seasonal_dates.js

@@ -1,229 +0,0 @@
-import moment from 'moment';
-export const weeks = {
-  first: 0,
-  second: 1,
-  third: 2,
-  fourth: 3,
-  last: 4
-};
-export const weekdays = {
-  sunday: 0,
-  monday: 1,
-  tuesday: 2,
-  wednesday: 3,
-  thursday: 4,
-  friday: 5,
-  saturday: 6
-};
-export const months = {
-  january: 0,
-  february: 1,
-  march: 2,
-  april: 3,
-  may: 4,
-  june: 5,
-  july: 6,
-  august: 7,
-  september: 8,
-  october: 9,
-  november: 10,
-  december: 11
-};
-export const getSeasonalStartDate = (year, seasonal_object) => {
-  seasonal_object = getWorkingSeasonalObject(year, seasonal_object);
-  if (Number(seasonal_object.use_fix_start_date) === 1) {
-    //use the date defined
-    // const test = moment([ year, months[returnLiteralString(months, seasonal_object.fix_dates.start.month)], seasonal_object.fix_dates.start.day ]).set({ hour: seasonal_object.arrival_hour, minute: seasonal_object.arrival_minute });
-    // console.log('debug Start Date Fixed ', test)
-    return moment([year, months[returnLiteralString(months, seasonal_object.fix_dates.start.month)], seasonal_object.fix_dates.start.day]).set({
-      hour: seasonal_object.arrival_hour,
-      minute: seasonal_object.arrival_minute
-    });
-  } else {
-    //need to find the date base on the literal date
-    // const test =  getVariableDate(year, months[returnLiteralString(months, seasonal_object.variable_dates.start.month)], weeks[returnLiteralString(weeks, seasonal_object.variable_dates.start.week)], weekdays[returnLiteralString(weekdays, seasonal_object.variable_dates.start.weekday)]).set({ hour: seasonal_object.arrival_hour, minute: seasonal_object.arrival_minute });
-    // console.log('debug Start Variable Date ', test)
-    return getVariableDate(year, months[returnLiteralString(months, seasonal_object.variable_dates.start.month)], weeks[returnLiteralString(weeks, seasonal_object.variable_dates.start.week)], weekdays[returnLiteralString(weekdays, seasonal_object.variable_dates.start.weekday)]).set({
-      hour: seasonal_object.arrival_hour,
-      minute: seasonal_object.arrival_minute
-    });
-  }
-};
-export const getSeasonalEndDate = (year, seasonal_object) => {
-  seasonal_object = getWorkingSeasonalObject(year, seasonal_object);
-  const end_year = getSeasonalEndDateYear(year, seasonal_object);
-  if (Number(seasonal_object.use_fix_end_date) === 1) {
-    //use the date defined
-    return moment([end_year, months[returnLiteralString(months, seasonal_object.fix_dates.end.month)], seasonal_object.fix_dates.end.day]).set({
-      hour: seasonal_object.departure_hour,
-      minute: seasonal_object.departure_minute
-    });
-  } else {
-    //need to find the date base on the literal date
-    return getVariableDate(end_year, months[returnLiteralString(months, seasonal_object.variable_dates.end.month)], weeks[returnLiteralString(weeks, seasonal_object.variable_dates.end.week)], weekdays[returnLiteralString(weekdays, seasonal_object.variable_dates.end.weekday)]).set({
-      hour: seasonal_object.departure_hour,
-      minute: seasonal_object.departure_minute
-    });
-  }
-};
-const getSeasonalEndDateYear = (year, seasonal_object) => {
-  //This is used to make sure that we don't reuse the current year for the end date when our end month is > than the starting month.
-  // Meaning: Start month is December and End month is April.  Because the start and end date are stored inside the same year object I need to increase the end year when this happens
-  /*
-  	2020----------Dec=11-----------------April=3---------------------
-  	  		       ^ start date         ^ end date
-  
-  	So the above seasonal object would return and end date before the start date making the selection invalid because what we need is
-  			- Start date Dec 2020
-  		- End date April 2021
-  			Returns the end date year to be used example: 2021 in the example above
-  	*/
-  let start_month,
-    end_month,
-    start_day,
-    end_day,
-    has_variable_date = false;
-
-  // Get the starting and ending month and day index value
-  if (Number(seasonal_object.use_fix_start_date) === 1) {
-    start_month = returnIndexPosition(months, seasonal_object.fix_dates.start.month);
-    start_day = returnIndexPosition(weekdays, seasonal_object.fix_dates.start.day);
-  } else {
-    has_variable_date = true;
-    start_month = returnIndexPosition(months, seasonal_object.variable_dates.start.month);
-    start_day = returnIndexPosition(weekdays, seasonal_object.variable_dates.start.weekday);
-  }
-  if (Number(seasonal_object.use_fix_end_date) === 1) {
-    end_month = returnIndexPosition(months, seasonal_object.fix_dates.end.month);
-    end_day = returnIndexPosition(weekdays, seasonal_object.fix_dates.end.day);
-  } else {
-    has_variable_date = true;
-    end_month = returnIndexPosition(months, seasonal_object.variable_dates.end.month);
-    end_day = returnIndexPosition(weekdays, seasonal_object.variable_dates.end.weekday);
-  }
-
-  // Now check to see if we need to increase our year by one
-  if (Number(end_month) < Number(start_month)) {
-    // Ending month is smaller than starting month we are automatically in a new year
-    year = Number(year) + 1;
-  } else if (Number(end_month) === Number(start_month) && has_variable_date) {
-    // Same month and we have a variable date for one or both dates.
-    // Automatically the ending year should be increased
-    year = Number(year) + 1;
-  } else if (Number(end_month) === Number(start_month) && Number(end_day) <= Number(start_day)) {
-    // Ending month is the same as the starting month and we have the same or smaller day.
-    // 2020----------Dec 2st-----------------Dec 2nd--------------------- We want a full year date to date
-    // 2020----------Dec 2st-----------------Dec 1nd--------------------- We want a full year minus one day
-    year = Number(year) + 1;
-  }
-  return year;
-};
-const getVariableDate = (year, month, week_number, week_day) => {
-  let loop_end = true;
-  let week_number_i = week_number;
-  //let leep_week = 0; //used to compensate for the start of the previous months when week 0 = previous month
-  // Check if we are not in the current month based on the week number and adjust accordingly
-  while (loop_end) {
-    let new_month = moment([year, month]).day(week_day + week_number_i * 7).month();
-    if (new_month === 11 && month === 0) {
-      //This is the cross over from January to December, need to bring it back to January
-      week_number_i++;
-    } else if (new_month === 0 && month === 11) {
-      //This is the cross over from December to January, need to bring it back to December
-      week_number_i--;
-    } else if (new_month < month) {
-      week_number_i++;
-    } else if (new_month > month) {
-      week_number_i--;
-    } else {
-      loop_end = false;
-    }
-  }
-  //condition to ensure we are not in the previous month
-  let condition1 = moment([year, month]).day(week_day + week_number_i * 7 - 7 * week_number_i).month() !== month;
-
-  //condition to ensure we are still in the specified month
-  let condition2 = week_number > 0 && (week_number < 5 && moment([year, month]).day(week_day + (week_number_i + 1) * 7).month()) === month;
-  if (condition1 && condition2) {
-    // if (moment([ year, month ]).day(week_day + week_number_i * 7 - 7 * week_number_i).month() !== month && (week_number > 0 && week_number < 5)) {
-    week_number_i++;
-  }
-  return moment([year, month]).day(week_day + week_number_i * 7);
-};
-
-//Makes it possible to store 'may' or 4 in the database and still return the proper month,week etc...
-export const returnLiteralString = (object, item) => {
-  //verify if object/month,weekdays etc is a string or int, so that i can support both example 'may' or 4=may
-  //get the literal string for the object/month,weekdays etc based on the zero based object/month,weekdays etc position 0=jan, 1=feb etc..
-  try {
-    if (parseInt(item, 10) || item === 0) {
-      item = Object.keys(object).find((m, idx) => idx === item);
-    }
-  } catch (error) {
-    console.error(error);
-  }
-  return item;
-};
-
-//Makes it possible to store 'may' or 4 in the database and still return the proper month,week index value etc...
-export const returnIndexPosition = (object, item) => {
-  //verify if object/month,weekdays etc is a string or int, so that i can support both example 'may' or 4=may
-  //get the index position for the object/month,weekdays etc based on the zero based object/month,weekdays etc position 0=jan, 1=feb etc..
-  try {
-    if (parseInt(item, 10) || item === 0) {
-      //nothing to convert we already have the number index
-    } else {
-      //get the index position of the string literal
-      item = object[item];
-      // item = Object.keys(object).find((m, idx) => m === item);
-    }
-  } catch (error) {
-    console.error(error);
-  }
-  return item;
-};
-
-/**
- * Returns the seasonal date object to use based on the year provided
- */
-const getWorkingSeasonalObject = (year, seasonal_object) => {
-  //get the date object based on the requested year
-  let seasonal_object_working = seasonal_object.find(so => Number(so.seasonal_year) === Number(year));
-
-  //If no results returned then get the default date object and use it's parameters
-  if (!seasonal_object_working) {
-    seasonal_object_working = seasonal_object.find(so => Number(so.is_default) === 1);
-  }
-  return seasonal_object_working;
-};
-
-/**
- * Returns the week in a nice sorted array example [first,second....] so the index position relates to the week etc...
- * Returns the months in a nice sorted array example [january,february....] so the index position relates to the month etc...
- * Returns the weekdays in a nice sorted array example [monday,tuesday....] so the index position relates to the weekdays etc...
- *
- * @returns
- */
-export const sortedArray = array_months_weekdays_weekdays => {
-  let new_object = [];
-  let sorted = Object.keys(array_months_weekdays_weekdays).sort(function (a, b) {
-    return a.value - b.value;
-  });
-
-  // eslint-disable-next-line no-unused-vars
-  for (const [key, value] of Object.entries(sorted)) {
-    // console.log(`${key}: ${value}`);
-    new_object = [...new_object, value];
-  }
-  return new_object;
-};
-
-// Month here is 1-indexed (January is 1, February is 2, etc). This is
-// because we're using 0 as the day so that it returns the last day
-// of the last month, so you have to add 1 to the month number 
-// so it returns the correct amount of days
-//!Converting months to base zero (+1) the month since i'm used to using base zero
-export const daysInMonth = (year, month) => {
-  // console.log('123 month: ', month, ' days: ', Number(new Date(year, month+1, 0).getDate())+1, ' date: ',new Date(year, month+1, 0))
-  return Number(new Date(year, month + 1, 0).getDate()) + 1;
-};

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import TextField from '@mui/material/TextField';
-import i18next from 'i18next';
-const SearchLotsTextBox = props => {
-  const {
-    lot_search,
-    setLotSearch,
-    setFocusOnFilter,
-    label
-  } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {}
-  }, /*#__PURE__*/React.createElement(TextField, {
-    style: {
-      paddingTop: 12,
-      paddingBottom: 12
-    },
-    id: "lot_filter_search",
-    label: label,
-    value: lot_search,
-    variant: "standard",
-    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

@@ -1,11 +0,0 @@
-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

@@ -1,98 +0,0 @@
-: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); */
-  }
-  

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

@@ -1,121 +0,0 @@
-
-.blink {
-    border: solid 1px orangered;
-    color: orangered;
-    animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
-    box-shadow: 0 2.8px 2.2px rgba(250, 104, 60, 0.034), 0 6.7px 5.3px rgba(250, 104, 60, 0.048), 0 12.5px 10px rgba(250, 104, 60, 0.06), 0 22.3px 17.9px rgba(250, 104, 60, 0.072), 0 41.8px 33.4px rgba(250, 104, 60, 0.086), 0 100px 80px rgba(250, 104, 60, 0.12);
-}
-@keyframes blinker {
-    from {
-        opacity: 1;
-   }
-    to {
-        opacity: 0;
-   }
-}
-.rct-item {
-    border-radius: 20px;
-    border-color: rgba(0, 0, 0, 0.5) !important;
-    color: #000;
-}
-.item_collision .rct-item-content {
-    color: white !important;
-    font-weight: 900;
-}
-.item_collision {
-    background-size: auto auto;
-    background-color: rgba(193, 45, 45, 1);
-    background-image: repeating-linear-gradient(45deg, #f56f6f, #f56f6f 12px, rgba(236, 93, 93, 1) 12px, rgba(236, 93, 93, 1) 20px) !important;
-}
-.edit_res_id {
-    border: solid 2.5px #f79902 !important;
-    box-shadow: 0 2.8px 2.2px rgba(37, 37, 37, 0.044), 0 6.7px 5.3px rgba(37, 37, 37, 0.058), 0 12.5px 10px rgba(37, 37, 37, 0.16), 0 22.3px 17.9px rgba(37, 37, 37, 0.082), 0 41.8px 33.4px rgba(37, 37, 37, 0.096), 0 100px 80px rgba(37, 37, 37, 0.22);
-}
-.sidebar-group {
-    line-height: 1;
-}
-.rct-dateHeader {
-    font-size: 12pt !important;
-}
-.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-6, .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-0 {
-    background-color: rgba(248, 147, 31, 0.5);
-}
-.rct-item-content {
-    color: black;
-}
-.move-icon {
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-    height: 20px;
-    width: 20px;
-    background-color: rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    border: solid 1px;
-    border-color: rgba(0, 0, 0, 0.5) !important;
-    box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.493);
-}
-.rct-item-handler {
-    cursor: col-resize !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.rct-item-handler .handle-icon {
-    height: 35%;
-    position: relative;
-    pointer-events: none;
-}
-.rct-item-handler .handle-icon, .rct-item-handler .handle-icon:before, .rct-item-handler .handle-icon:after {
-    width: 1px;
-    background: rgba(54, 54, 54, 0.9);
-}
-.rct-item-handler .handle-icon:before, .rct-item-handler .handle-icon:after {
-    content: '';
-    height: 100%;
-    display: block;
-    position: absolute;
-}
-.rct-item-handler .handle-icon:before {
-    right: 4px;
-}
-.rct-item-handler .handle-icon:after {
-    left: 4px;
-}
-.rct-item-content {
-    line-height: 1.2;
-    margin-top: auto !important;
-    margin-bottom: auto !important;
-    max-height: 12px;
-}
-.rct-item-tooltip {
-    z-index: 2000;
-    margin-left: 5px;
-    display: flex;
-    align-items: center;
-}
-.rct-item-tooltip-content {
-    background: rgba(27, 25, 24, 0.726);
-    padding: 8px 16px;
-    white-space: nowrap;
-    font-size: 12px;
-    color: white;
-    border-radius: 5px;
-}
-.rct-item--is-selected .rct-item-content {
-    color: rgba(0, 0, 0, 0.8);
-}
-.rct-item--is-selected .rct-item {
-    border-color: rgba(0, 0, 0, 0.5) !important;
-    box-shadow: 0 8px 8px -8px black;
-}
-.rct-item-following-indicator {
-    opacity: 0;
-    transition: opacity 500ms ease;
-}
-.rct-item--is-resizing .rct-item-following-indicator {
-    opacity: 1;
-}

package/dist/components/Timelines/ReservationTimelineComponent/css/styles.old

@@ -1,209 +0,0 @@
-.timeline-app {
-    font-family: sans-serif;
-    font-size: large;
-    text-align: center;
-    max-width: 100%;
-    max-height:90vh !important;
-    height:90vh !important;
-    padding: 0 16px;
-    overflow: scroll;
-    // margin: auto;
-    
-  }
-  
-
-
-.blink{
-    border: solid 1px orangered;
-    color: orangered;
-    animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate; 
-    box-shadow:
-    0 2.8px 2.2px rgba(250, 104, 60, 0.034),
-    0 6.7px 5.3px rgba(250, 104, 60, 0.048),
-    0 12.5px 10px rgba(250, 104, 60, 0.06),
-    0 22.3px 17.9px rgba(250, 104, 60, 0.072),
-    0 41.8px 33.4px rgba(250, 104, 60, 0.086),
-    0 100px 80px rgba(250, 104, 60, 0.12)
-    ;
-  }
-  @keyframes blinker {  
-    from { opacity: 1; }
-    to { opacity: 0; }
-  }
-  
-  
-  
-  
-  .rct-item{
-    border-radius:20px;
-    border-color: rgba(0, 0, 0, 0.5) !important;
-    color: #000000;
-
-}
-.item_collision .rct-item-content{
-
-    color:white !important;
-    font-weight: 900;
-}
-.item_collision{
-
-    background-size: auto auto;
-background-color: rgba(193, 45, 45, 1);
-background-image: repeating-linear-gradient(45deg, rgb(245, 111, 111), rgb(245, 111, 111) 12px, rgba(236, 93, 93, 1) 12px, rgba(236, 93, 93, 1) 20px ) !important;
-    // background-image: linear-gradient(38deg, #f58e8e 25%, #e67373 25%, #e67373 50%, #f58e8e 50%, #f58e8e 75%, #e67373 75%, #e67373 50%) !important;
-}
-
-
-// In edit mode the reservation ID being edited will look different
-.edit_res_id{
-
-  border: solid 2.5px rgb(247, 153, 2) !important;
-  box-shadow:
-    0 2.8px 2.2px rgba(37, 37, 37, 0.044),
-    0 6.7px 5.3px rgba(37, 37, 37, 0.058),
-    0 12.5px 10px rgba(37, 37, 37, 0.16),
-    0 22.3px 17.9px rgba(37, 37, 37, 0.082),
-    0 41.8px 33.4px rgba(37, 37, 37, 0.096),
-    0 100px 80px rgba(37, 37, 37, 0.22)
-    ;
-}
-  
-  
-  .sidebar-group {
-    line-height: 1;
-  }
-  
-.rct-dateHeader {
-      font-size: 12pt !important;
-  }
-  
-  .react-calendar-timeline .rct-horizontal-lines .rct-hl-even{
-    // border-color: solid 5px red;
-    // background-color:red;
-  }
-  .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd{
-    // background-color:red;
-  }
-  
-  // Timeline styles overrides
-  $weekend: rgba(248, 147, 31, 0.5);
-  
-  .react-calendar-timeline {
-    .rct-vertical-lines {
-      .rct-vl {
-        &.rct-day-6,
-        &.rct-day-0 {
-          background-color: $weekend;
-        }
-      }
-    }
-  }
-
-  .rct-item-content{
-      color:black;
-  }
-
-  
-  $handle-color: rgba(54, 54, 54, 0.9);
-  
-  //move icon
-  
-  .move-icon{
-    // cursor: move; /* fallback if grab cursor is unsupported */
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-  
-    height: 20px;
-    width: 20px;
-    background-color: rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    position: absolute;
-    top: 8px; left: 5px;
-    border: solid 1px;
-
-    border-color:rgba(0, 0, 0, 0.5) !important;
-  box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.493);
-  }
-  
-  // Handle
-  
-  .rct-item-handler {
-    cursor: col-resize !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-  
-    .handle-icon {
-      height: 35%;
-      position: relative;
-      pointer-events: none;
-      
-      
-      &, &:before, &:after {
-        width: 1px;
-        background: $handle-color;
-      }
-  
-      &:before, &:after {
-        content: '';
-        height: 100%;
-        display: block;
-        position: absolute;
-      }
-  
-      // Controls th spacing between the grips handles
-      &:before {
-        right: 4px;
-      }
-  
-      &:after {
-        left: 4px;
-      }
-    }
-  }
-
-  //controls the way the text appears in the timeline items...
-  .rct-item-content {
-    line-height:1.1;
-    // height:100%;
-    margin-top: 8px !important;
-    max-height: 10px;
-  }
-  
-  // Following tooltip
-  .rct-item-tooltip {
-    z-index: 2000;
-    margin-left: 5px;
-    display: flex;
-    align-items: center;
-  }
-
-  .rct-item-tooltip-content {
-    background: rgba(27, 25, 24, 0.726);
-    padding: 8px 16px;
-    white-space: nowrap;
-    font-size: 12px;
-    color: white;
-    border-radius: 5px;
-  }
-  
-  .rct-item--is-selected .rct-item-content{
-    color: rgba(0, 0, 0, 0.8);
-  }
-  .rct-item--is-selected .rct-item{
-  border-color:rgba(0, 0, 0, 0.5) !important;
-  box-shadow: 0 8px 8px -8px black;
-  }
-  
-  .rct-item-following-indicator {
-    opacity: 0;
-    transition: opacity 500ms ease;
-    
-    .rct-item--is-resizing & {
-      opacity: 1;
-    }
-  }
-  
-