/* Special thanks to https://heroicons.com/ for - most of - icons! */

@font-face { font-display: swap; font-family: "TTL"; src: url("./fonts/Cal_Sans/CalSans-Regular.ttf"); }
@font-face { font-display: swap; font-family: "TXT"; src: url("./fonts/Gudea/Gudea-Regular.ttf"); }
@font-face { font-display: swap; font-family: "PRE"; src: url("./fonts/DM_Mono/DM_Mono.ttf"); }

:root {
    --fontFamily: TXT, Helvetica, "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Calibri, Arial;
    --fontFamilyPre: PRE, Menlo, Consolas, "Courier New", monospace, Verdana;
    --fontFamilyTitle: TTL, TXT, Helvetica, "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Calibri, Arial;
    --fontSize: 1rem;
    --fontSizeSmall: calc(var(--fontSize) * 0.9);
    --fontSizeBig: calc(var(--fontSize) * 1.2);
    --fontSizePre: calc(var(--fontSize) * 0.93);
    --fontSizePreSmall: calc(var(--fontSizePre) * 0.9);
    --lineHeight: 1.4;
    --colorAppPrimary: #396a9a;
    --colorBgLight: #FFFFFF;
    --colorBgMedium: #FCFCFC;
    --colorBgDark: #FAFAFA;
    --colorBorderNormal: #EBEBEB;
    --colorBorderDark: #D7D7D7;
    --colorFontLight: #757575;
    --colorFontNormal: #363A45;
    --colorFontDark: #1B1D23;
    --colorLinkNormal: #3363FF;
    --colorLinkDark: #002DB8;
    --margin: 1rem;
    --margin2: calc(var(--margin) * 2);
    --marginHalf: calc(var(--margin) / 2);
    --char-arrow: "\2192";
    --char-arrow-small: "\203A";
    --char-bullet: "\2022";
    --char-slash: "\002F";
    --char-slash-inv: "\005C";
    --char-space-nobreak: "\00A0";
}

@media (min-width: 516px) {}
@media (min-width: 680px) {}
@media (min-width: 768px) {}

html, body {height: 100%;padding: 0;margin: 0;border: none;background: var(--colorBgLight);}
html {scrollbar-color: var(--colorFontNormal) transparent;scrollbar-width: thin;text-size-adjust: none;}
body {font-family: var(--fontFamily);font-size: var(--fontSize);line-height: var(--lineHeight);color: var(--colorFontNormal);}
body::after {content: " ";display: block;height: 0;overflow: hidden;clear: both;}
::selection {background: var(--colorLinkDark);color: white;}
::placeholder {color: var(--colorFontLight);transition: color .1s linear;}
*:focus::placeholder {color: transparent;}

h1, h2, h3, h4, h5, h6, p, a, li, th, td, pre, blockquote, code, svg, text, input, button, select, textarea {line-height: var(--lineHeight);}
h1, h2, h3, h4, h5, h6, p, li, th, td, pre, blockquote, code, svg, text, input, button, select, textarea {-webkit-font-smoothing: antialiased;}
h1, h2, h3, h4, h5, h6 {font-family: var(--fontFamilyTitle);font-weight: normal;}
h1, h2, h3, h4, h5 {padding: var(--margin) 0;margin: 0;}

h1 {font-size: 1.85rem;line-height: var(--lineHeight);}
h2 {font-size: 1.55rem;line-height: var(--lineHeight);}
h3 {font-size: 1.4rem;line-height: var(--lineHeight);}
h4 {font-size: 1.25rem;line-height: var(--lineHeight);}
h5 {font-size: 1.1rem;line-height: var(--lineHeight);}
h1 a, h2 a, h3 a, h4 a, h5 a {color: var(--colorFontNormal);}

p {padding: 0;margin: 0 0 var(--margin) 0;}

