@charset "utf-8";
/* CSS Document */

/*
Name:            custom.css
Customized:      5/2026 KD Web Hosting Design
*/

/* TEXT HIGHLIGHTING */

::selection {
  background-color: #fff7ca;
  color: #777777;
}
::-moz-selection {
  background-color: #fff7ca; 
  color: #777777;
}

/* HEADINGS */

.tutorials h1, .tutorials h2, .tutorials h3, .tutorials h4, .tutorials h5, .tutorials h6 {
  color: #383f48 !important;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.tutorials h1 {
  font-size: 28px;
  margin-bottom: 15px;
}
.tutorials h2 {
  font-size: 26px;
  margin-bottom: 15px;
}
.tutorials h2.h2-small {
  font-size: 22px;
  margin-bottom: 15px;
}
.tutorials h3 {
  font-size: 24px;
  margin-bottom: 15px;
}
.tutorials h4 {
  font-size: 22px;
  margin-bottom: 15px;
}
.tutorials h5 {
  font-size: 18px;
  margin-bottom: 15px;
}
.tutorials h6 {
  font-size: 14px;
  margin-bottom: 15px;
}

/* PARAGRAPH SPACING ALL */

.tutorials p {
  line-height: 1.9;
  margin: 0 0 10px 0;
}

/* INLINE CODE ONLY */

span.code {
  background-color: #eaeaed;
  padding: 0 3px;
  font-size: 14px;
  font-family: consolas, monospace;
}

/* SPACING */

.pd-20 {
  padding: 0 20px;
}
.p-t-10 {
  padding: 10px 0 0 0;
}
.mtb-0 {
  margin: 0 !important;
}
.ptb-0 {
  margin: 0 !important;
}
.pd-20-20-5-20 {
  padding: 20px 20px 5px 20px;
}
section.m-t-05 {
  margin: 5px 0 0 0 !important;
}
section.m-t-18 {
  margin: 15px 0 0 0 !important;
}
section.m-t-20 {
  margin: 20px 0 0 0 !important;
}
section.m-t-30 {
  margin: 30px 0 0 0 !important;
}
section.m-t-40 {
  margin: 40px 0 0 0 !important;
}
section.m-b-05 {
  margin: 0 0 5px 0 !important;
}
section.m-b-10 {
  margin: 0 0 10px 0 !important;
}
section.m-b-15 {
  margin: 0 0 15px 0 !important;
}
section.m-b-20 {
  margin: 0 0 20px 0 !important;
}
section.m-b-30 {
  margin: 0 0 30px 0 !important;
}
section.m-b-40 {
  margin: 0 0 40px 0 !important;
}

/* LEFT COLUMN */

