.listas {
   display: flow;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    width: 100%;
    
    max-width: 800px; 
    margin: 10px auto;
    
    div {
       flex-basis: 40%; 
       
       h3 {
          font-weight: bold; 
          font-size: 150%; 
          line-height: 1em; 
       }
    }
 }

 .listas-variables{
   margin-top: 20px;

   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
   align-content: space-around;
   justify-content: space-evenly;
 }
 .title{
   text-align: center;
 }
 .area ,.area_fields{
   background: #efefef;

   /* border: 1px dashed #449daf; */
   padding: 10px;
  }

   .area {
 
      width: 170px;}

      .area_fields {
         height: 175px;
         width: 790px;}

   /* ul#list-0.sortable {
      position: absolute;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 0px;
   margin-left: 40px;
 } */

 ul.sortable {
   list-style: none;
   padding: 0;
 }



 ul.sortable li.groups {
   background: rgb(87 251 71 / 76%);
}

ul.sortable li.groups:hover {
   background: rgb(87 251 71 / 76%);
}

ul.sortable li input[type="checkbox"] {
   /* Puedes personalizar los estilos del checkbox aquí */

  border: 1px solid #ccc; /* Borde gris para hacerlo visible */
  border-radius: 3px; /* Bordes redondeados */

 }

 ul.sortable {
    user-select: none;
    -moz-user-select: none; /* Para navegadores Firefox */
    -webkit-user-select: none; /* Para navegadores Webkit como Chrome y Safari */
    -ms-user-select: none; /* Para navegadores Internet Explorer y Edge */
    /* display: block;  */
    min-height: 38px;
    min-width: 112px;
    list-style: none; 
    background: transparent;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    margin: 0px ;
    padding: 5px;
    color:#3b3b3b;
    
    & > li {
      width: 136px;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
       margin-top: 0px; 
       /* margin-right: 5px; */
      font-size: 0.8rem;
       border-radius: 4px;
       cursor: move;
       background: white;
       padding-left: 4px;
       padding-right: 4px;
       padding-bottom: 1px;
       padding-top: 1px;
       margin-bottom: 4px;
       
       box-shadow: 1px 2px 3px 0px rgb(40 78 131 / 50%);
       /* border: 1px solid black; */
       
       &:hover {
          background-color: rgba(13,110,253,.25);
       }
       &.active {
          background: #adb0da;
       }
       &.dragging {
          /* background: #737274; */
          box-shadow: 0 4px 20px rgba(0,0,0,0.5);
          opacity: 0.5;
       }
    }
 }