text: import { styled } from "@mui/material/styles";
  import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
  import MuiAccordion from "@mui/material/Accordion";
  import MuiAccordionSummary from "@mui/material/AccordionSummary";
  import MuiAccordionDetails from "@mui/material/AccordionDetails";
  
  /**
   * Defines the CSS style items to use for the custom Accordian
   */
  export const Accordion = styled((props) => <MuiAccordion disableGutters elevation={0} square {...props} />)(
    ({ theme }) => ({
      "border": `1px solid ${theme.palette.divider}`,
      "&:before": {
        display: "none"
      },
      "marginBottom": "10px"
    })
  );
  
  /**
   * Defines the CSS style items to use for the custom Accordian Summary
   */
  export const AccordionSummary = styled((props) => (
    <MuiAccordionSummary expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />} {...props} />
  ))(({ theme }) => ({
    "backgroundColor": theme.palette.mode === "dark" ? "rgba(255, 255, 255, .05)" : "rgba(0, 0, 0, .03)",
    "flexDirection": "row-reverse",
    "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
      transform: "rotate(90deg)"
    },
    "& .MuiAccordionSummary-content": {
      marginLeft: theme.spacing(1),
      justifyContent: "flex-end"
    }
  }));
  
  /**
   * Defines the CSS style items to use for the custom Accordian Details
   */
  export const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
    padding: theme.spacing(2),
    borderTop: "1px solid rgba(0, 0, 0, .125)"
  }));
  