.header-nav-main nav {
  background-color: #383f48 !important;
}
.header-nav-main nav li {
  border-bottom: none !important;
}
img.headerlogo {
  max-width: 220px;
  height: auto;
}
.sidebar-navigation {
  background-color: #383f48;
  height: auto;
  left: 0;
  top: 0;
  overflow-y: auto;
  overflow: visible;
  font-size: 14px;
  margin-bottom: 20px;
}
.sidebar-navigation ul {
  margin: 0;
  padding: 0;
}
.sidebar-navigation ul li {
  display: block;
  line-height: 2;
}
.sidebar-navigation ul li a {
  position: relative;
  padding-left: 0;
  display: block;
  font-weight: 400;
  text-decoration: none;
  color: #ffffff;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.sidebar-navigation ul li a em {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar-navigation ul li:hover > a, .sidebar-navigation ul li.selected > a {
  background-color: #383f48;
}
.sidebar-navigation ul li ul {
  display: none;
}
.sidebar-navigation ul li ul li {
  font-weight: 400;
}
.sidebar-navigation ul li ul.open {
  display: block;
}
.sidebar-navigation ul li ul li a {
  color: #ffffff;
  font-weight: 400;
  font-size: 13px;
}
.sidebar-navigation ul li ul li:hover > a, .sidebar-navigation ul li ul li.selected > a {
  background-color: #383f48;
}
.sidebar-navigation ul li ul li:hover > a:before, .sidebar-navigation ul li ul li.selected > a:before {
  margin-right: 0;
}
.sidebar-navigation ul li ul li.selected.selected--last > a {
  background-color: #383f48;
  color: #ffffff;
}
.sidebar-navigation ul li ul li.selected.selected--last > a:before {
  background-color: #ffffff;
}
.subMenuColor1 {
  background-color: #383f48;
}
.subMenuColor2 {
  background-color: #383f48;
}
.subMenuColor2 {
  background-color: #383f48;
}
.mdi:before,.mdi-set {
  display: inline-block;
  font: normal normal normal 16px/1 "fontawesome";
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mdi-chevron-down:before {
  content: "\f0d7"
}
.mdi-flip-v:before {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV"
}
.nvtm {
  margin-top: 0 !important;
  height: 100%;
}
.simt {
  margin-top: -30px !important;
}
.nav-no-link {
  color: #ffffff !important;
  font-weight: 600 !important;
}
li.nav-heading {
  color: #ffffff !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

/* HEADER */

.tut-title {
  font-size: 22px;
  font-weight: 300;
  color: #383f48 !important;
  margin-bottom: 5px;
}
h1.dark {
  color: #383f48 !important;
}
h1.dark span {
  font-weight: 300 !important;
}
.breadcrumb-div {
  padding: 0 10px;
}
li.nv-div {
  padding: 0 8px;
}
ul.breadcrumb li {
font-size: 14px !important;
text-transform: none !important;
}
ul.breadcrumb li span {
padding: 0 14px !important;
}
ul.breadcrumb li a, ul.breadcrumb li a:link, ul.breadcrumb li a:visited {
  color: #0088cc !important;
}
ul.breadcrumb li a:hover {
  text-decoration: underline;
  color: #00a1f2 !important;
}
ul.breadcrumb li a:active {
  color: #0088cc !important;
}

/* END OF MARKUP DIVIDER */

.code-end {
  margin-top: 40px !important;
}
.icon-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #dee2e6;
  font-size: 16px;
  margin: 20px 0;
}
.icon-divider::before,
.icon-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #dee2e6;
}
.icon-divider::before {
  margin-right: 12px;
}
.icon-divider::after {
  margin-left: 12px;
}

/* FOOTER */

/*.main {
  padding-bottom: 140px;  space before footer 
}*/
/*footer {
  position: fixed;  sticky footer 
  bottom: 0;
  left: 0;
  width: 100%;
}*/
footer {
  margin-top: 30px !important;
}
footer section {
  margin-bottom: 0 !important;
  padding: 20px 20px 10px 0;
}
.footer-links {
  text-align: right;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  display: inline-block;
  font-size: 13px;
}
ul.footer-links li a {
  padding: 0 8px 0 6px;
  /*border-right: 1px solid #777777;*/
}
ul.footer-links li:last-child a {
  padding-right: 0;
}
.social-icons li a {
  color: #777777 !important;
}
.copyright {
  text-align: right !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
}
.copyright, .copyright a, .copyright a:link, .copyright a:visited {
  color: #777777;
  line-height: 1.7 !important;
}
.copyright a:hover {
  text-decoration: none;
  color: #a0a0a0;
}
.copyright a:active {
  color: #777777;
}
.images {
  margin: 0 auto 14px auto;
}
.images img {
  max-width: 110px;
  width: 100%;
}
.small-text {
  font-size: 11px;
  line-height: 1.7;
}
.small-text a, .small-text a:link, .small-text a:visited {
  color: #777777;
  line-height: 1.7 !important;
}
.small-text a:hover {
  text-decoration: none;
  color: #a0a0a0;
}
.small-text a:active {
  color: #777777;
}
@media (max-width:900px) {
  .images, .text-hidden {
    display: none;
  }
}

