/* /includes/v4/_site.css */
/*
    #2a0d3c;  rgb(42,13,60) darkest
    #3a1154;  rgb(58,17,84) dark
    #4f226c;  logo color
    #baa5c9;  1/2 way between logo and lightest
    #f5eefd;  light purple
    #f3f1f5;  grey with purple tint
*/

:root { /* TODO need to replace values in code below :root section with these variables */
  --header-height: 58px;
  --border-color: #ccc;
  --heading-background-color: #f3f1f5;
  --heading-text-color: #4f226c;
  --color-med-grey: #707070;       /* used for de-emphasized text but WCAG AA compliant (on white background) */

  /* logo shades */
  --color-logo: #4f226c;
  --color-logo-lite: #BAA5C9;      /* btn-primary */
  --color-logo-lighter: #ede1fb;   /* btn-secondary */
  --color-logo-lightest: #f7f1f8;  /* btn-tertiary */
  --color-logo-lite-grey: #f3f1f5; /* used for div backgrounds */
  --color-logo-hilite: #f5eefd;    /* use to highlight table rows on hover, etc. */

  /*TODO: add these to _site.css */
  /* color pairs for backgrounds (lite) and titles (dark) - used on search page and codes.php */
  --color-turquoise-dark:     #007B89; /* ICD10CM, ICD-10 Coding Clinic */
  --color-turquoise-lite:     #e4f1f1;
  --color-lincoln-green-dark: #437F71; /* available */
  --color-lincoln-green-lite: #eaf4f2;
  --color-green-dark:         #388538; /* Other (ICD9, ABC) */
  --color-green-lite:         #e3ffdf;
  --color-hunter-green-dark:  #355E3B; /* available */
  --color-hunter-green-lite:  #dcebde;
  --color-olive-green-dark:   #777713; /* Hospital/Facility */
  --color-olive-green-lite:   #f3f9da;
  --color-brown-dark:         #8E6F48; /* Dictionaries */
  --color-brown-lite:         #e7ded3;
  --color-dark-orange-dark:   #AE6137; /* Modifiers */
  --color-dark-orange-lite:   #FFE2AF;
  --color-salmon-dark:        #C64A4A; /* available */
  --color-salmon-lite:        #fcdbce;
  --color-dark-red-dark:      #982E3B; /* available, Newsletters:BC Advantage */
  --color-dark-red-lite:      #f9dde0;
  --color-puce-dark:          #A95C68; /* available */
  --color-puce-lite:          #f6eff0;
  --color-dark-pink-dark:     #B9457C; /* HCPCS, HCPCS Coding Clinic */
  --color-dark-pink-lite:    #fbebfe;
  --color-red-purple-dark:    #8B008B; /* Newsletters */
  --color-red-purple-lite:    #E6DAE6;
  --color-violet-dark:        #7229D1; /* CPT (ama) */
  --color-violet-lite:        #eadef9;
  --color-iris-dark:          #5D3FD3; /* available */
  --color-iris-light:         #efecfb;
  --color-dark-blue-dark:     #354189; /* Medicare */
  --color-dark-blue-lite:     #eceaff;
  --color-blue-dark:          #0058C8; /* available, Newsletters: JustCoding */
  --color-blue-lite:          #e0eeff;
  --color-steel-blue-dark:    #4078A5; /* NDC Drugs */
  --color-steel-blue-lite:    #d7e4ef;

  --color-ama-dark:  #7229D1; /* AMA, CPT, CPT Asst, CPT KB*/
  --color-ama-lite:  #eadef9;
  --color-dh-dark:   #137AC3; /* DecisionHealth articles */
  --color-dh-lite:   #e4f2fc;
  --color-fac-dark:  #4F226C; /* Find-A-Code */
  --color-fac-lite:  #f1e9f1;
  --color-aapc-dark: #467C73; /* AAPC */
  --color-aapc-lite: #ebf4f2;
}

html, body {
  overflow-x: clip;
}
body {
  padding-top: 56px
}
.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px #baa5c9;
  border: 1px solid #baa5c9
}
.form-control2:focus {
  outline: none;
  box-shadow: 0 0 2px 0 #baa5c9;
  border: 1px solid #baa5c9
}

.h1, .h2, .h3, .h4, h1, h2, h3, h4 {
  color: #3a1154;
  font-weight: 200;
  page-break-after: avoid;
}
.h1 small, .h2 small, .h3 small, .h4 small, h1 small, h2 small, h3 small, h4 small {
  font-weight: 200;
}
.h5, .h6, h5, h6 {
  color: #3a1154;
  font-weight: 400;
}
.h1, h1 {
  padding-top: 1rem;
}
.h6, h6 {
  font-size: 1.1rem;
}
.h2-subtitle {
  font-size: 1rem;
  color: #999;
  margin: 0 0 0 1rem;
  padding: 0;
  font-weight: 200;
}
.h2-subtitle:active, .h2-subtitle:focus {
  font-size: 1.2rem;
  color: #222;
}
.h2-sections {
  font-size: 1rem;
  font-weight: 200;
  color: #4f226c;
}
.header-small {
  font-size: .6em;
}

