:root {
      --head-color: #262d3d;
      --body-color: #48525c;
      --body-altColor: #767676;
      --body-bg: #fefefe;
      --link-color: #204ecf;
      --link-bg: #204ecf;
      --icon-color: #48525c;
      --icon-alt: #455065;
      --icon-sec: #767676;
      --header-text: #48525c;
      --header-title: 17px;
      --header-bg: #fefefe;
      --header-icon: #262d3d;
      --header-height: 60px;
      --notif-height: 45px;
      --notif-bg: #e1f5fe;
      --notif-color: #01579b;
      --content-bg: #fefefe;
      --content-border: #eceff1;
      --transparent-bg: rgba(0, 0, 0, .03);
      --page-maxContent: 780px;
      --post-titleSize: 32px;
      --post-fontSize: 15px;
      --post-titleSizeMobile: 22px;
      --post-fontSizeMobile: 15px;
      --widget-titleSize: 15px;
      --widget-titleWeight: 400;
      /* Fill with 400(normal) or 700(bold) */
      --widget-titleAfter: 1px;
      --nav-width: 260px;
      --nav-border: 1px;
      --nav-text: #262d3d;
      --nav-icon: #48525c;
      --nav-bg: #fefefe;
      --font-head: Poppins, sans-serif;
      --font-body: 'Noto Sans', sans-serif;
      --font-code: 'Fira Mono', monospace;
      --transition-1: all .1s ease;
      --transition-2: all .2s ease;
      --transition-4: all .4s ease;
      --highlight-bg: #f6f6f6;
      --highlight-color: #2f3337;
      --highlight-orange: #b75501;
      --highlight-blue: #015692;
      --highlight-green: #54790d;
      --highlight-red: #f15a5a;
      --highlight-comment: #656e77;
      --dark-text: #fefefe;
      --dark-textAlt: #989b9f;
      --dark-link: #005af0;
      --dark-bg: #1e1e1e;
      --dark-bgAlt: #2d2d30;
      --dark-bgSec: #252526;
    }