a {color: var(--colorLinkNormal);transition: color .1s linear, border .1s linear, background-color .1s linear, outline-color .1s linear;outline: none;}
a, a * {cursor: pointer;}
a:focus {color: var(--colorLinkDark);}
a:hover {color: var(--colorLinkNormal);}
a[href=""], a:not([href]) {color: var(--colorFontNormal);text-decoration: none;cursor: default;}
a[href=""] *, a:not([href]) * {cursor: default;}
a[href]:not([href=""]) {text-decoration: none;}
a[href]:not([href=""]):focus {text-decoration: underline;}
a svg * {/* fill: currentColor; */transition: fill .1s linear;}

figure {font-size: 0;line-height: 0;}

.app-name {font-weight: bold;color: var(--colorAppPrimary);}
.unlight {color: var(--colorFontLight);transition: color .1s linear;}
.wrap-left {padding-left: var(--margin);}

.left { float: left; }
.right { float: right; }
.center { text-align: center; }
*[data-align="center"] {text-align: center;}
*[data-align="justify"] {text-align: justify;}
*[data-align="left"] {text-align: left;}
*[data-align="right"] {text-align: right;}

@media (min-width: 680px) {
.cells {display: table;}
.cells > .cell {display: table-cell;vertical-align: top;padding: 0 var(--margin);}
}

#body .none,
#body [hidden] {display: none;}

/* ******************
    BREADCRUMB
****************** */

#breadCrumb {padding: var(--margin) 0;margin: 0 0 var(--margin) 0;}

#breadCrumbList {font-size: 0;line-height: 0;width: 100%;padding: 0 0 var(--marginHalf) 0;margin: 0;white-space: nowrap;overflow-x: auto;}
#breadCrumbList li {display: inline;padding: 0;margin: 0;}
#breadCrumbList li:not(:first-child)::before {display: inline-block;content: var(--char-arrow-small);font-size: var(--fontSizeSmall);line-height: var(--lineHeight);margin: 0 7px;}
#breadCrumbList .item-link {font-size: var(--fontSizeSmall);line-height: var(--lineHeight);color: var(--colorFontNormal);}
#breadCrumbList .item-link[href]:focus {color: var(--colorLinkDark);}
#breadCrumbList .item-link[href]:hover {color: var(--colorLinkNormal);}
#breadCrumbList .item-link span span {font-size: 0;}
#breadCrumbList li:first-child .item-link span {display: none;}
@media (min-width: 768px) {
#breadCrumbList .item-link span span {font-size: inherit;}
}

#breadCrumbSVG {height: 18px;width: 18px;vertical-align: middle;vertical-align: text-top;}

/* ******************
    CODE
****************** */

pre {font-size: var(--fontSizePre);line-height: var(--lineHeight);padding: var(--margin);margin: 0 0 var(--margin2) 0;background: var(--colorBgDark);border: 1px solid var(--colorBorderNormal);border-radius: 3px;}
code {font-size: var(--fontSizePre);line-height: var(--lineHeight);padding: 0;margin: 0;}
pre code {display: block;padding: var(--margin);overflow-x: auto;}
code.left {display: inline-block;font-size: var(--fontSizePreSmall);line-height: var(--lineHeight);padding: 3px var(--marginHalf);margin: 0 var(--marginHalf) var(--marginHalf) 0;background: var(--colorBgDark);border-radius: 3px;}

.code-label {font-size: var(--fontSizeSmall);line-height: var(--lineHeight);margin-bottom: 0;color: var(--colorFontLight);}

pre.code {font-size: 0;line-height: 0;padding: 0;}
pre.code-small code,
pre.code-example code,
pre.code-signature code {font-size: var(--fontSizePreSmall);line-height: var(--lineHeight);}
pre.code-signature {margin: 0 0 var(--marginHalf) 0;}