@media print {
  .no_print, .no_print *, .no-print, .no-print * {
    display: none !important;
  }
  body, main {
    top: 0;
    margin: 0;
    padding: 0;
  }
  a, a:visited {
    color: black !important;
    text-decoration: none !important;
  }
  #printCopyrightDiv {
    display: block !important;
  }
  #printLogoImg {
    /*      filter: invert(100%); using a purple logo file now vs white */
  }
  .print {
    display: block !important;
  }
}

input {
  accent-color: #4F226C;
}

/* header */
#mainNavbar > ul > li > a.dropdown-toggle::after {
  display: none;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .8);
}
.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, .8);
}
#notepadButton {
  margin: 0;
}
#notepadButton2 {
  display: none;
}
#myBookmarksButton {
  margin: 0 2rem 0 .5rem;
}
#myBookmarksButton2 {
  margin: 0 1.85rem;
}
#myBookmarksButton a:hover, #myBookmarksButton2 a:hover {
  text-decoration: none;
}
#myBookmarksButton2 {
  display: none;
  position: absolute;
}
#headerSearchStr::placeholder {
  color: rgba(255, 255, 255, .8);
  opacity: 1; /* Firefox */
}
#headerSearchStr:focus {
  background-color: white;
  color: #4f226c !important;
}
button#dropdownMenuButton.btn.btn-secondary.dropdown-toggle:focus {
  box-shadow: none;
}
.dropdown-menu {
  border: 1px solid #ddd;
  margin-top: -8px;  /* prevents mouse from hovering outside of menu and hiding submenu */
}
.nav-item > .dropdown-menu {
  margin-top: -2px
}
/* show navbar menu dropdowns on hover, but don't open dropdowns on hover in other places */
.navbar-nav .dropdown:hover > .dropdown-menu {
  display: block;
}
.dropdown-item {
  padding: .25rem 1.5rem .25rem 1rem;
}
.dropdown-item:focus, .dropdown-item:hover {
  background-color: #f5eefd;
}
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* used for the "more | history" menu item which opens a popup */
.dropdown-submenu-fake {
  position: relative;
}
.dropdown-submenu-fake a::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}
#headerSearchStr {
  width: 250px;
  border: 0;
  padding: 5px 10px;
  background-color: transparent;
  color:white;
  vertical-align: top;
  margin-top: 2px;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  z-index: 2;
}
#headerSearchStr:focus {
  border-radius: .5rem;
  border-bottom: 0;
  margin-top: 1px;
}
#headerSearchStr2, #headerSearchStr3 {
  display: inline-block;
  max-width: 570px;
  font-size: 18pt;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #4f226c;
  padding: 5px 10px;
  z-index: 2;
  color: #4f226c;
}
#headerSearchStr2 {
  width: calc(98% - 60px)
}
#headerSearchStr2:focus {
  border-radius: .5rem;
  border-bottom: 0;
  margin-top: -1px; /* prevent movement when 2px outline border is added on focus */
  margin-bottom: 1px; /* prevent movement when 2px outline border is added on focus */
}
#headerSearchStr3 {
  background-color: transparent
}
#headerSearchStr3:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 1px solid #baa5c9;
}

.history-link a {
    color: #4F226C;
}

.code-notes-div {
  display: none;
  border: 1px solid rgba(0, 0, 0, .125);
  padding: .75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #f8f9fa;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  overflow-y: hidden;
}

.breadcrumb {
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.breadcrumb a {
  color: #4F226C;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: .15rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding-right: .15rem;
}

#bodyBreadcrumbsButton .dropdown .btn {
  margin: 0;
  padding: 0;
  padding-left: 10px;
  font-size: .9rem;
}

/* body main */
.main-fixed {
  padding-top: 1rem;
  font-size: 1.1rem;
  position: relative;
}

.main-fluid {
  font-size: 1.1rem;
  padding: 0;
  margin: 0;
  position: relative;
}

.main-fixed a, .main-fluid a {
  color: #4F226C;
}

.search-container {
  background-color: #f5eefd;
  height: 70% vh;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  border-radius: 4px;
}

.title-demo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
}

.title-demo-container .btn.btn-demo-video {
  margin: 0 0 0 20px;
  background-color: #fff;
  opacity: 1;
}

.title-demo-container .btn.btn-demo-video:hover {
  margin: 0 0 0 20px;
  background-color: #4f226c;
  opacity: 1;
  color: #fff;
}

.search-container .title-demo-container .page-header-text h1 {
  font-weight: 700;
  font-size: 2.7rem;
  margin: 0;
  padding: 0;
  text-align: right;
}

.search-container form {
  width: 100%;
}

.new-search-container {
  display: flex;
  width: 50%;
  margin: 30px auto;
  background-color: #fff;
  border-radius: .5rem;
  padding: 30px 20px;
}

