@import url('https://fonts.googleapis.com/css?family=Lato');

@media (max-width: 767px) {
  .material{
      display: block;
      width: 100%;
  }
}
.material{
   
   padding-top: 12px;
    padding-left: 7px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding-right: 7px;
    font-size: small;
    background-color: rgb(247, 243, 237);
    
    }
.material:hover {
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
      }
     

/* heading */      
h6 {
    display: grid;
    grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
    align-items: center;
    text-align: center;
    gap: 40px;
    font-size: medium;
  
    border: 2px #fdfbfb;
  }
  
  h6::before,
  h6::after {
    content: "";
    border-top: 2px;
  }
 
  @media (max-width: 400px) {
    h6 { font-size: 1.5rem; }
  }
      thead{
        background-color: #aaa;
      }

     



    /* toggle button*/
    .on-off-toggle {
      width: 56px;
      height: 24px;
      position: relative;
      display: inline-block;
    }
    
    .on-off-toggle__slider {
      width: 56px;
      height: 24px;
      display: block;
      border-radius: 34px;
      background-color: #d8d8d8;
      transition: background-color 0.4s
      
    }
    
    .on-off-toggle__slider:before {
        content: '';
        display: block;
        background-color: #fff;
        box-shadow: 0 0 0 1px #949494;
        bottom: 3px;
        height: 18px;
        left: 3px;
        position: absolute;
        transition: .4s;
        width: 18px;
        z-index: 5;
        border-radius: 100%;
      }
    
    .on-off-toggle__slider:after {
        display: block;
        line-height: 24px;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: bold;
        content: 'N';
        color: #484848;
        padding-left: 26px;
        transition: all 0.4s;
      }
    
    .on-off-toggle__input {
      /*
        This way of hiding the default input is better 
        for accessibility than using display: none;
      */
      position: absolute;
      opacity: 0;
    }
    
    .on-off-toggle__input:checked + 
    .on-off-toggle__slider {
      background-color: rgb(52, 192, 83)
    }
    
    .on-off-toggle__input:checked + 
    .on-off-toggle__slider:before {
        transform: translateX(32px);
      }
    
    .on-off-toggle__input:checked + 
    .on-off-toggle__slider:after {
        content: 'Y';
        color: #FFFFFF;
        padding-left: 8px;
      }