.token.keyword {color: #0069c2;}
.token.function {color: #d30038;}
.token.parameter {color: #555;}
.token.punctuation {color: #656565;}
.token.operator {color: #555;}
.token.boolean {color: #007936;}
.token.string {color: #007936;}
.token.number {color: #007936;}
.token.property {color: #b95400;}
.token.comment {color: #6d6b6b;}
.token.doctype-tag {color: #6d6b6b;}
.token.tag {color: #0069c2;}
.token.attr {color: #b95400;}
.token.value {color: #007936;}

/* ******************
    COOKIE BANNER
****************** */

#_cc_banner #_cc_bannerInner {background: var(--colorFontNormal);}
#_cc_banner #_cc_bannerMentionParagraph {color: var(--colorBgLight);}
#_cc_banner #_cc_bannerActionMoreBtn,
#_cc_banner #_cc_bannerActionAcceptBtn {font-weight: bold;color: var(--colorBgDark);background: var(--colorLinkNormal);border-color: transparent;letter-spacing: .5px;}
#_cc_banner #_cc_bannerActionMoreBtn:focus,
#_cc_banner #_cc_bannerActionAcceptBtn:focus {color: var(--colorBgLight);background: var(--colorLinkDark);box-shadow: none;text-decoration: underline;}
#_cc_banner #_cc_bannerActionMoreBtn:hover,
#_cc_banner #_cc_bannerActionAcceptBtn:hover {color: var(--colorBgLight);background: var(--colorLinkDark);box-shadow: none;}

#_cc_popin  #_cc_popinHead {border-color: var(--colorBorderDark);background: var(--colorBgDark);}
#_cc_popin  #_cc_popinHead,
#_cc_popin  #_cc_popinHeadClose,
#_cc_popin  #_cc_popinPanel h5,
#_cc_popin  #_cc_popinPanel p {color: var(--colorFontNormal);}
#_cc_popin  #_cc_popinPanel p a,
#_cc_popin  #_cc_popinPanel ._cc_prefMore {color: var(--colorFontLight);}
#_cc_popin  #_cc_popinHeadClose:hover,
#_cc_popin  #_cc_popinPanel p a:hover,
#_cc_popin  #_cc_popinPanel ._cc_prefMore:hover {color: var(--colorLinkNormal);}
#_cc_popin  #_cc_popinHeadClose:focus,
#_cc_popin  #_cc_popinPanel p a:focus,
#_cc_popin  #_cc_popinPanel ._cc_prefMore:focus {color: var(--colorLinkDark);}
#_cc_popin  #_cc_popinPanel ._cc_pref {border: 1px solid var(--colorBorderDark);background: none;}
#_cc_popin  #_cc_popinPanel ._cc_prefCookie {border: 1px solid var(--colorBorderDark);background: var(--colorBgMedium);}

/* ******************
    DEFINITIONS LIST
****************** */

dl {padding: 0;margin: 0 0 var(--margin) 0;background: var(--colorBgLight);overflow: hidden;}
dl dl {margin-bottom: 0;}
dd {margin: 0 0 var(--margin) var(--margin2);}
dt {margin: 0 0 var(--margin) 0;}
dt:last-child,
dd:last-child {margin-bottom: 0;}

dl.columns {font-size: 0;line-height: 0;}
dl.columns {overflow: hidden;}
dl.columns dt {clear: both;}
dl.columns dt,
dl.columns dd {float: left;padding: 3px 0;margin: 0;border: none;}
dl.columns dt {color: var(--colorFontDark);}
dl.columns dd {color: var(--colorFontNormal);}

dl.inline {display: block;padding: var(--marginHalf);border: 1px solid var(--colorBorderNormal);border-radius: 3px;overflow: hidden;text-align: center;}
dl.inline dt,
dl.inline dd {display: inline-block;}
dl.inline dt {font-weight: bold;padding: 0 0 0 var(--margin);margin: 0 var(--marginHalf) 0 0;border-left: 1px solid var(--colorBorderNormal);}
dl.inline dt:first-child {border: none;}
dl.inline dd {padding: 0 var(--marginHalf);margin: 0 var(--margin) 0 0;background: var(--colorBgDark);border-radius: 3px;}

dl dt,
dl dd {font-size: var(--fontSize);line-height: var(--lineHeight);}

.columns dt:after,
.inline dt:after{content: ":\00A0\00A0";}

/* ******************
    FLEX CELLS
****************** */

.flex {text-align: center;}
@media (min-width: 516px) {
.flex:not(:has(.cta-bloc[hidden])) {display: flex;}
}
.flex-section {width: calc(100% - var(--margin2));padding: var(--margin) var(--margin) 0 var(--margin);margin: 0 0 var(--margin) 0;border: 1px solid var(--colorBorderDark);border-radius: 1px;text-align: center;background: var(--colorBgLight);box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .15);}
.flex:last-child .flex-section:last-child {margin-bottom: var(--margin2);}
@media (min-width: 516px) {
.flex-section {display: inline-block;vertical-align: top;width: calc(50% - var(--margin2) * 2);padding: var(--margin) var(--margin) var(--marginHalf) var(--margin);margin: 0 var(--margin) var(--margin2) var(--margin);border: none;}
}
.flex-wrap .flex-section {border: none;background: none;box-shadow: none;}
@media (min-width: 516px) {
.flex-wrap .flex-section {width: 50%;padding: var(--margin) 0 0 0;}
}
.flex-section h2,
.flex-section h3 {padding-top: 0;padding-bottom: var(--margin);}
.flex-section h3 {margin-bottom: var(--margin);}
.flex-section ul {text-align: left;}
.flex-section .code {margin-bottom: var(--margin);}
.flex-section .code:last-child {margin-bottom: 0;}
.flex-cta > *:last-child {margin-bottom: var(--marginHalf);}
@media (min-width: 516px) {
.flex-cta {position: relative;padding: var(--margin) var(--margin) calc(var(--margin2) + var(--fontSize) * var(--lineHeight) + 12px) var(--margin);}
.flex-cta-footer {position: absolute;bottom: var(--margin); left: 0;width: 100%;text-align: center;}
}
.flex-cta-footer .btn-read::after {content: "→";display: inline-block;margin-left: 5px;}

/* ******************
    HEADER
****************** */

#header {width: 100%;}
#header,
#headerInner {background: var(--colorBoxBgLight);}
#headerInner {padding: 8px;/* border-bottom: 1px solid var(--colorBorderDark); */box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .15);text-align: right;}

#headerLink {float: left;font-size: 0;line-height: 0;color: var(--colorAppPrimary);text-decoration: none;}
#headerLink:focus {color: var(--colorLinkDark);}
#headerLink:hover {color: var(--colorLinkNormal);}
#headerImg {height: 24px;width: auto;margin: 0 8px 0 0;vertical-align: top;}
#headerTitle {font-family: var(--fontFamilyTitle);font-weight: normal;font-size: 14px;line-height: 24px;vertical-align: top;letter-spacing: 1px;}

#headerLinks {list-style: none;display: inline-block;vertical-align: top;padding: 0;margin: 0;}
#headerLinks li {display: inline-block;vertical-align: top;font-size: 0;line-height: 0;padding: 1px;margin: 0 2px;}
#headerLinks li a {font-size: 12px;line-height: 20px;padding: 0 var(--marginHalf);}
#headerLinks li a.sel {color: var(--colorFontNormal)}
#headerLinks li a.sel:focus {color: var(--colorLinkDark);}
#headerLinks li a.sel:hover {color: var(--colorLinkNormal);}

/* ******************
    LINK / BTN
****************** */

.link.btn {font-family: var(--fontFamilyTitle);font-weight: normal;display: inline-block;padding: 5px 10px;color: var(--colorFontNormal);border: 1px solid var(--colorBorderNormal);border-radius: 1px;background: var(--colorBgMedium);}
.link.btn:focus {color: var(--colorLinkDark);}
.link.btn:hover {color: var(--colorLinkNormal);background: var(--colorBgDark);}
.link.btn.btn-disabled {color: var(--colorFontLight);}

.link.btn-2 {color: var(--colorBgDark);border-color: var(--colorLinkNormal);background: var(--colorLinkNormal);border-radius: 3px;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .15);}
.link.btn-2:focus {color: var(--colorBgDark);background: var(--colorLinkDark);}
.link.btn-2:hover {color: var(--colorBgLight);background: var(--colorLinkDark);}

/* ******************
    LIST
****************** */

ol, ul {font-size: 0;line-height: 0;padding: 0 0 0 var(--margin);margin: 0 0 var(--margin) 0;overflow: hidden;}
ol ol, ol ul, ul ol, ul ul {}
ol {counter-reset: counter-ol;}

li {font-size: var(--fontSize);line-height: var(--lineHeight);padding: 0 0 0 var(--marginHalf);margin-bottom: var(--marginHalf);}
li:last-child {margin-bottom: 0;}

ol.inline,
ul.inline {display: block;padding: 0;}
ol.inline li,
ul.inline li {display: inline-block;margin: 0 var(--margin) var(--margin) 0;}
ul.inline li::before,
ul.inline li::after {display: none;}

article li::before {float: left;display: inline-block;margin: 0 var(--marginHalf) 0 calc(0px - var(--marginHalf) - var(--fontSize));}
article li::after {content: " ";display: block;height: 0;overflow: hidden;clear: both;}
/*
article ol > li::before {counter-increment: counter-ol;content: counter(counter-ol)". ";}
article ul > li::before {content: var(--char-bullet);}
*/
li h3, li h4, li h5, li h6 {padding: 0;margin: 0 0 var(--margin) 0;}

.related:first-child ul {margin: 0 0 var(--margin) 0;}

/* ******************
    MAIN
****************** */

#main {max-width: calc(768px - var(--margin) * 2);padding: 0 var(--margin);margin: 0 auto;}
.main-section {max-width: calc(768px - var(--margin) * 2);padding: 0 var(--margin);margin: 0 auto var(--margin2) auto;}

#main::after,
#mainHome::after,
.main-section::after,
article::after,
.content::after,
.wrap-left:after {content: " ";display: block;height: 0;overflow: hidden;clear: both;}

article {padding: var(--margin2) 0;}
#site_home article:last-child {padding-bottom: 0;}
#breadCrumb + article {padding-top: 0;}

article > header {margin: 0 0 var(--margin) 0;}
article > *:last-child {margin-bottom: 0;}

section {margin-bottom: var(--margin2);}

h1, h2, h3, h4, h5 {padding-bottom: var(--marginHalf);margin-bottom: var(--margin2);border-bottom: 1px solid var(--colorBorderNormal);}

h1 code {font-family: var(--fontFamilyTitle);font-size: 1.7rem;line-height: var(--lineHeight);}
h1 + h2 {padding-top: 0;}
h1 .app-name,
h2 .app-name {font-weight: normal;}
h3 code {font-size: 1.15rem;line-height: var(--lineHeight);padding: 0 5px;background: var(--colorBgDark);border-radius: 3px;}
p code, li code {padding: 0 3px;margin: 0 3px;background: var(--colorBgDark);border-radius: 3px;}

#description {display: none;}

/* ******************
    DOC > FOOTER
****************** */

#mainFooter {clear: both;overflow: hidden;}
#mainActions {list-style: none;padding: var(--margin) 0;margin: var(--margin) 0 0 0;text-align: center;border-top: 1px solid var(--colorBorderNormal);}
#mainActions li {display: block;font-size: 0;line-height: 0;padding: 0;margin: 0;vertical-align: top;}
@media (min-width: 680px) {
#mainActions li {display: inline;}
}
#mainActions li::after {display: none;}
#mainActions a {font-size: var(--fontSize);line-height: var(--fontSize);}
#mainActions a span {display: inline-block;font-size: var(--fontSize);line-height: var(--fontSize);height: var(--fontSize);width: var(--fontSize);padding: var(--margin);margin: var(--margin) var(--marginHalf);text-align:center;border-radius: 50%;border: 1px solid var(--colorFontLight);color: var(--colorFontLight);transition: color .1s linear, border .1s linear;}
#mainActions a:focus span {color: var(--colorLinkDark);border-color: var(--colorLinkDark);}
#mainActions a:hover span {color: var(--colorLinkNormal);border-color: var(--colorLinkNormal);}

/* ******************
    DOC > META
****************** */

#meta dt {font-size: 0;line-height: 0;padding: 0;margin: 0;border: none;}
@media (min-width: 516px) {
#meta dt {font-size: var(--fontSizeSmall);line-height: var(--lineHeight);padding: 0 0 0 var(--margin);margin: 0;border-left: 1px solid var(--colorBorderNormal);}
}
#meta dt:first-child {border:none;}

/* ******************
    DOC > METHODS
****************** */

.methods-title {margin-bottom: var(--marginHalf);}
.methods-title:target {margin-bottom: var(--margin2);}
.methods-title::before {content: var(--char-arrow-small);display: inline-block;margin-right: var(--marginHalf);transition: transform .1s linear;}
.methods-title:target::before {transform: rotate(90deg);}
.methods-title a:focus,
.methods-title a:focus .unlight {color: var(--colorLinkDark);text-decoration: underline;}
#body h2.methods-title a:not(:focus):hover,
#body h2.methods-title a:not(:focus):hover .unlight {color: var(--colorLinkNormal);cursor: pointer;}
.methods {font-family: var(--fontFamilyPre);display: none;}
.methods-title:target + .methods {display: inherit;}
.methods li a {font-size: var(--fontSizePre);line-height: var(--lineHeight);display: inline-block;padding: 3px 0;color: var(--colorFontDark);border-radius: 3px;}
.methods li a:focus {background: var(--colorBgLight);}
.methods li a:focus,
.methods li a:focus .unlight {color: var(--colorLinkDark);}
.methods li a:hover {background: var(--colorBgDark);}
.methods li a:hover,
.methods li a:hover .unlight {color: var(--colorLinkNormal);}

/* ******************
    DOC > PROPERTIES
****************** */

.properties {margin-top: var(--marginHalf);}
.properties > dt {font-weight: normal;font-family: var(--fontFamilyTitle);font-size: var(--fontSizeBig);line-height: var(--lineHeight);}
.properties > dd + dt {padding-top: var(--marginHalf);}
.properties dd {margin-bottom: var(--marginHalf);}
.properties dd:last-child {margin-bottom: 0;}
.properties dt code {font-weight: normal;font-size: 1rem;line-height: var(--lineHeight);padding: 0 5px;background: var(--colorBgDark);border-radius: 3px;}
.properties em {font-weight: normal;font-family: var(--fontFamily);font-size: var(--fontSizeSmall);line-height: var(--lineHeight);}
.properties dd code {padding: 0 5px;background: var(--colorBgDark);border-radius: 3px;}
.properties dd dl {padding-top: var(--margin);}
.properties dd ul {padding-top: calc(var(--marginHalf) + var(--fontSize) / 2);margin-bottom: 0;}

/* ******************
    HOME > HERO
****************** */

#what h2 {font-size: 1.3rem;line-height: var(--lineHeight);padding-top: 0;}
@media (min-width: 680px) {
#what .cells {margin-left: var(--margin);margin-right: var(--margin2);}
#what .cells .cell:first-child {padding: 0 var(--margin2) 0 0;}
#what .cells .cell:first-child + .cell {width: 53%;padding: 0;}
}
#picture {padding: var(--margin2) 0 0 0;margin: 0;text-align: center;}
@media (min-width: 680px) {
#picture {padding: 0;}
}
#pictureImg {width: 100%;border: none;border-radius: 5px;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .15);}
@media (min-width: 450px) {
#pictureImg {width: 75%;}
}
@media (min-width: 680px) {
#pictureImg {width: 100%;}
}
#cta {padding: var(--margin2) 0 0 0;margin: 0 0 var(--margin) 0;text-align: center;}
#cta-mention {font-size: var(--fontSizeSmall);text-align: center;}

/* ******************
    HOME > HOW
****************** */

#howCells {margin: 0 0 var(--margin2) 0;text-align: center;}
#howCells .cell {margin: 0 0 var(--margin2) 0;border-radius: var(--marginHalf);}
#howCells .cell::after {content: " ";display: block;height: 0;overflow: hidden;clear: both;}
#howCells .cell:first-child {padding: var(--margin2) 0;background: #F4F5F7;}
@media (min-width: 680px) {
#howCells .cell {width: 50%;margin: 0;}
#howCells .cell:first-child {padding: 0 var(--margin);}
}
#howCells h3 {margin-bottom: var(--margin);}
#howCells .cell + .cell h3:before {content: var(--char-arrow);margin-right: var(--margin);color: var(--colorAppPrimary);}

#howList {list-style: none;padding: 0 var(--margin) 0 calc(var(--margin) + 20px);text-align: left;}
@media (min-width: 680px) {
#howList {padding: var(--margin) 0 0 20px;}
}
#howList li {position: relative;padding: var(--marginHalf) var(--marginHalf) var(--marginHalf) var(--margin2);margin-bottom: var(--margin);margin-bottom: calc(var(--margin) + var(--marginHalf) / 1.33);border-radius: 3px;background: var(--colorBgLight);}
#howList li .icon {display: block;position: absolute;top: calc(50% - 20px);left: -20px;height: 24px;width: 24px;padding: 6px;color: var(--colorAppPrimary);background: var(--colorBgLight);border-radius: 50%;border: 2px solid var(--colorBgDark);}
#howList li:last-child .text {color: var(--colorAppPrimary);}
#howList h4 {font-size: var(--fontSizeSmall);line-height: var(--lineHeight);padding: 0;margin: 0;border: none;}
#howList p {font-size: var(--fontSizeSmall);line-height: var(--lineHeight);padding: 0;margin: 0;}

#howTags {list-style: none;text-align: center;padding: var(--margin) 0 0 0;margin: 0;}
#howTags li {font-size: 0;line-height: 0;display: inline-block;width: calc(33% - var(--margin2));padding: var(--margin) var(--marginHalf);margin: 0 var(--marginHalf) var(--margin2) var(--marginHalf);background: #F4F5F7;border-radius: 5px;text-align: center;}
#howTags .icon {display: block;height: 24px;width: 24px;margin: 0 auto var(--marginHalf) auto;color: var(--colorAppPrimary);}
#howTags .text {font-weight: bold;font-size: 12px;line-height: 16px;}
#howTags .text span {display: block;}

.dots {font-size: 0;line-height: 0;}
.dots span {display: inline-block;vertical-align: top;height: 5px;width: 5px;margin: 0 calc(var(--marginHalf) / 2);border-radius: 50%;background: var(--colorAppPrimary);}

/* ******************
    HOME > STATUS
****************** */

#projectStatus {margin-top: var(--margin2);background: #F4F5F7;}
#projectStatus .main-section {padding: var(--margin2) var(--margin);}
#projectStatus .main-section {margin-bottom: 0;}
#projectStatus .wrap-left {padding-left: 0;}
@media (min-width: 680px) {
#projectStatus .wrap-left {padding-left: var(--margin);}
}

#status {display: inline-block;font-weight: bold;padding: 0 var(--margin) 0 0;margin: 0 0 var(--margin2) 0;background: var(--colorBgLight);border: 1px solid var(--colorBorderNormal);border-radius: 3px;}
#statusIcon {display: inline-block;height: calc(var(--fontSize) * var(--lineHeight));width: calc(var(--fontSize) * var(--lineHeight));padding: 5px;text-align: center;color: green;}

/* ******************
    HOME > WHY
****************** */

#why {margin-top: var(--margin2);background: #F4F5F7;}
#why .main-section {padding: var(--margin2) var(--margin);}
#why .flex-section {border-radius: var(--marginHalf);}

#why .icon {display: block;height: 70px;width: 70px;margin: var(--margin) auto;color: var(--colorAppPrimary);}