/*
Theme Name: rii
Author: TEHRAN Design Lab
Author URI: https://www.tehrandesignlab.com/
Description: A bespoke WordPress theme for rii.
Version: 1.0
Text Domain: rii
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap");
* {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  background-color: var(--bc);
  overflow: auto;
  touch-action: auto;
  color: var(--fc);
}

img,
video {
  width: 100%;
}

.body--freeze {
  overflow: hidden !important;
}

.site {
  position: relative;
  right: 0;
  transition-property: right;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

main {
  margin-top: calc(var(--header-height) + var(--margin));
}
@media only screen and (max-width: 600px) {
  main {
    margin-top: 15rem;
  }
}

.row {
  width: 100%;
}
.row-column {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--gutter);
}
.row-gapLessColumn {
  gap: 0 !important;
  margin-bottom: 0;
}
.row-bleed, .content, .header-wrapper {
  padding-right: var(--margin);
  padding-left: var(--margin);
}
.row-space {
  padding-top: var(--space-xxxl);
  padding-bottom: var(--space-xxxl);
}
.row-full_screen {
  height: 100vh;
  overflow: hidden;
}
.row-box {
  max-width: var(--max-width);
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .row-box {
    max-width: unset;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1600px) {
  .row {
    width: 100%;
  }
  .row-column {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: var(--gutter);
  }
  .row-gapLessColumn {
    gap: 0 !important;
    margin-bottom: 0;
  }
  .row-bleed, .content, .header-wrapper {
    padding-right: var(--margin);
    padding-left: var(--margin);
  }
  .row-space {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
  .row-full_screen {
    height: 100vh;
    overflow: hidden;
  }
  .row-box {
    max-width: var(--max-width);
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 768px) {
  .row-box {
    max-width: unset;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1280px) {
  .row {
    width: 100%;
  }
  .row-column {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--gutter);
  }
  .row-gapLessColumn {
    gap: 0 !important;
    margin-bottom: 0;
  }
  .row-bleed, .content, .header-wrapper {
    padding-right: var(--margin);
    padding-left: var(--margin);
  }
  .row-space {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
  .row-full_screen {
    height: 100vh;
    overflow: hidden;
  }
  .row-box {
    max-width: var(--max-width);
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1280px) and (max-width: 768px) {
  .row-box {
    max-width: unset;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1024px) {
  .row {
    width: 100%;
  }
  .row-column {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--gutter);
  }
  .row-gapLessColumn {
    gap: 0 !important;
    margin-bottom: 0;
  }
  .row-bleed, .content, .header-wrapper {
    padding-right: var(--margin);
    padding-left: var(--margin);
  }
  .row-space {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
  .row-full_screen {
    height: 100vh;
    overflow: hidden;
  }
  .row-box {
    max-width: var(--max-width);
    margin: 0 auto;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 768px) {
  .row-box {
    max-width: unset;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 768px) {
  .row {
    width: 100%;
  }
  .row-column {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--gutter);
  }
  .row-gapLessColumn {
    gap: 0 !important;
    margin-bottom: 0;
  }
  .row-bleed, .content, .header-wrapper {
    padding-right: var(--margin);
    padding-left: var(--margin);
  }
  .row-space {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
  .row-full_screen {
    height: 100vh;
    overflow: hidden;
  }
  .row-box {
    max-width: var(--max-width);
    margin: 0 auto;
  }
}
@media only screen and (max-width: 768px) and (max-width: 768px) {
  .row-box {
    max-width: unset;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 600px) {
  .row {
    width: 100%;
  }
  .row-column {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: var(--gutter);
  }
  .row-gapLessColumn {
    gap: 0 !important;
    margin-bottom: 0;
  }
  .row-bleed, .content, .header-wrapper {
    padding-right: var(--margin);
    padding-left: var(--margin);
  }
  .row-space {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
  .row-full_screen {
    height: 100vh;
    overflow: hidden;
  }
  .row-box {
    max-width: var(--max-width);
    margin: 0 auto;
  }
}
@media only screen and (max-width: 600px) and (max-width: 768px) {
  .row-box {
    max-width: unset;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 359px) {
  .row {
    width: 100%;
  }
  .row-column {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: var(--gutter);
  }
  .row-gapLessColumn {
    gap: 0 !important;
    margin-bottom: 0;
  }
  .row-bleed, .content, .header-wrapper {
    padding-right: var(--margin);
    padding-left: var(--margin);
  }
  .row-space {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
  .row-full_screen {
    height: 100vh;
    overflow: hidden;
  }
  .row-box {
    max-width: var(--max-width);
    margin: 0 auto;
  }
}
@media only screen and (max-width: 359px) and (max-width: 768px) {
  .row-box {
    max-width: unset;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 359px) {
  .row {
    width: 100%;
  }
  .row-column {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: var(--gutter);
  }
  .row-gapLessColumn {
    gap: 0 !important;
    margin-bottom: 0;
  }
  .row-bleed, .content, .header-wrapper {
    padding-right: var(--margin);
    padding-left: var(--margin);
  }
  .row-space {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
  .row-full_screen {
    height: 100vh;
    overflow: hidden;
  }
  .row-box {
    max-width: var(--max-width);
    margin: 0 auto;
  }
}
@media only screen and (max-width: 359px) and (max-width: 768px) {
  .row-box {
    max-width: unset;
    margin: 0 auto;
  }
}

.column-full {
  grid-column: span 12;
}
@media only screen and (max-width: 768px) {
  .column-full {
    grid-column: span 8;
  }
}
@media only screen and (max-width: 600px) {
  .column-full {
    grid-column: span 4;
  }
}
.column-half {
  grid-column: span 6;
}
@media only screen and (max-width: 768px) {
  .column-half {
    grid-column: span 4;
  }
}
.column-twoThird {
  grid-column: span 9;
}
@media only screen and (max-width: 768px) {
  .column-twoThird {
    grid-column: span 8;
  }
}
@media only screen and (max-width: 600px) {
  .column-twoThird {
    grid-column: span 4;
  }
}
.column-third {
  grid-column: span 4;
}
@media only screen and (max-width: 1280px) {
  .column-third {
    grid-column: span 3;
  }
}
@media only screen and (max-width: 1024px) {
  .column-third {
    grid-column: span 6;
  }
}
@media only screen and (max-width: 768px) {
  .column-third {
    grid-column: span 4;
  }
}

@font-face {
  font-family: "Peyda";
  src: url("assets/font/fa/PeydaWebFaNum-Regular.woff2") format("woff2"), url("assets/font/fa/PeydaWebFaNum-Regular.woff") format("woff"), url("assets/font/fa/PeydaFaNum-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("assets/font/fa/PeydaWebFaNum-bold.woff2") format("woff2"), url("assets/font/fa/PeydaWebFaNum-bold.woff") format("woff"), url("assets/font/fa/PeydaFaNum-bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* GOOGLE FONTS */
