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

/* ========================================
   MAIN PAGES
======================================== */

.images {
  margin: 40px auto 0 auto !important;
}
.images img {
  max-width: 110px;
  width: 100%;
}
@media (max-width:900px) {
  .images {
    display: none;
  }
}

/* ========================================
   PAGE HIGHLIGHTING
======================================== */

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

/* ========================================
   MOVE SCROLL TO TOP OFF TEXT
======================================== */

html .scroll-to-top {
  bottom: 60px !important;
}

/* =========================================================
   PAGE HEADER SPACING
   ========================================================= */

.page-header {
  padding-top: 28px !important;
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}

/* ========================================
   Headings
======================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--dark);
  font-weight: 200;
  letter-spacing: -.05em;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1 {
  font-size: 2.6em;
  line-height: 44px;
  margin: 0 0 24px 0;
}
h2.tutorial {
  font-size: 1.8em;
  font-weight: 600;
  line-height: 27px;
  margin: 28px 0 14px 0;
}
h3.tutorial {
  font-size: 1.4em;
  font-weight: 600;
  line-height: 18px;
  margin: 18px 0 8px 0;
  text-transform: none;
}
h4 {
  font-size: 1.4em;
  font-weight: 600;
  line-height: 27px;
  margin: 0 0 14px 0;
}
h5 {
  font-size: 1em;
  font-weight: 600;
  line-height: 18px;
  margin: 0 0 14px 0;
  text-transform: uppercase;
}
h6 {
  color: var(--dark--200);
  font-size: 1em;
  font-weight: 600;
  line-height: 18px;
  margin: 0 0 14px 0;
}
h4.tutorial {
  color: var(--dark--200);
  font-size: 1em;
  font-weight: 600;
  line-height: 18px;
  margin: 20px 0 8px 0;
}
/* Tutorial heading immediately after a code example */
article section pre + h3.tutorial {
  margin-top: 18px;
}
/* Major heading immediately after a code example */
article section pre + h2.tutorial {
  margin-top: 28px;
}
/* H3 followed by a code example */
article section h3.tutorial + pre {
  margin-top: 20px !important;
}

/* ========================================
   REFERENCE CARDS - index-html.html
======================================== */

.reference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.reference-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  color: #333333;
  background: #f5f5f5;
  border: 1px solid #dddddd;
  text-decoration: none;
  transition: 0.2s ease;
}
.reference-card strong {
  font-size: 1.05rem;
  color: #222222;
}
.reference-card span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #666666;
}
.reference-card:hover {
  background: #eeeeee;
  border-color: #bbbbbb;
  text-decoration: none;
}
.reference-card,
.reference-card:hover,
.reference-card:focus,
.reference-card:active {
  text-decoration: none !important;
}
@media (max-width: 991px) {
  .reference-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .reference-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   ON THIS PAGE
======================================== */

.on-this-page {
  margin: 25px 0 35px;
  padding: 18px 20px;
  background: #f7f7f7;
  border-left: 4px solid #0088cc;
}
.on-this-page h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}
.on-this-page ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.on-this-page li {
  margin: 0;
  padding: 0;
}
.on-this-page a {
  text-decoration: none;
}
.on-this-page a:hover {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .on-this-page ul {
    display: block;
  }
  .on-this-page li {
    margin-bottom: 6px;
  }
}

/* ========================================
   START TUTORIAL BUTTON
======================================== */

.btn-start {
  background-color: #159447;
  border-bottom-color: #0f6f35;
  color: #ffffff;
}
.btn-start:hover,
.btn-start:focus {
  background-color: #19b356;
  border-bottom-color: #159447;
  color: #ffffff;
}

/* ========================================
   TUTORIAL PAGE ADJUSTMENTS
======================================== */

article section ul,
article section ol {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}
article section li {
  margin-bottom: 3px !important;
}
article section li:last-child {
  margin-bottom: 0 !important;
}
/* Paragraph immediately following a list */
article section ul + p,
article section ol + p {
  margin-top: 0 !important;
}
article section pre,
article section .code-line {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  font-family: consolas, monospace !important;
}
.attribute-name, .tag-name {
  color: #777;
  font-weight: 400;
  letter-spacing: normal;
}
/* Consecutive tutorial paragraphs */
article section p:has(+ p) {
  margin-bottom: 10px !important;
}
article section p + p {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* ========================================
   CENTER FOOTER TEXT ON MOBILE
======================================== */

@media (max-width: 767px) {
  #footer .footer-copyright .row {
    text-align: center;
  }
  #footer .footer-copyright p {
    text-align: center;
  }
}

