html, body {
  overflow-x: initial; /* this overrites the current _site.css overflow-x: clip; which makes the page go to the top when a dialog opens */
}
html {
  scrollbar-gutter: stable; /* prevents content shift when page scroll bar disappears (when dialog shows) */
}

input:-webkit-autofill, input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
} /* the above is necessary to prevent Crome (and others) from coloring the input backgroud if an autofill value 
is selected ("-internal-autofill-selected") - remove when alternative method/attribute is avaiable */

:is(.btn-primary, .btn-secondary,  .btn-tertiary, .btn-clear, .btn-link):disabled {
  background: repeating-linear-gradient(-55deg, #AAA, #AAA 10px, #BBB 10px, #BBB 20px);
  cursor: not-allowed;
  color: #222;
}
.btn.btn-primary {
  color: #222222; /*#4F226C;*/
  background-color: #BAA5C9;
}
.btn.btn-primary:hover {
  color: white;
  background-color: #4F226C;
}
.btn.btn-secondary {
  color: #4F226C;
  background-color: #ede1fb;
}
.btn.btn-secondary:hover {
  color: white;
  background-color: #4F226C;
}
.btn.btn-tertiary {
  color: #4F226C;
  background-color: #f7f1f8;
}
.btn.btn-tertiary:hover {
  color: white;
  background-color: #4F226C;
}
.btn.btn-clear {
  color: #4F226C !important;
  background-color: transparent;
}
.btn.btn-clear:hover {
  color: white !important;
  background-color: #4F226C !important;
}
.btn.btn-link {
  color: #4F226C;
  background-color: transparent;
}
.btn.btn-link:hover {
  color: white;
  background-color: #4F226C;
}

.btn-question {
  color: white;
  padding: 0 .25rem;
  float: right;
  background-color: #ccc;
  border-radius: 50%;
  font-weight: bold;
  line-height: 1;
  margin-top: .2rem;
  cursor: pointer;
}

/* TODO move all of above into _site.css */



#search_header_div {
  margin-top: 1.5rem;
  & #index_search_btn {
    float: right;
    font-size: 1.5rem;
  }
  & #search_bar_div {
    display: flex;
    margin-bottom: .75rem;
    & h1 {
      font-size: 1.75rem;
      padding: .5rem 1rem 0 0;
    }
    & search {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      width: calc(100% - 20vw);
      justify-content: space-between;
      border: 1px solid var(--border-color);
      border-radius: .5rem;
      padding: 0;
      & input[type="search"] {
        font-size: 1.5rem;
        display: inline;
        border: 0;
        border-radius: .5rem;
        width: calc(100% - 7rem);
      }
      & input[type="submit"] {
        height: 100%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        font-size: 1.6rem;
        padding-top: 2px;
      }
    }
  } /* end #search_bar_div */
  & #misspell_div {
    & button {
      font-size: 90%;
      padding: .25rem .5rem;
      margin-bottom: .25rem;
    }
    & .didyoumean-div {
      position: relative;
      display: block;
      font-size: 90%;
      border: 1px solid var(--border-color);
      border-radius: .5rem;
      padding: .5rem 1.75rem .25rem .5rem;
      margin-bottom: .5rem;
      & .btn-close {
        position: absolute;
        top: -2px;
        right: 2px;
      }
    }
  } /* end #misspell_div */
  & #extended_search_div {
    position: relative;
    display: block;
    font-size: 90%;
    border: 1px solid var(--border-color);
    border-radius: .5rem;
    margin: .75rem 0 1rem;
    padding: .5rem 1rem .25rem .5rem;
    & .title {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: .75rem;
    }
    & .btn-close {
      position: absolute;
      top: -2px;
      right: 2px;
    }
    & #extended_search_content {
      margin-left: .75rem;
      & h3 {
        display: inline-block;
        font-size: 1.1rem;
        font-style: italic;
      }
      & .common {
        float: right;
        width: 230px;
        border: 1px solid var(--border-color);
        border-radius: .5rem;
        margin: -.5rem 0 1rem 2rem;
        padding: .5rem;
        text-align: center;
        & h3 { text-align: center; }
      }
      & p.section { margin:5px 0; }
      & p.section_with_heading {
        padding-left: 22px;
        text-indent:-22px;
        margin:5px 0;
      }
      & .section_heading { font-style:italic; }
      & .term {
        font-size: 80%;
        padding: .25rem .5rem;
        margin-bottom: .25rem;
      }
      & .btn-clear { color: #4f226c !important; }
      & .btn-clear:is(:active, :focus, :hover) { 
        color: white !important; 
        background-color: #baa5c9 !important; 
      }
    } /* end #extended_search_content */
  } /* end #extended_search_div */
} /* end #search_header */