.new-search {
  padding: 20px;
  text-align: center;
}

.new-search {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 15px 20px 15px;
  width: 100%;
}

.new-search .search-input {
  display: flex;
  justify-content: center;
  width: 100%;
}

.new-search .search-input input[type="text"] {
  width: 80%;
}

.new-search .search-input input[type="submit"] {
  width: 85px;
  background-color: #4f226c;
  color: #fff;
  font-weight: 400;
  word-spacing: 1.1rem;
  font-size: 1.2rem;
  padding: 8px 5px;
  outline: none;
  border: none;
  transition: transform 500ms ease-out;
  border-bottom: solid 1px #4f226c;
}

.new-search .search-input input[type="submit"]:focus {
  outline: none;
  border: none;
}

.new-search .search-input input[type="submit"]:hover {
  background-color: #4f226c;
  transform: scaleX(1.03);
  z-index: 3;
  color: #fff;
}

.new-search .new-search-quick-links {
  padding-top: 40px;
  font-size: .9rem;
}

.new-search .new-search-quick-links a {
  text-decoration: none;
  color: #4f226c;
  font-size: 1rem;
  padding: 0 3px;
}

.new-search .new-search-quick-links a:hover {
  text-decoration: none;
  color: #baa5c9;
}

/* footer */
.footer {
  clear: both;
  margin-top: 50px;
  padding: 30px;
  background-color: #f3f1f5;
  color: #999;
}
.footer a {
  color: #999;
}
.footer .footer-larger-links {
  padding-bottom: .5rem;
}
.footer .footer-larger-links a {
  color: #777;
  display: inline-block;
  padding: .5rem .5rem 0;
}
.footer .footer-smaller-links {
  margin-bottom: 1rem;
}
.footer .footer-smaller-links a {
  font-size: .9rem;
  color: #999;
  display: inline-block;
  padding: .1rem .5rem .1rem;
}
.footer-button {
  width: 220px;
  margin: 0 2rem .5rem;
  padding: 1rem 2rem;
  font-size: 1.75rem;
  background-color: #f5eefd;
  box-shadow: 0.1rem 0.1rem 0.1rem #ddd;
  border: 0;
  border-radius: .25rem;
  display: inline-block;
}
.footer-button:hover {
  background-color: #baa5c9;
  text-decoration: none;
  color: white;
}

/* media size differences */
@media (max-width: 991.98px) { /* lg */
  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    right: 100%; /* change to "left" to come from the right side */
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: visibility 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    -webkit-transform: translateX(100%); /* change to "-100%" to come from the right side */
    transform: translateX(100%); /* change to "-100%" to come from the right side */
  }
  .navbar-brand {
    position: absolute;
    left: calc(50% - 90px);
  }
  #myBookmarksButton {
    display: none;
  }
  #myBookmarksButton2 {
    display: block;
  }
  #notepadButton {
    display: none;
  }
  #notepadButton2 {
    display: block;
  }
}

/* text styles */
.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }

b, strong {
  font-weight: 600;
}

.small, small {
  font-size: 80%;
  font-weight: inherit;
}

code, .code {
  color: #777;
}

.deemphasize {
  margin-bottom: .5rem;
  font-style: italic;
  color: #595959;
  font-size: .9rem;
}

.edit-table-label {
  color: #aaa;
  font-size: .9rem;
}

.hang_indent {
  margin-left: 4em;
  text-indent: -4em;
  padding-bottom: 0;
  margin-bottom: 0;
}

.hanging-indent {
  margin-left: 2rem;
  text-indent: -2rem;
  padding-bottom: 0;
  margin-bottom: 0;
}

.beta {
  vertical-align: super;
  font-size: 50%;
  font-style: italic;
  font-weight: bold;
  color: red;
}

.new_item, .new-item {
  font-weight: bold;
  color: red;
  font-size: 75%;
  vertical-align: super;
  line-height: 0;
}

.reg {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

.text-label {
  font-style: italic;
  color: #aaa;
}

.hilight, .highlight , .search-hilight {
  background-color: #fffbce; /* not-so-bright yellow */
}

@keyframes highlight-fadeout {
  0% {
    background: #fffbce;
  }
  100% {
    background: none;
  }
}

.highlight-fadeout {
  animation: highlight-fadeout 7s;
}

/* anti-phishers and poster-bots */
.bbait {
  display: none;
}

.pop-open-link { /* use in a <p> tag as the dotted link that opens a hidden div */
  border-bottom: 1px dotted #4f226c;
  color: #4f226c;
  cursor: pointer;
  display: inline-block;
}

/* button styles */
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
  outline: revert;
  box-shadow: none;
}

.css_button {
  color: #fff;
  background-color: #4f226c;
  padding: .4rem 1.4rem;
  border: 1px solid #4f226c;
  cursor: pointer;
  border-radius: .25rem;
  margin-top: -1px;
}

.css_button:hover, .css_button:focus, .css_button:active {
  background-color: #baa5c9;
  border: 1px solid #baa5c9;
}