@font-face {
      font-family: 'Noto Sans';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/notosans/v11/o-0OIpQlx3QUlC5A4PNr4ARMQ_m87A.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0OIpQlx3QUlC5A4PNr4DRG.woff) format('woff')
    }

    @font-face {
      font-family: 'Noto Sans';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/notosans/v11/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0TIpQlx3QUlC5A4PNr4Az5ZtyH.woff) format('woff')
    }

    @font-face {
      font-family: 'Noto Sans';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/notosans/v11/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0IIpQlx3QUlC5A4PNb4Q.woff) format('woff')
    }

    @font-face {
      font-family: 'Noto Sans';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/notosans/v11/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0NIpQlx3QUlC5A4PNjXhFlYA.woff) format('woff')
    }

    /* Font Heading */
    @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2')
    }

    @font-face {
      font-family: 'Poppins';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmy15lEw.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmy15VF9eO.woff2) format('woff2')
    }

    @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6V1g.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2')
    }

    @font-face {
      font-family: 'Poppins';
      font-style: italic;
      font-weight: 600;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19lEw.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VF9eO.woff2) format('woff2')
    }

    /* Source Code Font */
    @font-face {
      font-family: 'Fira Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/firamono/v9/N0bX2SlFPv1weGeLZDtQIg.woff) format('woff'), url(https://fonts.gstatic.com/s/firamono/v9/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format('woff2')
    }

    *,
    :after,
    :before {
      -webkit-box-sizing: border-box;
      box-sizing: border-box
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--head-color)
    }

    h1 {
      font-size: 1.8rem
    }

    h2 {
      font-size: 1.7rem
    }

    h3 {
      font-size: 1.5rem
    }

    h4 {
      font-size: 1.3rem
    }

    h5 {
      font-size: 1.2rem
    }

    h6 {
      font-size: 1.1rem
    }

    a {
      color: var(--link-color);
      text-decoration: none
    }

    a:hover {
      opacity: .7;
      transition: opacity .15s
    }

    table {
      border-spacing: 0
    }

    iframe {
      max-width: 100%;
      border: 0;
      margin-left: auto;
      margin-right: auto
    }

    input,
    button,
    select,
    textarea {
      font: inherit;
      font-size: 100%;
      color: inherit;
      line-height: normal;
      vertical-align: baseline
    }

    img {
      display: block;
      position: relative;
      max-width: 100%;
      height: auto
    }

    svg {
      width: 22px;
      height: 22px;
      fill: var(--icon-color)
    }

    svg.line,
    svg .line {
      fill: none !important;
      stroke: var(--icon-color);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1
    }

    svg.c-1,
    svg .c-1 {
      fill: var(--icon-alt)
    }

    svg.c-2,
    svg .c-2 {
      fill: var(--icon-sec);
      opacity: .4
    }

    .hidden,
    .replaced {
      display: none
    }

    .invisible {
      visibility: hidden
    }

    .clear {
      width: 100%;
      display: block;
      margin: 0;
      padding: 0;
      float: none;
      clear: both
    }

    .fullClose {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      background: transparent;
      opacity: 0;
      visibility: hidden
    }

    .free:after,
    .new:after {
      display: inline-block;
      content: 'Free!';
      color: var(--link-color);
      font-size: 85%;
      font-weight: 400;
      margin: 0 5px
    }

    .new:after {
      content: 'New!'
    }

    /* Main Element */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden
    }

    body {
      position: relative;
      margin: 0;
      padding: 0 !important;
      width: 100%;
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--body-color);
      background-color: var(--body-bg);
      -webkit-font-smoothing: antialiased;
      word-break: break-word
    }

    .mainWrapper {
      position: relative
    }

    /* Header Notification */
    .notifContent {
      display: flex;
      align-items: center;
      position: relative;
      background-color: var(--notif-bg);
      color: var(--notif-color);
      padding: 10px 25px;
      font-size: 90%;
      line-height: normal;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      overflow: hidden
    }

    .notifContent label {
      margin-left: auto;
      display: flex;
      align-items: center
    }

    .notifContent label svg.line {
      width: 20px;
      height: 20px;
      stroke: var(--notif-color)
    }

    .notifText {
      width: calc(100% - 20px);
      padding-right: 12px
    }

    .notifInput:checked~.notifContent {
      height: 0;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
      visibility: hidden
    }

    .notifAlt {
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .notifAlt a {
      flex-shrink: 0;
      white-space: nowrap;
      display: block;
      margin-left: 10px;
      padding: 8px 12px;
      border-radius: 3px;
      background-color: #fff;
      font-size: 12px;
      box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%)
    }

    /* Header Section */
    header {
      width: 100%;
      background-color: var(--header-bg);
      color: var(--header-text);
      z-index: 10;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      border-bottom: 1px solid var(--content-border);
      position: -webkit-sticky;
      position: sticky;
      top: 0
    }

    header a {
      color: inherit
    }

    header svg {
      width: 20px;
      height: 20px;
      fill: var(--header-icon)
    }

    header svg.line,
    header svg .line {
      fill: none;
      stroke: var(--header-icon)
    }

    .Header {
      margin: auto 0;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center
    }

    .Header a {
      display: block
    }

    .Header img {
      max-width: 150px;
      max-height: 45px
    }

    .Header h1,
    .Header h2 {
      display: block;
      font-size: var(--header-title);
      font-weight: 700;
      color: inherit
    }

    .Header .headerTitle {
      max-width: 170px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: block
    }

    .headerContent {
      position: relative;
      height: var(--header-height);
      display: flex
    }

    .headerDiv {
      display: flex;
      align-items: center
    }

    .headerLeft {
      padding-left: 25px;
      flex: 0 0 auto;
      width: var(--nav-width)
    }

    .headerLeft .headerIcon {
      margin-right: 15px
    }

    .headerRight {
      padding-left: 25px;
      padding-right: 25px;
      flex: 1 0 auto;
      width: calc(100% - var(--nav-width))
    }

    .headerRight .headerIcon {
      margin-left: auto;
      position: relative
    }

    .headerSearch {
      width: 100%;
      max-width: 550px
    }

    .headerSearch form {
      position: relative;
      width: 100%;
      font-size: 95%
    }

    .headerSearch input[type=text] {
      display: block;
      width: 100%;
      outline: 0;
      border: 0;
      border-radius: 10px;
      background-color: var(--transparent-bg);
      padding: 12px 48px
    }

    .headerSearch input[type=text]:focus~.close {
      opacity: 1;
      visibility: visible
    }

    .headerSearch button {
      background: transparent;
      border: 0;
      outline: 0;
      padding: 0;
      position: absolute;
      left: 15px;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center
    }

    .headerSearch button svg {
      width: 18px;
      height: 18px;
      opacity: .7
    }

    .headerSearch button.close {
      right: 12px;
      left: auto;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition-4)
    }

    .headerSearch button.close svg {
      width: 16px;
      height: 16px
    }

    .headerIcon {
      display: flex;
      align-items: center;
      font-size: 11px
    }

    .headerIcon>* {
      display: flex;
      align-items: center;
      position: relative
    }

    .headerIcon>*:not(:first-child) {
      margin-left: 12px
    }

    .headerIcon label.navMenu:after {
      content: '';
      width: 45px;
      height: 45px;
      display: block;
      background-color: var(--transparent-bg);
      border-radius: 50%;
      position: absolute;
      top: -12.5px;
      left: -12.5px;
      right: -12.5px;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      transform: scale(.75, .75)
    }

    .headerIcon a.navMenu:after {
      content: attr(data-text);
      opacity: .7;
      margin: 0 8px
    }

    .headerIcon .navMenu:hover:after {
      opacity: 1;
      visibility: visible;
      transform: scale(1, 1)
    }

    .headerIcon .navMenu svg,
    .headerIcon .navMenu .ham {
      display: block;
      -webkit-transition: var(--transition-2);
      transition: var(--transition-2);
      z-index: 2
    }

    .headerIcon .navMenu .svg-2 {
      position: absolute;
      opacity: 0;
      visibility: hidden
    }

    .headerIcon .navMenu .ham {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center
    }

    .headerIcon .navMenu .ham span {
      display: block;
      padding: 0 2px;
      width: inherit;
      opacity: .8
    }

    .headerIcon .navMenu .ham i,
    .headerIcon .navMenu .ham span:before,
    .headerIcon .navMenu .ham span:after {
      content: '';
      display: block;
      width: 100%;
      border-top: 1px solid var(--header-icon)
    }

    .headerIcon .navMenu .ham i {
      margin: 4px 0
    }

    .headerIcon .navSearch,
    .headerIcon a.navMenu {
      display: none
    }

    .headerIcon .navDark i {
      display: flex;
      align-items: center;
      width: 26px;
      height: 18px;
      border-radius: 10px;
      border: 1px solid var(--header-icon);
      opacity: .8
    }

    .headerIcon .navDark i:before {
      content: '';
      display: block;
      position: relative;
      left: 3px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: var(--header-icon);
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1)
    }

    .headerIcon .navDark:before {
      content: attr(data-text);
      opacity: 0;
      -webkit-transition: var(--transition-2);
      transition: var(--transition-2);
      white-space: nowrap;
      position: absolute;
      right: 0
    }

    .headerIcon .navDark:hover:before {
      opacity: .7;
      padding-right: 8px;
      padding-left: 8px;
      right: 26px
    }

    /* Widget Social Media */
    .socialLink {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      margin: 0;
      padding: 0;
      list-style: none
    }

    .socialLink li {
      margin: 0 5px
    }

    .socialLink li .link {
      display: flex;
      align-items: center
    }

    .socialLink li a {
      opacity: .8
    }

    #LinkList002 {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: calc(var(--nav-width) - var(--nav-border));
      background-color: var(--nav-bg);
      padding: 20px 20px 30px 25px;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1)
    }

    #LinkList002 ul {
      justify-content: flex-start
    }

    #LinkList002 li:first-child {
      margin-left: 0
    }

    #LinkList002 label {
      display: none;
      align-items: center;
      opacity: 0;
      visibility: hidden
    }

    #mobile-menu {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--nav-bg);
      border-top: var(--nav-border) solid var(--content-border);
      padding: 0 25px;
      border-radius: 0px 0px 0 0;
      box-shadow: 0 5px 15px 0 rgb(0 0 0 / 12%);
      z-index: 1
    }

    #mobile-menu .mobileMenu {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      margin: 0;
      padding: 0;
      list-style: none
    }

    #mobile-menu .mobileMenu li {
      width: 20%;
      text-align: center
    }

    #mobile-menu .mobileMenu li>* {
      display: inline-flex;
      align-items: center
    }

    #mobile-menu .mobileMenu li>*:hover svg,
    .onHome #mobile-menu .mobileMenu li.mHome svg {
      opacity: .7
    }

    #mobile-menu .mobileMenu li>*:hover svg .fill,
    .onHome #mobile-menu .mobileMenu li.mHome svg .fill {
      fill: var(--nav-icon)
    }

    .darkMode #mobile-menu .mobileMenu li>*:hover svg .fill,
    .darkMode #mobile-menu .mobileMenu li.mDark svg .fill,
    .darkMode.onHome #mobile-menu .mobileMenu li.mHome svg .fill {
      fill: var(--dark-text)
    }

    /* Mobile Menu */
    #mobile-menu {
      display: none
    }

    /* Main Menu */
    .mainInner {
      margin-left: var(--nav-width);
      margin-bottom: 0;
      padding: 25px;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      position: relative
    }

    .mainMenu {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      height: 100%;
      width: var(--nav-width);
      background-color: var(--nav-bg);
      border-right: var(--nav-border) solid var(--content-border);
      font-size: 13px;
      color: var(--nav-text);
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      z-index: 2
    }

    .mainMenu .section {
      padding-top: calc(var(--header-height) + 15px);
      padding-bottom: 90px;
      height: 100%;
      overflow-y: auto
    }

    .mainMenu .section:hover {
      overflow-y: auto
    }

    .mainMenu .fullClose.menu {
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1)
    }

    .mainMenu svg {
      width: 20px;
      height: 20px;
      fill: var(--nav-icon)
    }

    .mainMenu svg.line {
      fill: none;
      stroke: var(--nav-icon)
    }

    .mainMenu ul {
      margin: 0;
      padding: 0;
      list-style: none
    }

    .htmlMenu>li {
      position: relative
    }

    .htmlMenu>li.break:after {
      content: '';
      display: block;
      width: calc(100% - 50px);
      border-bottom: 1px solid var(--content-border);
      margin: 12px 25px
    }

    .htmlMenu>li li {
      -webkit-transition: var(--transition-2);
      transition: var(--transition-2);
      max-height: 0;
      opacity: 0;
      visibility: hidden
    }

    .htmlMenu>li li a {
      white-space: nowrap;
      display: block;
      position: relative;
      padding: 10px 25px 10px 60px;
      color: inherit;
      opacity: .7
    }

    .htmlMenu .link:before,
    .htmlMenu>li li a:before {
      content: '';
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      display: block;
      background-color: transparent;
      width: 2px;
      border-radius: 0 2px 2px 0
    }

    .htmlMenu .link:hover:before,
    .htmlMenu>li li a:hover:before {
      background-color: var(--link-color);
      opacity: .7
    }

    .htmlMenu .link:hover svg,
    #LinkList002 label:hover svg,
    .socialLink li .link:hover svg {
      fill: var(--link-color)
    }

    .htmlMenu .link:hover svg.line,
    #LinkList002 label:hover svg.line,
    .socialLink li .link:hover svg.line {
      fill: none;
      stroke: var(--link-color)
    }

    .htmlMenu .dropDown>a {
      color: inherit;
      text-decoration: none
    }

    .htmlMenu .link {
      white-space: nowrap;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 10px 25px;
      position: relative;
      color: inherit
    }

    .htmlMenu .link svg {
      flex-shrink: 0;
      margin-right: 15px
    }

    .htmlMenu .link svg.down {
      width: 16px;
      height: 16px;
      margin-left: auto;
      margin-right: 0
    }

    .htmlMenu .link .name {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 400
    }

    .htmlMenu a.link:hover,
    .htmlMenu>li li a:hover {
      background-color: var(--transparent-bg)
    }

    .htmlMenu .close {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: calc(var(--nav-width) - var(--nav-border));
      height: var(--header-height);
      background-color: var(--nav-bg);
      display: flex;
      align-items: center;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      z-index: 2
    }

    .htmlMenu .close .link:before {
      display: none
    }

    .htmlMenu .close .link .name:before {
      content: attr(data-text);
      font-size: 12px;
      opacity: .7
    }

    .htmlMenu .dropMenu:checked~.link svg.down {
      transform: rotate(180deg)
    }

    .htmlMenu .dropMenu:checked~ul li {
      max-height: 40px;
      opacity: 1;
      visibility: visible
    }

    .navInput:checked~.mainWrapper .mainInner,
    .navInput:checked~.mainWrapper footer {
      margin-left: 68px
    }

    .navInput:checked~.mainWrapper .mainMenu {
      width: 68px
    }

    .navInput:checked~.mainWrapper .htmlMenu .close,
    .navInput:checked~.mainWrapper .mainMenu #LinkList002 {
      width: calc(68px - var(--nav-border))
    }

    .navInput:checked~.mainWrapper .mainMenu #LinkList002 ul {
      display: none
    }

    .navInput:checked~.mainWrapper .mainMenu #LinkList002 label {
      display: flex;
      opacity: 1;
      visibility: visible
    }

    .navInput:checked~.mainWrapper .htmlMenu a.link:hover {
      background-color: transparent
    }

    .navInput:checked~.mainWrapper .htmlMenu .link .name,
    .navInput:checked~.mainWrapper .htmlMenu .link svg.down {
      display: none
    }

    .navInput:checked~.mainWrapper .htmlMenu .dropMenu:checked~ul li {
      max-height: 0;
      opacity: 0;
      visibility: hidden
    }

    .navInput:checked~.mainWrapper .htmlMenu>li.break:after {
      width: calc(100% - 45px)
    }

    @media screen and (max-width:896px) {
      .headerIcon .navSearch {
        display: flex
      }

      header {
        position: relative;
        border-bottom: 0
      }

      .Header .headerTitle {
        max-width: 170px
      }

      .headerLeft {
        width: auto;
        flex-grow: 1;
        padding-right: 20px
      }

      .headerRight {
        width: auto;
        flex: 0 0 auto
      }

      .headerSearch {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 20px;
        max-width: none;
        z-index: 10
      }

      .headerSearch button {
        z-index: 3
      }

      .headerSearch input[type=text] {
        position: relative;
        background-color: var(--content-bg);
        padding: 20px 48px;
        margin-top: -100%;
        z-index: 3;
        -webkit-transition: var(--transition-1);
        transition: var(--transition-1)
      }

      .headerSearch input[type=text]:focus {
        margin-top: 25px;
        box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%)
      }

      .headerSearch input[type=text]:focus~.fullClose.search {
        background: rgba(0, 0, 0, .5);
        opacity: 1;
        visibility: visible
      }

      .headerSearch input[type=text]:focus~.fullClose.search,
      .navInput:checked~.mainWrapper .mainMenu .fullClose.menu {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px)
      }

      #LinkList002 {
        width: 85%;
        max-width: 480px;
        margin-left: -100%;
        border-radius: 0 0 15px 0
      }

      #mobile-menu {
        display: block
      }

      .mainMenu {
        width: 100%;
        background-color: transparent;
        overflow: hidden;
        margin-left: -100%;
        border-right: 0;
        z-index: 11
      }

      .mainMenu .section {
        background-color: var(--nav-bg);
        position: relative;
        width: 85%;
        max-width: 480px;
        z-index: 3;
        overflow-y: auto;
        -webkit-transition: var(--transition-1);
        transition: var(--transition-1);
        box-shadow: -4px 9px 25px -6px rgb(0 0 0 / 10%);
        border-radius: 0 15px 15px 0
      }

      .htmlMenu .close {
        width: 85%;
        max-width: 480px;
        margin-left: -100%;
        border-radius: 0 15px 0 0
      }

      .htmlMenu .link,
      #LinkList002 {
        padding-left: 20px;
        padding-right: 20px
      }

      .htmlMenu>li li a {
        padding: 10px 20px 10px 55px
      }

      .htmlMenu>li.break:after {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px
      }

      .navInput:checked~.mainWrapper .mainMenu {
        width: 100%;
        margin-left: 0
      }

      .navInput:checked~.mainWrapper .mainMenu .section {}

      .navInput:checked~.mainWrapper .mainMenu .fullClose.menu {
        background: rgba(0, 0, 0, .5);
        opacity: 1;
        visibility: visible
      }

      .navInput:checked~.mainWrapper .htmlMenu .link .name,
      .navInput:checked~.mainWrapper .htmlMenu .link svg.down {
        display: block
      }

      .navInput:checked~.mainWrapper .htmlMenu .dropMenu:checked~ul li {
        max-height: 40px;
        opacity: 1;
        visibility: visible
      }

      .navInput:checked~.mainWrapper .htmlMenu a.link:hover {
        background-color: var(--transparent-bg)
      }

      .navInput:checked~.mainWrapper .mainInner,
      .mainInner,
      .navInput:checked~.mainWrapper footer {
        margin-left: 0
      }

      .navInput:checked~.mainWrapper .htmlMenu .close,
      .navInput:checked~.mainWrapper .mainMenu #LinkList002 {
        width: 85%;
        max-width: 480px;
        margin-left: 0
      }

      .navInput:checked~.mainWrapper .mainMenu #LinkList002 label {
        display: none
      }

      .navInput:checked~.mainWrapper .mainMenu #LinkList002 ul {
        display: flex
      }
    }

    /* Large Section */
    .largeSection .widget {
      margin-bottom: 30px
    }

    /* blogTitle Section */
    .blogTitle {
      display: flex;
      justify-content: space-between;
      align-items: flex-start
    }

    .blogTitle .postMode {
      display: flex;
      align-items: center;
      font-size: 11px;
      line-height: 20px
    }

    .blogTitle .postMode:before {
      content: 'List';
      margin: 0 8px;
      opacity: .7
    }

    .blogTitle .postMode svg {
      width: 20px;
      height: 20px
    }

    .blogTitle .postMode .svg-2,
    .listMode .blogTitle .postMode .svg-1 {
      display: none
    }

    .listMode .blogTitle .postMode .svg-2 {
      display: block
    }

    .listMode .blogTitle .postMode:before {
      content: 'Grid'
    }

    /* blogContent Section */
    .blogContent .widget .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 30px;
      font-size: var(--widget-titleSize);
      font-weight: var(--widget-titleWeight);
      font-family: var(--font-body);
      position: relative
    }

    .blogContent .widget .title:after {
      content: '';
      display: block;
      width: 18px;
      position: absolute;
      bottom: -8px;
      border-bottom: var(--widget-titleAfter) solid var(--dark-textAlt)
    }

    .blogContent .widget .title.search {
      font-size: 14px;
      display: block
    }

    .blogContent .widget .title.search:after {
      display: none
    }

    .blogContent .widget .title.search span {
      font-weight: 400;
      font-size: 90%;
      opacity: .7;
      margin-right: 8px
    }

    .blogContent .widget .title.search span:before {
      content: attr(data-text)
    }

    .blogContent .widget .title.search span.home:after {
      content: '/';
      margin-left: 8px
    }

    .blogContent .widget .title svg {
      height: 18px;
      width: 18px;
      opacity: .7
    }

    .imgThumb {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      object-fit: cover
    }

    .blogContent .widget:not(:last-child),
    .blogContent .sidebar>*:not(:last-child) {
      margin-bottom: 50px
    }

    .blogContent .widget input[type=text],
    .blogContent .widget input[type=email],
    .blogContent .widget textarea {
      display: block;
      width: 100%;
      border: 1px solid rgba(230, 230, 230, 1);
      border-radius: 2px;
      outline: 0;
      padding: 15px 15px;
      margin-bottom: 15px
    }

    .blogContent .widget input[type=text]:focus,
    .blogContent .widget input[type=email]:focus,
    .blogContent .widget textarea:focus {
      border-color: var(--body-altColor)
    }

    .blogContent .widget input[type=button],
    .blogContent .widget input[type=submit] {
      display: inline-flex;
      align-items: center;
      margin: 15px 0 0;
      padding: 10px 20px;
      outline: 0;
      border: 0;
      border-radius: 2px;
      color: #fefefe;
      background-color: var(--link-bg);
      font-size: 14px;
      font-family: var(--font-body);
      white-space: nowrap;
      overflow: hidden;
      max-width: 100%
    }

    .blogContent .widget input[type=button]:hover,
    .blogContent .widget input[type=submit]:hover {
      opacity: .7
    }

    .blogContent {
      display: flex;
      flex-wrap: wrap
    }

    .blogContent .mainbar {
      flex: 1 0 calc(100% - 330px);
      width: calc(100% - 330px);
    }

    .blogContent .mainbar {
      margin-right: auto;
      margin-left: auto;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1)
    }

    .blogContent .mainbar>*:not(:last-child) {
      margin-bottom: 25px;
      padding-bottom: 25px;
      border-bottom: 1px solid var(--content-border)
    }

    .blogContent .mainbar>.no-items {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: 0
    }

    .blogContent .mainbar {
      max-width: 780px
    }

    .blogContent .sidebar {
      max-width: 600px
    }

    .blogContent .sidebar {
      flex: 0 0 330px;
      width: 330px;
      padding-left: 30px
    }

    .blogContent .sidebar #side-sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 75px
    }

    .onPage .blogContent .mainbar,
    .onPage footer .creditInner {
      max-width: var(--page-maxContent);
      margin-left: auto;
      margin-right: auto
    }

    /* blogPosts Section */
    .blogPosts {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: calc(100% + 20px);
      left: -10px;
      right: -10px
    }

    .blogPosts.empty {
      width: 100%;
      left: 0
    }

    .blogPosts.empty~.blogPager {
      justify-content: flex-start
    }

    .blogPosts .hentry {
      display: block;
      position: relative;
      width: calc(33.333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 40px;
      padding-bottom: 38px
    }

    .blogPosts .hentry.noInfo,
    .blogPosts .hentry.product,
    .blogPosts div.hentry,
    .blogPosts .hentry.noComment {
      padding-bottom: 0
    }

    /* Injected blocks (ads / notices) inside the post list — always span full row
       so they never break the 3-column grid or the listMode layout */
    .blogPosts .postAd {
      flex: 0 0 calc(100% - 20px);
      width: calc(100% - 20px);
      margin: 0 10px 40px
    }

    .listMode .blogPosts .postAd {
      margin-bottom: 25px
    }

    .blogPosts .hentry.noAd .widget,
    .Blog~.HTML {
      display: none
    }

    .onItem .blogPosts {
      display: block;
      width: 100%;
      left: 0;
      right: 0
    }

    .onItem .blogPosts .hentry {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 0;
      padding-bottom: 0
    }

    /* gridLayout */
    @media screen and (max-width:480px) {
      .gridLayout .blogPosts .hentry {
        width: calc(100% - 15px);
        margin-bottom: 0
      }

      .gridLayout .blogPosts .hentry:not(:last-child) {
        margin-bottom: 50px
      }

      .gridLayout .postEntry.snippet,
      .gridLayout .postHeader,
      .gridLayout .postInfo,
      .gridLayout .postLabel.sponsored {
        font-size: 90%
      }

      .gridLayout .postEntry.snippet.productPrice,
      .gridLayout.listMode .blogPosts .postEntry.snippet.productPrice {
        font-size: 14px
      }

      .gridLayout .postTitle {
        font-size: 1.1rem
      }

      .gridLayout.listMode .blogPosts .hentry,
      .gridLayout.listMode .blogPosts .hentry:not(:last-child) {
        margin-bottom: 30px
      }

      .gridLayout.listMode .blogPosts .postEntry.snippet,
      .gridLayout.listMode .blogPosts .postHeader,
      .gridLayout.listMode .blogPosts .postInfo,
      .gridLayout.listMode .blogPosts .postLabel.sponsored {
        font-size: 12px
      }
    }

    /* blogPager */
    .blogPager,
    .postNav {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 90%;
      line-height: 20px;
      color: var(--dark-text);
      margin-top: 30px;
      margin-bottom: 0
    }

    .blogPager>*,
    .postNav>* {
      display: flex;
      align-items: center;
      padding: 10px 13px;
      margin-bottom: 10px;
      color: inherit;
      background-color: var(--link-bg);
      border-radius: 2px
    }

    .blogPager>* svg {
      width: 18px;
      height: 18px;
      fill: var(--dark-text)
    }

    .blogPager>* svg.line {
      fill: none;
      stroke: var(--dark-text);
      stroke-width: 1.5
    }

    .blogPager>*:before {
      content: attr(data-text)
    }

    .blogPager .moreLink {
      padding: 10px 35px
    }

    .blogPager .jsLoad {
      margin-left: auto;
      margin-right: auto
    }

    .blogPager .newerLink:before,
    .blogPager .jsLoad:before {
      display: none
    }

    .blogPager .newerLink:after,
    .blogPager .jsLoad:after {
      content: attr(data-text)
    }

    .blogPager .newerLink svg,
    .blogPager .jsLoad svg {
      margin-right: 8px
    }

    .blogPager .olderLink svg {
      margin-left: 8px
    }

    .blogPager .noPost {
      cursor: not-allowed
    }

    .blogPager .noPost,
    .blogPager .current,
    .postNav .current {
      background-color: var(--transparent-bg);
      color: var(--dark-textAlt)
    }

    .blogPager .noPost svg,
    .blogPager .noPost.jsLoad svg {
      fill: var(--dark-textAlt)
    }

    .blogPager .noPost svg.line {
      fill: none;
      stroke: var(--dark-textAlt)
    }

    /* Breadcrumbs */
    .breadcrumbs {
      display: flex;
      align-items: baseline;
      margin-bottom: 10px
    }

    .breadcrumbs a {
      color: inherit
    }

    .breadcrumbs>*:not(:last-child):after {
      content: '/';
      margin-left: 8px;
      font-size: 90%;
      opacity: .7
    }

    .breadcrumbs>* {
      display: inline-flex;
      align-items: baseline;
      flex-shrink: 0;
      margin-right: 8px
    }

    .breadcrumbs .titleLink:before {
      content: attr(data-text)
    }

    .breadcrumbs .homeLink a {
      font-size: 90%;
      opacity: .8
    }

    /* Article Section */
    .postThumbnail {
      flex: 0 0 calc(33.333% - 12.5px);
      overflow: hidden;
      border-radius: 2px;
      margin-bottom: 20px
    }

    .postThumbnail>* {
      display: block;
      position: relative;
      padding-top: 52.335%;
      -webkit-transition: var(--transition-2);
      transition: var(--transition-2);
      color: inherit
    }

    .postThumbnail a {
      background: var(--transparent-bg) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 50 50'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z' fill='rgba(0,0,0,.1)'><animateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/></path></svg>") center / 26px no-repeat
    }

    .postThumbnail div {
      background: var(--transparent-bg)
    }

    .postThumbnail div span:before {
      content: attr(data-text);
      opacity: .7;
      white-space: nowrap
    }

    .postTitle {
      font-size: .9rem;
      line-height: normal
    }

    .postTitle a,
    .postEntry.snippet,
    .itemTitle a,
    .itemEntry {
      color: inherit;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .postTitle a,
    .itemTitle a {
      -webkit-line-clamp: 3
    }

    .postTitle a:hover,
    .itemTitle a:hover {}

    /* Add color here to change Post Title hover efect */
    .postEntry.snippet,
    .itemEntry {
      display: -webkit-box
    }

    /* Change to display:none if you want to hide post snippets */

    .postEntry.snippet,
    .itemEntry {
      margin: 12px 0 0;
      font-size: 90%;
      line-height: 1.6em;
      opacity: .8
    }

    .postEntry.snippet,
    .postHeader,
    .postInfo,
    .postLabel.sponsored {
      font-size: 90%
    }

    .postEntry.snippet.productPrice,
    .itemEntry.productPrice {
      display: block;
      font-size: 14px;
      color: var(--link-color);
      opacity: 1
    }

    .postHeader {
      margin-bottom: 8px;
      line-height: normal
    }

    .postInfo {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-top: 18px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0
    }

    .postInfo a {
      color: inherit
    }

    .postTimestamp,
    .postMore {
      padding-right: 10px
    }

    .postComment,
    .postTimestamp,
    .postMore {
      overflow: hidden
    }

    .postComment:before,
    .postTimestamp:after,
    .postMore:before {
      content: attr(data-text);
      display: block;
      line-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      opacity: .8
    }

    .postComment {
      display: flex;
      align-items: flex-start;
      flex-shrink: 0
    }

    .postComment svg {
      width: 16px;
      height: 16px;
      margin-left: 5px
    }

    .postComment:hover svg {
      fill: var(--link-color)
    }

    .postComment:hover svg.line {
      fill: none;
      stroke: var(--link-color)
    }

    .postComments,
    .postTimes>* {
      display: flex;
      align-items: center;
      flex-shrink: 0
    }

    .postComments>* {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgb(230, 230, 230);
      border-radius: 12px;
      position: relative
    }

    .postComments>a {
      overflow: visible
    }

    .postComments>a:before {
      line-height: 18px;
      position: absolute;
      top: -7px;
      right: -5px;
      padding: 0 6px;
      border-radius: 10px;
      font-size: 11px;
      z-index: 1;
      opacity: 1;
      background-color: rgb(230, 230, 230)
    }

    .postComments>*:not(:last-child) {
      margin-right: 8px
    }

    .postComments svg {
      width: 18px;
      height: 18px;
      margin: 0
    }

    .postComments>*:hover {
      border-color: var(--icon-color);
      opacity: .8
    }

    .postComments>*:hover svg,
    .postComments>*:hover svg.line .fill {
      fill: var(--icon-color)
    }

    .postComments>*:hover svg.line {
      fill: none;
      stroke: var(--icon-color)
    }

    .postLabel {
      font-size: inherit;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden
    }

    .postLabel:before {
      content: attr(data-text) ' ';
      opacity: .7
    }

    .postLabel>* {
      font-weight: 400;
      color: inherit
    }

    .postLabel>*:before {
      content: attr(data-text)
    }

    .postLabel>*:not(:last-child):after {
      content: ','
    }

    .postLabel>a {
      display: inline-flex
    }

    .postLabel>a:hover,
    .postMore:hover {
      color: var(--link-color)
    }

    .postLabel.sponsored {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      line-height: normal
    }

    .postLabel.sponsored svg {
      width: 14px;
      height: 14px;
      margin-right: 5px;
      flex-shrink: 0
    }

    .postLabel.sponsored svg:before,
    .postLabel.sponsored>*:not(:last-child):after {
      display: none
    }

    .postLabel.sponsored span {
      width: calc(100% - 23px);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      opacity: .8
    }

    .postLabel.sponsored a {
      opacity: .8
    }

    .postAuthor,
    .postTimes {
      display: flex;
      align-items: center;
      flex-grow: 1;
      width: 50%;
      padding-right: 15px
    }

    .postAuthorImage {
      flex-shrink: 0;
      margin-right: 12px
    }

    .postAuthorImage .authorImage,
    .postAuthors .authorImg {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat
    }

    .postAuthorName {
      flex-grow: 1;
      width: calc(100% - 44px)
    }

    .postAuthorName .authorName:after {
      content: attr(data-write);
      opacity: .7;
      display: block;
      font-size: 11px
    }

    .postAuthorName .authorName {
      max-width: 170px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .postAuthorName .authorName>*:before {
      content: attr(data-text)
    }

    .postAuthorName .authorName>*:hover {
      text-decoration: underline
    }

    .postAuthors {
      display: flex;
      max-width: 400px;
      margin: 30px 0;
      padding: 12px;
      line-height: 1.7em;
      border: 1px solid var(--content-border);
      border-radius: 5px;
      box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
      font-size: 13px
    }

    .postAuthors .authorImage {
      flex-shrink: 0;
      margin-top: 6px;
      margin-right: 12px
    }

    .postAuthors .authorImg {
      display: flex;
      align-items: center;
      justify-content: center
    }

    .postAuthors .authorInfo {
      flex-grow: 1;
      width: calc(100% - 46px)
    }

    .postAuthors .authorName:before {
      content: attr(data-write) ' ';
      font-size: 12px;
      opacity: .7
    }

    .postAuthors .authorName:after,
    .postAuthors .authorAbout:before {
      content: attr(data-text)
    }

    .postAuthors .authorAbout {
      margin: 0;
      font-size: 12px;
      opacity: .8;
      line-height: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .darkMode .postAuthors {
      background-color: var(--dark-bgSec);
      border: 0
    }

    .postTimes {
      width: 100%;
      margin-top: 25px;
      font-size: 90%;
      line-height: 20px
    }

    .postTimes svg {
      width: 14px;
      height: 14px;
      margin-right: 6px
    }

    .postTimes .postTimestamp {
      padding-right: 20px
    }

    .postTimes .postTimestamp:before {
      opacity: .8
    }

    .postTimes .postTimestamp:after {
      display: inline
    }

    .postTimes .postReadtime span {
      opacity: .8
    }

    .postTimes .postTimestamp.updated:before {
      content: 'Updated: '
    }

    .postTimes .postTimestamp.published:before {
      content: 'Published: '
    }

    .postShare {
      margin: 30px 0;
      padding-bottom: 30px;
      border-bottom: 1px solid var(--content-border)
    }

    .postShare svg.line {
      stroke-width: 1.5
    }

    .shareContent {
      display: flex;
      align-items: center;
      line-height: 1.8em
    }

    .shareContent:before {
      content: attr(data-text);
      flex: 0 0 auto;
      margin-right: 30px;
      line-height: 20px
    }

    .shareIcon:not(:last-child) {
      margin-right: 10px
    }

    .shareIcon>* {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--body-altColor);
      border-radius: 2px;
      font-size: 90%;
      color: #fefefe;
      line-height: 20px;
      white-space: nowrap
    }

    .shareIcon svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0
    }

    .shareIcon.facebook a {
      background-color: #568fce;
      border-color: #568fce
    }

    .shareIcon.twitter a {
      background-color: #27c2f5;
      border-color: #27c2f5
    }

    .shareIcon.whatsapp a {
      background-color: #25D366;
      border-color: #25D366
    }

    .shareIcon a svg {
      fill: #fefefe
    }

    .shareIcon a:after {
      content: attr(aria-label);
      padding-left: 12px
    }

    .darkMode .shareIcon svg {
      opacity: .8
    }

    .shareInner {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      opacity: 0;
      visibility: hidden
    }

    .shareBlock {
      width: 100%;
      max-width: 500px;
      max-height: 90%;
      display: flex;
      margin: 0 auto -50%;
      background-color: var(--content-bg);
      border-radius: 8px;
      transition: inherit;
      z-index: 3;
      overflow: hidden;
      position: relative;
      box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%)
    }

    .shareBox {
      padding-top: 60px;
      max-height: 100%;
      width: 100%;
      overflow-y: auto
    }

    .shareHeader {
      padding: 20px;
      background-color: inherit;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1
    }

    .shareHeader:before,
    .sharePreview .previewTitle:before,
    .sharePreview .previewLabel>*:before {
      content: attr(data-text)
    }

    .shareHeader label {
      display: flex;
      align-items: center;
      font-size: 11px
    }

    .shareHeader label svg.line {
      width: 20px;
      height: 20px;
      stroke-width: 1
    }

    .shareHeader label:before {
      content: 'Close';
      opacity: .7;
      padding: 0 8px
    }

    .sharePreview {
      padding: 15px 20px;
      border: 1px solid var(--content-border);
      border-left: 0;
      border-right: 0;
      display: flex;
      align-items: center
    }

    .sharePreview .previewImg {
      width: 70px;
      height: 70px;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      background-color: var(--transparent-bg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 5px;
      margin-right: 15px
    }

    .sharePreview .previewImg svg {
      stroke-width: 1;
      opacity: .6
    }

    .sharePreview .previewTitle {
      font-size: 13px;
      line-height: 1.5em;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .sharePreview .previewLabel {
      font-size: 12px;
      opacity: .7;
      margin-top: 5px
    }

    .shareInner ul {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 10px 20px 20px
    }

    .shareInner li {
      width: 25%;
      text-align: center
    }

    .shareInner li a,
    .shareInner li .copyLink {
      display: block;
      max-width: 80px;
      height: 80px;
      margin: 0 auto;
      padding: 15px 0;
      border-radius: 2px;
      color: inherit
    }

    .shareInner li a:hover,
    .shareInner li .copyLink:hover {
      background-color: rgba(0, 0, 0, .03)
    }

    .shareInner li>* svg {
      width: 26px;
      height: 26px;
      opacity: .8
    }

    .shareInner li a:after,
    .shareInner li .copyLink:after {
      content: attr(data-text);
      display: block;
      margin-top: 3px;
      font-size: 12px;
      opacity: .7
    }

    .shareInner li input {
      margin: 0;
      padding: 0;
      outline: 0;
      border: 0;
      width: 1px;
      height: 0;
      opacity: 0
    }

    .shareNotif span {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -70px;
      font-size: 90%;
      display: block;
      width: 240px;
      margin: 0 auto 20px;
      padding: 15px 10px;
      border-radius: 3px;
      background-color: rgba(0, 0, 0, .8);
      color: #fefefe;
      line-height: 20px;
      text-align: center;
      opacity: 0;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      -webkit-animation: slidein 2s ease forwards;
      animation: slidein 2s ease forwards
    }

    .shareIn:checked~.shareInner {
      opacity: 1;
      visibility: visible
    }

    .shareIn:checked~.shareInner .shareBlock {
      margin: 0 auto
    }

    .shareIn:checked~.shareInner .fullClose {
      background: rgba(0, 0, 0, .5);
      opacity: 1;
      visibility: visible;
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px)
    }

    .darkMode .shareBlock {
      background-color: var(--dark-bgSec)
    }

    .darkMode .sharePreview .previewImg {
      background-color: rgba(255, 255, 255, .1)
    }

    @media screen and (max-width: 640px) {
      .shareIcon a:after {
        display: none
      }
    }

    @media screen and (max-width: 480px) {
      .postShare:before {
        content: attr(data-text);
        display: block;
        width: 100%;
        margin: 0 0 15px
      }

      .shareContent:before {
        display: none
      }

      .shareIcon.facebook {
        flex-grow: 1
      }

      .shareIcon.facebook a:after {
        content: attr(data-text);
        display: block
      }

      .shareInner {
        align-items: flex-end
      }

      .shareIn:checked~.shareInner .shareBlock {
        border-radius: 15px 15px 0 0
      }

      .shareInner li>* svg {
        width: 24px;
        height: 24px
      }
    }

    .rtlMode .shareContent:before {
      margin-right: 0;
      margin-left: 30px
    }

    .rtlMode .shareIcon:not(:last-child) {
      margin-right: 0;
      margin-left: 10px
    }

    .rtlMode .shareIcon a:after {
      padding-left: 0;
      padding-right: 12px
    }

    .rtlMode .sharePreview .previewImg {
      margin-right: 0;
      margin-left: 15px
    }

    .onItem .postTitle {
      font-size: var(--post-titleSize);
      line-height: 1.4em
    }

    .onItem .postInfo {
      align-items: center;
      position: relative;
      margin-top: 30px
    }

    .onItem .postInfo.noAuthor.noComment,
    .onItem .postInfo.onSponsored {
      margin-top: 0;
      display: none
    }

    .onItem .postEntry {
      margin-top: 40px;
      font-size: var(--post-fontSize);
      line-height: 1.8em
    }

    /* Article Style */
    .postEntry h1,
    .postEntry h2,
    .postEntry h3,
    .postEntry h4,
    .postEntry h5,
    .postEntry h6 {
      margin: 1.7em 0 20px;
      font-weight: 700;
      line-height: 1.4em
    }

    .postEntry h1:target,
    .postEntry h2:target,
    .postEntry h3:target,
    .postEntry h4:target,
    .postEntry h5:target,
    .postEntry h6:target {
      padding-top: 70px;
      margin-top: 0
    }

    .postEntry p {
      margin: 1.7em 0
    }

    .postEntry img {
      display: inline-block;
      border-radius: 2px;
      height: auto !important
    }

    .postEntry img.fullImg {
      display: block !important;
      margin-bottom: 10px;
      position: relative;
      left: 0;
      width: 100%;
      max-width: none
    }

    .postEntry .widget,
    .post .postAd>* {
      margin: 50px 0
    }

    .post .separate {
      display: block;
      margin: 4em 0
    }

    .post .separate:before {
      content: '\2027 \2027 \2027';
      display: block;
      text-align: center;
      font-size: 28px;
      font-style: normal;
      letter-spacing: 0.6em;
      text-indent: 0.6em;
      clear: both
    }

    .post .note {
      position: relative;
      padding: 20px 30px 20px 50px;
      background-color: #e1f5fe;
      color: #01579b;
      font-size: .85rem;
      line-height: 1.62em;
      border-radius: 2px
    }

    .post .note:before {
      content: '';
      position: absolute;
      left: 18px;
      top: 23px;
      width: 20px;
      height: 20px;
      background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301579b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><line x1='4' y1='22' x2='4' y2='15'/></svg>") center / 20px no-repeat
    }

    .post .noteAlert {
      background-color: #ffdfdf;
      color: #48525c
    }

    .post .noteAlert:before {
      background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348525c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") center / 20px no-repeat
    }

    .post .textIndent {
      text-indent: 2.2rem
    }

    .post .dropCap {
      float: left;
      margin: 4px 8px 0 0;
      font-size: 55px;
      line-height: 45px
    }

    .post .extLink {
      display: inline-flex;
      align-items: center
    }

    .post .extLink:after {
      content: '';
      width: 16px;
      height: 16px;
      display: inline-block;
      margin-left: 5px;
      background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>") center / 16px no-repeat
    }

    .post .extLink.alt:after {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3'/><line x1='8' y1='12' x2='16' y2='12'/></svg>")
    }

    .post .postCaption {
      display: block;
      font-size: 13px;
      line-height: normal;
      margin-top: 5px
    }

    .post .postReference {
      display: block;
      font-size: 13px;
      line-height: normal;
      opacity: .8
    }

    .post .scrollImage,
    .post .gridImage,
    .post .hideImage,
    .post .showImage {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
      margin: 2em 0;
      position: relative;
      left: -7.5px;
      right: -7.5px;
      width: calc(100% + 15px)
    }

    .post .scrollImage>* {
      width: calc(33.333% - 15px);
      margin: 0 7.5px 15px
    }

    .post .gridImage>*,
    .post .hideImage>*,
    .post .showImage>* {
      width: calc(50% - 15px);
      margin: 0 7.5px 15px
    }

    .post .gridImage>*:nth-last-child(1) {
      margin-bottom: 0
    }

    .post .gridImage img,
    .post .hideImage img {
      display: block
    }

    .post .buttonImage {
      position: relative
    }

    .post .buttonImage label {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, .5);
      -webkit-transition: var(--transition-2);
      transition: var(--transition-2);
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px)
    }

    .post .buttonImage label:before {
      content: 'Show All';
      color: var(--dark-text);
      font-size: 13px
    }

    .post .hideImage .showImage {
      width: 100%;
      margin: 0;
      left: 0;
      right: 0;
      -webkit-transition: var(--transition-2);
      transition: var(--transition-2);
      max-height: 0;
      opacity: 0;
      visibility: hidden
    }

    .post .imageInput:checked~.hideImage .showImage {
      max-height: 1000vh;
      opacity: 1;
      visibility: visible
    }

    .post .imageInput:checked~.hideImage .buttonImage label {
      opacity: 0;
      visibility: hidden
    }

    .postRelated {
      position: relative;
      margin: 42px 0;
      padding: 1.5em 0;
      border: 1px solid var(--content-border);
      border-left: 0;
      border-right: 0;
      font-size: 14px;
      line-height: 1.8em
    }

    .postRelated h3,
    .postRelated h4,
    .postRelated b {
      font-size: 13px;
      font-weight: 400;
      margin: 0;
      padding: 2px 14px;
      background-color: var(--content-bg);
      border: 1px solid var(--content-border);
      border-radius: 15px;
      position: absolute;
      top: -15.5px;
      left: 20px
    }

    .postRelated ul,
    .postRelated ol {
      margin: 8px 0 0;
      padding-left: 20px
    }

    .darkMode .postRelated h3,
    .darkMode .postRelated h4,
    .darkMode .postRelated b,
    .darkMode .post .tabsHead>*:after {
      background-color: var(--dark-bg)
    }

    .post blockquote,
    .commentContent i[rel="quote"] {
      position: relative;
      font-size: .97rem;
      opacity: .8;
      line-height: 1.7em;
      margin-left: 0;
      margin-right: 0;
      padding: 30px 25px;
      border-left: 1px solid var(--content-border)
    }

    .post blockquote.style-1 {
      font-size: 15px;
      padding: 30px 25px 30px 55px;
      border: 1px solid var(--content-border);
      border-left: 0;
      border-right: 0
    }

    .post blockquote.style-1:before {
      content: '\201D';
      display: block;
      position: absolute;
      top: 18px;
      left: 0;
      font-weight: 700;
      font-size: 60px;
      line-height: normal
    }

    .post table {
      min-width: 70%;
      margin: 0 auto;
      border: 0;
      overflow: hidden;
      font-size: 14px;
      word-break: normal
    }

    .post table th {
      padding: 17px 25px;
      border: 1px solid rgba(0, 0, 0, .1);
      border-left-width: 0
    }

    .post table th:last-child {
      border-radius: 0 5px 0 0
    }

    .post table th:first-child {
      border-left-width: 1px;
      border-radius: 5px 0 0
    }

    .post table td:first-child {
      border-left-width: 1px
    }

    .post table td {
      padding: 20px 25px;
      border: 1px solid rgba(0, 0, 0, .1);
      border-left-width: 0;
      border-top: 0;
      vertical-align: middle
    }

    .post table tr:last-child td:first-child {
      border-radius: 0 0 0 5px
    }

    .post table tr:last-child td:last-child {
      border-radius: 0 0 5px 0
    }

    .post table tr:nth-child(2n+1) td {
      background-color: rgba(0, 0, 0, .01)
    }

    .post .table {
      display: block;
      overflow-y: hidden;
      overflow-x: auto;
      scroll-behavior: smooth
    }

    .post .tr-caption-container {
      min-width: 0;
      width: auto;
      margin: 0 auto;
      border: 0;
      position: relative;
      overflow: inherit
    }

    .post .tr-caption-container tr td,
    .post .tr-caption-container tr:nth-child(2n+1) td {
      border: 0;
      background: transparent;
      padding: 0
    }

    .post .tr-caption-container .tr-caption {
      display: block;
      font-size: 13px;
      opacity: .8;
      line-height: normal
    }

    .post pre {
      position: relative;
      font-family: var(--font-code);
      line-height: 1.6em;
      font-size: .8rem;
      direction: ltr
    }

    .post pre:before,
    .commentContent i[rel="pre"]:before {
      content: '</>';
      position: absolute;
      right: 0;
      top: 0;
      color: var(--highlight-comment);
      font-size: 10px;
      padding: 0 10px;
      z-index: 2;
      line-height: 35px
    }

    .post pre.html:before {
      content: '.html'
    }

    .post pre.css:before {
      content: '.css'
    }

    .post pre.js:before {
      content: '.js'
    }

    .post code,
    .commentContent i[rel="pre"] {
      display: block;
      white-space: pre;
      font-size: .8rem;
      position: relative;
      width: 100%;
      border-radius: 2px;
      background-color: var(--highlight-bg);
      color: var(--highlight-color);
      padding: 20px;
      margin: 25px auto;
      -moz-tab-size: 2;
      -o-tab-size: 2;
      tab-size: 2;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
      overflow: auto;
      font-family: var(--font-code);
      line-height: 1.6em;
      text-align: left
    }

    .post pre span {
      color: var(--highlight-green)
    }

    .post pre span.block {
      color: #fff;
      background: var(--highlight-blue)
    }

    .post pre i {
      color: var(--highlight-blue);
      font-style: normal
    }

    .post pre i {
      user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none
    }

    .post pre i.comment,
    article pre i.tag,
    article pre i.blue {
      color: var(--highlight-comment);
      user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      -khtml-user-select: text;
      -webkit-user-select: text;
      -webkit-touch-callout: text;
    }

    article pre i.tag {
      color: var(--highlight-orange)
    }

    article pre i.blue {
      color: var(--highlight-blue)
    }

    .post .code {
      display: inline;
      padding: 2px 4px;
      font-size: 85%;
      line-height: inherit;
      color: var(--highlight-color);
      background-color: rgba(0, 0, 0, .05);
      font-family: var(--font-code)
    }

    .darkMode .post code,
    .darkMode .commentContent i[rel="pre"] {
      background-color: rgba(0, 0, 0, .09);
      color: var(--dark-textAlt)
    }

    .darkMode .post .code {
      color: var(--dark-textAlt);
      background-color: rgba(255, 255, 255, .1)
    }

    .post .tocInner,
    .post .spoiler {
      border: 1px solid var(--content-border);
      border-left: 0;
      border-right: 0;
      padding: 15px 15px;
      margin: 30px 0;
      font-size: 14px
    }

    .post .tocTitle,
    .post .spoilerTitle {
      outline: 0;
      font-weight: 700;
      line-height: 1.8em;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .post .tocTitle:after {
      content: 'Hide all';
      font-weight: 400;
      font-size: 85%;
      font-family: var(--font-body)
    }

    .post .tocContent,
    .post .spoilerContent {
      max-height: 1000vh;
      -webkit-transition: var(--transition-4);
      transition: var(--transition-4);
      overflow: hidden
    }

    .post .tocInput:checked~.tocContent {
      max-height: 0
    }

    .post .tocInput:checked~.tocTitle:after {
      content: 'Show all'
    }

    .post .tocInner a {
      display: flex;
      color: inherit
    }

    .post .tocInner ol,
    .post .tocInner ul,
    .tableOfContent ol {
      padding: 0;
      list-style: none;
      font-size: inherit;
      font-weight: 400;
      counter-reset: toc-count;
      line-height: 1.75em
    }

    .post .tocInner li,
    .tableOfContent li {
      display: flex;
      flex-wrap: wrap
    }

    .post .tocInner li ol,
    .post .tocInner li ul,
    .tableOfContent li ol {
      width: 100%;
      padding-left: 26px;
      margin-bottom: 10px;
      margin-top: 5px
    }

    .post .tocInner li>*:before,
    .tableOfContent li>a:before {
      content: counters(toc-count, '.')'. ';
      counter-increment: toc-count;
      display: inline-block;
      min-width: 20px;
      margin-right: 5px;
      flex-shrink: 0;
      font-weight: 400
    }

    .post .spoilerTitle label {
      color: #fefefe;
      background-color: var(--link-bg);
      border-radius: 2px;
      padding: 0 15px;
      line-height: 30px;
      font-size: 12px;
      font-weight: 400;
      font-family: var(--font-body)
    }

    .post .spoilerTitle label:before {
      content: 'Show all'
    }

    .post .spoilerContent {
      max-height: 0
    }

    .post .spoilerInput:checked~.spoilerTitle label:before {
      content: 'Hide all'
    }

    .post .spoilerInput:checked~.spoilerContent {
      max-height: 1000vh
    }

    .post .tabsHead {
      display: flex;
      border-bottom: 1px solid var(--content-border);
      margin-bottom: 30px;
      font-size: 13px;
      line-height: 1.7em
    }

    .post .tabsHead>*:not(:last-child) {
      margin-right: 8px
    }

    .post .tabsHead>* {
      padding: 8px 12px;
      border: 1px solid var(--content-border);
      border-bottom: 0;
      border-radius: 4px 4px 0 0;
      position: relative
    }

    .post .tabsHead>*:before {
      content: attr(data-text)
    }

    .post .tabsHead>*:after {
      content: '';
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--body-bg);
      position: absolute;
      left: 0;
      bottom: -1px;
      visibility: hidden;
      opacity: 0
    }

    .post .tabsContent {
      position: relative
    }

    .post .tabsContent>* {
      display: none;
      width: 100%
    }

    .post .tabsContent>* p:first-child {
      margin-top: 0
    }

    .post .postBody input[id*="1"]:checked~.postTabs label[for*="1"]:after,
    .post .postBody input[id*="2"]:checked~.postTabs label[for*="2"]:after,
    .post .postBody input[id*="3"]:checked~.postTabs label[for*="3"]:after,
    .post .postBody input[id*="4"]:checked~.postTabs label[for*="4"]:after {
      visibility: visible;
      opacity: 1
    }

    .post .postBody input[id*="1"]:checked~.postTabs .tabsContent div[class*="Content-1"],
    .post .postBody input[id*="2"]:checked~.postTabs .tabsContent div[class*="Content-2"],
    .post .postBody input[id*="3"]:checked~.postTabs .tabsContent div[class*="Content-3"],
    .post .postBody input[id*="4"]:checked~.postTabs .tabsContent div[class*="Content-4"] {
      display: block
    }

    .post .postNav {
      font-size: 13px;
      margin: 50px 0;
      justify-content: center
    }

    .post .postNav>* {
      padding: 8px 15px;
      border-radius: 2px;
      margin-bottom: 8px
    }

    .post .postNav>*:not(:last-child) {
      margin-right: 8px
    }

    .post .proPrice,
    .post .proInfoL,
    .post .proInfoR,
    .post .proInfo.one {
      padding: 15px 0;
      margin-bottom: 0;
      border-bottom: 1px solid var(--content-border);
      flex: 0 0 50%;
      display: block
    }

    .post .proPrice {
      font-size: 22px;
      color: var(--link-color)
    }

    .post .proPrice:before,
    .post .proInfo small {
      content: attr(data-text);
      font-size: small;
      color: var(--body-color);
      display: block;
      opacity: .8
    }

    .post .proInfo {
      display: flex;
      font-size: 14px;
      line-height: 1.6em
    }

    .post .proInfoL {
      padding-right: 20px
    }

    .post .proInfoR {
      padding-left: 0
    }

    .post .proMarket {
      margin: 20px 0 30px;
      display: flex;
      flex-wrap: wrap;
      line-height: 1.6em
    }

    .post .proMarket>* {
      display: block
    }

    .post .proMarket>small {
      width: 100%;
      margin-bottom: 10px
    }

    .post .proMarket>a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin: 0 8px 8px 0;
      border: 1px solid var(--content-border);
      border-radius: 3px
    }

    .post .proMarket>a:last-of-type {
      margin-right: 0
    }

    .post .proMarket>a img {
      width: 20px;
      height: 20px;
      display: block
    }

    .darkMode .post .proPrice:before,
    .darkMode .post .proInfo small {
      color: var(--dark-textAlt)
    }

    /* Article Style Responsive */
    @media screen and (max-width: 640px) {
      .post .postEntry img.fullImg {
        width: calc(100% + 40px);
        left: -20px;
        right: -20px;
        border-radius: 0
      }

      .post .note {
        width: calc(100% + 40px);
        left: -20px;
        right: -20px;
        font-size: .8rem;
        border-radius: 0
      }
    }

    @media screen and (max-width:480px) {
      .post .scrollImage {
        flex-wrap: nowrap;
        justify-content: flex-start;
        position: relative;
        width: calc(100% + 40px);
        left: -20px;
        right: -20px;
        padding: 0 20px;
        overflow-y: hidden;
        overflow-x: scroll;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch
      }

      .post .scrollImage>* {
        display: block;
        flex-shrink: 0;
        width: 80%;
        margin: 0 15px 0 0;
        scroll-snap-align: center
      }

      .post .scrollImage>*:last-child {
        margin-right: 0
      }

      .post .scrollImage:after {
        content: '';
        display: block;
        flex-shrink: 0;
        align-self: stretch;
        padding-left: 20px
      }

      .post .hideImage>*,
      .post .showImage>* {
        width: calc(100% - 15px)
      }

      .post .table {
        position: relative;
        width: calc(100% + 40px);
        left: -20px;
        right: -20px;
        padding: 0 20px;
        display: flex
      }

      article .table:after {
        content: '';
        display: block;
        padding-left: 20px
      }

      .post blockquote,
      .post blockquote.style-1 {
        font-size: 14px
      }

      .postRelated>* {
        font-size: 13px
      }

      .postRelated h3,
      .postRelated h4,
      .postRelated b,
      .post .tabsHead,
      .post .postNav {
        font-size: 12px
      }
    }

    /* Article Style RTL */
    .rtlMode .post .note {
      padding: 20px 50px 20px 30px
    }

    .rtlMode .post .note:before {
      left: auto;
      right: 18px
    }

    .rtlMode .postRelated h3,
    .rtlMode .postRelated h4,
    .rtlMode .postRelated b {
      left: auto;
      right: 20px
    }

    .rtlMode .postRelated ul,
    .rtlMode .postRelated ol {
      padding-left: 0;
      padding-right: 20px
    }

    .rtlMode .post .separate:before {
      text-indent: -0.6em
    }

    .rtlMode .post .dropCap {
      margin: 0;
      line-height: inherit;
      font-size: inherit;
      float: none
    }

    .rtlMode .post blockquote,
    .rtlMode .commentContent i[rel="quote"] {
      border-left: 0;
      border-right: 1px solid var(--content-border)
    }

    .rtlMode .post blockquote.style-1 {
      padding: 30px 55px 30px 25px;
      border-right: 0
    }

    .rtlMode .post blockquote.style-1:before {
      left: auto;
      right: 0
    }

    .rtlMode .post table th,
    .rtlMode .post table td {
      border-left-width: 1px;
      border-right-width: 0
    }

    .rtlMode .post table th:first-child {
      border-right-width: 1px;
      border-radius: 0 5px 0 0
    }

    .rtlMode .post table th:last-child {
      border-radius: 5px 0 0
    }

    .rtlMode .post table td:first-child {
      border-right-width: 1px
    }

    .rtlMode .post table tr:last-child td:first-child {
      border-radius: 0 0 5px
    }

    .rtlMode .post table tr:last-child td:last-child {
      border-radius: 0 0 0 5px
    }

    .rtlMode .post .tocInner li ol,
    .rtlMode .post .tocInner li ul,
    .rtlMode .tableOfContent li ol {
      padding-left: 0;
      padding-right: 26px
    }

    .rtlMode .post .tocInner li>*:before,
    .rtlMode .tableOfContent li>a:before {
      margin-right: 0;
      margin-left: 5px
    }

    @media screen and (max-width:480px) {
      .rtlMode .post .scrollImage>* {
        margin: 0 0 0 15px
      }

      .rtlMode .post .scrollImage>*:last-child {
        margin-left: 0
      }
    }

    /* Article Comments */
    .comments iframe {
      width: 100%
    }

    .commentsDisable {
      text-align: center
    }

    .blogComments {
      margin: 40px 0 0
    }

    .blogComments .commentsTitle {
      display: flex;
      justify-content: space-between;
      margin: 0 0 30px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--content-border)
    }

    .blogComments .commentsTitle .title {
      margin: 0;
      flex-grow: 1
    }

    .blogComments .commentsTitle .title:after {
      display: none
    }

    .commentsIcon {
      display: flex;
      flex-shrink: 0;
      font-size: 12px
    }

    .commentsIcon>* {
      display: flex;
      align-items: center
    }

    .commentsIcon svg {
      width: 20px;
      height: 20px
    }

    .commentsIcon .commentClose {
      margin-left: 12px;
      padding-left: 0;
      border-left: 0px solid var(--content-border)
    }

    .commentsIcon .commentSort:before {
      content: attr(data-text);
      opacity: .7;
      margin: 0 8px
    }

    .commentAll:checked~.commentsTitle .commentsIcon .commentSort:before {
      content: attr(data-new)
    }

    .commentAll:checked~.commentsTitle .commentsIcon .commentSort svg.line {
      stroke: var(--link-color)
    }

    .commentAll:checked~.commentsInner .commentsContent>ol {
      flex-direction: column-reverse
    }

    .commentsButton.button.outline {
      font-size: 14px
    }

    .commentsButton.button.outline,
    .commentsAdd .commentsReply {
      margin: 0;
      padding: 20px;
      display: block;
      text-align: center
    }

    .commentsButton.button.outline>*:before {
      content: attr(data-text)
    }

    .commentShow:checked~.commentsButton,
    .commentsButton~.comments,
    #comment:target .commentsButton {
      display: none
    }

    .commentShow:checked~.commentsButton~.comments,
    #comment:target .comments {
      display: block
    }

    #comment:target .commentShow:checked~.commentsButton~.comments {
      display: none
    }

    #comment:target .commentShow:checked~.commentsButton {
      display: block
    }

    .commentsContent ol,
    .commentsContent ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column
    }

    .commentsContent ol>li {
      position: relative;
      margin: 0 0 20px 21px;
      background-color: var(--content-bg);
      border: 1px solid var(--content-border);
      border-radius: 8px;
      box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%)
    }

    .commentsContent ol>li>.commentAvatar {
      position: absolute;
      top: 10px;
      left: -21px
    }

    .commentsContent ol>li>.commentInner>.commentBlock {
      padding: 20px 15px 0 35px
    }

    .commentsContent ol>li>.commentInner>.commentBlock>.commentContent {
      margin-bottom: 12px
    }

    .commentsContent ul {
      padding: 15px 15px 0 18px
    }

    .commentsContent ul>li {
      display: flex
    }

    .commentsContent ul>li:not(:last-child) {
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px dashed rgba(0, 0, 0, 0.2)
    }

    .commentsContent ul>li>.commentAvatar {
      width: 32px;
      height: 32px;
      flex-shrink: 0
    }

    .commentsContent ul>li>.commentInner {
      flex-grow: 1;
      padding-left: 12px;
      padding-top: 5px;
      width: calc(100% - 32px)
    }

    .commentsContent ul>li>.commentInner .commentHeader {
      display: flex
    }

    .commentAvatar {
      width: 42px;
      height: 42px;
      border-radius: 18px;
      background-color: #f6f6f6;
      overflow: hidden
    }

    .commentAvatar div {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat
    }

    .commentHeader {
      font-size: 13px
    }

    .commentHeader .name {
      display: inline-flex;
      align-items: flex-start;
      font-family: var(--font-head);
      font-weight: 600
    }

    .commentHeader .name span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 180px
    }

    .commentHeader .name svg {
      width: 20px;
      height: 16px;
      fill: #519bd6;
      margin-left: 3px
    }

    .commentHeader .datetime {
      margin-left: 3px;
      font-size: 12px;
      opacity: .8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .commentHeader .datetime:before {
      content: '\2022';
      margin-right: 5px
    }

    .commentContent {
      margin-top: 10px;
      line-height: 1.6em
    }

    .commentContent.hasDeleted {
      border: 1px dashed rgba(0, 0, 0, .1);
      padding: 15px;
      font-size: .8rem;
      font-style: italic;
      opacity: .8;
      border-radius: 3px
    }

    .commentContent i[rel="pre"],
    .commentContent i[rel="quote"] {
      margin: 1.2em auto;
      font-style: normal
    }

    .commentContent i[rel="quote"] {
      display: block;
      font-style: italic;
      font-size: .85rem;
      padding: 12px 20px
    }

    .commentContent i[rel="image"] {
      font-size: .8rem;
      display: block;
      position: relative;
      min-height: 55px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      opacity: .8
    }

    .commentContent i[rel="image"]:before {
      content: 'This feature isn\0027t available!';
      border: 1px dashed rgba(0, 0, 0, .1);
      border-radius: 3px;
      padding: 15px;
      font-size: .8rem;
      white-space: nowrap;
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: var(--content-bg)
    }

    .commentReplies,
    .commentActions,
    .commentReply {
      margin-top: 10px
    }

    .commentReplies~.commentActions {
      display: none
    }

    .commentActions {
      padding-bottom: 15px
    }

    .commentReply {
      margin-left: 62px
    }

    .commentReplies {
      padding: 15px 0;
      background-color: var(--transparent-bg);
      border-radius: 0 0 8px 8px
    }

    .commentReplies .threadShow:checked~.commentThread .threadToggle svg {
      transform: rotate(180deg)
    }

    .commentReplies .threadShow:checked~.commentThread .threadChrome,
    .commentReplies .threadShow:checked~.commentReply {
      display: none
    }

    .commentThread .threadToggle,
    .commentActions a {
      margin-left: 35px
    }

    .commentThread .threadToggle,
    .commentActions a,
    .commentReply a {
      font-size: 13px;
      opacity: .8;
      display: inline-flex;
      align-items: center;
      color: inherit
    }

    .commentThread .threadToggle:after,
    .commentActions a:after,
    .commentReply a:after {
      content: attr(data-text)
    }

    .commentThread .threadToggle svg,
    .commentActions svg,
    .commentReply svg {
      width: 18px;
      height: 16px;
      margin-right: 8px
    }

    .comment-replybox-single {
      padding: 15px 15px 15px 35px
    }

    /* Article Comments RTL */
    .rtlMode .commentsIcon .commentClose {
      margin-left: 0;
      margin-right: 12px
    }

    .rtlMode .commentsContent ol>li {
      margin: 0 21px 20px 0
    }

    .rtlMode .commentsContent ol>li>.commentAvatar {
      left: auto;
      right: -21px
    }

    .rtlMode .commentsContent ol>li>.commentInner>.commentBlock {
      padding: 20px 35px 0 15px
    }

    .rtlMode .commentHeader .name svg,
    .rtlMode .commentHeader .datetime {
      margin-left: 0;
      margin-right: 3px
    }

    .rtlMode .commentHeader .datetime:before {
      margin-left: 5px;
      margin-right: 0
    }

    .rtlMode .commentThread .threadToggle,
    .rtlMode .commentActions a {
      margin-left: 0;
      margin-right: 35px
    }

    .rtlMode .commentThread .threadToggle svg,
    .rtlMode .commentActions svg,
    .rtlMode .commentReply svg {
      margin-right: 0;
      margin-left: 8px
    }

    .rtlMode .commentReply {
      margin-left: 0;
      margin-right: 62px
    }

    .rtlMode .commentsContent ul {
      padding: 15px 18px 0 15px
    }

    .rtlMode .commentsContent ul>li>.commentInner {
      padding-left: 0;
      padding-right: 12px
    }

    .rtlMode .comment-replybox-single {
      padding: 15px 35px 15px 15px
    }

    @media screen and (max-width:480px) {
      .commentsContent ol>li>.commentInner>.commentBlock>.commentHeader .datetime {
        margin-right: 0
      }
    }

    /* Widget FeaturedPost */
    .itemTitle {
      line-height: normal;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1)
    }

    .itemInfo {
      position: relative
    }

    .itemFeatured .item {
      display: flex;
      align-items: center;
      position: relative
    }

    .itemFeatured .itemThumbnail {
      flex: 1 0 310px;
      overflow: hidden;
      border-radius: 2px;
      margin-bottom: 0
    }

    .itemFeatured .itemContent {
      flex-grow: 1;
      width: calc(100% - 310px);
      padding-left: 25px
    }

    .itemFeatured .itemTitle {
      font-size: 17px
    }

    .itemFeatured .itemEntry {
      font-size: 95%
    }

    .itemFeatured .itemEntry.productPrice {
      font-size: 14px
    }

    /* Widget PopularPosts */
    .itemPopulars {
      counter-reset: popular-count
    }

    .itemPopulars .itemThumbnail>* {
      padding-top: 45%
    }

    .itemPopulars .itemTitle {
      font-size: .9rem
    }

    .itemPopular:not(:last-child) {
      margin-bottom: 25px
    }

    .itemPopular .itemInner {
      display: flex
    }

    .itemPopular .itemInner:before {
      flex-shrink: 0;
      content: '0' counter(popular-count);
      counter-increment: popular-count;
      width: 32px;
      font-weight: 700;
      font-size: 16px;
      font-family: var(--font-head);
      opacity: .3
    }

    .itemPopular .itemFlex {
      width: calc(100% - 32px)
    }

    .itemPopular .postHeader,
    .itemPopular .postLabel.sponsored {
      margin-left: 32px;
      margin-bottom: 5px
    }

    .itemPopular .itemInfo,
    .itemPopular .itemEntry {
      margin-top: 10px
    }

    /* Widget ContactForm */
    .ContactForm {
      max-width: 500px;
      font-size: 92%;
      margin-bottom: 40px
    }

    .ContactForm .inputArea {
      position: relative
    }

    .ContactForm label {
      display: inline-block;
      margin-bottom: 8px
    }

    .ContactForm label span {
      color: var(--highlight-red);
      font-size: small
    }

    /* Widget Label */
    .Label {
      font-size: 90%
    }

    .Label ul,
    .Label .cloud,
    .Label .cloud .labelAll {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0
    }

    .Label li {
      width: calc(50% - 10px);
      margin-bottom: 15px
    }

    .Label li:nth-child(2n+1) {
      margin-right: 20px
    }

    .Label li a .labelTitle:hover {
      text-decoration: underline
    }

    .Label li>* {
      display: flex;
      align-items: center;
      color: inherit
    }

    .Label li>* svg {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      margin-left: 5px
    }

    .Label li>a:hover svg {
      fill: var(--link-color)
    }

    .Label li>a:hover svg.line {
      fill: none;
      stroke: var(--link-color)
    }

    .Label li:nth-child(2n+1).labelShow {
      margin: 0
    }

    .Label .labelShow .hidden {
      display: none
    }

    .Label .labelShow {
      width: 100%;
      margin: 0
    }

    .Label .labelShow ul,
    .Label .cloud .labelAll {
      width: 100%;
      margin: 0;
      padding: 0;
      max-height: 0;
      overflow: hidden;
      transition: var(--transition-4)
    }

    .Label .labelShow label {
      display: inline-flex;
      align-items: baseline;
      margin-top: 10px;
      line-height: 20px;
      color: var(--link-color)
    }

    .Label .labelShow label:before {
      content: attr(data-show)
    }

    .Label .labelShow label:after,
    .Label .labelCount:before {
      content: attr(data-text)
    }

    .Label .labelInput:checked~.labelAll ul,
    .Label .cloud .labelInput:checked~.labelAll {
      max-height: 1000vh
    }

    .Label .labelInput:checked~label:before {
      content: attr(data-hide)
    }

    .Label .labelInput:checked~label:after {
      visibility: hidden
    }

    .Label .labelTitle {
      margin-right: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .Label .labelCount,
    .Label .labelShow label:after {
      flex-shrink: 0;
      font-size: 11px;
      margin-left: 8px;
      opacity: .7
    }

    .Label .cloud>*,
    .Label .cloud .labelAll>* {
      display: block;
      max-width: 100%
    }

    .Label .cloud .labelName {
      display: flex;
      justify-content: space-between;
      margin: 0 8px 8px 0;
      padding: 9px 13px;
      border: 1px solid rgb(230, 230, 230);
      border-radius: 2px;
      color: inherit;
      line-height: 20px
    }

    .Label .cloud .labelSize>*:hover,
    .Label .cloud div.labelName,
    .darkMode .Label .cloud .labelSize>*:hover,
    .darkMode .Label .cloud div.labelName {
      border-color: var(--link-bg)
    }

    .Label .cloud .labelSize>*:hover .labelCount,
    .Label .cloud div.labelName .labelCount {
      color: var(--link-bg);
      opacity: 1
    }

    /* Footer */
    footer {
      margin-left: var(--nav-width);
      padding: 0 25px;
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      font-size: 90%
    }

    footer .creditInner {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 20px 0
    }

    footer .creditInner p {
      margin: 0;
      padding-right: 20px;
      overflow: hidden;
      white-space: nowrap
    }

    footer .creditInner .creator {
      opacity: 0
    }

    footer .toTop {
      display: flex;
      align-items: center;
      white-space: nowrap
    }

    footer .toTop:before {
      content: 'To top';
      opacity: .7
    }

    footer .toTop svg {
      width: 20px;
      height: 20px;
      margin-left: 5px
    }

    /* Error Page */
    .error404 {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      text-align: center;
      padding: 0
    }

    .errorPage {
      width: calc(100% - 40px);
      max-width: 500px;
      margin: auto
    }

    .errorPage h3 {
      font-size: 1.414rem;
      font-family: var(--font-body)
    }

    .errorPage h3 span {
      display: block;
      font-size: 140px;
      line-height: .8;
      margin-bottom: -1rem;
      color: #ebebf0
    }

    .errorPage p {
      margin: 30px 5%;
      line-height: 1.6em;
      font-family: var(--font-body)
    }

    .errorPage .button {
      margin: 0;
      padding-left: 2em;
      padding-right: 2em;
      font-size: 14px
    }

    /* Button */
    .button {
      display: inline-flex;
      align-items: center;
      margin: 12px 12px 12px 0;
      padding: 10px 15px;
      outline: 0;
      border: 0;
      border-radius: 2px;
      line-height: 20px;
      color: #fefefe;
      background-color: var(--link-bg);
      font-size: 13px;
      font-family: var(--font-body);
      white-space: nowrap;
      overflow: hidden;
      max-width: 100%
    }

    .button.outline {
      color: inherit;
      background-color: transparent;
      border: 1px solid var(--body-altColor)
    }

    .button.outline:hover {
      border-color: var(--link-bg)
    }

    .button.whatsapp {
      background-color: #25D366
    }

    .buttonInfo {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 12px 0 0
    }

    .buttonInfo>* {
      margin: 0 12px 12px 0
    }

    .buttonInfo>*:last-child {
      margin-right: 0
    }

    @media screen and (max-width:480px) {
      .buttonInfo>* {
        flex-grow: 1;
        justify-content: center
      }

      .buttonInfo>*:last-child {
        flex: 0 0 auto
      }
    }

    /* Button Download */
    .downloadInfo {
      max-width: 500px;
      background-color: #fefefe;
      box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
      border: 1px solid var(--content-border);
      border-radius: 5px;
      padding: 15px;
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      line-height: 1.8em;
      font-size: 14px
    }

    .downloadInfo a,
    .downloadInfo .fileType {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      padding: 10px;
      background: #f1f1f0;
      border-radius: 10px
    }

    .downloadInfo a {
      background-color: var(--link-bg);
      color: #fefefe;
      margin: 0;
      padding: 10px 12px;
      border-radius: 3px;
      width: auto;
      height: auto;
      line-height: 20px;
      font-size: 13px
    }

    .downloadInfo a:after {
      content: attr(aria-label)
    }

    .downloadInfo .fileType:before {
      content: attr(data-text)
    }

    .downloadInfo .fileName {
      flex-grow: 1;
      width: calc(100% - 150px);
      padding: 0 15px
    }

    .downloadInfo .fileName>* {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .downloadInfo .fileSize {
      line-height: 1.4em;
      font-size: 12px;
      opacity: .8
    }

    .darkMode .downloadInfo {
      background-color: var(--dark-bgSec);
      border: 0
    }

    .darkMode .downloadInfo .fileType {
      background-color: var(--dark-bg)
    }

    @media screen and (max-width:480px) {
      .downloadInfo {
        padding: 12px
      }

      .downloadInfo a {
        width: 50px;
        height: 50px;
        border-radius: 10px
      }

      .downloadInfo a:after {
        display: none
      }

      .downloadInfo a .icon {
        margin: 0
      }
    }

    /* CSS icon background */
    .icon {
      flex-shrink: 0;
      display: inline-block;
      margin-right: 12px;
      width: 18px;
      height: 18px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center
    }

    .icon.download,
    .darkMode .button.outline .icon.download {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")
    }

    .icon.demo {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>")
    }

    .icon.cart {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7.42226 19.8203C7.84426 19.8203 8.18726 20.1633 8.18726 20.5853C8.18726 21.0073 7.84426 21.3493 7.42226 21.3493C7.00026 21.3493 6.65826 21.0073 6.65826 20.5853C6.65826 20.1633 7.00026 19.8203 7.42226 19.8203Z'/><path d='M18.6747 19.8203C19.0967 19.8203 19.4397 20.1633 19.4397 20.5853C19.4397 21.0073 19.0967 21.3493 18.6747 21.3493C18.2527 21.3493 17.9097 21.0073 17.9097 20.5853C17.9097 20.1633 18.2527 19.8203 18.6747 19.8203Z'/><path d='M2.74988 3.25L4.82988 3.61L5.79288 15.083C5.87088 16.018 6.65188 16.736 7.58988 16.736H18.5019C19.3979 16.736 20.1579 16.078 20.2869 15.19L21.2359 8.632C21.3529 7.823 20.7259 7.099 19.9089 7.099H5.16388'/></svg>")
    }

    .icon.whatsapp {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fefefe'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></g></svg>")
    }

    .button.outline .icon.download {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348525c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")
    }

    /* Accordion */
    .accordion {
      position: relative;
      list-style: none;
      margin: 30px 0 0;
      padding: 0;
      font-size: 14px;
      line-height: 1.7em
    }

    .accordion li {
      width: 100%;
      padding: 18px 0;
      border-bottom: 1px solid var(--content-border)
    }

    .accordion .content {
      margin: 0;
      padding-left: 32px;
      position: relative;
      font-family: var(--font-body);
      overflow: hidden;
      max-height: 0;
      -webkit-transition: var(--transition-2);
      transition: var(--transition-2);
      opacity: .8
    }

    .accordion p:first-child {
      margin-top: 0
    }

    .accordion p:last-child {
      margin-bottom: 0
    }

    .accorTitle {
      display: flex;
      align-items: center;
      font-weight: 900;
      font-family: var(--font-body);
      color: var(--head-color);
      padding: 0 5px
    }

    .accorTitle span {
      flex-grow: 1
    }

    .accorIcon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
      margin-right: 15px;
      position: relative
    }

    .accorIcon:before,
    .accorIcon:after {
      content: '';
      display: block;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background-color: var(--head-color)
    }

    .accorIcon:after {
      position: absolute;
      transform: rotate(90deg)
    }

    .accorMenu:checked~.accorTitle span {
      color: var(--link-color)
    }

    .accorMenu:checked~.accorTitle .accorIcon:before,
    .accorMenu:checked~.accorTitle .accorIcon:after {
      background-color: var(--link-color)
    }

    .accorMenu:checked~.accorTitle .accorIcon:after {
      visibility: hidden;
      opacity: 0
    }

    .accorMenu:checked~.content {
      max-height: 100vh;
      padding-top: 15px;
      padding-bottom: 8px
    }

    .darkMode .accorTitle {
      color: var(--dark-text)
    }

    .darkMode .accorIcon:before,
    .darkMode .accorIcon:after {
      background-color: var(--dark-text)
    }

    /* Slider */
    .slider,
    .sliderSection {
      position: relative
    }

    .sliderViewport {
      position: relative;
      height: 100%;
      display: flex;
      overflow-y: hidden;
      overflow-x: scroll;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      list-style: none;
      margin: 0;
      padding: 0;
      -ms-overflow-style: none;
    }

    .sliderViewport::-webkit-scrollbar {
      width: 0
    }

    .sliderViewport::-webkit-scrollbar-track {
      background: transparent
    }

    .sliderViewport::-webkit-scrollbar-thumb {
      background: transparent;
      border: none
    }

    .sliderDiv {
      position: relative;
      flex: 0 0 100%;
      width: 100%;
      background-color: transparent;
      outline: 0;
      border: 0
    }

    .sliderDiv:nth-child(even) {
      background-color: inherit
    }

    .sliderSnapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      scroll-snap-align: center;
      z-index: -1
    }

    .sliderImg {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      display: block;
      padding-top: 40%;
      border-radius: 3px
    }

    @media (hover:hover) {
      .sliderSnapper {
        animation-name: tonext, snap;
        animation-timing-function: ease;
        animation-duration: 4s;
        animation-iteration-count: infinite
      }

      .rtlMode .sliderSnapper {
        animation-name: tonext-rev, snap
      }

      .sliderDiv:last-child .sliderSnapper {
        animation-name: tostart, snap
      }

      .rtlMode .sliderDiv:last-child .sliderSnapper {
        animation-name: tostart-rev, snap
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .sliderSnapper,
      .rtlMode .sliderSnapper {
        animation-name: none
      }
    }

    .slider:hover .sliderSnapper,
    .rtlMode .slider:hover .sliderSnapper,
    .slider:focus-within .sliderSnapper,
    .rtlMode .slider:focus-within .sliderSnapper {
      animation-name: none
    }

    @media screen and (max-width:896px) {
      .sliderSection .widget {
        margin-top: 30px
      }

      .sliderViewport {
        width: 100%;
        padding: 0 20px 10px
      }

      .sliderViewport:after {
        content: '';
        display: block;
        position: relative;
        padding: 10px
      }

      .sliderDiv {
        flex: 0 0 90%;
        width: 90%;
        margin-right: 15px;
        box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%)
      }

      .rtlMode .sliderDiv {
        margin-right: 0;
        margin-left: 15px
      }

      .sliderDiv:last-child {
        margin-right: 0
      }

      .rtlMode .sliderDiv:last-child {
        margin-left: 0
      }

      .slider {
        width: calc(100% + 50px);
        left: -25px;
        right: -25px
      }

      .sliderSnapper {
        animation-name: none
      }
    }

    @media screen and (max-width:640px) {
      .slider {
        width: calc(100% + 40px);
        left: -20px;
        right: -20px
      }
    }

    /* Keyframes Animation */
    @-webkit-keyframes slidein {
      0% {
        opacity: 0
      }

      20% {
        opacity: 1;
        bottom: 0
      }

      50% {
        opacity: 1;
        bottom: 0
      }

      80% {
        opacity: 1;
        bottom: 0
      }

      100% {
        opacity: 0;
        bottom: -70px;
        visibility: hidden
      }
    }

    @keyframes slidein {
      0% {
        opacity: 0
      }

      20% {
        opacity: 1;
        bottom: 0
      }

      50% {
        opacity: 1;
        bottom: 0
      }

      80% {
        opacity: 1;
        bottom: 0
      }

      100% {
        opacity: 0;
        bottom: -70px;
        visibility: hidden
      }
    }

    @-webkit-keyframes nudge {
      0% {
        transform: translateX(0)
      }

      30% {
        transform: translateX(-5px)
      }

      50% {
        transform: translateX(5px)
      }

      70% {
        transform: translateX(-2px)
      }

      100% {
        transform: translateX(0)
      }
    }

    @keyframes nudge {
      0% {
        transform: translateX(0)
      }

      30% {
        transform: translateX(-5px)
      }

      50% {
        transform: translateX(5px)
      }

      70% {
        transform: translateX(-2px)
      }

      100% {
        transform: translateX(0)
      }
    }

    @keyframes tonext {
      75% {
        left: 0
      }

      95% {
        left: 100%
      }

      98% {
        left: 100%
      }

      99% {
        left: 0
      }
    }

    @keyframes tostart {
      75% {
        left: 0
      }

      95% {
        left: -300%
      }

      98% {
        left: -300%
      }

      99% {
        left: 0
      }
    }

    @keyframes tonext-rev {
      75% {
        right: 0
      }

      95% {
        right: 100%
      }

      98% {
        right: 100%
      }

      99% {
        right: 0
      }
    }

    @keyframes tostart-rev {
      75% {
        right: 0
      }

      95% {
        right: -300%
      }

      98% {
        right: -300%
      }

      99% {
        right: 0
      }
    }

    @keyframes snap {
      96% {
        scroll-snap-align: center
      }

      97% {
        scroll-snap-align: none
      }

      99% {
        scroll-snap-align: none
      }

      100% {
        scroll-snap-align: center
      }
    }

    /* Sticky Ad */
    .stickAd {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      min-height: 70px;
      max-height: 200px;
      padding: 5px 5px;
      box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fefefe;
      z-index: 50;
      border-top: 1px solid var(--content-border)
    }

    .stickAdclose {
      width: 40px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px 0 0;
      border: 1px solid var(--content-border);
      border-bottom: 0;
      border-right: 0;
      position: absolute;
      right: 0;
      top: -30px;
      background-color: inherit
    }

    .stickAdclose svg {
      width: 18px;
      height: 18px
    }

    .stickAdcontent {
      flex-grow: 1;
      overflow: hidden;
      display: block;
      position: relative
    }

    .stickAdin:checked~.stickAd {
      padding: 0;
      min-height: 0
    }

    .stickAdin:checked~.stickAd .stickAdcontent {
      display: none
    }

    .darkMode .stickAd {
      background-color: var(--dark-bgAlt)
    }

    .darkMode .stickAd,
    .darkMode .stickAdclose {
      border-color: rgba(255, 255, 255, .1)
    }

    /* Responsive */
    @media screen and (min-width:768px) {
      ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 4px;
        height: 5px
      }

      ::-webkit-scrollbar-track {
        background-color: transparent
      }

      ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .15);
        border-radius: 10px
      }

      ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .45)
      }

      ::-webkit-scrollbar-thumb:active {
        background-color: rgba(0, 0, 0, .45)
      }
    }

    @media screen and (min-width:1600px) {
      .blogContent .mainbar {
        max-width: 896px
      }
    }

    @media screen and (max-width:1100px) {
      .blogContent .sidebar {
        flex: 0 0 300px;
        width: 300px
      }

      .itemFeatured .item {
        flex-wrap: nowrap
      }

      .itemFeatured .itemThumbnail {
        flex: 0 0 calc(50% - 10px);
        margin-bottom: 0
      }

      .itemFeatured .itemContent {
        padding-left: 20px
      }

      .itemFeatured .itemEntry,
      .shareIcon a:after {
        display: none
      }

      .blogPosts .hentry {
        width: calc(50% - 20px)
      }
    }

    @media screen and (max-width:896px) {
      .itemFeatured .item {
        flex-wrap: nowrap
      }

      .itemFeatured .itemThumbnail {
        flex: 1 0 310px;
        margin-bottom: 0
      }

      .itemFeatured .itemContent {
        padding-left: 25px
      }

      .itemFeatured .itemEntry {
        display: -webkit-box
      }

      .blogPosts .hentry {
        width: calc(33.333% - 20px)
      }

      .shareIcon a:after {
        display: block
      }

      .blogContent {
        display: block
      }

      .blogContent .mainbar,
      .blogContent .sidebar {
        width: 100%;
        padding: 0;
        margin-right: auto;
        margin-left: auto
      }

      .blogContent .sidebar {
        margin-top: 50px
      }

      .blogPosts div.hentry {
        width: calc(100% - 20px)
      }

      .onIndex .blogContent .mainbar {
        max-width: none
      }

      .onItem .postTitle {
        font-size: 26px
      }

      footer {
        padding-bottom: 50px;
        margin-left: 0
      }
    }

    @media screen and (max-width:640px) {

      .Header h1,
      .Header h2 {
        font-size: 16px
      }

      .headerLeft {
        padding-left: 20px
      }

      .headerRight,
      .notifContent,
      .sectionInner {
        padding-left: 20px;
        padding-right: 20px
      }

      .blogPosts .hentry {
        width: calc(50% - 20px)
      }

      .itemFeatured .itemThumbnail {
        flex: 1 0 calc(50% - 10px)
      }

      .itemFeatured .itemContent {
        width: calc(50% + 10px)
      }

      .itemFeatured .itemTitle,
      .itemPopulars .itemTitle {
        font-size: 16px
      }

      .shareIcon a:after {
        display: none
      }
    }

    @media screen and (max-width:480px) {

      .blogContent .widget .title,
      .tableOfHeader {
        font-size: 14px
      }

      .blogContent .widget .title.search,
      .breadcrumbs,
      .commentContent {
        font-size: 13px
      }

      .blogPosts {
        width: calc(100% + 15px);
        left: -7.5px;
        right: -7.5px
      }

      .blogPosts .hentry {
        width: calc(50% - 15px);
        margin-left: 7.5px;
        margin-right: 7.5px
      }

      .blogPosts div.hentry {
        width: calc(100% - 15px)
      }

      .postTitle,
      .itemFeatured .itemTitle,
      .itemPopulars .itemTitle {
        font-size: 14px
      }

      .postEntry.snippet,
      .postHeader,
      .postInfo,
      .postTimes,
      .postLabel.sponsored,
      .blogPager,
      .postNav,
      .itemFeatured .itemEntry,
      footer,
      .commentHeader {
        font-size: 12px
      }

      .postEntry .separator,
      .postEntry .separator a {
        margin-left: auto !important;
        margin-right: auto !important
      }

      .onItem:not(.onPage) .headerIcon label.navMenu,
      .onItem:not(.onPage) #header-widget {
        display: none
      }

      .onItem:not(.onPage) .headerIcon a.navMenu {
        display: flex;
        margin-left: 0;
        left: -5px
      }

      .onItem .postTitle {
        font-size: var(--post-titleSizeMobile)
      }

      .onItem .postEntry {
        font-size: var(--post-fontSizeMobile)
      }

      .itemFeatured {
        padding-bottom: 70px
      }

      .itemFeatured .item {
        display: block
      }

      .itemFeatured .itemContent {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -70px;
        width: calc(100% - 30px);
        margin: auto;
        padding: 12.5px;
        border-radius: 8px;
        box-shadow: 0 10px 15px 0 rgb(30 30 30 / 7%);
        background-color: var(--content-bg)
      }

      .itemFeatured .itemTitle a,
      .itemPopulars .itemTitle a {
        -webkit-line-clamp: 2
      }

      footer .toTop:before {
        content: 'Top'
      }
    }

    /* RTL Mode */
    .rtlMode .headerLeft {
      padding-left: 0;
      padding-right: 25px
    }

    .rtlMode .headerLeft .headerIcon,
    .rtlMode .htmlMenu .link svg,
    .rtlMode .accorIcon {
      margin-right: 0;
      margin-left: 15px
    }

    .rtlMode .headerRight .headerIcon {
      margin-left: 0;
      margin-right: auto
    }

    .rtlMode .headerSearch button {
      left: auto;
      right: 15px
    }

    .rtlMode .headerSearch button.close {
      left: 12px;
      right: auto
    }

    .rtlMode .headerIcon>*:not(:first-child) {
      margin-left: 0;
      margin-right: 12px
    }

    .rtlMode .headerIcon .closeProfile {
      margin: 0
    }

    .rtlMode .headerIcon .navDark i:before {
      left: auto;
      right: 10px
    }

    .rtlMode.darkMode .headerIcon .navDark i:before {
      left: auto;
      right: 3px
    }

    .rtlMode .headerIcon .navDark:before {
      right: auto;
      left: 0
    }

    .rtlMode .headerIcon .navDark:hover:before {
      right: auto;
      left: 26px
    }

    .rtlMode .headerIcon .headerProfile {
      margin: 0;
      left: 0;
      right: auto
    }

    .rtlMode .Profile .profileHeader svg,
    .rtlMode .blogPager .newerLink svg,
    .rtlMode .blogPager .olderLink svg,
    .rtlMode .htmlMenu .close svg,
    .rtlMode .tableOfHeader svg {
      transform: rotate(180deg)
    }

    .rtlMode .mainInner,
    .rtlMode footer {
      margin-left: 0;
      margin-right: var(--nav-width)
    }

    .rtlMode .mainMenu {
      left: auto;
      right: 0;
      border-right: 0;
      border-left: var(--nav-border) solid var(--content-border)
    }

    .rtlMode .htmlMenu .link svg.down {
      margin-right: auto;
      margin-left: 0
    }

    .rtlMode .htmlMenu .link:before,
    .rtlmode .htmlMenu>li li a:before {
      left: auto;
      right: 0
    }

    .rtlMode .htmlMenu>li li a {
      padding: 10px 60px 10px 25px
    }

    .rtlMode #LinkList002 {
      padding: 20px 25px 30px 20px
    }

    .rtlMode #LinkList002 li:first-child {
      margin: 0 0 0 5px
    }

    .rtlMode .navInput:checked~.mainWrapper .mainInner,
    .rtlMode .navInput:checked~.mainWrapper footer {
      margin-left: 0;
      margin-right: 68px
    }

    .rtlMode .blogContent .sidebar {
      padding-left: 0;
      padding-right: 30px
    }

    .rtlMode .postLabel.sponsored svg {
      margin-right: 0;
      margin-left: 5px
    }

    .rtlMode .postComment svg,
    .rtlMode footer .toTop svg,
    .rtlMode .Label li>* svg,
    .rtlMode .post .extLink:after {
      margin-right: 5px;
      margin-left: 0
    }

    .rtlMode .postTimestamp,
    .rtlMode .postMore {
      padding-left: 10px;
      padding-right: 0
    }

    .rtlMode .blogPager .newerLink svg,
    .rtlMode .blogPager .jsLoad svg {
      margin-left: 8px;
      margin-right: 0
    }

    .rtlMode .blogPager .olderLink svg,
    .rtlMode .Label .labelCount,
    .rtlMode .Label .labelShow label:after,
    .rtlMode .breadcrumbs>*:not(:last-child):after {
      margin-left: 0;
      margin-right: 8px
    }

    .rtlMode .itemFeatured .itemContent,
    .rtlMode.listMode .blogPosts .postContent {
      padding-right: 25px;
      padding-left: 0
    }

    .rtlMode .itemPopular .postHeader,
    .rtlMode .itemPopular .postLabel.sponsored {
      margin-left: 0;
      margin-right: 32px
    }

    .rtlMode .Label .cloud .labelName,
    .rtlMode .post .proMarket>a {
      margin: 0 0 8px 8px
    }

    .rtlMode .Label li:nth-child(2n+1) {
      margin-right: 0;
      margin-left: 20px
    }

    .rtlMode .Label li:nth-child(2n+1).labelShow,
    .rtlMode .postComments svg {
      margin: 0
    }

    .rtlMode .Label .labelTitle {
      margin-right: 0;
      margin-left: auto
    }

    .rtlMode footer .creditInner p {
      padding-right: 0;
      padding-left: 20px
    }

    .rtlMode footer .creditInner .creator {
      display: none
    }

    .rtlMode .post .postNav>*:not(:last-child),
    .rtlMode .post .tabsHead>*:not(:last-child),
    .rtlMode .breadcrumbs>*,
    .rtlMode .postComments>*:not(:last-child) {
      margin-right: 0;
      margin-left: 8px
    }

    .rtlMode .post .proInfoL {
      padding-right: 0;
      padding-left: 20px
    }

    .rtlMode .post .proMarket>a:last-of-type {
      margin-left: 0
    }

    .rtlMode .postAuthor,
    .rtlMode .postTimes {
      padding-right: 0;
      padding-left: 15px
    }

    .rtlMode .postAuthorImage,
    .rtlMode .postAuthors .authorImage {
      margin-right: 0;
      margin-left: 12px
    }

    .rtlMode .postTimes svg {
      margin-right: 0;
      margin-left: 6px
    }

    .rtlMode .accordion .content {
      padding-left: 0;
      padding-right: 32px
    }

    .rtlMode .icon {
      margin-right: 0;
      margin-left: 12px
    }

    .rtlMode .buttonInfo>* {
      margin: 0 0 12px 12px
    }

    .rtlMode .buttonInfo>*:last-child {
      margin-left: 0
    }

    @media screen and (max-width:896px) {
      .rtlMode .headerLeft {
        padding-right: 20px
      }

      .rtlMode .htmlMenu>li li a {
        padding: 10px 55px 10px 20px
      }

      .rtlMode #LinkList002 {
        padding-left: 20px;
        padding-right: 20px;
        margin-left: auto;
        margin-right: -100%;
        border-radius: 0 0 0 15px
      }

      .rtlMode .htmlMenu .close {
        margin-left: auto;
        margin-right: -100%;
        border-radius: 15px 0 0 0
      }

      .rtlMode .mainMenu {
        border-left: 0;
        margin-left: auto;
        margin-right: -100%
      }

      .rtlMode .mainMenu .section {
        border-radius: 15px 0 0 15px
      }

      .rtlMode .navInput:checked~.mainWrapper .mainMenu,
      .rtlMode .navInput:checked~.mainWrapper .htmlMenu .close,
      .rtlMode .navInput:checked~.mainWrapper .mainMenu #LinkList002 {
        margin-left: auto;
        margin-right: 0
      }

      .rtlMode .navInput:checked~.mainWrapper .mainInner,
      .rtlMode .mainInner,
      .rtlMode .navInput:checked~.mainWrapper footer,
      .rtlMode footer {
        margin-right: 0
      }

      .rtlMode .blogContent .sidebar {
        padding: 0
      }
    }

    @media screen and (max-width:640px) {
      .rtlMode .headerLeft {
        padding-left: 20px
      }

      .rtlMode.listMode .blogPosts .postContent {
        padding-left: 25px;
        padding-right: 0
      }
    }

    @media screen and (max-width:480px) {
      .rtlMode.onItem:not(.onPage) .headerIcon a.navMenu {
        left: 0;
        right: -5px;
        margin-right: 0
      }

      .rtlMode.onItem:not(.onPage) .headerIcon a.navMenu svg {
        transform: rotate(180deg)
      }

      .rtlMode .headerIcon .headerProfile {
        margin: 0 auto auto;
        left: 0;
        right: 0
      }

      .rtlMode .itemFeatured .itemContent {
        padding: 12.5px
      }

      .rtlMode.listMode .blogPosts .postContent {
        padding-left: 20px
      }
    }

    /*]]>*/