/* INDEX.COM */

.photo-text {
  font-weight: normal;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: normal;
}
.icon-circle {
  color: #777777;
  background-color: #383f48;
}








/* ON THIS PAGE TOP MAIN NAV */

.page-nav {
  margin: 0 0 2rem;
  padding: 1rem 1.5rem;
  background: #eaeaed;
  border: 1px solid #dee2e6;
  border-left: 4px solid #383f48;
  border-radius: 4px;
}
.page-nav h2 {
  margin: 0 0 0.75rem;
}
.page-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ATTRIBUTE/VALUE CARD */

.attribute-card {
  border: 1px solid #dee2e6;
  overflow: hidden;
  background: #ffffff;
  line-height: 1.9;
}
.attribute-name {
  margin: 0;
  padding: 8px 0 8px 12px;
  background: #eaeaed;
  border-bottom: 1px solid #dee2e6;
  color: #3cb371 !important;
  font-size: 14.5px;
  font-family: consolas, monospace;
  font-weight: 600;
}
.attribute-summary {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 8px 0 8px 12px;
  border-bottom: 1px solid #ececec;
}
.attribute-values {
  padding: 8px 0 8px 12px;
  display: grid;
  grid-template-columns: 160px minmax(0,1fr);
}
.attribute-values > div {
  padding: 8px 0 8px 12px;
  border-bottom: 1px solid #ececec;
  min-width: 0;
}
.attribute-values .head {
  font-weight: 600;
  background: #eaeaed;
}
.attribute-values code {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: consolas, monospace;
  color: #ff7f50;
}
.attribute-example {
  padding: 0 10px 10px 10px;
}
div.attribute-head {
  margin: 0;
  padding: 0 0 8px 0;
  color: #383f48 !important;
  font-size: 14px;
  font-weight: 600;
}
.attribute-example pre {
  margin: 0;
  padding: 12px;
  background: #eaeaed;
  border-left: 4px solid #cecfd5;
  overflow: auto;
}
.attribute-example code {
  font-family: consolas, monospace;
}

/* STAND ALONE CODE BOXES */

.code-example {
  padding: 0;
}
.code-example pre {
  margin: 0;
  padding: 12px;
  background: #eaeaed;
  border-left: 4px solid #cecfd5;
  overflow: auto;
  font-family: consolas, monospace;
}

/* CODE BOXES WITH LINK TO EDITOR */

.example {
  /*margin-bottom: 40px;*/
  /*background: #eaeaed;*/
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-top: 12px;
}
.toolbar h2.h2-small {
  margin: 0;
  color: #383f48 !important;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-size: 22px;
}
.CodeMirror-linenumber {
  display: none;
}
.actions {
  display: flex;
  gap: 10px;
}
button {
  cursor: pointer;
  margin: 0;
  max-height: 40px;
}
.preview {
  height: 200px;
}
.preview iframe {
  width: 100%;
  height: 100%;
  border: 4px solid #eaeaed;
  border-radius: 0 0 4px 4px;
  border-left: 4px solid #cecfd5;
  padding: 0;
  background: #ffffff !important;
  cursor: pointer !important;
}
.preview iframe a:link {
  cursor: pointer !important;
}
.CodeMirror {
  /*height: 50px;*/
  font-size: 14px;
}
.CodeMirror {
  position: relative;
  overflow: hidden;
  background: #f7f7f7 !important;
  border-left: 4px solid #cecfd5;
  border-radius: 4px 4px 0 0;
  padding: 12px 12px 12px 8px;
  font-size: 14px !important;
  line-height: 1.5 !important;
  height: 300px !important;
}
.cm-s-default .cm-comment {
  color: #adadad;
}
  div.example textarea {
    background: #eaeaed !important;
}

/* CODE BOXES WITH LINK TO EDITOR & SHORT DESCRIPTION */