.css_button_nav, .css_button_nav2 {
  background-color: #f5eefd;
  border: 1px solid #f5eefd;
  color: #4f226c;
}

/* bootstrap 4 overrides */
.btn {
  text-transform: lowercase;
}

.btn-tertiary {
  color: #4f226c; /* logo color */
  background-color: #f3f1f5; /* purplish-grey */
  border: 1px solid #f3f1f5; /* purplish-grey */
}

.btn-tertiary:hover, .btn-tertiary:active, .btn-tertiary:focus, .btn-tertiary.active.focus, .btn-tertiary.active:focus, .btn-tertiary.active:hover, .btn-tertiary:active.focus, .btn-tertiary:active:focus, .btn-tertiary:active:hover, .open > .dropdown-toggle.btn-tertiary.focus, .open > .dropdown-toggle.btn-tertiary:focus, .open > .dropdown-toggle.btn-tertiary:hover {
  color: #4f226c; /* logo color */
  background-color: #f5eefd; /* light purple */
  border: 1px solid #f5eefd;  /* light purple */
}

.btn-tertiary:not(:disabled):not(.disabled).active:focus, .btn-tertiary:not(:disabled):not(.disabled):active:focus, .show > .btn-tertiary.dropdown-toggle:focus {
  box-shadow: none;
  color: #4f226c; /* logo color */
  background-color: #f5eefd; /* light purple */
  border: 1px solid #f5eefd; /* light purple */
}

.btn-tertiary:disabled, .btn-tertiary.disabled {
  color: white;
  background-color: #f3f1f5; /* purplish-grey */
  border: 1px solid #f3f1f5; /* purplish-grey */
}

.btn-clear {
  color: #baa5c9 !important; /* 1/2 way between logo and lightest */
  background-color: inherit !important;
  border: 1px solid #f3f1f5 !important; /* purplish-grey */
}

.btn-clear:hover, .btn-clear:active, .btn-clear:focus, .btn-clear.active.focus, .btn-clear.active:focus, .btn-clear.active:hover, .btn-clear:active.focus, .btn-clear:active:focus, .btn-clear:active:hover, .open > .dropdown-toggle.btn-clear.focus, .open > .dropdown-toggle.btn-clear:focus, .open > .dropdown-toggle.btn-clear:hover {
  color: #4f226c !important; /* logo color */
  background-color: #f3f1f5 !important; /* purplish-grey */
  border: 1px solid #f3f1f5 !important; /* purplish-grey */
}

.btn-clear:not(:disabled):not(.disabled).active:focus, .btn-clear:not(:disabled):not(.disabled):active:focus, .show > .btn-clear.dropdown-toggle:focus {
  box-shadow: none;
  color: #4f226c !important; /* logo color */
  background-color: #f3f1f5 !important; /* purplish-grey */
  border: 1px solid #f3f1f5 !important; /* purplish-grey */
}

.btn-clear:disabled, .btn-clear.disabled {
  color: white !important;
  background-color: #f3f1f5 !important; /* purplish-grey */
  border: 1px solid #f3f1f5 !important; /* purplish-grey */
}

.btn-page-nav-small {
  /* color: #ccc; */
  padding: .25rem .5rem;
}

.btn-large {
  font-size: 1.2rem !important;
}

.btn-xl {
  font-size: 1.5rem !important;
}

.btn-small {
  font-size: .8rem !important;
}

.btn-short {
  padding: .15rem .75rem;
}

.btn-right {
  float: right;
  margin: .25rem 0;
}

/* section styles */
.demo_video_button_div {
  float: right;
  padding: 7px;
  border: 1px solid #555;
  border-radius: 10px;
  box-shadow: 1px 1px;
  margin: 10px;
  font-size: 12px;
  cursor: pointer;
}

.demo_video_button_div img {
  float: left;
  padding-right: 7px
}

.warning-div {
  background-color: #fff0f0;
  color: black;
  margin: 10px;
  border: 0;
  border-radius: 10px;
  padding: 10px 20px 5px;
}

.warning-div .warning-title {
  color: red;
  font-weight: bold;
  font-size: 1.25rem;
}

div.note-div {
  border-radius: .5rem;
  background-color: #f5eefd;
  padding: .5rem 1rem;
  margin: 0 0 1rem 0;
}

div.note-div a {
  text-decoration: underline;
}

div.note-div > p:last-child {
  margin-bottom: 0;
}

.copyright-div {
  clear: both;
  padding: .5rem 0;
  color: #707070;
  font-size: 85%;
}

.copyright-div a {
  text-decoration: underline;
}

.modal-dialog.modal-dialog-video {
  max-width: 800px;
  margin: 30px auto;
}

.modal-dialog.modal-dialog-video .modal-body {
  position: relative;
  padding: 0;
}

.modal-dialog.modal-dialog-video .close {
  position: absolute;
  right: -30px;
  top: 0;
  z-index: 999;
  font-size: 2rem;
  font-weight: normal;
  color: #fff;
  opacity: 1;
}