/* VARIABLES */
:root {
  /* Grid Size */
  font-size: 8px;
  /* Fonts */
  --font_family: "Poppins", sans-serif;
  --font_family-fa: "Vazirmatn", sans-serif;
  /* Font Size */
  --font_size-dl: 9rem;
  --font_size-dm: 6rem;
  --font_size-ds: 5rem;
  --font_size-hl: 4rem;
  --font_size-hm: 3.5rem;
  --font_size-hs: 3rem;
  --font_size-tl: 2.75rem;
  --font_size-tm: 2rem;
  --font_size-ts: 1.75rem;
  --font_size-ll: 1.75rem;
  --font_size-lm: 1.5rem;
  --font_size-ls: 1.375rem;
  --font_size-bl: 2rem;
  --font_size-bm: 1.75rem;
  --font_size-bs: 1.5rem;
  /* Line Height */
  --line_height-dl: 7rem;
  --line_height-dm: 4.5rem;
  --line_height-ds: 4rem;
  --line_height-hl: 5rem;
  --line_height-hm: 4.5rem;
  --line_height-hs: 4rem;
  --line_height-tl: 3rem;
  --line_height-tm: 3rem;
  --line_height-ts: 2rem;
  --line_height-ll: 2.5rem;
  --line_height-lm: 2.5rem;
  --line_height-ls: 2rem;
  --line_height-bl: 3rem;
  --line_height-bm: 2.5rem;
  --line_height-bs: 2rem;
  /* Neutrals RGB*/
  --n1000-rgb: 255, 255, 255;
  --n950-rgb: 244, 245, 245;
  --n900-rgb: 233, 236, 235;
  --n800-rgb: 212, 217, 216;
  --n700-rgb: 190, 198, 196;
  --n600-rgb: 165, 176, 174;
  --n500-rgb: 141, 155, 151;
  --n400-rgb: 117, 133, 129;
  --n300-rgb: 93, 106, 103;
  --n200-rgb: 71, 82, 79;
  --n100-rgb: 50, 57, 55;
  --n50-rgb: 40, 46, 45;
  --n0-rgb: 0, 0, 0;
  /* Neutrals */
  --n1000: rgba(var(--n1000-rgb), 1);
  --n950: rgba(var(--n950-rgb), 1);
  --n900: rgba(var(--n900-rgb), 1);
  --n800: rgba(var(--n800-rgb), 1);
  --n700: rgba(var(--n700-rgb), 1);
  --n600: rgba(var(--n600-rgb), 1);
  --n500: rgba(var(--n500-rgb), 1);
  --n400: rgba(var(--n400-rgb), 1);
  --n300: rgba(var(--n300-rgb), 1);
  --n200: rgba(var(--n200-rgb), 1);
  --n100: rgba(var(--n100-rgb), 1);
  --n50: rgba(var(--n50-rgb), 1);
  --n0: rgba(var(--n0-rgb), 1);
  --bc: var(--n1000);
  --fc: var(--n0);
  --surface: var(--n950);
  /* primary */
  --primary-rgb: 13, 13, 255;
  --primary: rgba(var(--primary-rgb), 1);
  /* Spaces */
  --xxs: 1rem;
  --xs: 1.5rem;
  --s: 2rem;
  --m: 3rem;
  --l: 6rem;
  --xl: 12rem;
  --xxl: 24rem;
  /* Spec */
  --margin: var(--l);
  --gutter: var(--l);
  --main-gutter: var(--xl);
  --sidebar-width: 22rem;
  --sidebar-height: calc(100vh - var(--top-offset) - var(--margin));
  --header-height: 11rem;
  --main-offset: calc(var(--sidebar-width) + var(--margin) + var(--margin));
  --radius: 0.5rem;
  --top-offset: calc(var(--header-height) + var(--margin));
  --column-number: 1;
  --logo-height: 2.25rem;
  --section-gap: 20rem;
  --radius-minor: 0.5rem;
  /* Style */
  --border: 1px solid var(--n900);
  --blur: 1rem;
  --main-grid: repeat(6, 1fr);
  /* Responsive */
}
@media only screen and (max-width: 1280px) {
  :root {
    --margin: var(--m);
    --main-gutter: var(--l);
    --font_size-dl: var(--font_size-dm);
    --line_height-dl: var(--line_height-dm);
  }
}
@media only screen and (max-width: 1024px) {
  :root {
    --top-offset: calc(var(--l) + var(--header-height));
    --font_size-dl: var(--font_size-dm);
    --line_height-dl: var(--line_height-dm);
  }
}
@media only screen and (max-width: 768px) {
  :root {
    --margin: var(--s);
    --top-offset: calc(var(--l) + var(--header-height));
    --font_size-dl: var(--font_size-hl);
    --line_height-dl: var(--line_height-hl);
    --main-grid: repeat(1, 1fr);
  }
}
@media only screen and (max-width: 600px) {
  :root {
    --gutter: 2rem;
    --header-height: 14rem;
    --top-offset: calc(var(--l) + var(--header-height));
    --font_size-dl: var(--font_size-hs);
    --line_height-dl: var(--line_height-hs);
  }
}

