.responsive-table {
          width: 100%;
          border-collapse: collapse;
          margin: 0;
          font-size: 0.8em;
          box-shadow: 0 0 10px rgba(0,0,0,0.1);
          color: #000;
        }
        .responsive-table th, .responsive-table td {
          border: 1px solid #fff;
          padding: 16px 10px;
          text-align: center;
        }
        .responsive-table th {
          background-color: #000000;
          color: #ffffff;
        }
        .mes {
          background-color: #948B54;
          color: #ffffff;
          font-size: 2em;
        }
        .male {
          background-color: #8DB3E2;
          color: #000000;
        }
         .female {
          background-color: #E5B7B7;
          color: #000000;
        }
        .male-female {background: linear-gradient(to right, #8DB3E2 50%, #E5B7B7 50%);}
        .female-male {background: linear-gradient(to right, #E5B7B7 50%, #8DB3E2 50%);}