.ad_div {
  width: fit-content;
  height: fit-content;
  text-align: center;
  margin: 1rem auto 2rem;
  border: 1px solid #ddd;
  border-radius: .5rem;
  padding: 0;

  p {
    font-size: 90%;
    margin: .4rem .5rem .5rem;
  }
  a {
    text-decoration: underline;
  }
}

.ad_div_small {
  width: 400px;
}


/* overall search div containing the left groups-div and right info-dif */
#search_div {
  padding-top: .5rem;
  display: grid;
  grid-template-columns: 240px 1fr;
  /* left side groups/items div */
  & #search_groups_div {
    & label {
      cursor: pointer;
    }
    & input { cursor: pointer; }
    & .clickable-overlay-div { /* used in both #search_options_bottom and #search_items_div */
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    & .group-title-div { /* used in both #search_options_bottom and #search_items_div */
      position: relative;
      margin-bottom: 0;
      padding: .25rem 0 .25rem .5rem;
      color: white;
      font-size: 1.05rem;
      font-weight: 600;
      text-shadow: 1px 1px 1px #777;
      cursor: pointer;
      & label { 
        margin: 0; 
        width: 90%;
      }
    }
    & #search_options_top {
      background-color: var(--color-logo-lite-grey);
      padding: .25rem;
      font-size: .9rem;
      border-top-left-radius: .5rem;
      border-top-right-radius: .5rem;
      & label {
        margin-left: .25rem;
        display: block;
      }
    }
    & #search_options_bottom {
      background-color: var(--color-logo-lite-grey);
      padding: .75rem .25rem .5rem;
      font-size: .9rem;
      border-bottom-left-radius: .5rem;
      border-bottom-right-radius: .5rem;
      & #hcc_options {
        text-align: left;
        margin: 0 0 .5rem 1.5rem;
        & #hcc_options a {
          text-decoration: underline;
          margin-top: .25rem;
          display: block;
        }
      }
      & label {
        margin-left: .25rem;
        display: block;
      }
      & .options-item-div { position: relative; }
    } /* end #search_options_bottom */
    & #search_items_div {
      & .group-open-close-btn {
        font-size: 1.2rem;
        line-height: 1rem;
        width: 13px;
        display: inline-block;
      }
      & .group-checkmark {
        float: right;
        margin-right: .5rem;
      }
      & .group-items-div {
        padding: .25rem 0 .1rem .5rem;
        & label {
          display: block;
          font-size: 80%;
        }
      }
      & .search-item-div { position: relative; }
      & #newsletter_age, #medicare_policy_age {
        font-size: 80%;
        padding: .2rem 0 .2rem .7rem;
        margin: .25rem 1rem .35rem 0;
        width: 96%;
        height: 1.8rem;
      }
      & .color-mark { /* for Newsletters section */
        float: right;
        margin: .25rem .75rem 0 0;
        padding: 0 .3rem;
        line-height: 1;
        border-radius: 30%;
      }
    } /* end #search_items_div */
  } /* end #search_groups_div */

  /* right side with tabbed pages */
  & #search_info_div {
    margin-left: 2rem;
    & #search_tabs_buttons_div {
      border-bottom: 1px solid #ccc;
      margin-bottom: 1px;
      & button {
        font-size: 1rem;
        background-color: white;
        color: #4F226C;
        border: 1px solid #ccc;
        border-bottom: 0;
        border-radius: .5rem;
        padding: .25rem 1rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        z-index: 2;
      }
      & button:hover {
        color: white;
        background-color: #4F226C; /*#baa5c9;*/
      }
      & .selected_tab_btn {
        /* color: white; */
        background-color: #baa5c9;
      }
    } /* end #search_tabs_buttons_div */
    & #search_tabs_divs_div > div {
      padding-top: 1rem;
    }
    & #instructions_div {
      display: none;
      border-radius: .5rem;
      padding: 1rem;
      margin-bottom: 1.5rem;
      background-color: var(--color-logo-lite-grey);
      & ol { }
      & ol li { padding: 0 0 .35rem .5rem; }
    }
    & #search_results_details_sample_div {
      margin: 1.5rem 0 0;
      border-radius: 0.5rem;
      border: 1px solid #aaa;