a {
  color: rgba(var(--forground_color-rgb), var(--opacity-10));
}

.display-large, .titlebar-title, .titlebar-chapter {
  font-family: var(--font_family);
  font-weight: 600;
  font-size: var(--font_size-dl);
  line-height: var(--line_height-dl);
  text-transform: none;
  display: block;
}
.display-medium {
  font-family: var(--font_family);
  font-weight: 600;
  font-size: var(--font_size-dm);
  line-height: var(--line_height-dm);
  text-transform: none;
  display: block;
}
.display-small {
  font-family: var(--font_family);
  font-weight: 600;
  font-size: var(--font_size-ds);
  line-height: var(--line_height-ds);
  text-transform: none;
  display: block;
}

.headline-large, .calculator-title, .redirect-title {
  font-family: var(--font_family);
  font-weight: 600;
  font-size: var(--font_size-hl);
  line-height: var(--line_height-hl);
  text-transform: none;
  display: block;
}
.headline-medium {
  font-family: var(--font_family);
  font-weight: 600;
  font-size: var(--font_size-hm);
  line-height: var(--line_height-hm);
  text-transform: none;
  display: block;
}
.headline-small {
  font-family: var(--font_family);
  font-weight: 600;
  font-size: var(--font_size-hs);
  line-height: var(--line_height-hs);
  text-transform: none;
  display: block;
}

