const useStyles = makeStyles(theme=>({


  rootBox : {




  },

  titleStyle : {

     fontSize : 23,
     color : '#54595C'


  },

  iconSize1 : {
   height: "25px", width: "25px"
  },

  textSize1 : {
    fontSize: "18px",

    fontWeight: "bold",
  }







}))

<Container   >
      <JoinModal
        modalState={modalState}
        modalIsOpen={modalIsOpen}
        JoinExam={JoinExam}
        closeModal={closeModal}
      />

   <Box style={{marginTop : '70px',
   display: "flex",

   flexDirection: "row",

   flexWrap: "wrap",

   alignItems: "center",

   justifyContent: "center",}}>

        <Paper  style={{ backgroundColor: "#EDF3FF" ,margin : 'auto',flexGrow : '1'}}  elevation={1}>


          <Grid  container style={{padding : '10px'}}  spacing={2}>


            <Grid item container xs={12} alignItems='center' justify='center' >


              <Grid item xs></Grid>


              <Grid container item xs={5} alignItems='center' justify='center' style={{textAlign : 'center'}} >

                <Grid item style={{padding : '5px'}}>

                {type == archieved ? (
               <img
                 style={{ height: "20px", width: "30px" }}
                 src={archiveDateicon}
               ></img>
             ) : type == upcoming ? (
               <img
                 style={{ height: "15px", width: "15px" }}
                 src={schedule}
               ></img>
             ) : (
               <img
                 style={{ height: "22px", width: "22px" }}
                 src={runningState}
               ></img>
             )}

                </Grid>

                <Grid item >



                <span style={{ fontWeight: "bold" }}>
                {state[0].toUpperCase() + state.slice(1)}

              </span>

              <br></br>


           {type == upcoming ? (
                 <span>
                   {TimeShow() ? (
                     <span
                       style={{

                         fontSize: "10px",
                         fontWeight: "bold",
                       }}
                     >
                       {getTimeFormat(timeLeft)}
                     </span>
                   ) : (
                     <span
                       style={{

                         fontSize: "10px",
                         fontWeight: "bold",
                       }}
                     >
                       {month.substring(0, 3)} {("0" + date).slice(-2)},{" "}
                       {year}
                     </span>
                   )}
                 </span>
               ) : type == archieved ? (
                 <span>
                   {
                     <span
                       style={{

                         fontSize: "10px",
                         fontWeight: "bold",
                       }}
                     >
                       {month.substring(0, 3)} {("0" + date).slice(-2)},{" "}
                       {year}
                     </span>
                   }
                 </span>
               ) : (
                 <span
                   style={{
                     fontSize: "15px",

                   }}
                 >
                   {getTimeFormat(timeLeft)}
                 </span>
               )}




                </Grid>











           {/* <div style={{ paddingTop: "15px", paddingRight: "10px" }}>
             {type == archieved ? (
               <img
                 style={{ height: "30px", width: "30px" }}
                 src={archiveDateicon}
               ></img>
             ) : type == upcoming ? (
               <img
                 style={{ height: "25px", width: "25px" }}
                 src={schedule}
               ></img>
             ) : (
               <img
                 style={{ height: "25px", width: "25px" }}
                 src={runningState}
               ></img>
             )}
           </div> */}




              </Grid>




            </Grid>

            <Grid item container >
            <Grid item xs={12}>

           <Typography className = {classes.titleStyle}>{title}</Typography>



            </Grid>

            </Grid>



            <Grid item container xs={12}  justify='center' alignItems='center'

            >

              <Grid item xs={4} container spacing={1}>



              <Grid item>
               <img
                 className={classes.iconSize1}
                 src={examinee}
               ></img>

              </Grid>

              <Grid item>

               <span
                 className = {classes.textSize1}
               >
                 {total_examinees}
               </span>
               </Grid>

               <Grid item>
               <ColoredLine color="black" />

               </Grid>








              </Grid>

              <Grid item container xs={4} spacing={1}>


          <Grid item>

               <img
                 className={classes.iconSize1}
                 src={score}
               ></img>

</Grid>

           <Grid item>



               <span
                 className = {classes.textSize1}
               >
                 {total_marks}
               </span>
               </Grid>


               <Grid item>

               <ColoredLine color="black" />



               </Grid>







              </Grid>

              <Grid  item container xs={4} spacing={.5}>

            <Grid item>

               <img
                 className={classes.iconSize1}
                 src={clock}
               ></img>
              </Grid>

              <Grid item>

              <span
                className={classes.textSize1}
               >
                 {durationConvert(duration)}
               </span>



              </Grid>








</Grid>





            </Grid>









          </Grid>

        </Paper>

        </Box>




      </Container>