/* Styling for the modal */
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      background-color: #fefefe;
      margin:  auto;
      padding: 20px;
      border: 1px solid #888;
      width: 95%;
    }
    .closeModal{
        color: #fc0011;
        font-size: 31px;
        text-align: right;
    }

    /* Styling for the form */
    form {
      display: flex;
      flex-direction: column;
      background-color: #edf2fa;
      padding-left,padding-right,padding-bottom: 10px;
    }

    label {
      margin-top: 10px;
      background-color: white;
      color: #023dde;
      padding-left: 9px;
    }
    .user,select{
        padding: 10px;
    }
    select,input{
        border: none;
        border-bottom: 1px solid #084bbf;
        padding-bottom: 10px;
        color: #014217;
        padding-left,padding-right: 15px;
    }

    button {
      margin-top: 15px;
      align-self: flex-end;
      color: #014217;
      border: 1px solid #03ff57;
      background-color: #e8e8e8;
    }
    .readQN{
        color: #056af7;
        font-size: 21px;
    }
    .Rh,.RhMedication{
        color: #6dde89;
        font-size: 22px;
    }
    .group{
        color: #0e7d4b;
        font-size: 22px;
    }
    .group-list{
        color: #347a94;
    }
    .subOL{
        color: #03b1fc;
    }
    .note{
        background-color: #e4ebe5;
        color: #014a14;ca
        border-style: solid dashed dotted double;
        border-bottom: 10px 20px 5px 0;
        margin-top: 10px;
        text-align: center; 
    }
    /* Style the logo container */
    .logo-container {
      text-align: center;
      margin-bottom: 20px;
    }

    /* Style the logo image */
    .logo-image {
      max-width: 200px;
      max-height: 200px;
    }
      .image-BMI img {
        width: 80%; /* Adjust the width to your preferred size */
        height: auto; /* This ensures the image maintains its aspect ratio */
        display: block; /* To remove any default margins and paddings */
        margin: 0 auto; /* Centers the image horizontally within its container */
     }
    
     /* Styling for the modal */
    .modalBMI {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0.5, 0.5);
        overflow: auto;
        padding-top: 50px;
    }

    .modal-contentBMI {
        background-color: white;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 95%;
        max-height: 80vh;
        border-radius: 10px;
        position: relative;
        box-shadow: 0px 4px 10px rgba(0, 0, 0.7, 0.5);
        overflow-y: auto;
    }
    .closeModalBMI{
        color: #fc0011;
        font-size: 31px;
        text-align: right;
    }
    
    
/* ================= prostate =================*/