.section_level {
  width: 80%;
  margin: auto;

  & .container {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
    padding: 1rem;
    & .Addgroups{
      & h3{
        text-align: center;
        color: white;
        font-size: 1.8rem;
        padding: 1rem;
      }
      overflow: auto;
      display: none;
      position: fixed;
      top: 50%;
      background-color: blueviolet;
      color: white;
      width: 80%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 1rem;
      border-radius: 1rem;
      & form{
        background-color: white;
        color: black;
        border-radius: 1rem;
        padding: 1rem;
        & label{
          font-size: 1.2rem;
          background-color: rgb(206, 170, 240);
          display: block;
        }
        & input,textarea{
          padding: 0.2rem;
        }

      }
    }
    & .viewlevel{
      max-height: 90%;
    overflow-y: scroll;
    scrollbar-width: none;
      & #lvllist{
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        gap: 1rem;
        background-color: antiquewhite;
        color: rgb(0, 0, 0);
        & .column{
          font-size: 1.4rem;
          font-weight: 900;
          padding: 0.2rem;
        }
      }

    }


    & .group {
      border: 0.1rem solid black;
      margin: 1rem;
      flex: none;
      transition: all 0.3s ease-in-out;

        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
      &:hover {
        /* scale: 1.02; */
        box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
      }

      & img {
         /* height: 4rem; */
        width: 100%;
        aspect-ratio: 1;
        background: var(--bg_color_main);
        border-radius: 5%;
        transition: all 0.3s ease-in-out;
      }

      & p {
        font-size: 1.2rem;
        margin-top: 0.1rem;
        /* text-align: center; */
      }
    }
  }

}


@media (min-width: 768px) {
  .section_level {
    & .container {
      grid-template-columns: repeat(5,1fr);
      
    }
  }
}