#main>div{
  min-height: 80vh!important;
}

.family-member {
    padding: 20px;
    box-shadow: 0px 0px 5px 2px grey;
    border-radius: 20px;
    margin: 20px;
}

#family-div > div {
    display: flex;
    justify-content: space-around;
}
#family-div > div,
#family-div input {
    text-align: center;
}
#family-div > div > div {
    width: 33% !important;
}
#family-div > div > div > input {
    width: 80%;
    margin: 0 auto;
}
#family-div > div {
    flex-wrap: wrap !important;
}

.family-inner-div {
    padding: 20px;
    margin: 15px;
    border-radius: 20px;
    box-shadow: 0px 0px 5px 1px grey;
}

.card {
    margin: 20px;
    height: 200px;
    border-top-left-radius: 10%;
    border-bottom-right-radius: 10%;
    background: linear-gradient(145deg, #cacaca, #f0f0f0);
    box-shadow: 23px 23px 46px #868686, -23px -23px 46px #ffffff;
    text-align: center;
    flex: 30%;
    max-width: 20%;
    width: 30% !important;
    padding: 0 4px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

.card-flex{
    flex: 30%;
    max-width: 20%;
    width: 30% !important;
    padding: 0 4px;
}

/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #0f7c97 white;
  }
  
  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 12px;
  }
  
  *::-webkit-scrollbar-track {
    background: white;
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: #0f7c97;
    border-radius: 20px;
    border: 3px solid white;
  }
  

@media (max-width: 800px) {
    .card {
        flex: 50%;
        max-width: 50%;
        width: 50% !important;
    }
}

@media (max-width: 600px) {
    .card {
        flex: 100%;
        max-width: 100%;
        width: 100% !important;
    }
}


@media (max-width: 800px) {
    .card-flex {
        flex: 50%;
        max-width: 50%;
        width: 50% !important;
    }
}

@media (max-width: 600px) {
    .card-flex {
        flex: 100%;
        max-width: 100%;
        width: 100% !important;
    }
}


.medical-service>table{
    width: 70%;
    text-align: right;
    height: 40px;
  }
  .medical-service>table>tr>td{
    width: 33%;
    text-align: right;
  }

  #search_insuree{
    margin: 10px;
  }