.title-large, .column-download_name, .section-column-text h4, .drawer-nav a, .calculator h5 span, .color_portion-percent {
  font-family: var(--font_family);
  font-weight: 500;
  font-size: var(--font_size-tl);
  line-height: var(--line_height-tl);
  text-transform: none;
  display: block;
}
.title-medium, .section-title {
  font-family: var(--font_family);
  font-weight: 500;
  font-size: var(--font_size-tm);
  line-height: var(--line_height-tm);
  text-transform: none;
  display: block;
}
.title-small, h3 {
  font-family: var(--font_family);
  font-weight: 500;
  font-size: var(--font_size-ts);
  line-height: var(--line_height-ts);
  text-transform: 600;
  display: block;
}

.label-large, .header .menu a, .calculator-input, .popup, .tooltip, .color_paper-label, .color_paper-name, .regulatory span, .translator-title, .button-outlined-big > div, .button-text-large > div, .button-contained-big > div {
  font-family: var(--font_family);
  font-weight: 500;
  font-size: var(--font_size-ll);
  line-height: var(--line_height-ll);
  text-transform: none;
  display: block;
}
.label-medium, .toc-dynamicTitle, .toc-link, .sidebar-copyright span, .button-text-small > div {
  font-family: var(--font_family);
  font-weight: 400;
  font-size: var(--font_size-lm);
  line-height: var(--line_height-lm);
  text-transform: none;
  display: block;
}
.label-small {
  font-family: var(--font_family);
  font-weight: 400;
  font-size: var(--font_size-ls);
  line-height: var(--line_height-ls);
  text-transform: none;
  display: block;
}

.body-large, .column-download_button, .section-column-text p, .section-description > div, .redirect-button, .redirect-body, .titlebar-description > div {
  font-family: var(--font_family);
  font-weight: 400;
  font-size: var(--font_size-bl);
  line-height: var(--line_height-bl);
  text-transform: none;
  display: block;
}
.body-medium, .column-download_date, .color_paper-info {
  font-family: var(--font_family);
  font-weight: 400;
  font-size: var(--font_size-bm);
  line-height: var(--line_height-bm);
  text-transform: none;
  display: block;
}
.body-small, .section-caption > div, .sidebar-copyright p, .calculator-description {
  font-family: var(--font_family);
  font-weight: 400;
  font-size: var(--font_size-bs);
  line-height: var(--line_height-bs);
  text-transform: none;
  display: block;
}

.fa {
  direction: rtl;
  display: block !important;
  font-family: var(--font_family-fa) !important;
  grid-column: 5/7;
  font-weight: 400;
}
.fa p {
  font-family: var(--font_family-fa) !important;
}
.fa strong {
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  .fa {
	  grid-row: 2;
    grid-column: 1/7;
  }
}
.fa--hide {
  display: none !important;
}

.en {
  column-gap: var(--gutter);
  grid-column: 3/5;
  column-count: unset;
}
@media only screen and (max-width: 768px) {
  .en {
    grid-column: 1/7;
  }
}
.en--shy {
  grid-column: 3/7;
  column-count: 2;
}
@media only screen and (max-width: 768px) {
  .en--shy {
    grid-column: 1/7;
    column-count: 1;
  }
}
.en-hidden {
  display: none !important;
}