#bannerCarousel {
  margin-left: 5rem;
  margin-right: 5rem;
}

#bannerCarousel .carousel-control-prev {
  margin-left: -6rem;
  filter: invert(100%);
}

#bannerCarousel .carousel-control-next {
  margin-right: -6rem;
  filter: invert(100%);
}

#bannerCarousel .carousel-indicators {
  bottom: -3rem;
}

#bannerCarousel .carousel-indicators li {
  background-color: #000;
  opacity: .5;
}

#bannerCarousel .carousel-indicators li.active {
  filter: invert(70%);
}

#bannerCarousel .carousel-inner {
  border: 1px solid #ccc;
  box-shadow: 4px 4px 4px #bbb, 9px 9px 9px #ccc
}

/* search box - remove when/if search box changed to bootstrap classes */
.search-box {
  margin-bottom: 2rem;
}

.search-box input[type="text"], .search-box input[type="search"] {
  font-size: 1.5rem;
  display: inline;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  width: calc(100% - 7rem);
  max-width: 500px;
}

.search-box input[type="submit"] {
  font-size: 1.5rem;
  margin-top: -.7rem;
  margin-left: -.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.search-results {
  margin: 2rem 0 1.5rem;
}

.search-no-results {
  margin: 2rem;
}

/* list of search results */
.search-results-list {
  border-bottom: 1px solid #f5eefd;
}
/* each article in the list */
.search-reaults-list-item {
  border-top: 1px solid #f5eefd;
  padding: .5rem 0;
}
.search-results-list-item-issue-title {
  text-transform: uppercase;
  margin-top: .5rem;
  font-size: .9rem;
  margin-left: 2rem;
}

/* for pages that have the three column navigation (ie: /hcpcs/hcpcs-supply-dme-codes.html */
.page_box_container {
  margin-bottom: 3rem;
}

.page_box_container-2 {
  margin: 0 auto;
  margin-bottom: 1rem;
  width: 1100px;
}

.page_box_title {
  font-size: 1.5rem;
  margin: .75rem 0 .5rem;
  color: #999;
}

.page_category {
  margin: 2.5rem 0 .5rem;
  border-bottom: 1px solid #eee;
}

.page_category.page_category_first {
  margin: .75rem 0 .5rem;
}

.page_box_content a {
  margin-bottom: .5rem;
}

.page_box_link {
  display: block;
}

.page-text-area {
  max-width: 700px;
}

.page-text-area-2 {
  max-width: 1100px;
  margin: 0 auto;
}

.page-text-area-2 p {
  font-size: 1.2rem;
}

/* fac icons combined into single sprite file */
.fac-icon {display:inline-block;width: 22px;background: url(/static/v1a/images/icons/sprites.gif) no-repeat top left; }
.fac-icon-bookcase {background-position: 0 0;width: 22px;height: 22px; }
.fac-icon-find-a-code-llc {background-position: 0 -32px;width: 22px;height: 22px; }
.fac-icon-findacode-com {background-position: 0 -64px;width: 22px;height: 22px; }
.fac-icon-information {background-position: 0 -96px;width: 22px;height: 22px; }
.fac-icon-kaboodle {background-position: 0 -128px;width: 22px;height: 22px; }
.fac-icon-kcontrol {background-position: 0 -160px;width: 22px;height: 22px; }
.fac-icon-kfig {background-position: 0 -192px;width: 22px;height: 22px; }
.fac-icon-khelpcenter {background-position: 0 -224px;width: 22px;height: 22px; }
.fac-icon-knode {background-position: 0 -256px;width: 22px;height: 22px; }
.fac-icon-korgac {background-position: 0 -288px;width: 22px;height: 22px; }
.fac-icon-ktip {background-position: 0 -320px;width: 22px;height: 22px; }
.fac-icon-mytools {background-position: 0 -352px;width: 22px;height: 22px; }
.fac-icon-other-code-sets {background-position: 0 -384px;width: 22px;height: 22px; }
.fac-icon-stethescope22 {background-position: 0 -416px;width: 22px;height: 22px; }
.fac-icon-syringe2-22 {background-position: 0 -448px;width: 22px;height: 22px; }
.fac-icon-tool_clipboard {background-position: 0 -480px;width: 22px;height: 22px; }
.fac-icon-viewmag {background-position: 0 -512px;width: 22px;height: 22px; }

/* toggle open/closed pin-able sections */
.section {
  margin-bottom: 2px;
}
.section-closeable {
  cursor: pointer;
}
.section-header {
  line-height: 1.5rem;
  color: #4f226c;
  padding: .5rem;
  z-index: 2;
  overflow: hidden;
  background-color: #f3f1f5;
}
.section-header sup {
  line-height: 0;
}
.section-rounded {
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}
.section-status-icon {
  vertical-align: middle;
  margin-top: -.25rem;
  color: #baa5c9;
}
.section-title {
  font-size: 1.5rem;
  font-weight: 200;
  margin: -.25rem 0 0 .5rem;
}
.section-pin-icon {
  color: #baa5c9;
  margin: .25rem .25rem 0 0;
  padding: 0;
  float: right;
  z-index: 3 !important;
}
.section-body {
  padding: 1rem;
}
.section-opened .section-header i.fa:before {
  content: "\f068"; /* fa-minus */
}
.section-closed .section-header i.fa:before {
  content: "\f067"; /* fa-plus */
}

/* list table */
.list-table {
  border-collapse: collapse;
  width: 100%;
}
.list-table tr:hover {
  background-color: #f5eefd;
}
.list-table th {
  padding: .25rem .5rem;
  background-color: #f3f1f5;
  font-size: .8rem;
  font-weight: normal;
  text-transform: lowercase;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 1px solid #f3f1f5;
}
.list-table.sticky-headers th {
  position: sticky;
  top: 58px;
}
.list-table th:first-of-type {
  border-top-left-radius: .25rem;
}
.list-table th:last-of-type {
  border-top-right-radius: .25rem;
}
.list-table td {
  padding: .25rem .5rem;
  border-bottom: 1px solid #f3f1f5;
  vertical-align: top;
}
.list-table-action-button {
  margin-right: .5rem;
  margin-bottom: .25rem;
  font-size: .8rem;
  padding: .25rem .5rem;
}
.list-table-action-button:hover, .list-table-action-button:focus, .list-table-action-button:active {
  border: 1px solid #f3f1f5;
}
.list-table-action-button:last-child {
  margin-right: 0;
}

/* edit table */
.edit-table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}
.edit-table th {
  padding: .7rem 1rem .4rem;
  font-size: .9rem;
  line-height: 1;
  text-transform: lowercase;
  color: #707070;
  font-weight: normal;
  text-align: right;
  border-top: 0;
  vertical-align: top;
}
.edit-table td {
  font-size: 1rem;
  padding: .25rem .5rem;
  border: 0;
  vertical-align: top;
}
.edit-table td.text-only {
  font-size: 1rem;
  padding: .5rem .25rem .25rem;
  border: 0;
  vertical-align: top;
}
.edit-table-vertical th {
  padding-top: .4rem
}

