/* DOCSIFY THIS */

/* --- Global transitions --- */
#docsifythisurlbuilder a,
#docsifythisurlbuilder button,
#docsifythisurlbuilder input[type="text"],
#docsifythisurlbuilder input[type="url"],
#docsifythisurlbuilder input[type="color"],
#docsifythisurlbuilder input[type="number"],
#docsifythisurlbuilder textarea,
#docsifythisurlbuilder select,
[type="radio"] + img,
input[type="checkbox"] {
  transition: all 0.2s ease-in-out;
}

#docsifythisurlbuilder ::selection {
  background-color: #C1D1E9;
  color: #333;
}


#docsifythisurlbuilder ::-moz-selection {
  background-color: #C1D1E9;
  color: #333;
}

@media screen and (max-width: 768px) {
  /* Force font size to start on a new line, but keep it inline for itself */
  .stackedlabeldropdown:has(label[for="fontsize"]) {
    display: block;
    clear: both;
    margin-top: 10px;
  }
  
  /* Keep line height on the same line as font size */
  .stackedlabeldropdown:has(label[for="lineheight"]) {
    display: inline-block;
    margin-left: 15px; /* Add some spacing between font size and line height */
    margin-top: 0;
  }
  
  /* Keep the actual select elements at their normal width */
  .stackedlabeldropdown select {
    width: auto !important;
    max-width: none !important;
  }
}

#docsifythis .docsify-copy-code-button {
  padding: 0.35em 0.5em;
    background: var(--color-mono-5);
    color: #fff;
    font-size: .85em;
}

.docsify-copy-code-button:focus-visible {
    opacity: 1; /* Keep visible when focused by keyboard */
}

#docsifythis .docsify-copy-code-button > .error,
#docsifythis .docsify-copy-code-button > .success {
    padding: 0.2em 0.35em;
    font-size: 0.8em;
}

#docsifythis .copy-link {
  margin-left: 8px;
  color: var(--link-color);
  cursor: pointer;
  font-size: 16px;
  text-decoration: none !important;
  padding: 2px 4px;
  border-radius: 2px;
  transition: all 0.2s ease;
  display: inline-block;
  margin-right: 4px; /* Add some right margin */
  white-space: nowrap; /* Prevent text wrapping */
  
  /* Minimal button reset */
  background: transparent;
  border: none;
  font-family: inherit;
  
  /* Critical accessibility additions */
  min-height: 24px; /* Touch target size */
}

#docsifythis .copy-link:hover {
  color: var(--link-color);
  background-color: #ddeeff;
  text-decoration: none !important;
}

/* CRITICAL: Focus indicator for keyboard users */
#docsifythis .copy-link:focus {
  outline: 2px solid var(--link-color, #0066cc);
  outline-offset: 2px;
}

#docsifythis h5:hover .copy-link {
  text-decoration: none !important;
}

#docsifythis .version-tag {
  font-size: 0.8em;
  font-weight: 700;
  color: #57985E;
  margin-left: 0px;
}

#docsifythis .version-badge {
  font-size: 0.6em;
  font-weight: 700;
  background-color: #ddd;
  color: #555;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1;
  position: relative;
  top: -3px;
}

@media (prefers-color-scheme: dark) {
  #docsifythis .version-tag {
    color: #57985E;
  }
}

@media (prefers-color-scheme: dark) {
  #docsifythis .version-badge {
    background-color: #555;
    color: #ddd;
  }
}

#docsifythis .title-with-version {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

#docsifythis .docsifythisheader .logoandtext h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0;
  padding-left: 5px;
  display: inline;
  vertical-align: middle;
  line-height: 54px;
  color: #6a6a6a;
}

#docsifythis .docsifythisheader .logoandtext h1 .highlight {
  color: #57985E;
}

#docsifythis h1 .subhead {
  color: #6a6a6a;
}

@media (prefers-color-scheme: dark) {
  #docsifythis h1 .subhead {
    color: #969696;
  }
}

.docsifythisheader .logoandtext img {
  float: left;
  height: 54px;
  vertical-align: middle;
  opacity: 0.8;
}

#docsifythis h1,
#docsifythis h2,
#docsifythis h3,
#docsifythis h4,
#docsifythis h5,
#docsifythis h6 {
  font-weight: 600;
}

.markdown-section #docsifythisdocscontent code {
  white-space: pre-wrap !important;
  overflow-wrap: break-word;
}

.markdown-section #docsifythisdocscontent pre code {
  white-space: pre-wrap !important;
  overflow-wrap: break-word;
}