/*      background-color: var(--color-logo-lite-grey); */
      padding: 1rem;
      & .title {
        text-align:center;
      }
    }
    & .results_list_div {
      height: auto !important;
      & .result-type-title {
        padding: 0;
        margin: 1rem 0 .25rem 0;
        font-weight: 500;
        font-size: .8rem;
      }
      & .result-type-title:first-child {
        margin-top: 0;
      }
      & .search-result {
        & .result-div {
          display: grid;
          grid-template-columns: 95px 30px 1fr;
          margin-bottom: 1px;
          top: var(--header-height);
          background-color: inherit;
          border-bottom: 1px solid #ccc;
          & .category {
            color: white;
            text-align: center;
            min-height: 40px;
            line-height: 1;
            & .label1 {
              font-size: .85rem;
              margin-top: 0.4rem;
              display: block;
              line-height: .75;
            }
            & .label2 {
              font-size: .6rem;
            }
          }
          & .details-button {
            text-align: center;
            padding-top: .25rem;
            padding-left: .25rem;
            & :is(.icon-closed, .icon-opened) {
              color: #696969;
              font-size: 2.5rem;
              cursor: pointer;
            }
            & :is(.icon-closed, .icon-opened):where(:active, :focus, :hover)::before {
              color: black;
            }
            & .icon-closed, .icon-opened {
              display: inline-block;
              margin-top: 2px;
              margin-left: -2px;
              font-size: 1.75rem;
              line-height: .8;
            }
            & .icon-closed::before { /* show + */
              content: '\002B';
            }
            & .icon-opened::before { /* show - */
              content: '\2212';
            }
          }
          & .body {
            display: grid;
            grid-template-columns: 1fr auto;
            margin-top: .45rem;
            margin-bottom: .35rem;
            line-height: 1.3;
            & a { display: none; }
            & .popover-body a { display: initial; }
            & span.link {
              display: none;
              color: var(--color-logo);
              cursor: pointer;
            }
            & span.link:where(:active, :focus, :hover) {
              text-decoration: underline;
            }
            & .icons {
              float: right;
              text-align: right;
              margin: .25rem 0 0 1rem;
              & .icon-group {
                padding-right: .35rem;
                border-right: 1px solid grey;
                margin-right: .25rem;
                & img { /* for system icons - they display better when not in sprites */
                  width: 20px;
                  height: 20px;
                  margin-right: 4px;
                  margin-top: -8px;
                }
                & .icon {
                  display: inline-block;
                  margin-left: 0;
                  height: 20px;
                  width: 20px;
                  cursor: pointer;
                }
                & .badge {
                  font-weight: normal;
                  border-width: 1px;
                  border-color: #707070;
                  border-style: none solid;
                  line-height: .8;
                  padding: .25rem;
                  vertical-align: middle;
                  margin-top: -.35rem;
                  margin-left: .25rem;
                }
                & .btn-message { /* used for non-signed-in users to show message about available icons for subscribers */
                  color: white;
                  background-color: var(--color-logo);
                  border-radius: 50%;
                  margin-top: 2px;
                  padding: 0 .25rem;
                  line-height: 1;
                }
              } /* ends .icon-group */
              & .icon-group:last-child { /* prevent vertical line between icon-groups if only one group */
                border-right: 0;
                margin-right: 0;
              }
            } /* ends .icons */
          } /* ends .body */
        } /* ends .result-div */
        /* ends sticky should only apply when the details are shown (otherwise code preview popovers break) */
        & .result-div:has(+ .details.shown) {
          position: sticky;
        }
        & .details { /* show result details when + button is selected */
          display: none;
          padding: .5rem 1rem 1rem 1rem;
          border-bottom: 1px solid #ccc;
          & > div {
            margin: 1rem 0 0;
            & > h3 {
              font-size: 1.3rem;
              font-weight: normal;
              margin: 1rem 0 0.5rem;
            }
            & > p.item {
              margin: 0 0 0.5rem 2rem;
              padding-left: 1.5rem;
              text-indent: -1.5rem;
            }
            & > ul {
              margin-top: 0.5rem;
            }
            & > .alert-div {
              border: 1px solid red;
              padding: .25rem .5rem;
              background-color: white;
              margin-top: -1px;
            }
            & > .alert-div > .title {
              all: unset; /* clear any other .title styles */
              font-weight: 500;
            }
            & > table.icd10pcs {
              border-collapse: separate;
              border-spacing: 0;
              border-left: 1px solid #888;
              border-top: 1px solid #888;
              & > tbody > tr > td {
                border-right: 1px solid #888;
                border-bottom: 1px solid #888;
                padding: .25rem .5rem;
                vertical-align: top;
                & > table.highlight {
                  font-weight: 500;
                }
                & > table td {
                  font-size: 90%;
                  vertical-align: top;
                  padding: 0;
                }
              }
              & > thead > tr > th {
                border-right: 1px solid #888;
                padding: .25rem .5rem;
                position: sticky;
                top: 0;
                text-align: left;
                font-size: 85%;
                font-weight: 500;
                background-color: #ddd;
                z-index: 2;
              }
            }
            & > table.medicare-docs {
              border-collapse: collapse;
              & > th {
                padding: .25rem .5rem;
                vertical-align: top;
                text-align: right;
                font-size: 90%;
                font-weight: normal;
              }
              & > td {
                padding: .25rem .5rem;
                vertical-align: top;
              }
            }
            & > div.stats-2col {
              display:flex;
              justify-content:space-evenly;
            }
            table.drg-stats-table {
              & th { font-weight: normal; font-size: 90%; padding: .25rem .5rem .25rem 0; }
              & td { font-weight: 600; padding: .25rem 0 .25rem .5rem; }
            }
          } /* end > div */
          & > div:not(:last-of-type) {
            border-bottom: 1px solid #888;
            padding-bottom:  1rem;
          }
          .close-btn {
            margin-top: 1rem;
            border: 1px solid #ccc;
          }
        } /* ends .details */
        & .details.shown {
          display:block;
        }
      } /* ends .search-result */
      & .bottom-buttons-div {
        margin-top: 1.5rem;
        & button {
          margin-right: .5rem;
        }
      }
    } /* ends #search_results_div #search_all_results_div, #search_results2_div */
    & .by-category-btn {
      color: white !important;
      margin: 0 .5rem .5rem 0;
      text-transform: none;
    }
    & .by-category-btn:where(:focus, :hover) {
      background-color: #4F226C !important;
      border: 1px solid #4F226C !important;
    }
    & .special-btn { /* on "special" searches pages */
      display: inline-block;
      width: 350px;
      text-align: left;
      margin: 0 1rem .5rem 0;
    }
    & #edit_link_div { /* on "page index", "web links", "my links" tab/pages */
      display: none;
      margin: 1rem 0 2rem 0;
      padding: .5rem 1rem;
      border: 1px solid #ccc;
      border-radius: .5rem;
    }
    & #edit_link_new_div {
      display: none;
      margin: 1rem 0 2rem 0;
      padding: .5rem 1rem;
      border: 1px solid #ccc;
      border-radius: .5rem;
    }
    & #edit_link_new_div > div:not(:last-child) {
      padding-bottom: .5rem;
      border-bottom: 1px solid #ccc;
      margin-bottom: .5rem;
    }
    & .my-links-edit-btn {
      width: 22px;
      height: 22px;
      padding: 0;
      margin-right: 1rem;
    }
  } /* end #search_info_div */
} /* end #search_div */