/* =====================================================
   CSS-NAMED-COLORS.HTML
   ===================================================== */

.named-color-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}
/* color swatch */
.named-color-grid > .named-color {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 150px;
  margin: 0 !important;
  padding: 15px !important;
  text-align: center;
  background-color: var(--color);
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}
/* content in swatch */
.named-color-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  gap: 5px;
}
/* color name */
.named-color-content strong {
  display: block;
  font-weight: 600;
}
/* color codes */
.named-color-content code {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
  font-size: 13px;
  white-space: nowrap;
  line-height: 1.5;
  font-family: consolas, monospace !important;
}
/* 4 across */
@media (max-width: 1199px) {
  .named-color-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }
}
/* 3 across */
@media (max-width: 991px) {
  .named-color-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}
/* 2 across */
@media (max-width: 767px) {
  .named-color-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}
/* 1 across */
@media (max-width: 400px) {
  .named-color-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================
   TUTORIAL CODE EXAMPLES
   ===================================================== */

.code-line {
  padding: 12px 15px;
  margin-top: 10px !important;
  margin-bottom: 16px !important;
  color: #777777 !important;
  background: #f5f5f5;
  border: 1px solid #dddddd;
  font-family: Consolas, monospace !important;
}
.code-line code,
code.tutorial {
  padding: 0;
  color: #777777 !important;
  background: transparent;
  border: 0;
  font-family: Consolas, monospace !important;
  font-size: inherit;
}
pre {
  display: block;
  padding: 12px 15px;
  margin-top: 10px !important;
  margin-bottom: 16px !important;
  color: #777777 !important;
  background: #f5f5f5;
  border: 1px solid #dddddd;
  font-family: Consolas, monospace !important;
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}
pre code,
pre code[class*="language-"] {
  display: inline;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: Consolas, monospace !important;
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: inherit;
}

/* =========================================================
   HTML EDITOR
   ========================================================= */

.example-preview-300,
.example-preview-300,
.example-preview-300 {
  margin: 20px 0 0 0;
}
.editor-btn {
  display: inline-block;
  margin: 0 0 10px 0 !important;
}
div.example-preview {
  width: 100% !important;
  border: 1px solid #ddd;
  background: #fff;
}
div.example-preview-300 iframe {
  display: block;
  width: 100%;
  height: 500px !important;
  border: 0;
}
div.example-preview-300 iframe {
  display: block;
  width: 100%;
  height: 400px !important;
  border: 0;
}
div.example-preview-300 iframe {
  display: block;
  width: 100%;
  height: 300px !important;
  border: 0;
}
@media (max-width: 767px) {
  .html-editor-frame {
    height: 400px;
  }
}

/* ========================================
   STICKY FOOTER
======================================== */

html, body {
  min-height: 100%;
}
body {
  min-height: 100vh;
}
.body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1 0 auto;
}
#footer {
  margin-top: auto;
}
.main {
  padding-bottom: 30px !important;
}

/* ========================================
   INLINE CODE
======================================== */

p code, li code {
  padding: 2px 5px;
  background-color: #f4f4f4;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  font-family: consolas, monospace;
  font-size: 0.9em;
  color: #333;
}
.alert-warning code {
  font-family: consolas, monospace;
  font-size: 14.5px;
  color: #dc3545;
}

/* ========================================
  FIX ICONS FOOTER & HEADER
======================================== */

#header .header-social-icons {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}
#header .header-social-icons li {
  margin-left: 3px;
  margin-right: 3px;
}
.social-icons li:hover.social-icons-x a {
  background: #000000 !important;
}
.social-icons li a {
  color: #bcbdbe !important;
}
.divider {
  margin: 0px auto 30px auto;
}

/* =========================================================
   TUTORIAL NAVIGATION
   ========================================================= */

#mainNav {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: poppins, sans-serif;
  background: #383f45;
}
#mainNav,
#mainNav ul {
  list-style: none;
}
#header #mainNav li,
#header #mainNav ul {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   ALL NAV LINKS
   ========================================================= */

#header #mainNav li > a {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 !important;
  color: #eeeeee !important;
  background: transparent;
  font-family: poppins, sans-serif;
  letter-spacing: -0.5px;
  line-height: 1.35;
  text-decoration: none;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   LEVEL 1
   ========================================================= */