.headerIcon .headerProfile {
      display: block;
      position: absolute;
      top: -10px;
      right: 0;
      margin: 0;
      width: 250px;
      max-height: 400px;
      background-color: var(--content-bg);
      border: 1px solid var(--content-border);
      border-radius: 8px;
      box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
      -webkit-transition: var(--transition-1);
      transition: var(--transition-1);
      overflow: hidden;
      z-index: 3;
      opacity: 0;
      visibility: hidden;
      font-size: 12px
    }

    .headerIcon .headerProfile ul {
      margin: 0;
      padding: 0;
      list-style: none
    }

    .headerIcon .headerProfile .socialLink {
      padding: 15px 15px;
      border-top: 1px solid var(--content-border)
    }

    .headerIcon .headerProfile .widget:not(:first-child) {
      margin-top: 15px
    }

    .headerIcon .closeProfile {
      display: block;
      position: fixed;
      margin: 0
    }

    .profInput:checked~.mainWrapper .headerIcon .headerProfile {
      opacity: 1;
      visibility: visible;
      top: 0
    }

    .profInput:checked~.mainWrapper .headerIcon .closeProfile {
      opacity: 1;
      visibility: visible
    }

    .navInput:checked~.mainWrapper .headerIcon .navMenu .svg-1 {
      opacity: 0;
      visibility: hidden
    }

    .navInput:checked~.mainWrapper .headerIcon .navMenu .svg-2 {
      opacity: 1;
      visibility: visible
    }

    .darkMode .headerIcon label.navMenu:after,
    .darkMode .headerSearch input[type=text] {
      background-color: rgba(255, 255, 255, .1)
    }

    .darkMode .headerIcon .navDark i,
    .darkMode .headerIcon .navMenu .ham i,
    .darkMode .headerIcon .navMenu .ham span:before,
    .darkMode .headerIcon .navMenu .ham span:after {
      border-color: var(--dark-text)
    }

    .darkMode .headerIcon .navDark i:before {
      left: 10px;
      background-color: var(--dark-text)
    }

    /* Widget Profile */
    .Profile .profileHeader {
      padding: 12px 10px 10px;
      font-size: 12px
    }

    .Profile .profileHeader svg {
      width: 18px;
      height: 18px
    }

    .Profile .profileHeader label {
      display: flex;
      align-items: center
    }

    .Profile .profileHeader label:after {
      content: attr(data-text);
      padding-left: 8px;
      padding-right: 8px;
      opacity: .7
    }

    .Profile .defaultAvatar {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .Profile .profileImg {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center
    }

    .Profile .team {
      padding: 10px 0;
      overflow-y: auto;
      max-height: 280px
    }

    .Profile .team .profileLink {
      display: flex;
      align-items: center;
      padding: 7px 15px
    }

    .Profile .team .profileLink:hover {
      background-color: var(--transparent-bg)
    }

    .Profile .team .profileImage {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 27px;
      background-color: var(--transparent-bg);
      overflow: hidden
    }

    .Profile .team .profileName {
      flex-grow: 1;
      padding-left: 12px;
      padding-right: 12px;
      color: inherit;
      font-weight: 600;
      font-family: var(--font-head);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .Profile .team .profileName:after {
      content: 'Author';
      display: block;
      font-weight: 400;
      font-size: 11px;
      font-family: var(--font-body);
      opacity: .7
    }

    .Profile .team li:not(:first-child) .profileName:after {
      content: 'Contributor'
    }

    .Profile .solo {
      padding: 15px;
      text-align: center
    }

    .Profile .solo .profileImage {
      margin: 0 auto 10px;
      width: 60px;
      height: 60px;
      border-radius: 30px;
      background-color: var(--transparent-bg);
      overflow: hidden
    }

    .Profile .solo .profileLink {
      display: block;
      color: inherit;
      font-weight: 600;
      font-size: 13px;
      font-family: var(--font-head);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .Profile .solo .profileText {
      opacity: .7;
      line-height: 1.6em
    }

    .Profile .solo .profileData {
      display: inline-flex;
      margin-top: 10px;
      font-size: 12px;
      color: var(--link-color)
    }

    .Profile .solo .profileData:after {
      content: attr(data-text);
      padding-left: 8px
    }

    .Profile .solo .profileData svg {
      width: 18px;
      height: 18px;
      fill: var(--link-color)
    }

    .Profile .solo .profileData svg.line {
      fill: none;
      stroke: var(--link-color)
    }

    @media screen and (max-width:480px) {
      .headerIcon .headerProfile {
        position: fixed;
        left: 0;
        margin: 0 auto auto;
        width: calc(100vw - 40px);
        border: 0;
        border-radius: 15px
      }

      .profInput:checked~.mainWrapper .headerIcon .headerProfile {
        top: 25px
      }

      .profInput:checked~.mainWrapper .headerIcon .closeProfile {
        background: rgba(0, 0, 0, .5);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px)
      }

      .Profile .team .profileLink {
        padding: 7px 35px
      }

      .Profile .solo {
        padding: 35px 30px 15px
      }
    }

    /* listMode */
    .listMode .blogPosts .hentry {
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      padding-bottom: 0;
      margin-bottom: 25px
    }

    .listMode .blogPosts div.hentry {
      display: block
    }

    .listMode .blogPosts .postThumbnail {
      margin-bottom: 0
    }

    .listMode .blogPosts .postContent {
      width: calc(100% - (33.333% - 12.5px));
      padding-left: 25px
    }

    .listMode .blogPosts .postTitle {
      font-size: 18px
    }

    .listMode .blogPosts .postEntry.snippet {
      display: none
    }

    .listMode .blogPosts .postEntry.snippet.productPrice {
      display: block
    }

    .listMode .blogPosts .postInfo {
      position: relative
    }

    @media screen and (max-width:640px) {
      .listMode .blogPosts .hentry {
        flex-direction: row-reverse;
        margin-bottom: 30px
      }

      .listMode .blogPosts .postContent {
        padding-left: 0;
        padding-right: 25px
      }
    }

    @media screen and (max-width:480px) {
      .listMode .blogPosts .hentry {
        width: calc(100% - 15px)
      }

      .listMode .blogPosts .postThumbnail {
        flex: 0 0 95px
      }

      .listMode .blogPosts .postThumbnail>* {
        padding-top: 100%
      }

      .listMode .blogPosts .postContent {
        width: calc(100% - 95px);
        padding-right: 20px
      }

      .listMode .blogPosts .postTitle,
      .gridLayout.listMode .blogPosts .postTitle {
        font-size: 14px
      }

      .listMode .blogPosts .postHeader {
        margin-bottom: 5px
      }

      .listMode .blogPosts .postInfo {
        margin-top: 15px
      }
    }

    /* Dark Mode */
    .darkMode {
      background-color: var(--dark-bg);
      color: var(--dark-text)
    }

    .darkMode a,
    .darkMode .free:after,
    .darkMode .new:after,
    .darkMode .postLabel>a:hover,
    .darkMode .postMore:hover {
      color: var(--dark-link)
    }

    .darkMode svg {
      fill: var(--dark-text)
    }

    .darkMode svg.line,
    .darkMode svg .line {
      fill: none;
      stroke: var(--dark-text)
    }

    .darkMode svg.c-1,
    .darkMode svg .c-1 {
      fill: var(--dark-text)
    }

    .darkMode svg.c-2,
    .darkMode svg .c-2 {
      fill: var(--dark-textAlt);
      opacity: .4
    }

    .darkMode h1,
    .darkMode h2,
    .darkMode h3,
    .darkMode h4,
    .darkMode h5,
    .darkMode h6,
    .darkMode header a,
    .darkMode footer {
      color: inherit
    }

    .darkMode header,
    .darkMode .mainMenu,
    .darkMode .htmlMenu .close,
    .darkMode #LinkList002 {
      background-color: var(--dark-bg);
      color: inherit
    }

    .darkMode .headerIcon .headerProfile,
    .darkMode #mobile-menu,
    .darkMode .commentsContent ol>li,
    .darkMode .commentContent i[rel="image"]:before {
      background-color: var(--dark-bgSec)
    }

    .darkMode header,
    .darkMode .headerIcon .headerProfile,
    .darkMode .headerIcon .headerProfile .socialLink,
    .darkMode .blogContent .mainbar>*,
    .darkMode .mainMenu,
    .darkMode .htmlMenu>li.break:after,
    .darkMode .Label .cloud .labelName,
    .darkMode .postComments>*,
    .darkMode .postTimes,
    .darkMode .postRelated,
    .darkMode .postRelated h3,
    .darkMode .postRelated h4,
    .darkMode .postRelated b,
    .darkMode .post blockquote,
    .darkMode .post .commentContent i[rel="quote"],
    .darkMode .post table th,
    .darkMode .post table td,
    .darkMode .post .tocInner,
    .darkMode .post .spoiler,
    .darkMode .accordion li,
    .darkMode .postShare,
    .darkMode .shareIcon>*,
    .darkMode .sharePreview,
    .darkMode .blogComments .commentsTitle,
    .darkMode .commentsIcon .commentClose,
    .darkMode .commentsContent ul>li:not(:last-child),
    .darkMode .commentContent.hasDeleted,
    .darkMode .commentContent i[rel="image"]:before,
    .darkMode .commentContent i[rel="quote"],
    .darkMode .post .tabsHead,
    .darkMode .post .tabsHead>*,
    .darkMode .post .proPrice,
    .darkMode .post .proInfoL,
    .darkMode .post .proInfoR,
    .darkMode .post .proInfo.one,
    .darkMode .post .proMarket>a {
      border-color: rgba(255, 255, 255, .1)
    }

    .darkMode .Profile .team .profileLink:hover,
    .darkMode .htmlMenu a.link:hover,
    .darkMode .htmlMenu>li li a:hover,
    .darkMode .postThumbnail div,
    .darkMode .postThumbnail a,
    .darkMode .blogPager .noPost,
    .darkMode .blogPager .current,
    .darkMode .postNav .current {
      background-color: rgba(255, 255, 255, .1)
    }

    .darkMode #mobile-menu,
    .darkMode .commentsContent ol>li {
      border-color: transparent;
      color: inherit
    }

    .darkMode .postLabel>a,
    .darkMode .postTitle a,
    .darkMode .itemTitle a,
    .darkMode .postInfo a,
    .darkMode .blogPager a,
    .darkMode .postNav a,
    .darkMode .breadcrumbs a,
    .darkMode .button,
    .darkMode .shareIcon a,
    .darkMode .commentActions a,
    .darkMode .commentReply a,
    .darkMode .tableOfContent a,
    .darkMode .post .tocInner a {
      color: var(--dark-text)
    }

    .darkMode .commentReplies {
      background-color: rgba(0, 0, 0, .1)
    }

    .darkMode .postComments>a:before {
      background-color: var(--dark-bgAlt)
    }

    .darkMode .postComments svg,
    .darkMode .postComments>*:hover svg.line .fill {
      fill: var(--dark-text);
      opacity: .8
    }

    .darkMode .postComments svg.line {
      fill: none;
      stroke: var(--dark-text);
      opacity: .8
    }

    .darkMode .blogContent .widget input[type=text],
    .darkMode .blogContent .widget input[type=email],
    .darkMode .blogContent .widget textarea {
      border-color: rgba(255, 255, 255, .1);
      background-color: var(--dark-bgAlt)
    }

    .darkMode .blogContent .widget input[type=text]:focus,
    .darkMode .blogContent .widget input[type=email]:focus,
    .darkMode .blogContent .widget textarea:focus {
      border-color: var(--body-altColor)
    }

    @media screen and (max-width:896px) {
      .darkMode .headerSearch input[type=text] {
        background-color: var(--dark-bgAlt)
      }

      .darkMode .mainMenu {
        background-color: transparent
      }

      .darkMode .mainMenu .section {
        background-color: var(--dark-bg)
      }

      .darkMode .navInput:checked~.mainWrapper .htmlMenu a.link:hover {
        background-color: rgba(255, 255, 255, .1)
      }
    }

    @media screen and (max-width:480px) {
      .darkMode .itemFeatured .itemContent {
        background-color: var(--dark-bgSec)
      }
    }

    /*]]>*/

/* ===== Custom rules (hand-written) ===== */

/* ===== Pagination ===== */
.blogPager .pagination-container{display:flex;width:100%;background-color:transparent;padding:0}
.pagination{display:flex;justify-content:center;align-items:center;width:100%}
.pagination-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;list-style:none;margin:0;padding:0;gap:6px}
.pagination-item{display:inline-flex}
.pagination-link{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 11px;font-size:14px;line-height:1;font-family:var(--font-head);color:var(--body-color);background-color:var(--transparent-bg);border-radius:6px;text-decoration:none;cursor:pointer;transition:var(--transition-2)}
.pagination-link:hover,.pagination-link:focus-visible{color:var(--dark-text);background-color:var(--link-bg);outline:none}
.pagination-link.current,.pagination-item.active .pagination-link{color:var(--dark-text);background-color:var(--link-bg);cursor:default}
.pagination-link.disabled,.pagination-link[aria-disabled="true"]{color:var(--dark-textAlt);background-color:var(--transparent-bg);cursor:not-allowed;opacity:.55}
.pagination-link.disabled:hover{color:var(--dark-textAlt);background-color:var(--transparent-bg)}
.pagination-link.prev,.pagination-link.next{font-size:20px;padding:0 10px}
@media screen and (max-width:480px){.pagination-link{min-width:32px;height:32px;padding:0 9px;font-size:13px}.pagination-link.prev,.pagination-link.next{font-size:18px;padding:0 8px}.pagination-list{gap:4px}}