#docsifythisurlbuilder {
  overflow: visible;
  margin: 1.5em 0;
  padding-top: calc(14px + (16 - 12) * (100vw - 400px) / (800 - 400));
  padding-left: calc(16px + (16 - 12) * (100vw - 400px) / (800 - 400));
  padding-bottom: calc(14px + (16 - 12) * (100vw - 400px) / (800 - 400));
  padding-right: calc(16px + (16 - 12) * (100vw - 400px) / (800 - 400));
  border-radius: 8px;
  background: linear-gradient(to right, #f8f8fc, #e1e3f0);
  border: 1px solid #dddee8;
  box-shadow: 0 .1875rem .4375rem 0 rgba(0, 0, 0, .13), 0 .0625rem .125rem 0 rgba(0, 0, 0, .11);
}

#docsifythisurlbuilder h2 {
  color: #242bae;
}

#docsifythisurlbuilder h3 {
  margin-top: 14px;
  color: #242bae;
}

.docsifythiscustomdetails summary {
  list-style: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  margin-top: -18px;
  margin-bottom: -14px;
}

.docsifythiscustomdetails summary::-webkit-details-marker {
  display: none;
}

.docsifythiscustomdetails summary::-moz-list-bullet {
  list-style: none;
}

.docsifythiscustomdetails summary::marker {
  display: none;
}

.docsifythiscustomdetails .docsifythisinfolabel {
  margin-left: 5px;
}

#docsifythisurlbuilder input[type="text"],
input[type="url"],
input[type="color"] {
  overflow: hidden;
  background-color: #FFF;
  height: 2rem;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 6px;
  border: 1px solid #323232;
}

#docsifythisurlfield {
  width: 100%;
  vertical-align: middle;
  padding: min(15px, 5%) min(15px, 5%);
  font-size: 22px;
}

#docsifythisurlbuilder #browserTabTitle {
  width: 100%;
  max-width: 370px;
}

#docsifythisurlbuilder #editLinkText {
  width: 100%;
  max-width: 370px;
}

#docsifythisurlbuilder #pageTitle {
  width: 100%;
  max-width: 370px;
}

#docsifythisurlbuilder #siteName {
  width: 100%;
  max-width: 370px;
}

#docsifythisurlbuilder #siteLogo {
  width: 100%;
  max-width: 370px;
}

#docsifythisurlbuilder .docsifythisurlbuilderprimarybutton {
  cursor: pointer;
  color: #FFF;
  height: auto;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: -8px;
  width: 260px;
  padding: 10px;
  line-height: 1.3rem;
  background-color: #57985E;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(161, 163, 176, 0.2);
  box-shadow: 0 2px 8px rgba(161, 163, 176, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 1.4rem;
  -webkit-appearance: none;
  white-space: normal;
  overflow: visible;
  word-wrap: break-word;
  text-align: center;
}

@media (max-width: 480px) {
  #docsifythisurlbuilder .docsifythisurlbuilderprimarybutton {
    width: 100%;
  }
}

#docsifythisurlbuilder .docsifythisurlbuildersecondarybutton {
  cursor: pointer;
  color: #2302cd;
  height: auto;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: -8px;
  width: 260px;
  padding: 10px;
  line-height: 1.3rem;
  background-color: transparent;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #2302cd;
  border-radius: 1.4rem;
  -webkit-appearance: none;
  white-space: normal;
  overflow: visible;
  word-wrap: break-word;
  text-align: center;
}

@media (max-width: 480px) {
  #docsifythisurlbuilder .docsifythisurlbuildersecondarybutton {
    width: 100%;
  }
}

.docsifythisurlbuilderoptionsline {
  clear: left;
  margin-top: 6px;
  vertical-align: middle;
}

.docsifythisurlbuilderoptionsindentedline {
  margin-left: 10px;
}

#docsifythisurlbuilder [type="radio"] {
  position: fixed;
  opacity: 0;
}

#docsifythisurlbuilder [type="radio"]+img {
  cursor: pointer;
  margin-right: 0.5rem;
}

#docsifythisurlbuilder [type="radio"]:checked+img {
  outline: 4px solid #2302cd;
  border-radius: 8px;
  position: relative;
}

#docsifythisurlbuilder input[type="number"] {
  width: 4em;
  border: 1px solid #8e8f9d;
  height: 1.9rem;
  padding-left: 0.3rem;
  margin-top: 4px;
  margin-bottom: 6px;
}

#docsifythisurlbuilder figcaption {
  cursor: pointer;
  margin-top: -2px;
  line-height: 1.2rem;
}

#docsifythisurlbuilder .toggle-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0px;
  flex-wrap: nowrap;
}

#docsifythisurlbuilder .toggle-wrapper .toggle {
  flex-shrink: 0;
  margin-top: 2px;
}