.button {
  appearance: none;
  -webkit-appearance: none;
  background: unset;
  cursor: pointer;
  border: unset;
}
.button-contained-big {
  display: inline-block;
}
.button-contained-big > div {
  display: flex;
  padding: 2.25rem 2.5rem 2.25rem 2rem;
  background-color: var(--primary);
  color: var(--bc);
  align-items: center;
  gap: 1rem;
  border-radius: var(--radius-minor);
  justify-content: center;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.button-contained-big > div:hover {
  background-color: rgba(var(--primary-rgb), 0.88);
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.button-contained-big svg {
  width: 2.5rem;
  fill: var(--bc);
}
.button-float {
  background-color: unset;
}
.button-float span {
  max-width: 1000px;
  overflow-x: hidden;
  transition-property: max-width;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.button-float > div {
  gap: 1rem;
  transition-property: gap , padding;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  box-shadow: 0px 4px 8px 3px rgba(var(--n900-rgb), 0.15), 0px 1px 3px 0px rgba(var(--n900-rgb), 0.15);
}
.button-float--shy span {
  max-width: 0;
  transition-property: max-width;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.button-float--shy > div {
  gap: 0rem;
  padding: 2.25rem;
  transition-property: gap , padding;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.button-text-large {
  display: inline-block;
}
.button-text-large > div {
  display: flex;
  padding: 1rem 0rem;
  color: var(--fc);
  align-items: center;
  gap: 1rem;
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.button-text-large > div:hover {
  color: var(--n80);
}
.button-text-large svg {
  fill: var(--bc);
  width: 2.5rem;
}
.button-text-small {
  display: inline-block;
}
.button-text-small > div {
  display: flex;
  padding: 1rem 0rem;
  color: var(--fc);
  align-items: center;
  gap: 1rem;
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.button-text-small > div:hover {
  color: var(--n80);
}
.button-text-small svg {
  fill: var(--bc);
  width: 3rem;
}
.button-outlined-big {
  display: inline-block;
}
.button-outlined-big > div {
  display: flex;
  padding: 2.25rem 2.5rem 2.25rem 2rem;
  border: var(--border);
  background-color: var(--n0);
  color: var(--n700);
  border-radius: var(--radius-minor);
  justify-content: center;
  align-items: center;
  gap: 1rem;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.button-outlined-big > div:hover {
  background-color: var(--n50);
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.button-outlined-big svg {
  fill: var(--n700);
  width: 3rem;
}

.hamico {
  display: block;
  position: fixed;
  left: var(--margin);
  top: 4.5rem;
  z-index: 10;
  display: none;
}
@media only screen and (max-width: 1024px) {
  .hamico {
    display: block;
  }
}
.hamico--fixed {
  --fc: var(--n950);
  --bc: var(--n950);
}
@media only screen and (max-width: 600px) {
  .hamico {
    top: 3rem;
    display: block;
  }
}
.hamico-icon {
  width: 3rem;
  height: 3rem;
  position: relative;
}
.hamico-icon--close .hamico-linei {
  top: 1.375rem;
  transform: translateX(-50%) rotate(45deg);
  background-color: var(--fc);
  transition-property: transform , background-color , width , top;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.hamico-icon--close .hamico-lineii {
  opacity: 0;
  transition-property: include;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.hamico-icon--close .hamico-lineiii {
  top: 1.375rem;
  transform: translateX(-50%) rotate(-45deg);
  background-color: var(--fc);
  transition-property: transform , background-color , width , top;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.hamico-line {
  width: 2.5rem;
  height: 0.2rem;
  background-color: var(--fc);
  transform: translateX(-50%) rotate(0deg);
  position: absolute;
  left: 50%;
  transition-property: transform , background-color , width , top;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.hamico-linei {
  top: 0.375rem;
}
.hamico-lineii {
  top: 1.375rem;
}
.hamico-lineiii {
  top: 2.375rem;
}

.translator {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.translator-switch {
  width: 3rem;
  height: 2rem;
  border-radius: 2rem;
  background-color: var(--n200);
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.translator-pin {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--n400);
  border-radius: 1rem;
  margin: 0.25rem 1.25rem 0.25rem 0.25rem;
  transition-property: background-color , margin;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.translator--active .translator-pin {
  margin: 0.25rem 0.25rem 0.25rem 1.25rem;
  background-color: var(--n950);
  transition-property: background-color , margin;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.translator--active .translator-switch {
  background-color: var(--n300);
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.translator-title {
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

img {
  display: block;
}

.titlebar-description {
  display: grid;
  grid-template-columns: var(--main-grid);
  gap: var(--gutter);
}
.titlebar-header {
  display: grid;
  grid-template-columns: var(--main-grid);
  gap: var(--gutter);
}
@media only screen and (max-width: 768px) {
  .titlebar-header {
    display: flex;
    gap: 0;
  }
}
.titlebar-chapter {
  display: flex;
  grid-column: span 2;
}
.titlebar-title {
  grid-column: span 4;
}
.titlebar-info {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  margin-bottom: var(--xl);
}

.regulatory span {
  margin-top: 1rem;
}
.regulatory-ribbon {
  width: 100%;
  height: 2rem;
}
.regulatory-ribbon-do {
  background-color: #39ff55;
}
.regulatory-ribbon-dont {
  background-color: #cf1020;
}
.regulatory-ribbon-caution {
  background-color: #fff166;
}

.color_paper {
  display: flex;
  padding: 2rem;
}
.color_paper:hover .color_paper-code {
  transform: translateX(0);
  opacity: 1;
  transition-property: transform , opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.color_paper-code {
  transform: translateX(1rem);
  opacity: 0;
  transition-property: transform , opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.color_paper-name_wrapper {
  width: 100%;
}
.color_paper-value {
  cursor: pointer;
}
.color_paper-info {
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 10rem;
}
.color_paper-label {
  display: inline-block;
}

.tooltip {
  position: absolute;
  pointer-events: none;
  background-color: var(--primary);
  color: var(--n1000);
  padding: 1rem 1.5rem;
  border-radius: 3rem;
  z-index: 9999;
}

.popup {
  position: fixed;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary);
  color: var(--n1000);
  padding: 2rem 3rem;
  border-radius: 3rem;
  z-index: 9999;
  opacity: 0; /* Initially set the opacity to 0 */
  transition: opacity 0.3s ease; /* Add transition for opacity */
}

.popup.show {
  opacity: 1; /* Set opacity to 1 to show the popup */
}

.color_portion {
  width: 100%;
  height: 24rem;
}
.color_portion-wrapper {
  display: flex;
}
.color_portion-wrapper > div {
  position: relative;
}
.color_portion > div {
  height: 100%;
}
.color_portion-red {
  width: 80%;
  background-color: var(--red);
}
.color_portion-red span {
  mix-blend-mode: unset;
}
.color_portion-color {
  width: 20%;
  background-color: var(--fc);
}
.color_portion-percent {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

@keyframes colorFade {
  0% {
    background-color: #fff1dd;
    animation-timing-function: steps(1, start);
  }
  16.66% {
    background-color: #ffffff;
    animation-timing-function: steps(1, start);
  }
  33.33% {
    background-color: #000000;
    animation-timing-function: steps(1, start);
  }
  49.99% {
    background-color: #a7a9ac;
    animation-timing-function: steps(1, start);
  }
  66.66% {
    background-color: #65f0ff;
    animation-timing-function: steps(1, start);
  }
  83.33% {
    background-color: #ff91dc;
    animation-timing-function: steps(1, start);
  }
  100% {
    background-color: #ffa485;
    animation-timing-function: steps(1, start);
  }
}
.color_portion-color {
  animation: colorFade 3s infinite; /* Adjust the duration as needed */
}

.redirect {
  width: 100%;
  padding: var(--margin);
  max-width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.redirect-logo {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  fill: var(--red);
}
.redirect-logo img {
  width: 24rem;
}
.redirect-button {
  border-radius: 0.5rem;
  padding: 1.5rem;
  background-color: var(--primary);
  color: var(--fc);
  margin-top: 3rem;
  display: inline-block;
}

.heroimage {
  margin-bottom: var(--header-height);
}
.heroimage img {
  height: 75rem;
  max-height: 70vh;
  object-fit: cover;
}

.herovideo {
  margin-bottom: var(--header-height);
}
.herovideo video {
  height: 75rem;
  max-height: 70vh;
  object-fit: cover;
}

.calculator {
  width: 500px;
  right: 0;
  position: fixed;
  background: var(--n0);
  height: 100%;
  display: flex;
  z-index: 5;
  top: 0;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.calculator--show {
  transform: translateX(0);
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.calculator-wrapper {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.calculator-margin {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.calculator-typescale_values {
  display: flex;
  align-items: center;
  width: 50%;
  color: var(--n700);
  fill: var(--n700);
}
.calculator-typescale_value {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  gap: 0.5rem;
}
.calculator-extra {
  display: flex;
  gap: 1rem;
}
.calculator-margin_result {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calculator-result {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.calculator-result_title {
  display: flex;
  align-items: center;
}
.calculator-footer {
  padding: 0 5rem 5rem 5rem;
}
.calculator-results {
  padding: 5rem;
  color: var(--n900);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  flex: 1;
}
.calculator h5 {
  display: flex;
  gap: 1rem;
}
.calculator h5 svg {
  fill: var(--n900);
}
.calculator-typescale_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  border-bottom: var(--border);
}
.calculator-header {
  background-color: var(--n50);
  padding: 5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.calculator-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.calculator-actions {
  display: flex;
  gap: 3rem;
}
.calculator-actions button {
  flex: 1;
}
.calculator-input {
  appearance: none;
  width: 100%;
  height: 7rem;
  color: var(--n700);
  background-color: var(--n100);
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  border-bottom: var(--border);
  display: inline-block;
}
.calculator-input::placeholder {
  color: var(--n700);
}
.calculator-input:hover {
  background-color: var(--n200);
}

.calculatorbtn {
  position: fixed;
  bottom: var(--margin);
  right: var(--margin);
  z-index: 2;
}

.scrim {
  background-color: rgba(var(--n900-rgb), 0.32);
  width: 100%;
  height: 100%;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  z-index: 4;
  top: 0;
}
.scrim--show {
  opacity: 1;
  visibility: visible;
}

.header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 4;
  color: var(--fc);
  fill: var(--fc);
  background-color: rgba(var(--n1000-rgb), 0.8);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  border-bottom: var(--border);
  transition-property: background-color , backdrop-filter;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.header-wrapper {
  height: var(--header-height);
  display: flex;
  padding-top: var(--gutter);
  padding-bottom: var(--gutter);
  gap: var(--margin);
  align-items: center;
}
@media only screen and (max-width: 600px) {
  .header-wrapper {
    flex-wrap: wrap;
    flex-direction: column;
    height: unset;
    padding-top: 3rem;
  }
}
.header-bottom {
  display: none;
}
@media only screen and (max-width: 768px) {
  .header-bottom {
    display: block;
  }
}
@media only screen and (max-width: 600px) {
  .header-bottom {
    width: 100%;
  }
}
.header-toolbar {
  grid-column: 3/7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .header-toolbar {
    justify-content: unset;
    gap: var(--gutter);
  }
}
@media only screen and (max-width: 768px) {
  .header-toolbar {
    grid-column: 4/7;
  }
}
.header .sub-menu {
  position: absolute;
  --fc: var(--n0);
  --bc: var(--n950);
  padding: 2rem 3rem;
  border-radius: 0.5rem;
  min-width: 25rem;
  background-color: var(--bc);
  color: var(--fc);
  opacity: 0;
  visibility: hidden;
  transition-property: opacity , visibility;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.header .menu-item:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  transition-property: opacity , visibility;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.header-index {
  width: 100%;
  display: none;
}
@media only screen and (max-width: 600px) {
  .header-index {
    display: block;
  }
}
.header-main {
  flex: 1;
  display: grid;
  grid-template-columns: var(--main-grid);
  gap: var(--gutter);
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .header-main {
    justify-content: flex-end;
    gap: var(--gutter);
  }
}
@media only screen and (max-width: 600px) {
  .header-main {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
}
.header-side {
  width: var(--sidebar-width);
  display: flex;
  align-items: center;
}
.header-side .logo {
  fill: var(--fc);
}
@media only screen and (max-width: 1024px) {
  .header-side {
    display: none;
  }
}
.header-branding {
  height: var(--logo-height);
  grid-column: 1/3;
}
.header-branding .logo {
  height: var(--logo-height);
}
@media only screen and (max-width: 1024px) {
  .header-branding {
    margin-left: 5rem;
  }
}
@media only screen and (max-width: 768px) {
  .header-branding {
    grid-column: 1/4;
  }
}
.header .menu {
  display: flex;
  gap: 2rem;
}
.header .menu a {
  padding: 1.5rem 0;
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.header .menu a :hover {
  color: var(--n100);
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
@media only screen and (max-width: 1024px) {
  .header-nav {
    display: none;
  }
}
.header-translator {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .header-translator {
    order: 3;
  }
}
@media only screen and (max-width: 1024px) {
  .header .logout {
    display: none;
  }
}

.drawer {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--n1000);
  z-index: 5;
  width: 300px;
  overflow-y: auto;
  transform: translateX(-100%);
  padding: var(--header-height) var(--margin) var(--margin);
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.drawer--open {
  transform: translateX(0);
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.drawer-footer {
  display: flex;
  flex-direction: column;
}
.drawer-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.drawer-nav a {
  padding: 1rem 0;
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.drawer-nav a:hover {
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  color: rgba(var(--n950-rgb), 0.7);
}

.content {
  display: flex;
  gap: var(--margin);
}
.content-sidebar {
  height: var(--sidebar-height);
  width: var(--sidebar-width);
  position: sticky;
  top: var(--top-offset);
}
@media only screen and (max-width: 1024px) {
  .content-sidebar {
    display: none;
  }
}
.content-article {
  flex: 1;
}

.sidebar {
  height: 100%;
}
@media only screen and (max-width: 1024px) {
  .sidebar {
    display: none;
  }
}
.sidebar-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.sidebar-footer {
  display: flex;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 1024px) {
  .index {
    order: 2;
    flex: 1;
    position: relative;
    height: 5rem;
  }
}
@media only screen and (max-width: 600px) {
  .index {
    height: unset;
  }
}

@media only screen and (max-width: 1024px) {
  .toc {
    max-height: 0;
    overflow: hidden;
    transition-property: max-height;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    margin: 2rem 2rem 0rem;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 600px) {
  .toc {
    margin: 2rem 0 0;
  }
}
@media only screen and (max-width: 1024px) {
  .toc--open {
    max-height: 100vh;
    transition-property: max-height;
    transition-duration: 0.2s;
    transition-timing-function: ease;
  }
}
.toc-down {
  width: 3rem;
  height: 3rem;
  fill: var(--fc);
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
.toc-down--open {
  transform: rotate(180deg);
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
.toc-link {
  padding: 0.5rem 0;
}
@media only screen and (max-width: 1024px) {
  .toc-link {
    padding: 1.5rem 0;
  }
}
.toc-dynamicTitle {
  display: none;
  padding: 1rem 0;
  height: 3rem;
  position: relative;
}
@media only screen and (max-width: 1024px) {
  .toc-dynamicTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 2rem;
    height: 3rem;
  }
}
@media only screen and (max-width: 600px) {
  .toc-dynamicTitle {
    padding: 0;
  }
}
@media only screen and (max-width: 1024px) {
  .toc-wrapper {
    width: 100%;
    padding: 1rem 0;
    color: var(--fc);
    background-color: var(--n900);
    border-radius: var(--radius);
    max-height: 5rem;
    transition-property: max-height , background-color , color;
    transition-duration: 0.2s;
    transition-timing-function: ease;
  }
  .toc-wrapper--open {
    transition-property: max-height ,background-color , color;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    max-height: 100vh;
  }
}
@media only screen and (max-width: 600px) {
  .toc-wrapper {
    background-color: transparent;
    padding: 1rem 0 0;
  }
}
.toc-list-item {
  color: var(--n600);
  transition-property: color , background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
.toc-list-item.is-active-li {
  color: var(--fc);
}

h2::before {
  content: " ";
  height: calc(var(--header-height) + var(--margin));
  display: block;
  margin-top: calc((var(--header-height) + var(--margin)) * -1);
  visibility: hidden;
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  margin-bottom: var(--xxl);
  padding-top: var(--m);
  border-top: var(--border);
}
.section-columns {
  display: grid;
  grid-template-columns: var(--main-grid);
  gap: var(--gutter);
}
.section-single_column {
  width: 100% !important;
  flex: 0 0 100% !important;
}
.section-description {
  display: grid;
  grid-template-columns: var(--main-grid);
  gap: var(--gutter);
}
@media only screen and (max-width: 768px) {
  .section-description {
    flex-direction: column;
    gap: 2rem;
  }
}
.section-column-text {
  height: 100%;
}
.section-column-text_wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-start;
  height: 100%;
}
.section-title {
  grid-column: 1/3;
}
.section-title h2 {
  line-height: var(--line_height-tm) !important;
}
@media only screen and (max-width: 768px) {
  .section-title {
    grid-column: span 6;
  }
}
.section-info {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}
.section-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  flex-direction: column;
}
.section-caption-en--hide {
  display: none !important;
}
.section-caption > div {
  flex: 1;
}
.section-column-html {
  height: 100%;
  width: 100%;
}

.column-download_wrapper {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
  border-radius: 0.5rem;
  background-color: var(--n950);
}
.column-download_name {
  color: var(--fc);
}
.column-download_date {
  color: var(--fc);
}
.column-download_button {
  color: var(--bc);
  background-color: var(--primary);
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
  display: inline-block;
}
.column-download_info {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.has_border {
  border: var(--border);
}

.imgComparison img {
  display: block;
  max-width: unset !important;
}

.imgComparison {
  width: 100%;
  position: relative;
}
.imgComparison__wrapper {
  display: inline-block;
  width: 100%;
  position: relative;
  box-sizing: content-box;
}
.imgComparison__resizableFrame {
  width: 0%;
  height: 100%;
  position: absolute;
  display: inline-block;
  top: 0;
  overflow-x: hidden;
}
.imgComparison__fixedFrame {
  position: relative;
  width: 100%;
}

.imgComparison__silder {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 50%;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background: var(--n50);
  outline: none;
  margin: 6rem 0 1rem 0;
}

.imgComparison__silder::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 2rem;
  height: 2rem;
  background: var(--n50);
  border-radius: 2rem;
  cursor: pointer;
  transition: 0.3s all ease;
}

.imgComparison__silder::-webkit-slider-thumb:hover {
  background: var(--primary);
  transition: 0.3s all ease;
}

.imgComparison__silder::-moz-range-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 8px;
  border: 1px solid var(--n0);
  background: white;
  cursor: pointer;
}