/* ===== Related Posts (module) ===== */
.relatedPosts .title{margin:0 0 18px;font-family:var(--font-head);font-weight:700;font-size:var(--widget-titleSize);color:var(--head-color)}
.related-posts-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.related-post-item{display:flex;gap:14px;align-items:flex-start;padding:14px;background-color:var(--content-bg);border:1px solid var(--content-border);border-radius:6px;transition:var(--transition-2)}
.related-post-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.related-post-item>a{flex:0 0 auto;width:120px;display:block}
.related-post-item img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:4px;display:block}
.related-post-content{flex:1 1 auto;min-width:0}
.related-post-content>a{display:block;font-family:var(--font-head);font-weight:700;font-size:.95rem;line-height:1.35;color:var(--head-color);text-decoration:none}
.related-post-content>a:hover{color:var(--link-color)}
.related-post-content p{margin:6px 0 10px;font-size:13px;line-height:1.5;color:var(--body-altColor);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.related-post-content>a:last-child{font-size:12px;font-weight:600;color:var(--link-color)}
@media screen and (max-width:640px){.related-posts-wrap{grid-template-columns:1fr}.related-post-item>a{width:96px}}

/* ===== Related Posts (blogger block) base layout — restored from detail.html ===== */
.relatedPosts{margin:40px 0 0;line-height:1.6em}
.relatedPosts ul{display:flex;flex-wrap:wrap;position:relative;width:calc(100% + 20px);left:-10px;right:-10px;list-style:none;margin:0;padding:0}
.relatedPosts li{display:block;width:calc(33.333% - 20px);margin:0 10px 30px}
.relatedPosts .itemThumbnail a{background-image:none;color:inherit}
.relatedPosts .itemThumbnail > *:before{content:'No image';display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:12px;opacity:.7}
.relatedPosts .itemTitle{font-size:.85rem;line-height:normal;font-family:var(--font-head);font-weight:700}
@media screen and (max-width:1100px){.relatedPosts li{width:calc(50% - 20px)}}
@media screen and (max-width:896px){.relatedPosts li{width:calc(33.333% - 20px)}}
@media screen and (max-width:640px){.relatedPosts li{width:calc(50% - 20px)}}
@media screen and (max-width:480px){.relatedPosts ul{flex-wrap:nowrap;width:calc(100% + 40px);left:-20px;right:-20px;margin-bottom:50px;padding:0 20px;overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.relatedPosts li{display:block;flex-shrink:0;width:70%;margin:0 15px 0 0;scroll-snap-align:center}.relatedPosts li:last-child{margin-right:0}.relatedPosts ul:after{content:'';display:block;flex-shrink:0;align-self:stretch;padding-left:20px}.relatedPosts .itemTitle{font-size:13px}.rtlMode .relatedPosts li{margin:0 0 0 15px}.rtlMode .relatedPosts li:last-child{margin-left:0}}

/* ===== Related Posts (blogger block) lazyloaded fix ===== */
.relatedPosts .itemThumbnail{position:relative;padding-top:62.5%;overflow:hidden;border-radius:4px}
.relatedPosts .itemThumbnail a{position:absolute;top:0;left:0;right:0;bottom:0}
.relatedPosts .itemThumbnail a:before{content:none}
.relatedPosts .itemThumbnail div{background-position:center;background-size:cover;background-repeat:no-repeat;display:block;position:absolute;top:0;left:0;bottom:0;right:0}