.ContainerExpanded{
    display: flex; width: 50%; justify-content: center; border-right: 2px solid #959292;
}
.contenedorSpan{
    width: 12%; display: flex;
}
.contenedorSpan1{
    width: 12%; display: flex;
}
.spanIcon{
    display: flex; justify-content: center;
}

.divRelacion{
    display: flex; flex-wrap: wrap; width: auto;
}

.containerRelacion{
    padding-left: 2ch;
    padding-top: 5px;
}
.green {
    background-color: #2a6c42;
    border: none;
    color: white !important;
    cursor: pointer;
    border-radius: 6px;
    height: 35px;
}

.green:hover {
    background-color: #205232;

}


.divGrupo{
    display: flex; flex-wrap: wrap; width: 44%; margin-left: 2%;
}
.containerAcciones{
    display: flex; justify-content: space-between; margin-left: 6%; align-items: center; margin-bottom: 00px;
}
.accionCheck{
    width: 120px; justify-content: space-evenly; display: flex;
}
.containerDatos{
    display: flex; justify-content: space-evenly; align-items: center; width: 94%; margin-bottom: 20px; color: black;
}
/* Estilos Tabla */
.mat-column-nombre{
    text-align: center;
    width: 300px;
}
.mat-column-padre{
    text-align: center;
    width: 300px;
}
.mat-column-expand{
    width: 0px;
}

.mat-column-select, .mat-column-Nombre, .mat-column-Grupo,.mat-column-id,.mat-column-grupo, .mat-column-Padre{
    text-align: center !important;
}

.mat-column-acciones,.mat-column-grado{
    text-align: center;
    width: 200px;
}
.mat-column-Acciones, .mat-column-Padre{
    text-align: center;
    width: 200px;
}

.bordeLateral{
    border-left: 2px solid #959292;
}

span {
  font-size: 14px;
  margin-left: 5px;

  @media (max-width: 1366px) and (min-width: 1024px) {
    font-size: 10px;
    margin-left: 40px;
  }

  @media (max-width: 1023px) {
    font-size: 4px;
        margin-left: 40px;

  }
}

@media only screen and (max-width: 600px) {
    .centrar1 {
        margin-top: 10%;
        margin-left: 15px;
        display: flex;
    }


    .fondo {
        background-color: #ebac3f;
        display: inline-block;
        border-radius: 10px;
    }

    .content {
        font-size: 24px;
        color: white;
        font-family: "Serenity Medium";
    }
    .containerPagina{
        width: 100%;
        padding: 0 0 ;
        }

    .button{
        width: 100%;
        transform: scale(0.9);
    }

    .btnTitle{
    width: 96%;
    margin-top: 24%;
    margin-right: 13%;
    }

    .buscador{
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .contenedorInputs{
        width: 100%;
    }
    .exportar{
        width: 100%;
        margin-bottom: 5%;
        display: flex;
        justify-content: space-evenly;
        transform: scale(0.9);
    }
    .boton-export{
        margin-left: 0px;
        width: 35%;
    }
    .buscador-input{
        width: 86%;
    }
    .filtro{
        width: 86%;
        margin-left: 0%;
    }

    .table {
        width: 100%;
    }
    .table2{
        width: 100%;
        overflow-x: scroll ;
        white-space: nowrap;
    }

    .tabla1 {
        overflow-x: scroll;
        white-space: nowrap;
    }

    .dialog{
        width: auto !important;
    }
    .input{
        width: 81%;
    }
    .input-label{
        margin-top: 5%;
    }
    .agregarRelacion{
        margin-bottom: 14px;
    }
    .btn1{
        width: 83px !important;
    }
    .container-grupo{
        width: 100%;
        height: 210px;
    }
    .input-grupo{
        width: 81%;
    }
    .containerDatos{
        flex-direction: column;
    }
    .titulocontenedorNombre{
        width: 100% !important;
    }
    .TituloDta{
        width: 100%;
    }
    .tituloNombre{
        justify-content: start;
        font-size: 15px;
    }
    .tabla2{
        width: 90%;
    }
    .contenedorSpan1{
       width: auto;
    }
    .contenedorSpan{
        width: auto;
    }
    @media only screen and (max-width: 600px) {
  .tabla1,
  .tabla2,
  .table,
  .table2 {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    display: block;
  }

  table {
    width: max-content;
    min-width: 600px;
  }

  th, td {
    text-align: center;
    padding: 8px;
  }
}

}
