text: export const useStyles = theme => ({
    claimsMainContainer: {
      maxWidth: "100% !important",
      boxShadow: "none !important",
      marginBottom: 30,
      backgroundColor: `${theme.palette.text.offWhiteColor} !important`,
      "& h3": {
        padding: "0 22px",
        borderBottomWidth: 1,
        borderBottomStyle: "solid",
        borderBottomColor: theme.palette.text.gray1,
        margin: 0,
        color: theme.palette.text.darkShadedGray,
        fontSize: 20,
        fontWeight: 600,
        lineHeight: "50px",
      },
      "& h4": {
        margin: "16px 0",
        color: theme.palette.text.darkShadedGray,
        fontSize: 18,
        lineHeight: "23px",
      },
    },
    accountBalanceContainer: {
      maxWidth: 411,
      paddingBottom: 27,
      borderRadius: 4,
      backgroundColor: theme.palette.text.white,
      boxShadow: "0 1px 1px 0 rgba(0,0,0,0.07), 0 2px 1px -1px rgba(0,0,0,0.07), 0 1px 3px 0 rgba(0,0,0,0.1)",
      flexBasis: "30%",
      "@media(max-width:960px)": {
        maxWidth: "100%",
        flexBasis: "100%",
      },
    },
    claimsContainer: {
      marginLeft: 23,
      borderRadius: 4,
      backgroundColor: theme.palette.text.white,
      boxShadow: "0 1px 1px 0 rgba(0,0,0,0.07), 0 2px 1px -1px rgba(0,0,0,0.07), 0 1px 3px 0 rgba(0,0,0,0.1)",
      "& > div": { padding: "0 22px" },
      "@media(max-width:960px)": {
        maxWidth: "100%",
        flexBasis: "100%",
        margin: "25px 0 0",
      },
    },
    description: {
      margin: "16px 0 24px",
      color: "#3D3E40",
      fontSize: 16,
      lineHeight: "24px",
    },
    tableHeader: {
      marginBottom: 4,
      "& span": {
        color: theme.palette.text.darkShadedGray,
        fontSize: 16,
        fontWeight: 600,
        lineHeight: "20px",
      },
      "@media(max-width:1315px)": { display: "none" },
    },
    tableData: {
      padding: "9px 0",
      borderTopWidth: 1,
      borderTopStyle: "solid",
      borderTopColor: theme.palette.text.lightGray,
      alignItems: "center",
      "& div": {
        "@media(max-width:1315px)": {
          maxWidth: "100%",
          marginBottom: 10,
          display: "flex",
        },
      },
      "@media(max-width:1315px)": {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      },
    },
    responsiveHeader: {
      marginRight: 10,
      display: "none",
      color: theme.palette.text.darkShadedGray,
      fontSize: 16,
      fontWeight: 600,
      lineHeight: "20px",
      "@media(max-width:1315px)": { display: "block" },
    },
    centerAlign: { textAlign: "center" },
    claimsForRequest: { marginTop: 8 },
    circularProgressContainer: {
      paddingTop: 20,
      textAlign: "center",
      height: 500,
      display: "table",
      width: "100%",
      "& div": {
        color: theme.palette.text.primary,
      },
    },
    loaderChild: {
      display: "table-cell",
      verticalAlign: "middle",
      margin: "0 auto",
    },
    circularProgress: {
      display: "inline-block",
      width: 48,
      height: 48,
    },
    loaderText: {
      color: theme.palette.text.lightShadedGray,
      fontSize: 14,
      fontWeight: 600,
      letterSpacing: 0.25,
    },
  });
  