.body-profile {
    background-image: url('../images/ProfileBg.jpg');
    background-size: cover;
    /* height: 100vh; */
}

.profile-points {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 3px 2px #d15819;
    margin-bottom: 0.75rem;
    text-align: center;
 }

 .profile-name {
    font-size: 2rem;
    font-weight: bold;
 }

 .profile-number {
    font-size: 1rem;
 }

 th, td {
     font-size: 0.75rem;
     border-top: none!important;
     color: white;
 }

.odd {
    background-color: transparent!important;
    border: none!important;
 }

.even {
    background-color: #c35629!important;
    border: none!important;
 }

 tbody {
     display: block;
    overflow-y: auto;
    max-height: 45vh;
}

 thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}

#example_filter {
    display: none!important;
}

 .profile-digits {
    font-weight: bold;
 }

 .profile-button {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 1rem;
    margin-top: 1.5rem;
 }

 .profile-card-img {
    max-width: 28rem;
    /* margin: auto; */
    margin-bottom: 1rem;
  }

  .date-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    padding: 0;
  }

  .date-filter > label, .date-filter > input {
    width: 100%;
  }

  .date-filter > label {
    font-size: 0.8rem;
    width: fit-content;
    margin: 0;
    margin-right: 0.5rem;
  }

  .search-button {
    display: flex;
    align-items: center;
    color: white;
    background-color: transparent;
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    font-weight: bold;
    border: white 1px solid;
    border-radius: 0.2rem;
    margin-left: 1rem;
  }

  #example_wrapper {
      margin-top: 0.5rem;
  }

  .table-header {
     color: white;
     font-size: 1.1rem;
  }

  .table-subheader {
    color: white;
    font-size: 0.8rem;
    margin-bottom: 2rem;
  }

  .date-row {
    justify-content: flex-end;
  }

  .date-filter:nth-child(1), .date-filter:nth-child(3)  {
    flex-grow: 2;
  }

  .arrow-right {
      width: 1rem;
      margin: auto;
  }

  .search-button:hover {
    border: rgb(133, 133, 133) 1px solid;
  }

  .search-button > svg{
    margin-right: 0.5rem;
  }

  .col-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
  }

  @media only screen and  (max-width: 785px) { 
    #example_wrapper {
        margin-top: 2rem;
    }

    .date-filter {
        justify-content: center;
        margin-top: 1rem;
        flex-direction: column;
    }

    .search-button {
        margin: 0;
    }
  }