/* checkbox toggle badges/buttons */
.option-buttons-label {
  margin-bottom: .5rem;
}
.badge-span {
  display: inline-block;
  padding: .5rem 1rem;
  color: #777;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  background-color: white;
  border: 1px solid #eee;
  cursor: pointer;
  margin-right: 7px;
  margin-bottom: 7px;
}
.badge-span:hover, .badge-span:focus {
  border: 1px solid #aaa;
}
.badge-selected {
  background-color: #baa5c9;
  color: #eee;
}
.badge-selected:hover, .badge-selected:focus {
  border: 1px solid #aaa;
}

.product-ad-div {
  /* clear: both; */
  font-size: 1rem;
  border: .25rem solid #f5eefd;
  padding: 1rem;
  margin: 1rem;
  border-radius: .5rem;
  box-shadow: 0.25rem 0.25rem 0.25rem #aaa;
}

/* articles */
.article_title {
  margin: .5rem 0;
  padding: .75rem;
  border: 1px solid #f5eefd;
  border-bottom: 0;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  color: #4f226c;
  cursor: pointer;
}
.article_title > h4 {
  color: #4f226c;
}
.article_date {
  float: right;
  font-style: italic;
  color: #4f226c;
  margin: 5px 7px 5px 20px;
}
.article_summary_div {
  margin: 0 0 25px 15px;
  display: none;
}
.article_author {
  font-style: italic;
}
.article_published {
  font-style: italic;
}
.article_summary a {
  color: #4F226C;
}
.tags-p {
  margin-top: .5rem;
  font-size: .8rem;
}
p.article_link a {
  font-size: 1.2rem;
  font-style: italic;
  margin-left: 1rem;
  color: #4F226C;
}

.topic-pages-list {
  margin: 0 0 2rem 2rem;
}

.topic-pages-list a {
  text-align: left;
}

.enlargable-image {
  cursor: pointer;
}

.enlargable-image .enlagrable-image-span {
  font-size: .9rem;
  font-style: italic;
  display: block;
  margin-left: .5rem;
}

/* codebasket */
.codebasket-dependent {
  display: none
}
body.codebasketready .codebasket-dependent {
  display: inline-block
}
body.codebasketready div.codebasket-dependent, body.codebasketready .codebasket-dependent.block {
  display: block
}
@media only screen and (min-width: 1200px) and (max-width: 2000px) {
  body.codebasketopen-left .container {
    margin-left: 425px
  }
  body.codebasketopen-right .container {
    margin-right: 425px
  }
  body.codebasketopen-right header .container {
    min-width: 1000px
  }
}
.popover-header {
  margin: 0 !important
}
.popover-body .codebasket-star img {
  width: 18px;
  height: 18px
}