.example-intro {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}
.example-intro p{
  margin: 0;
  flex: 1;
}
.example-intro .actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.example-intro .actions .btn {
  margin:0;
}
@media (max-width:768px) {
  .example-intro{
     flex-direction:column;
    align-items:flex-start;
  }
  .example-intro .actions {
    flex-wrap: wrap;
  }
}














/* CODE COLORS */

/*
comment      lightgray        #d3d3d3
!doctype     dimgray          #696969
tag          dodgerblue       #1e90ff
attribute    mediumseagreen   #3cb371
value        coral            #ff7f50
text-punct   darkgray         #a9a9a9
property     darkorchid       #9932cc
red          firebrick        #b22222
*/

span.cmt {
  color: #d3d3d3;
  font-family: consolas, monospace;
  font-size: 14px;
}
span.cmt a, span.cmt a:link, span.cmt a:visited,
a span.cmt a, a:link span.cmt, a:visited span.cmt {
  color: #d3d3d3;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.cmt a:hover,
a:hover span.cmt {
  color: #777777;
  font-family: consolas, monospace;
  text-decoration: underline .5px;
}
span.cmt a:active,
a:active span.cmt {
  color: #d3d3d3;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.doc {
  color: #696969;
  font-family: consolas, monospace;
  font-size: 14px;
}
span.doc a, span.doc a:link, span.doc a:visited,
a span.doc a, a:link span.doc, a:visited span.doc {
  color: #696969;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.doc a:hover,
a:hover span.doc {
  color: #777777;
  font-family: consolas, monospace;
  text-decoration: underline .5px;
}
span.doc a:active,
a:active span.dg {
  color: #696969;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.tag {
  color: #1e90ff;
  font-family: consolas, monospace;
  font-size: 14px;
}
span.tag a, span.tag a:link, span.tag a:visited,
a span.tag a, a:link span.tag, a:visited span.tag {
  color: #1e90ff;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.tag a:hover,
a:hover span.db{
  color: #777777;
  font-family: consolas, monospace;
  text-decoration: underline .5px;
}
span.tag a:active,
a:active span.db {
  color: #1e90ff;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.att {
  color: #3cb371;
  font-family: consolas, monospace;
  font-size: 14px;
}
span.att a, span.att a:link, span.att a:visited,
a span.att a, a:link span.att, a:visited span.att {
  color: #3cb371;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.att a:hover,
a:hover span.att {
  color: #777777;
  font-family: consolas, monospace;
  text-decoration: underline .5px;
}
span.att a:active,
a:active span.att {
  color: #3cb371;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.val {
  color: #ff7f50;
  font-family: consolas, monospace;
  font-size: 14px;
}
span.val a, span.val a:link, span.val a:visited,
a span.val a, a:link span.val, a:visited span.val {
  color: #ff7f50;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.val a:hover,
a:hover span.val {
  color: #777777;
  font-family: consolas, monospace;
  text-decoration: underline .5px;
}
span.val a:active,
a:active span.val {
  color: #ff7f50;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.txp {
  color: #a9a9a9;
  font-family: consolas, monospace;
  font-size: 14px;
}
span.txp a, span.txp a:link, span.txp a:visited,
a span.txp a, a:link span.txp, a:visited span.txp {
  color: #a9a9a9;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.txp a:hover,
a:hover span.txp {
  color: #777777;
  font-family: consolas, monospace;
  text-decoration: underline .5px;
}
span.txp a:active,
a:active span.txp {
  color: #a9a9a9;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.prp {
  color: #9932cc;
  font-family: consolas, monospace;
  font-size: 14px;
}
span.prp a, span.prp a:link, span.prp a:visited,
a span.prp a, a:link span.prp, a:visited span.prp {
  color: #9932cc;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.prp a:hover,
a:hover span.prp {
  color: #777777;
  font-family: consolas, monospace;
  text-decoration: underline .5px;
}
span.prp a:active,
a:active span.prp {
  color: #9932cc;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.red {
  color: #b22222;
  font-family: consolas, monospace;
  font-size: 14px;
}
span.red a, span.red a:link, span.red a:visited,
a span.red a, a:link span.red, a:visited span.red {
  color: #b22222;
  font-family: consolas, monospace;
  text-decoration: none;
}
span.red a:hover,
a:hover span.red {
  color: #777777;
  font-family: consolas, monospace;
  text-decoration: underline .5px;
}
span.red a:active,
a:active span.prp {
  color: #b22222;
  font-family: consolas, monospace;
  text-decoration: none;
}

/* BASELINE AVAILABILITY */

.bsln-details ul li {
  font-size: 13px;
}
.bsln-details ul {
  margin-top: 12px;
  margin-bottom: 12px;
  list-style: none;
}
.bsln-details hr {
  border: 0;
  border-top: 1px solid #e1e1e1;
}
div.bsln-comp {
  margin: 20px 0 20px 0;
}
summary.m-bsln img {
  height: 40px;
  width: auto;
}
.bsln {
  background-color: #ffffff;
  color: #ffffff;
  font-size: 1.5rem;
  transition: color 1s, background-color 1s;
}
.bsln[open] {
  background-color: #212529;
  color: white;
}
.bsln > div {
  padding: 12px;
}
.bsln summary {
  padding: 12px;
  transition: color 1s, background-color 1s;
  color: #ffffff;
  background-color: #212529;
}
.bsln[open] summary {
  color: #ffffff;
  background-color: #212529;
}
details.bsln>summary {
  list-style: none;
}
div.bsln-comp summary::-webkit-details-marker {
  display: none
}
div.bsln-comp summary::after {
  font-family: fontawesome;
  content: "\f0da";
  float: right;
  padding-top: 6px;
}
div.bsln-comp details[open] summary:after {
  content: "\f0d7";
}
details.bsln summary {
  background-position: right 40px center;
  background-size: auto 37px;
  background-repeat: no-repeat;
}
details.bsln.l-a summary {
  background-image: url("../img/browser-support/baseline-g-e.png")
}
details.bsln.n-a summary {
  background-image: url("../img/browser-support/baseline-f-e-g-s.png");
}
details.bsln.w-a summary {
  background-image: url("../img/browser-support/baseline-f-e-g-s.png");
}
div.bsln-details p {
  margin: 0 0 0 0;
  color: #f2f2f2;
  font-size: 13px;
  line-height: 1.7;
}
div.bsln-details {
  padding: 0 12px 12px 12px;
}
div.bsln-details p {
  margin-top: 12px;
}
div.bsln-details p.ciu-link {
  margin-top: 12px;
  text-align: center;
  font-weight: 300;
  color: #ffffff;
}
div.bsln-details p.ciu-link a {
  text-decoration: underline;
}
p.bsln-link a:link, p.bsln-link a:visited,
p.bsln-link .fa-arrow-up-right-from-square, p.bsln-link a:link .fa-arrow-up-right-from-square, p.bsln-link a:visited .fa-arrow-up-right-from-square {
  color: #ffffff !important;
  text-decoration: underline;
}
p.bsln-link a:hover, p.bsln-link a:focus,
p.bsln-link a:hover .fa-arrow-up-right-from-square, p.bsln-link a:focus .fa-arrow-up-right-from-square {
  color: #e1e1e1 !important;
  text-decoration: underline;
}
p.bsln-link a:active,
p.bsln-link a:active .fa-arrow-up-right-from-square {
  color: #ffffff !important;
  text-decoration: underline;
}
@media (max-width: 620px) {
  details.bsln summary {
    background-position: right 30px center;
    background-size: auto 26px;
  }
  div.bsln-comp summary::after {
    padding-top: 0;
  }
  summary.m-bsln img {
    height: 20px;
    width: auto;
  }
  summary.m-bsln {
    font-size: 1rem;
  }
}