#docsifythisurlbuilder .toggle-wrapper label {
  margin-top: -1px !important;
}

#docsifythisurlbuilder input[type="checkbox"] {
  border-color: #8e8f9d;
}

input.toggle:where([type=checkbox], [type=radio]):before {
  background: #8e8f9d;
}

#docsifythisurlbuilder input[type="checkbox"]:checked {
  background: #0324cd;
  border-color: #0324cd;
}

#docsifythisurlbuilder input[type="checkbox"]~label {
  width: 90%;
  padding-left: 0.23rem;
  display: inline-block;
  vertical-align: top;
}

#docsifythisurlbuildershowhidelink {
  margin-top: 16px;
}

#docsifythisurlbuildershowhidelink a:link,
#docsifythisurlbuildershowhidelink a:visited,
#docsifythisurlbuildershowhidelink a:hover,
#docsifythisurlbuildershowhidelink a:active,
#docsifythisurlbuildershowhidelink2 a:link,
#docsifythisurlbuildershowhidelink2 a:visited,
#docsifythisurlbuildershowhidelink2 a:hover,
#docsifythisurlbuildershowhidelink2 a:active,
.docsifythisurlbuilderoptionsline a:link,
.docsifythisurlbuilderoptionsline a:visited,
.docsifythisurlbuilderoptionsline a:hover,
.docsifythisurlbuilderoptionsline a:active {
  color: #3940bf;
  text-decoration-color: #3940bf;
}

#docsifythisurlbuildercustomdetailslink {
  color: #3940bf;
  text-decoration: underline;
  cursor: pointer;
}

#docsifythisurlbuilder hr {
  border: 1px solid #c5d1fd;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

#docsifythisurlbuilder #linkcolorpreview {
  border: solid 4px #0374b5;
  background-color: #0374b5;
  border-radius: 3px;
  outline: solid 1px #777777;
  outline-offset: 0px;
  padding-bottom: 4px;
  margin-left: 4px;
}

#docsifythisurlbuilder #linkhovercolorpreview {
  border: solid 4px transparent;
  background-color: transparent;
  border-radius: 3px;
  outline: solid 1px #777777;
  outline-offset: 0px;
  padding-bottom: 4px;
  margin-left: 4px;
}

#docsifythisurlbuilder #coverpagecolorpreview {
  border: solid 4px #c1e1f6;
  background-color: #c1e1f6;
  border-radius: 3px;
  outline: solid 1px #777777;
  outline-offset: 0px;
  padding-bottom: 4px;
  margin-left: 4px;
}

#docsifythisurlbuilder #linkcolordarkmodepreview {
  border: solid 4px #0685D7;
  background-color: #0685D7;
  border-radius: 3px;
  outline: solid 1px #777777;
  outline-offset: 0px;
  padding-bottom: 4px;
  margin-left: 4px;
}

#docsifythisurlbuilder #linkhovercolordarkmodepreview {
  width: 30px;
  border: solid 4px transparent;
  background-color: transparent;
  border-radius: 3px;
  outline: solid 1px #777777;
  outline-offset: 0px;
  padding-bottom: 4px;
  margin-left: 4px;
}

#docsifythisurlbuilder #coverpagecolordarkmodepreview {
  border: solid 4px #20587d;
  background-color: #20587d;
  border-radius: 3px;
  outline: solid 1px #777777;
  outline-offset: 0px;
  padding-bottom: 4px;
  margin-left: 4px;
}

#docsifythisurlbuilderrestoredefaultsbutton {
  font-family: inherit;
  font-size: inherit;
  text-align: right;
}

.markdown-section #docsifythisdocsindex h3 {
  font-size: 1em;
}

.markdown-section #docsifythisdocscontent h4 {
  font-size: 1.2em;
}

.markdown-section .docsify-this-screenshot {
  width: 85%;
  height: 85%;
  border: solid 1px #dfdfdf;
  border-radius: 0.35em;
}

.markdown-section .docsifythiscolumn35 {
  float: left;
  width: 35%;
}

.markdown-section .docsifythiscolumn65 {
  float: left;
  width: 65%;
  margin-top: -5px;
}

@media screen and (max-width: 768) {
  .markdown-section .docsifythiscolumn35 {
    width: 100%;
    margin-right: 0px;
  }

  .markdown-section .docsifythiscolumn65 {
    width: 100%;
    margin-top: 0px;
  }
}

#docsifythisurlbuilder .stackedlabeldropdown {
  float: left;
  margin: 0 10px 10px 0px;
}

#docsifythisurlbuilder .stackedlabeldropdown label {
  display: block;
  margin-top: 4px;
}

#docsifythisurlbuilder .clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.sidebar .app-name {
  display: none;
}

