comment_table_begin{
// Beging table formating
}

:root{
  /* https://www.w3schools.com/css/css3_variables.asp */
--dci-list-table-th-color-bgr: aqua;
--dci-list-table-hover-color-bgr:yellow;
}
  table {
    border-collapse: separate; /* When borders are separate, the table and each of its table cells can have their own distinct borders, */
                               /* and there is space between them. */
    border-spacing: 4px 10px;    /* border-spacing property sets the distance between the borders of adjacent cells. */
                                /* fist parameter shows vertical space, second shown horrizontal */
  }

  tr {
    background: #f8f8f8;
    height:60px;
  }

  tr:hover {
            background-color: var(--dci-list-table-hover-color-bgr); /* #A9F5F2; */ /*#ffff99; - yelllow */
          }

  th {
    background-color: var(--steel_blue); /* var(--dci-list-table-th-color-bgr); yellow; *//* #80ff00;*/
    color: white;
    font-size:18px;
    font-family: var(--font_Noto);
    font-weight:400;
  }

  th.sorth:hover { background-color:#a2006d; }

  /* Regular style settings for td (shared by all devices) */
  td {
    text-align: center;
    border: 0px solid black;
    padding: 1px; /* padding is the space kept between the content and the border.  */
    font-size:18px;
    font-weight:normal;
    color:var(--black);
    font-family: var(--font_Noto);
  }


  comment_table_end{
  // End table formating
  }

  comment_gender_begin{
  // Begin styling for showing doctor circled F/M
  }

    .txt-circle::after {
      /* used for F/M in table */
      content: "";
      display: block;
      padding-bottom: 100%;
    }

    .txt-circle {
      /* used for F/M in table */
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      border-style: solid;
      border-width: 3px;
      font-size: 18px;
      color: white;
      text-align: center;
      margin:auto;
      font-weight:710;
      background:#ffffff;
    }

    comment_gender_end{
    // End styling for showing doctor circled F/M
    }


  comment_doctors_begin{
  // Begin styling for doctors selected for compare
  }


  .sorta {
    font-size:22px;
    font-weight:bold;
    padding-left:0px;
  }

    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background-color: yellow;
      padding: 1px;
      /*padding-left:10px;*/
      font-size: 20px;
      /* added */
      display: flex;
      align-items: center;
      justify-content: center;

      width: 100px;
    }

  .buttonSelected {
    background-color: #4CAF50; /* Green */
    border: none;
    border-radius: 0.25em;
    color: white;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-left:5px;
    margin-right:5px;
    margin-top:2px;
    padding: 8px 16px;
    width: 180px;
    /* padding: 15px 32px; */
    /* float: left; */
  }

  .buttonBlank {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    opacity: 0.1;
    cursor: not-allowed;
    margin-left:5px;
    margin-right:5px;
    margin-top:2px;
    padding: 8px 16px;
    width: 180px;
    /* padding: 15px 32px; */
    /* float: left; */
  }

  .buttonCancel {
    background-color: yellow ; /* Green */
    border: 10px;
    color: #4CAF50;;
    text-align: right;
    text-decoration:  underline;
    display: inline-block;
    font-size: 16px;
    margin-left:25px;
    margin-right:5px;
    padding: 8px 16px;
    width: 80px;
  }

  .buttonCmp { /* red button View side-by-side */
    background-color: #FF0000; /* red */ /* #4CAF50; Green */
    font-weight: bold;
    border: none;
    border-radius: 0.25em;
    color: white;
    text-align: left;
    text-decoration: underline;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-left:5px;
    margin-right:5px;
    margin-top:2px;
    padding: 8px 16px;
  }

  .buttonCmpBlank {
    background-color: #FF0000; /* #4CAF50; Green */
    font-weight: bold;
    border: none;
    border-radius: 0.25em;
    color: white;
    text-align: left;
    text-decoration: underline;
    display: inline-block;
    font-size: 16px;
    opacity: 0.1;
    cursor: not-allowed;
    margin-left:5px;
    margin-right:5px;
    margin-top:2px;
    padding: 8px 16px;
  }

  comment_doctors_end{
  // End styling for doctors selected for compare
  }

  comment_label_buttons_for_checkboxes_begin{
  // Begin styling label-buttons for checkboxes copied from test_checkbox_button_solution.html
  }

  .cmp-label_ck{
      display:none;
      border: 1px solid var(--darkcyan);
      border-radius: 0.25em;
      font-weight:normal;
      background-color: var(--darkcyan);
      color:white;
        /*
        line-height: 2.2em;
        padding: 0 0.62em;
        font-family: arial, sans-serif;
        font-size: 0.8em;
      */
      font-size:16px;
   }

   .cmp-label_uck{
       display:inline;
       border: 1px solid var(--blue_prime);
       border-radius: 0.25em;
       font-weight:normal;
       background-color: white;
       color:var(--blue_prime);

       font-size:16px;
    }
    comment_label_buttons_for_checkboxes_end{
    // End styling label-buttons for checkboxes copied from test_checkbox_button_solution.html
    }




    /* Media query for mobile devices max-width: 768px*/
    @media (max-width: 600px) {
         th, td {
            font-size: 14px; /* Adjust the font size for mobile devices */
        }

        div.sticky {
             font-size: 16px; /* Adjust the font size for div.sticky on mobile devices */
         }

        .txt-circle, .cmp-label_ck, .cmp-label_uck {
          font-size: 12px; /* Adjust the font size for mobile devices */
        }

        .buttonCancel, .buttonCmp, .buttonCmpBlank, .buttonBlank, .buttonSelected {
          font-size: 14px; /* Adjust the font size for mobile devices */
        }
    }

    /* dci_list_table.html photo start */
    .list-table-photo {
        width: 45px;
        height: 50px;
        overflow: hidden;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ddd;
    }

    .list-table-photo img {
        width:40px;
        height:48px;
        border-radius: 70%;
        object-fit: cover;
        object-position: top; /* or left, right, bottom */
    }

    /* dci_list_table.html photo end */

    /* dci_list_grid.html photo start */

    .circle-border {
        display: inline-block;
        border-radius: 50%;
        overflow: hidden;
        border: 8px solid; /* You can change the border thickness and color */
        border-color: var(--photo_border_color);
        width: 200px;
        height:220px;
        object-fit: cover;
      }

    .circle-border img {
        display: block;
        width: 200px;
        height: auto;
      }

    /* dci_list_grid.html photo end */

/* Layout buttons in dci_list_grid start


.selected {
  background-color: var(--blue_medium1);
  color: white;
}

/*  Layout buttons end */