/* not included in #search_div as they may be used on other pages and may be moved to _site.css later */
.index-buttons-div {
  margin-bottom: 1rem;
  position: sticky;
  top: var(--header-height);
  & button {
    text-transform: uppercase;
    padding: .25rem .5rem;
    font-size: 1.1rem;
    border-radius: 0;
  }
  & button:is(:active, :focus, :hover) { border: 1px solid #baa5c9; }
  & button:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
  }
  & button:last-child {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
  }
} /* end .index-buttons-div */

.index-entries-div {
  & .letter-div { display: none; }
  & .index-entry {
    display: block;
    margin: 0;
    padding: 0;
    margin-bottom: .25rem;
  }
} /* end .index-entries-div */


/* history columns  - move to _site.css ? */
#last_10_tbl2 a {
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
#last_10_2_searches {
  width: 20%;
  padding-right: 1.5rem;
  font-size: 1rem;
  vertical-align: top;
}
#last_10_2_codes {
  width: 40%;
  padding-right: 1.5rem;
  font-size: 1rem;
  vertical-align: top;
}
#last_10_2_pages {
  width: 40%;
  font-size: 1rem;
  vertical-align: top;
}

#hierarchy_div {
  font-size: 1rem;
  & > div {
    & > span { 
      cursor: pointer; 
      color: var(--color-logo);
    }
    & > span:where(:active, :focus, :hover) {
      text-decoration: underline;
    }
    & > .guidelines-button {
      font-size: .8rem;
      padding-top: 0;
    }
    & > .guidelines { 
      display: none;
      font-size: .95rem;
      border: 1px solid #ccc;
      border-radius: .5rem;
      padding: .25rem 1rem .5rem .5rem;
      margin: .5rem 0 .5rem 2rem;
      & span.icd10-hd { margin-top: 0; }
      & span.icd10-para { width: 700px; }
    }
  }
  & #child_table {
    margin: .5rem 0 0 0;
    width: auto;
    & span {
      cursor: pointer; 
      color: var(--color-logo);
    }
    & span:where(:active, :focus, :hover) {
      text-decoration: underline;
    }
    & .icon { display: inline-block; }
  }
}