@media only screen and (max-width: 480px) {
  .docsifythisheader .logoandtext h1 {
    font-size: 1.8rem!important;
    line-height: 35px!important;
  }

  .docsifythisheader .logoandtext img {
    height: 35px;
  }
}

@media only screen and (max-width: 510px) {
  #docsifythisurlbuilderrestoredefaultsbutton {
    margin-top: 40px;
  }

  #docsifythisurlfield {
    min-height: 110px;
    font-size: 18px;
  }
}

#docsifythisurlbuilder .clr-picker .clr-alpha {
  display: none;
}

/* Dark mode colours for use with light + dark themes */
@media (prefers-color-scheme: dark) {
  #docsifythisurlbuilder ::selection {
    background-color: #7265B6;
    color: #fff;
  }

  #docsifythisurlbuilder ::-moz-selection {
    background-color: #7265B6;
    color: #fff;
  }

  #docsifythis .docsifythisheader .logoandtext h1 {
    color: #a6a6a6;
  }

  .docsifythisheader .logoandtext h1 .highlight {
    color: #5FA566;
  }

  #docsifythis .version-tag {
    color: #5FA566;
  }

  #docsifythisurlbuilder h2,
  #docsifythisurlbuilder h3 {
    color: #8798ee;
  }

  #docsifythis p a,
  #docsifythis li a,
  #docsifythis h3 a,
  #docsifythis .copy-link{
    color: #1ba1ee;
  }

  #docsifythisurlbuilder {
    background: linear-gradient(to right, #2b2e3b, #1f1f2f);
    border: 2px solid #3b3f4a;
    box-shadow: 0 .1875rem .4375rem 0 rgba(0, 0, 0, .13), 0 .0625rem .125rem 0 rgba(0, 0, 0, .11);
  }

  #docsifythisurlfield,
  #docsifythisurlbuilder #pageTitle,
  #docsifythisurlbuilder #linkcolor,
  #docsifythisurlbuilder #browserTabTitle,
  #docsifythisurlbuilder #editLinkText,
  #docsifythisurlbuilder #siteName,
  #docsifythisurlbuilder #siteLogo,
  #docsifythisurlbuilder #coverpagecolor,
  #docsifythisurlbuilder #linkhovercolor,
  #docsifythisurlbuilder #linkhovercolordarkmode,
  #docsifythisurlbuilder #linkcolordarkmode,
  #docsifythisurlbuilder #coverpagecolordarkmode {
    background-color: #273338;
    color: #FFF;
  }

  .docsifythisurlbuilderprimarybutton {
    color: black !important;
    background-color: #5FA566 !important;
    border: 1px solid rgba(161, 163, 176, 0.2);
    box-shadow: 0 2px 8px rgba(161, 163, 176, 0.2),
      0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .docsifythisurlbuildersecondarybutton {
    color: #c1bfed !important;
    background-color: transparent !important;
    border: 1px solid #c1bfed !important;
  }

  #docsifythisurlbuilder [type="radio"]:checked+img {
    outline: 4px solid #7e83ed;
    position: relative;
  }

  #docsifythisurlbuilder input[type="checkbox"]:checked {
    background: #817eed;
    border-color: #817eed;
  }

  #docsifythisurlbuilder hr {
    border: 1px solid #5161a4;
  }

  #docsifythisurlbuildershowhidelink a:link,
  #docsifythisurlbuildershowhidelink a:visited,
  #docsifythisurlbuildershowhidelink a:hover,
  #docsifythisurlbuildershowhidelink a:active,
  #docsifythisurlbuildershowhidelink2 a:link,
  #docsifythisurlbuildershowhidelink2 a:visited,
  #docsifythisurlbuildershowhidelink2 a:hover,
  #docsifythisurlbuildershowhidelink2 a:active,
  .docsifythisurlbuilderoptionsline a:link,
  .docsifythisurlbuilderoptionsline a:visited,
  .docsifythisurlbuilderoptionsline a:hover,
  .docsifythisurlbuilderoptionsline a:active {
    color: #c6bfed;
    text-decoration-color: #c6bfed;
  }

  #docsifythisurlbuildercustomdetailslink {
    color: #c6bfed;
    text-decoration: underline;
    cursor: pointer;
  }

  #docsifythis .button {
    color: #283339;
    background-color: #1ba1ee;
  }

  #docsifythis .button-rounded {
    color: #283339;
    background-color: #1ba1ee;
  }

  #docsifythis .mybutton {
    color: #cc0000;
  }

  .docsifythiscolumn65 h4 a {
    color: #1ba1ee;
  }

  #docsifythis summary {
    color: #1ba1ee;
  }
}