/* Dialog box X fix */
.ui-dialog-titlebar-close {
  padding: 0 !important;
}
.ui-dialog-titlebar-close:after {
  content: '';
  width: 18px;
  height: 20px;
  display: inline-block;
  /* Change path to image*/
  background-image: url(/static/jquery/jquery-ui-1.12.1/images/ui-icons_555555_256x240.png);
  background-position: -96px -128px;
  background-repeat: no-repeat;
}

a[id], a[name], h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], div[id], p[id] {
  scroll-margin-top: 63px;
}

/* toggle content button/div - like Bootstrap 5 Accordion */
.toggle-content-btn {
  font-size: 1.2rem;
  text-align: left;
  margin-bottom: .5rem;
  text-transform: none;
  width: 100%;
  display: block;
}
.toggle-content-div {
  display: none;
  padding: 1rem 2rem;
}
.toggle-content-div.is-visible {
  display: block;
}

/* .hidden-div must be defined before .show or show won't take precedence */
.hidden-div {
  display: none;
}
.show {
  display: block;
}

.btn-demo-video {
  float: right;
  cursor: pointer;
  border: 1px solid #4F226C;
  border-radius: 0.5rem;
  margin: 2rem;
  padding: 0.75rem 1.5rem;
  box-shadow: 0.1rem 0.1rem 0.1rem #ddd;
  opacity: .7;
  font-size: 1.5rem;
}

.btn-demo-video:where(:active,:focus,:hover) {
  background-color: #baa5c9;
  opacity: 1;
}

#allFeatures {
  background-color: #fff;
  border-radius: 20px;
  margin-top: 10px;
}

.flexEmbed {
  overflow: auto;
  overflow-y: hidden;
  width: 95%;
  height: 70vh;
  border: 1px solid #ddd;
}

.flexEmbed .html-view {
  padding: 10px;
  overflow: auto;
  height: 70vh;
}

article blockquote {
  margin-left: 1.5rem;
  border-left: 1px solid #ccc;
  padding-left: 1rem;
}

@media screen and (max-width: 1200px) {
  #mainNavbar .btn {
    margin: 0 !important;
    padding: 0 !important;
    padding: .175rem 0.25rem !important;
  }

  .page-text-area-2 {
    margin: 10px 20px;
  }
}

@media screen and (max-width: 992px) {
  #bodyBreadcrumbsButton .dropdown .btn {
    display: none;
  }
  #breadcrumbsCol {
    display: none;
  }
  .nav-scroller {
    padding-top: 0;
  }
  #bodyDatePicker, #locationCol {
    text-align: center;
    margin: 0 auto;
  }
  #bodyDatePicker, #bodyLocations {
    width: 90%;
    text-align: center;
    margin: auto;
  }
  #datepicker_dd {
    width: 90%;
  }
  #DATA0 {
    width: 70%;
  }
  #headerSearchStr3 {
    font-size: 1.2rem;
  }
  #newsletterSubscribeDiv button {
    width: 30%;
  }
} /* end media screen and (max-width: 992px) */

@media screen and (max-width: 768px) {
  .title-demo-container {
    width: 90%;
    justify-content: center;
    flex-direction: column;
  }
  .search-container .title-demo-container .page-header-text h1 {
    font-size: 1.5rem;
  }
  .title-demo-container .btn.btn-demo-video {
    margin: 20px 5px 10px 5px;
    width: 60%;
    opacity: 1;
  }
  .new-search-container {
    width: 80%;
    margin: 20px auto;
  }
  .new-search .search-input {
    flex-direction: column;
  }
  #headerSearchStr3 {
    font-size: 1.1rem;
    margin: 0 auto;
  }
  .new-search .search-input input[type="submit"] {
    margin: 20px auto 0;
  }
  .new-search .new-search-quick-links {
    padding-top: 25px;
  }
  footer h4 {
    font-size: 1.2rem;
  }
  .footer .footer-larger-links, .footer-smaller-links {
    text-align: center;
    width: 90%;
  }
  #newsletterSubscribeDiv {
    width: 90%;
  }
  #newsletterSubscribeDiv form h4 {
    text-align: center;
  }
  #newsletterSubscribeDiv input {
    width: 100%;
  }
  #newsletterSubscribeDiv button {
    width: 100%;
  }
  #freeDemoDiv {
    width: 90%;
  }
  #freeDemoDiv button {
    width: 100%;
  }
  .footer-form {
    margin: 1rem auto !important;
  }
  div.footer-legal {
    margin: 5px auto;
    text-align: center;
  }
  .footer-address {
    display: flex;
    flex-direction: column;
    margin: 3px auto;
    text-align: center;
  }
  .footer-legal a, .footer-legal small a, .footer-legal small {
    font-size: .55rem;
    margin: 2px;
    line-height: .6rem;
  }
  .version {
    margin-bottom: 10px;
  }
} /* end media screen and (max-width: 768px) */