#header #mainNav > li > a {
  padding: 9px 22px 9px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.35 !important;
  text-transform: uppercase;
}

/* =========================================================
   ALL LEVELS BELOW LEVEL 1
   ========================================================= */

#header #mainNav > li ul li > a {
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.4 !important;
}

/* =========================================================
   LEVEL 2
   ========================================================= */

#header #mainNav > li > ul > li > a {
  padding: 7px 22px 7px 22px !important;
}

/* =========================================================
   LEVEL 3
   ========================================================= */

#header #mainNav > li > ul > li > ul > li > a {
  padding: 7px 22px 7px 34px !important;
}

/* =========================================================
   LEVEL 4
   ========================================================= */

#header #mainNav > li > ul > li > ul > li > ul > li > a {
  padding: 7px 22px 7px 46px !important;
}

/* =========================================================
   DROPDOWN ITEMS
   ========================================================= */

#header #mainNav li.nav-dropdown {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

#header #mainNav li.nav-dropdown > a {
  padding-right: 10px !important;
}
#header #mainNav li.nav-dropdown > a span.arrowR {
  float: right !important;
  width: 18px;
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit;
  text-align: center;
}
/* Level 1 chevrons */
#header #mainNav > li.nav-dropdown > a span.arrowR > i {
  display: inline-block;
  font-size: 11px;
  line-height: inherit;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.3s ease;
}
/* Nested dropdown chevrons */
#header #mainNav > li ul li.nav-dropdown > a span.arrowR > i {
  display: inline-block;
  font-size: 9px;
  line-height: inherit;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.3s ease;
}
/* Open — rotate downward */
#header #mainNav li.nav-dropdown.is-open > a span.arrowR > i {
  transform: rotate(90deg);
}

/* =========================================================
   SUBMENUS
   ========================================================= */

#header #mainNav li.nav-dropdown > ul {
  display: none !important;
  position: static !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #454c52;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
  flex: none !important;
}
#header #mainNav li.nav-dropdown.is-open > ul {
  display: block !important;
}

/* =========================================================
   HOVER
   ========================================================= */

#header #mainNav li > a:hover {
  background: rgba(0, 0, 0, 0.12) !important;
  color: #ffffff !important;
}

/* =========================================================
   ACTIVE / CURRENT PAGE
   ========================================================= */

#header #mainNav li > a.is-current,
#header #mainNav li > a.active {
  background: #d9d9d9 !important;
  color: #383f45 !important;
}

/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

#header #mainNav li > a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* =========================================================
   FULL SIDE HEADER BACKGROUND
   ========================================================= */

#header .header-body {
  background-color: #383f45 !important;
}

/* =========================================================
   SIDE HEADER LAYOUT
   ========================================================= */

#header .header-column {
  justify-content: flex-start !important;
}

/* =========================================================
   SIDE NAV OUTER SPACING
   ========================================================= */

#header .header-row-side-header {
  padding: 0 !important;
}
#header .side-header-scrollable {
  margin: 0 !important;
  padding: 0 !important;
}
#header .side-header-scrollable .scrollable-content {
  margin: 0 !important;
  padding: 0 !important;
}
#header .header-nav {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   LOGO / NAV SPACING
   ========================================================= */

#header .header-logo {
  margin: 20px 0 10px 0 !important;
}
@media (max-width: 991px) {
  #header .header-nav-main,
  #header .header-nav-main nav,
  #header #mainNav {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #383f45 !important;
    margin-top: -10px !important;
  }
}
@media (max-width: 991px) {
  #header .header-nav-main nav > ul li {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }
}

/* =========================================================
   SOCIAL ICON SPACING
   ========================================================= */

#header .header-social-icons {
  margin-top: 20px !important;
}

/* =========================================================
   STOP PORTO FROM STRETCHING DROPDOWN ITEMS
   ========================================================= */

#header #mainNav > li,
#header #mainNav li.nav-dropdown {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}
/* Submenus should occupy only their actual content height */
#header #mainNav li.nav-dropdown > ul {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Closed */
#header #mainNav li.nav-dropdown:not(.is-open) > ul {
  display: none !important;
}
/* Open */
#header #mainNav li.nav-dropdown.is-open > ul {
  display: block !important;
}

/* =========================================================
   ACTIVE / CURRENT NAVIGATION
   ========================================================= */