/* updated 2025-05-28 for search-details div*/
.icd10-hd {margin-top: 0; padding: 0.05rem 0.5rem;}
span.icd10-hd {display:inline-block;vertical-align:top;width:130px;}
div.icd10-inc > span.icd10-hd {background-color:green; color:white;}
div.icd10-exc1 > span.icd10-hd {background-color:red; color:white;}
div.icd10-exc2 > span.icd10-hd {background-color:darkred; color:white;}
div.icd10-useAddtl > span.icd10-hd {background-color:#66ffff;margin-top:0}
div.icd10-codeFirst > span.icd10-hd {background-color:#ffff00;}
div.icd10-codeAlso  > span.icd10-hd {background-color:#33ff33;}
div.icd10-override-hidden {display:none;}
div.icd10-descr {margin-top:3px;}
div.icd10-notes > span.icd10-hd { /* width:45px;*/}
div.icd10-codeFirst > span.icd10-hd { /* width:65px; */}
div.icd10-svnChr > span.icd10-hd {display:block;width:auto;font-weight:normal;}
div.icd10-svnChr > span.icd10-para {padding-left:30px;}
span.icd10-para {display:inline-block; width:670px; padding-left:0.5rem;}
div.icd10-note { margin-bottom:5px; }


/* intelliSearch switch button styles (lower-left-corner) */
#intellisearch_button {
  margin: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #e6e6e6;
  padding: 10px;
  padding-bottom: 0;
  border-radius: 0 10px 0 0;
  cursor: pointer;
  z-index: 2;
  transition: all ease .2s;
  & button {
    position: absolute;
    top: 0;
    right: 4px;
    padding: 0 .25rem;;
    border: 0 !important;
    z-index: 10;
  }
  & h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
  }
  & p {
    font-size: 14px;
    color: #555;
    line-height: 14px;
    margin-top: 5px;
    margin-bottom: 0;
  }
  & i {
    line-height: 52px;
    font-size: 25px;
    color: #4F226C;
  }
}
#intellisearch_button:hover {
  height: 70px;
  text-decoration: none;
}
img.search_icon_button {
  width:20px;height:20px;margin-right:2px;cursor:pointer;
}