.data-table {
  border-collapse: collapse;
  width: auto;
  margin-left: 0;
  & th {
    font-size: 90%;
    font-weight: 600;
    padding: 0 .5rem;
    text-align: left;
    vertical-align: top;
  }
  & td {
    padding: 0 .5rem;
    text-align: right;
    vertical-align: top;
  }
} /* end data-table */

.table-search-input {
  margin-bottom: .5rem;
  max-width: 200px;
}


/* new from Dave B - 2024-02-12 */


.list2-table {
  border-collapse: collapse;
  width: auto;
  margin-left: 0;
  & tr:hover {
    background-color: #f5eefd;
  }
  & th {
    position: sticky;
    top: var(--header-height);
    background-color: var(--color-logo-lite-grey);
    vertical-align: bottom;
    border-bottom: 1px solid var(--border-color);
    padding: .25rem .5rem;
    font-size: .8rem;
    font-weight: normal;
    text-align: left;
  }
  & th:first-of-type {
    border-top-left-radius: .25rem;
  }
  & th:last-of-type {
    border-top-right-radius: .25rem;
  }
  & td {
    padding: .25rem .5rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
  }
} /* end .list2-table */

.info-table {
  border-collapse: collapse;
  width: auto;
  margin-left: 0;
  & th {
    padding: .25rem 1rem .4rem 0;
    font-size: .8rem;
    color: #707070;
    font-weight: normal;
    vertical-align: top;
  }
  & th.title {
    color: inherit;
    font-weight: 600;
    font-size: 1rem;
  }
  & td {
    padding: .25rem .5rem;
    vertical-align: top;
    line-height: 1.3;
    & ul {
      margin: 0;
      padding-left: 1.25rem;
      & li::marker {
        color: #888;
      }
    }
  }
} /* end .info-table */

/* dialog pop-up */
dialog { /* will automatically expand width-wise to accommodate content */
  padding: 0;
  border: 0;
  border-radius: .5rem;
  width: clamp(400px, 50vw, 95%);
  /* background-color: var(--body-background-color); */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  /* gradient styling */
  background-image: linear-gradient(to bottom right, White 80%, #f8f6fa 20%);
  /* alt: bottom up > background-image: linear-gradient(0deg, #eee8f1, white 30%, white); */
  & > header {
    /* color: var(--selected-text-background-color); - if desired */
    /* background-color: #eee; - specify a header background if desired */
    /* border-bottom: 1px solid var(--border-color); - if desired */
    background-color: white;
    font-size: 1.2rem;
    padding: 0.75rem 0.75rem;
    position: sticky; /* allows header to stay at the top */
    top: 0;
  }
  & > header button.btn-icon {
    border: 0;
    background-color: transparent;
    float: right;
    font-size: 100%;
    margin: -0.25rem -0.3rem 0 .5rem;
    outline: 0;
  }
  & > header button.btn-icon:hover {
    font-weight: bold;
  }
  & > div {
    padding: 0 1.5rem .75rem;
  }
  & > footer {
    padding: 0.75rem 0.75rem;
  }
} /* end dialog pop-up */
dialog.full-width {
  width: 98%;
  max-width: 98%;
}
dialog.wide {
  width: clamp(400px, 70vw, 95%);
}
@media (prefers-color-scheme: dark) {
  dialog::backdrop {
    background-color: #999;
    opacity: .6;
  }
}
body:has(dialog[open]) { /* hide body scroll bar when dialog is open */
  height: 100vh;
  overflow-y: hidden;
}

.color-icon {
  display: inline-block;
  margin: .25rem .5rem 0 0;
  padding: 0 .35rem;
  line-height: 1;
  border-radius: 30%;
}

/* pop-open section (accordion) */
.details-group { }
.details-group details {
  border: 1px solid var(--border-color);
  margin-top: -1px;
}
.details-group details:first-child, .details-group details:first-child summary {
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}
.details-group details:last-child {
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}
.details-group details summary {
  padding: 1rem;
  transition: color .5s;
  transition: background-color .5s;
  color: var(--heading-text-color);
  font-size: 130%;
  line-height: 130%;
  /*    list-style-type: '▽ '; set left-side marker symbol (when closed) */
  /*    list-style-type: ''; no marker */
}
.details-group details summary:hover {
  cursor: pointer;
}
.details-group details summary::marker {
  color: var(--heading-text-color);
  font-size: 75%;
}
.details-group details[open] > summary::marker {
  color: var(--heading-text-color);
}
.details-group > details[open] > summary {
  color: var(--heading-text-color);
  background-color: var(--heading-background-color);
  /*    list-style-type: '△ '; set left-side marker symbol (when open) */
  /*    list-style-type: ''; no marker */
}
@media (prefers-color-scheme: dark) {
  .details-group > details[open] > summary {
    opacity: 1;
  }
}
.details-group > details[open] > summary h3 {
  color: var(--heading-text-color);
}
.details-group details summary h3 {
  display: inline;
  font-weight: normal;
}
.details-group details > div {
  padding: 1rem;
}