styles.ts

const styles = {
  input : {
    width: '50%',
    height: '30px',
    padding: '12px 20px 10px 10px',
    margin: '8px 0 10px 10px',
    display: 'inline - block',
    border: '1px solid #ccc',
    borderRadius: '4px',
    boxSizing: 'border-box',
  },
  genderContainer: {
    display: 'table',
    width: '100%'
  },
  genderText: {
    display: 'table-cell',
    width: '32%',
    verticalAlign: 'middle',
    textAlign: 'right'
  },
  radioContainer: {
    display: 'table-cell',
    width: '68%',
    textAlign: 'left',
    paddingLeft: '10px'
  },
  textAreaContainer: {
    display: 'table-cell',
    width: '68%',
    textAlign: 'left',
  },
  textAreaStyles: {
    width: '74%',
    height: '30px',
    padding: '12px 20px 10px 10px',
    margin: '8px 0 10px 10px',
    display: 'inline - block',
    border: '1px solid #ccc',
    borderRadius: '4px',
    boxSizing: 'border-box',
  },
  button: {
    backgroundColor: '#4CAF50',
    border: 'none',
    color: 'white',
    padding: '10px',
    textAlign: 'center',
    textDecoration: 'none',
    display: 'inline-block',
    fontSize: '16px',
    margin: '4px 2px',
    cursor: 'pointer',
    borderRadius: '8px'
  },
  main: {
      fontFamily: 'sans-serif',
      textAlign: 'center',
  }
}

export default styles;