/* Active parent topic */
#header #mainNav li.nav-dropdown.is-active > a {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}
/* Active top-level topic */
#header #mainNav > li.nav-dropdown.is-active > a {
  color: #ffffff !important;
  font-weight: 600 !important;
}
/* Current page */
#header #mainNav li > a.is-current {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: inset 4px 0 0 #ffffff !important;
}
/* Current page hover */
#header #mainNav li > a.is-current:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* =========================================================
   EMOJI & ENTITIES/SYMBOL TABLES
   ========================================================= */

.emoji-table, .entities-table, .tutorial-table {
  width: 100%;
  border-collapse: collapse;
}
.emoji-table th, .entities-table th, .tutorial-table th,
.emoji-table td, .entities-table td, .tutorial-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.emoji-table th, .entities-table th, .tutorial-table th {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
.emoji-table td,.entities-table td,.tutorial-table td {
  border-bottom: 1px solid #dddddd;
}
.emoji-table .emoji-sample, .entities-table .entities-sample {
  font-size: 24px;
  line-height: 1.4;
}
.emoji-table code, .entities-table code, .tutorial-table code {
  white-space: normal;
  overflow-wrap: anywhere;
  color: #777777 !important;
  font-family: consolas, monospace !important;
  font-size: 14.5px !important;
}
.tutorial-table td[data-label="Desc.:"] {
  font-size: 14px !important;
}
@media (max-width: 767px) {
  .emoji-table, .emoji-table tbody, .emoji-table tr, .emoji-table td, 
  .entities-table, .entities-table tbody, .entities-table tr, .entities-table td,
  .tutorial-table, .tutorial-table tbody, .tutorial-table tr, .tutorial-table td {
    display: block;
    width: 100%;
  }
  .emoji-table thead, .entities-table thead, .tutorial-table thead {
    display: none;
  }
  .emoji-table tr, .entities-table tr, .tutorial-table tr {
    padding: 10px 0;
    border-bottom: 1px solid #cccccc;
  }
  .emoji-table td, .entities-table td, .tutorial-table td {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 10px;
    padding: 5px 0;
    border-bottom: 0;
  }
  .emoji-table td::before, .entities-table td::before, .tutorial-table td::before {
    content: attr(data-label);
    font-weight: 700;
  }
}

/* =========================================================
   DIVIDER
   ========================================================= */

/* Code Divider */
.code-divider {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 40px;
}
.code-divider::before,
.code-divider::after {
  content: "";
  flex: 1;
  height: 1px;
}
.code-divider::before {
  background: linear-gradient(to right, transparent, #cccccc);
}
.code-divider::after {
  background: linear-gradient(to left, transparent, #cccccc);
}
.code-divider i {
  flex: 0 0 auto;
  font-size: 18px;
}

/* =========================================================
   ALERT BOXES
   ========================================================= */

.alert-warning {
  color: #333;
}
.alert-warning strong {
  color: #dc3545;
}
/* Tutorial alert spacing */
article .alert {
  margin-top: 18px;
  margin-bottom: 20px;
}

article .alert + section .on-this-page {
  margin-top: 0 !important;
}

article .alert + h2.tutorial,
article .alert + h3.tutorial {
  margin-top: 0 !important;
}




/* =========================================================
   BROWSER RESULT
   ========================================================= */

.browser-result {
  margin: 20px 0;
  border: 1px solid #dddddd;
}
.browser-result-title {
  padding: 8px 15px;
  color: #333333;
  background: #f5f5f5;
  border-bottom: 1px solid #dddddd;
  font-size: 14px;
  font-weight: 600;
}
.browser-result .browser-output {
  padding: 15px;
  margin: 0 !important;
  background: #ffffff;
  border: 0;
}
.browser-result .browser-output p {
  margin: 0 0 8px !important;
}
.browser-result .browser-output p:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================
   PDF
   ========================================================= */

/* Print / Save as PDF */
@media print {
  /* Hide left navigation */
  #header {
    display: none !important;
  }
}

/* =========================================================
   DOWNLOAD CSS LINK
   ========================================================= */

/* Editor File Download */
.editor-download {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 20px;
  padding: 10px 15px;
  background: #f5f5f5;
  border: 1px solid #dddddd;
  font-size: 14px;
}
.editor-download i {
  color: #0088cc;
}
.editor-download a {
  font-weight: 600;
}
@media (max-width: 575px) {
  .editor-download {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* =========================================================
   BROWSER RESULT H2
   ========================================================= */

.browser-result h2 {
  font-size: 1.8em;
  font-weight: 600;
}
.browser-result h3 {
  font-size: 1.4em;
  font-weight: 500;
}