/* Variable color */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif;
}

:root {
    --headC: #08102b;
    --bodyC: #08102b;
    --bodyCa: #767676;
    --bodyB: #fffdfc;
    --linkC: #6200ee;
    --linkB: #6200ee;
    --iconC: #08102b;
    --iconCa: #08102b;
    --iconCs: #767676;
    --headerC: #08102b;
    --headerT: 16px;
    --headerW: 400;
    /* write 400(normal) or 700(bold) */
    --headerB: #fffdfc;
    --headerL: 1px;
    --headerI: #08102b;
    --headerH: 72px;
    --headerHm: 72px;
    --notifH: 60px;
    --notifU: #e8f0fe;
    --notifC: #3c4043;
    --notifL: #6200ee;
    --contentB: #fffdfc;
    --contentL: #e6e6e6;
    --contentW: 1280px;
    --sideW: 300px;
    --transB: rgba(0, 0, 0, .05);
    --pageW: 780px;
    --postW: 780px;
    --postT: 36px;
    --postTm: 28px;
    --postF: 16px;
    --postFm: 15px;
    --widgetT: 15px;
    --widgetTw: 400;
    /* write 400(normal) or 700(bold) */
    --widgetTa: 25px;
    --widgetTac: #989b9f;
    --navH: 48px;
    --navT: #08102b;
    --navI: #08102b;
    --navB: #fffdfc;
    --srchL: 1px;
    --srchLc: #e6e6e6;
    --srchI: #08102b;
    --srchB: #fffdfc;
    --fotT: #08102b;
    --fotB: #fffdfc;
    --fotL: 1px;
    --fontH: 'DM Sans', sans-serif;
    --fontB: 'DM Sans', sans-serif;
    --fontBa: 'DM Sans', sans-serif;
    --fontC: 'DM Sans', sans-serif;
    --trans-1: all .1s ease;
    --trans-2: all .2s ease;
    --trans-4: all .4s ease;
    --synxBg: #f6f6f6;
    --synxC: #2f3337;
    --synxOrange: #b75501;
    --synxBlue: #015692;
    --synxGreen: #54790d;
    --synxRed: #f15a5a;
    --synxGray: #656e77;
    --darkT: #fffdfc;
    --darkTa: #989b9f;
    --darkU: #8775f5;
    --darkB: #1e1e1e;
    --darkBa: #2d2d30;
    --darkBs: #1e1e1e;
    --page-1: #ed143d;
    --page-2: #f7f3f6;
    --page-3: #fffdfc;
    --page-4: #f7f3f6;
    --page-5: #fffdfc;
    --page-6: #ed143d;
    --page-7: #fffdfc;
    --page-9: #fff;
    --colorM-STU: #ed143d;
    --colorF-STU: #fffdfc;
    --colorMain-S: #ed143d;
    --headerC-S: #fffdfc;
    --fotT-S: #fffdfc;
    --mnclr: #181087;

}

/* FONT DM SANS */
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Fp2ywxg089UriCZa4ET-DNl0.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Fp2ywxg089UriCZa4Hz-D.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZaw7ByWB3wTyCg.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZaw7ByWCXwT.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZawpBqWB3wTyCg.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZawpBqWCXwT.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBamC2QX.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBimCw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBamC2QX.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBimCw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

/* Standar CSS */
::selection {
    color: #fff;
    background: var(--linkC)
}

*,
::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(--fontH);
    color: var(--headC)
}

h1 {
    font-size: 1.9rem
}

h2 {
    font-size: 1.7rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1.4rem
}

h5 {
    font-size: 1.3rem
}

h6 {
    font-size: 1.2rem
}

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

a:hover {
    opacity: .9;
    transition: opacity .1s
}

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;
    outline: 0
}

input::placeholder {
    color: rgba(0, 0, 0, .5)
}

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

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

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

svg.c-1 {
    fill: var(--iconCa)
}

svg.c-2 {
    fill: var(--iconCs);
    opacity: .4
}
 ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 2em;
}
.hidden {
    display: none
}

.invisible {
    visibility: hidden
}

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

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

.free::after,
.new::after {
    display: inline-block;
    content: 'Free!';
    color: var(--linkC);
    font-size: 12px;
    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(--fontB);
    font-size: 14px;
    color: var(--bodyC);
    background: var(--bodyB);
    -webkit-font-smoothing: antialiased;
}

.secIn {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    max-width: var(--contentW)
}

/* Notif Section */
.ntfC {
    display: flex;
    align-items: center;
    position: relative;
    min-height: var(--notifH);
    background: var(--notifU);
    color: var(--notifC);
    padding: 10px 15px;
    font-size: 13px;
    transition: var(--trans-1);
    overflow: hidden;
    border-radius: 10px;
    margin: 1em 0 0
}

.ntfC::before {
    content: '';
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, .15);
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -12px;
    left: -12px;
    opacity: .1
}

.ntfC .secIn {
    width: 100%;
    position: relative
}

.ntfC .c {
    display: flex;
    align-items: center
}

.ntfT {
    width: 100%;
    padding-right: 15px;
    text-align: center
}

.ntfT a {
    color: var(--notifL);
    font-weight: 700
}

.ntfI:checked~.ntfC {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden
}

.ntfA {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: initial
}

.ntfA>a {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-block;
    margin-left: 10px;
    padding: 8px 12px;
    border-radius: 3px;
    background: var(--notifL);
    color: #fffdfc;
    font-size: 12px;
    font-weight: 400;
    box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
    text-decoration: none
}

/* Fixed/Pop-up Element */
.fixL {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: -100%;
    z-index: 20;
    transition: var(--trans-1);
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden
}

.fixLi,
.fixL .cmBri {
    width: 100%;
    max-width: 680px;
    max-height: calc(100% - 60px);
    border-radius: 16px;
    transition: inherit;
    z-index: 3;
    display: flex;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05)
}

.fixLs {
    padding: 60px 20px 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    background: var(--contentB)
}

.fixH,
.mnH {
    display: flex;
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
    z-index: 2
}

.fixH .cl {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    flex-shrink: 0;
    min-width: 40px
}

.fixH .c::after,
.ntfC .c::after,
.mnH .c::after {
    content: '\2715';
    line-height: 18px;
    font-size: 14px
}

.fixT::before {
    content: attr(data-text);
    flex-grow: 1;
    padding: 16px 10px;
    font-size: 90%;
    opacity: .7
}

.fixT .c::before,
.mnH .c::before {
    content: attr(aria-label);
    font-size: 11px;
    margin: 0 8px;
    opacity: .6
}

.fixi:checked~.fixL,
#comment:target .fixL {
    margin-bottom: 0;
    opacity: 1;
    visibility: visible
}

.fixi:checked~.fixL .fCls,
#comment:target .fixL .fCls,
.BlogSearch input:focus~.fCls {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px)
}

.shBri {
    max-width: 520px
}

.fnBr {
    max-width: 480px
}

/* Display Flex */
.bIc {
    display: flex;
    align-items: center
}

/* Navbar */
.navbar {
    background: var(--navB);
    height: var(--navH);
    color: var(--navT);
    overflow: hidden
}

.navR .section {
    justify-content: flex-end
}

.navIn svg,
header svg {
    width: 20px;
    height: 20px;
    fill: var(--navI);
    opacity: .8
}

.navIn svg.line {
    fill: none;
    stroke: var(--navI)
}

.navIn .section {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    width: calc(100% + 14px);
    left: -7px;
    right: -7px
}

.navIn .section>* {
    margin: 0 7px
}

.navIn .a {
    color: inherit
}

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

.mLang {
    align-items: baseline;
    font-size: 13px
}

.mLang,
.mSoc {
    display: flex;
    position: relative;
    width: calc(100% + 14px);
    left: -7px;
    right: -7px
}

.mLang .a {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.mLang .a::before {
    content: attr(data-text)
}

.mLang li.u {
    font-size: 12px;
    text-transform: uppercase
}

.mLang li:not(:last-child) {
    display: flex;
    align-items: center
}

.mLang li:not(:last-child)::after {
    content: '';
    height: 14px;
    border-left: 1px solid #999;
    margin: 0 5px;
    opacity: .7;
    flex: 0 0
}

.mLang span,
.mSoc span {
    opacity: .5
}

.mSoc>* {
    position: relative
}

.mSoc svg {
    z-index: 1
}

.mSoc svg {
    width: 19px;
    height: 19px;
    opacity: .8
}

/* Header */
header {
    width: 100%;
    z-index: 10;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

header.stick {
    border-bottom: var(--headerL) solid var(--contentL)
}

header a {
    color: inherit
}

header svg {
    fill: var(--headerI)
}

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

.headCn {
    position: relative;
    height: var(--headerH);
    color: var(--headerC);
    background: var(--headerB)
}

.headIn,
.navIn {
    display: flex;
    justify-content: space-between;
    height: 100%;
    position: relative
}

.headL {
    display: flex;
    align-items: center;
    min-width: 200px;
    max-width: 300px;
    /* change this to increase header title width */
}

.headI {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%
}

.headIc {
    font-size: 11px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0
}

.headIc>* {
    position: relative
}

.headIc svg {
    z-index: 1
}

ul.headIc {
    position: relative;
    width: calc(100% + 14px);
    left: -7px;
    right: -7px;
    justify-content: flex-start;
    flex-direction: row-reverse
}

ul.headIc li {
    margin: 0 2px
}

/* Header Widget */
.Header {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center
}

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

.Header .headH {
    display: block;
    color: inherit;
    font-size: var(--headerT);
    font-weight: var(--headerW)
}

.Header .headH.hasSub {
    display: flex;
    align-items: baseline
}

.Header .headTtl {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    font-weight: bold;
}

.Header .headSub {
    margin: 0 5px;
    font: 400 11px var(--fontB);
    white-space: nowrap;
    max-width: 60px;
    opacity: .6
}

.Header .headSub::before {
    content: attr(data-text)
}

/* Header Icon */
.tIc {
    width: 30px;
    height: 30px;
    justify-content: center
}

.tIc::after {
    content: '';
    background: var(--transB);
    border-radius: 12px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: var(--trans-1);
    opacity: 0;
    visibility: hidden
}

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

.tDL .d2,
.drK .tDL .d1 {
    display: none
}

/* mainNav */
.mnBr ul,
.topM ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.mnMn svg,
.tpMn svg {
    flex-shrink: 0
}

.mnMn svg.d,
.tpMn svg.d {
    width: 14px;
    height: 14px
}

/* mainIn Section */
.mainIn {
    padding: 20px 0 40px;
}

.blogCont {
    flex: 1 0;
    position: relative
}

.blogCont .section:not(.no-items),
.blogCont .widget:not(:first-child),
.adSticky:not(.no-items) {
    margin-top: 40px
}

.blogCont .section:first-child {
    margin-top: 0
}

.blogAd .section:not(.no-items) {
    margin-bottom: 40px
}

.blogM {
    flex-wrap: wrap;
    justify-content: center
}

.blogIn {
    flex-grow: 1
}

.sidebar {
    max-width: 500px;
    margin: 50px auto 0
}

.sideSticky,
.adSticky {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--headerH) + 10px)
}

.onPs .mainbar,
.onBl .mainbar {
    max-width: var(--postW)
}

.onPg .mainbar {
    max-width: var(--pageW)
}

/* blogTopc and ToC */
.topM a {
    color: inherit
}

.tpMn .a,
.tpMn ul li>* {
    display: flex;
    align-items: center;
    padding: 8px 5px;
    border-radius: 8px;
    position: relative;
    width: calc(100% + 20px);
    left: -10px;
    right: -10px;
    transition: var(--trans-1)
}

.tpMn .a>* {
    margin: 0 5px
}

.tpMn .n,
.tpMn ul li>* {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 0 calc(100% - 64px)
}

.tpMn ul {
    margin-bottom: 10px
}

.tpMn ul li>* {
    opacity: .8;
    padding: 8px 10px
}

.tpMn ul li>*:hover {
    opacity: 1
}

.tpMn .a:hover,
.tpMn ul li a:hover {
    color: var(--linkC);
    background: rgba(0, 0, 0, .05)
}

.tpMn li.br::after {
    content: '';
    display: block;
    border-bottom: 1px solid var(--contentL);
    margin: 12px 0
}

.tpMn details summary {
    list-style: none;
    outline: none;
    cursor: default
}

.tpMn details summary::-webkit-details-marker {
    display: none
}

.tpMn details[open] svg.d {
    transform: rotate(180deg)
}

.tocI ol ol ol {
    display: none
}

.tocI ol {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.5em
}

.tocI ol {
    counter-reset: toc-count
}

.tocI ol ol,
.tocI li:not(:last-child) {
    margin-bottom: 5px
}

.tocI li li:first-child {
    margin-top: 5px
}

.tocI li {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.tocI li::before {
    flex: 0 0 23px;
    content: counters(toc-count, '.')'. ';
    counter-increment: toc-count
}

.tocI li a {
    flex: 1 0 calc(100% - 23px)
}

.tocI li li::before {
    flex: 0 0 28px;
    content: counters(toc-count, '.')
}

.tocI li li a {
    flex: 1 0 calc(100% - 28px)
}

.tocI>ol>li>ol {
    flex: 0 0 calc(100% - 23px)
}

.tocI>ol>li>ol ol {
    flex: 0 0 calc(100% - 28px)
}

.tocI a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.tocI a:hover {
    text-decoration: underline
}

/* Footer */
footer {
    font-size: 97%;
    line-height: 1.8em;
    padding: 25px 0 25px;
    border-top: var(--fotL) solid var(--contentL);
    color: var(--fotT);
    background: var(--fotB)
}

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

footer a {
    color: inherit
}

.cdtIn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: calc(100%);
    left: 0;
    right: 0
}

.cdtIn>* {
    margin: 0 0
}

.cdtIn .HTML {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.cdtIn .PageList {
    flex-shrink: 0;
    position: relative
}

.cdtIn .mSoc {
    justify-content: flex-end
}

.fotCd {
    position: relative;
    display: inline
}

.fotCd .creator {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -22px
}

.ftL {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: calc(100% + 8px);
    left: -4px;
    right: -4px
}

.ftL>* {
    margin: 0 4px
}

.ftL svg {
    width: 20px;
    height: 20px;
    stroke: var(--fotT)
}

.ftL svg.u {
    width: 14px;
    height: 14px
}

@media screen and (min-width:641px) {
    .ftL {
        display: none
    }

    .ftMn,
    .ftMn li {
        display: inline-flex;
        align-items: baseline
    }

    .ftMn>*:not(:last-child)::after {
        content: '\00B7';
        opacity: .7;
        margin: 0 10px
    }

    .ftMn span {
        opacity: .6
    }

    .ftMn a {
        opacity: .8
    }

    .ftMn a:hover {
        color: var(--linkC)
    }
}

@media screen and (max-width:640px) {
    .cdtIn {
        align-items: center
    }

    .cdtIn .PageList {
        margin-left: auto
    }

    .cdtIn .mSoc>*:nth-child(4) {
        display: none
    }

    .ftMn {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 180px;
        background: var(--contentB);
        box-shadow: 0 5px 25px -3px rgba(0, 0, 0, .1);
        font-size: 14px;
        transition: var(--trans-1);
        border-radius: 16px 16px 5px 16px;
        z-index: 2;
        opacity: 0;
        visibility: hidden
    }

    .ftMn li>* {
        display: block;
        padding: 8px 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: .8;
        line-height: normal
    }

    .ftMn li:first-child>* {
        padding-top: 15px
    }

    .ftMn li:last-child>* {
        padding-bottom: 15px
    }

    .ftI:checked~.ftMn,
    .ftI:checked~.fCls {
        opacity: 1;
        visibility: visible;
        z-index: 12
    }

    .ftI:checked~.fCls {
        z-index: 11
    }
}

/* Article*/
.onId .blogPts,
.itemFt .itm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    width: calc(100% + 22px);
    left: -11px;
    right: -11px
}

.onId .blogPts>*,
.itemFt .itm>* {
    flex: 0 0 calc(50% - 22px);
    width: calc(50% - 22px);
    margin-bottom: 0;
    margin-left: 11px;
    margin-right: 11px
}

.onId .blogPts {
    align-items: stretch
}

.onId .blogPts>* {
    margin-bottom: 40px;
    padding-bottom: 40px;
    position: relative
}

.onId .blogPts .nAd {
    padding-bottom: 0
}

.onId .blogPts .pInf {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.onId .blogPts.mty {
    display: block;
    width: 100%;
    left: 0;
    right: 0
}

.onId .blogPts.mty .noPosts {
    width: 100%;
    margin: 0;
    padding: 0
}

.blogPts .ntry.noAd .widget,
.Blog~.HTML {
    display: none
}

/* Blog title */
.blogTtl {
    font-size: 14px;
    margin: 0 0 30px;
    width: calc(100% + 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    left: -8px;
    right: -8px
}

.blogTtl .t,
.blogTtl.hm .title {
    margin: 0 8px;
    flex-grow: 1
}

.blogTtl .t span {
    font-weight: 400;
    font-size: 90%;
    opacity: .7
}

.blogTtl .t span::before {
    content: attr(data-text)
}

.blogTtl .t span::after {
    content: '';
    margin: 0 4px
}

.blogTtl .t span.hm::after {
    content: '/';
    margin: 0 8px
}

.blogTtl .g {
    position: relative;
    flex-shrink: 0;
    margin: 0 2px;
    font-size: 12px
}

.blogTtl .g svg {
    width: 20px;
    height: 20px
}

/* Thumbnail */
.pThmb {
    flex: 0 0 calc(50% - 12.5px);
    overflow: hidden;
    position: relative;
    border-radius: 3px;
    margin-bottom: 20px;
    background: var(--transB)
}

.pThmb .thmb {
    display: block;
    position: relative;
    padding-top: 52.335%;
    color: inherit;
    transition: var(--trans-1)
}

.pThmb .thmb amp-img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    max-height: 108%;
    text-align: center;
    transform: translate(-50%, -50%)
}

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

.pThmb:not(.nul)::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, 0));
    animation: shimmer 2s infinite;
    content: ''
}

.pThmb.iyt:not(.nul) .thmb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11.9999V8.43989C4 4.01989 7.13 2.2099 10.96 4.4199L14.05 6.1999L17.14 7.9799C20.97 10.1899 20.97 13.8099 17.14 16.0199L14.05 17.7999L10.96 19.5799C7.13 21.7899 4 19.9799 4 15.5599V11.9999Z'/></svg>") center / 35px no-repeat;
    opacity: 0;
    transition: var(--trans-1)
}

.pThmb.iyt:not(.nul):hover .thmb::after {
    opacity: 1
}

/* Sponsored */
.iFxd {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 6px;
    font-size: 13px;
    line-height: 16px
}

.iFxd>* {
    display: flex;
    align-items: center;
    margin: 0 5px;
    padding: 5px 2.5px;
    border-radius: 8px;
    background: var(--contentB);
    color: inherit;
    box-shadow: 0 8px 25px 0 rgba(0, 0, 0, .1)
}

.iFxd>* svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
    margin: 0 2.5px;
    opacity: .7
}

.iFxd .cmnt {
    padding: 5px;
    color: var(--bodyC)
}

.iFxd .cmnt::after {
    content: attr(data-text);
    margin: 0 2.5px;
    opacity: .7
}

.drK .iFxd>* svg.line {
    stroke: var(--iconC)
}

/* Label */
.pLbls::before,
.pLbls>*::before {
    content: attr(data-text)
}

.pLbls::before {
    opacity: .7
}

.pLbls a:hover {
    text-decoration: underline
}

.pLbls>* {
    color: inherit;
    display: inline;
    padding: 3.5px 0
}

.pLbls>*:not(:last-child)::after {
    content: '/'
}

/* Profile Images and Name */
.im {
    width: 35px;
    height: 35px;
    border-radius: 16px;
    background-color: var(--transB);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center
}

.im svg {
    width: 18px;
    height: 18px;
    opacity: .4
}

.nm::after {
    content: attr(data-text)
}

/* Title and Entry */
.pTtl {
    font-size: 1.2rem;
    line-height: 1.5em
}

.pTtl.itm {
    font-size: var(--postT);
    font-family: var(--fontBa);
    font-weight: 900;
    line-height: 1.3em
}

.pTtl.itm.nSpr {
    margin-bottom: 30px
}

.aTtl a:hover {
    color: var(--linkC)
}

.aTtl a,
.pSnpt {
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.pEnt {
    margin-top: 40px;
    font-size: var(--postF);
    font-family: var(--fontBa);
    line-height: 1.8em
}

/* Snippet, Description, Headers and Info */
.pHdr.nHdr {
    margin: 0
}

.pHdr {
    width: calc(100% + 8px);
    position: relative;
    left: -4px;
    right: -4px;
    margin-bottom: 3px;
    display: flex;
    align-items: center
}

.pHdr .aNm {
    flex-grow: 1;
    opacity: .8;
    margin: 0 2px;
    display: inline-flex;
    flex-wrap: wrap;
    max-width: calc(100% - 30px);
    line-height: 25px
}

.pHdr .nm,
.pHdr .pLbls {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 2px;
    color: inherit
}

.pHdr .pLbls {
    opacity: .8
}

.pSml {
    font-size: 96%
}

.pSnpt {
    -webkit-line-clamp: 2;
    margin: 10px 0 0;
    font-family: var(--fontBa);
    font-size: 14px;
    line-height: 1.6em;
    opacity: .7
}

.pDesc {
    font-size: 16px;
    line-height: 1.5em;
    margin: 8px 0 25px;
    opacity: .7
}

.pInf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 10px
}

.pInf.nTm {
    margin: 0
}

.pInf.nSpr .pJmp {
    opacity: 1
}

.pInf.nSpr .pJmp::before {
    content: attr(aria-label)
}

.pInf.ps {
    justify-content: flex-start;
    align-items: center;
    margin-top: 25px;
    position: relative;
    left: -4px;
    right: -4px;
    width: calc(100% + 8px)
}

.pInf.ps .pTtmp {
    opacity: 1
}

.pInf.ps .pTtmp::before {
    content: attr(data-date) ' '
}

.pInf.ps .pTtmp::after {
    display: inline;
    line-height: 1.5em
}

.pInf.ps.nul {
    display: none
}

.pInf .pIm {
    flex-shrink: 0;
    margin: 0 4px
}

.pInf .pNm {
    flex-grow: 1;
    width: calc(100% - 108px);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline
}

.pInf .pNm.l {
    display: none
}

.pInf .pDr {
    opacity: .7;
    display: inline-block;
    margin: 0 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%
}

.pInf .pDr>*:not(:first-child)::before {
    content: '\00B7';
    margin: 0 5px
}

.pInf .pIn {
    display: inline
}

.pInf .nm {
    margin: 0 4px
}

.pInf .n .nm::before,
.pHdr .n .nm::before {
    content: attr(data-write) ' ';
    opacity: .7
}

.pInf .im {
    width: 28px;
    height: 28px
}

.aTtmp {
    opacity: .7
}

.aTtmp,
.pJmp {
    overflow: hidden
}

.pJmp::before,
.iTtmp::before {
    content: attr(data-text);
    display: block;
    line-height: 25px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.pJmp {
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: var(--trans-2)
}

.pJmp::before {
    content: attr(aria-label)
}

.pJmp svg {
    height: 18px;
    width: 18px;
    stroke: var(--linkC);
    flex-shrink: 0
}

.ntry:hover .pJmp,
.itm:hover .pJmp {
    opacity: 1
}

/* Blog pager */
.blogPg {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 90%;
    font-family: var(--fontB);
    line-height: 20px;
    color: #fffdfc;
    margin: 30px 0 40px;
    max-width: 100%
}

.blogPg>* {
    display: flex;
    align-items: center;
    padding: 10px 13px;
    margin-bottom: 10px;
    color: inherit;
    background: var(--linkB);
    border-radius: 3px
}

.blogPg>* svg {
    width: 18px;
    height: 18px;
    stroke: var(--darkT);
    stroke-width: 1.5
}

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

.blogPg .jsLd {
    margin-left: auto;
    margin-right: auto
}

.blogPg .nwLnk::before,
.blogPg .jsLd::before {
    display: none
}

.blogPg .nwLnk::after,
.blogPg .jsLd::after {
    content: attr(data-text);
    margin: 0 8px
}

.blogPg .olLnk::before {
    margin: 0 8px
}

.blogPg .nPst,
.blogPg .current {
    background: var(--contentL);
    color: var(--bodyCa)
}

.blogPg .nPst.jsLd svg {
    fill: var(--darkTa);
    stroke: var(--darkTa)
}

.blogPg .nPst svg.line {
    stroke: var(--darkTa)
}

/* Breadcrumb */
.brdCmb {
    margin-bottom: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.brdCmb a {
    color: inherit
}

.brdCmb>*:not(:last-child)::after {
    content: '/';
    margin: 0 4px;
    font-size: 90%;
    opacity: .6
}

.brdCmb>* {
    display: inline
}

.brdCmb .tl::before {
    content: attr(data-text)
}

.brdCmb .hm a {
    font-size: 90%;
    opacity: .7
}

/* Article Style */
.pS h1:target,
.pS h2:target,
.pS h3:target,
.pS h4:target,
.pS h5:target,
.pS h6:target {
    padding-top: var(--headerH);
    margin-top: 0
}

/* Paragraph */
.pS p {
    margin: 1.7em 0
}

.pIndent {
    text-indent: 2.5rem
}

.onIt:not(.Rtl) .dropCap {
    float: left;
    margin: 4px 8px 0 0;
    font-size: 55px;
    line-height: 45px;
    opacity: .8
}

.pS hr {
    margin: 3em 0;
    border: 0
}

.pS hr::before {
    content: '\2027 \2027 \2027';
    display: block;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.6em;
    text-indent: 0.6em;
    opacity: .8;
    clear: both
}

.pRef {
    display: block;
    font-size: 14px;
    line-height: 1.5em;
    opacity: .7;
    word-break: break-word
}

/* Img and Ad */
.pS img {
    display: inline-block;
    border-radius: 3px;
    height: auto !important
}

.pS img.full {
    display: block !important;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
    max-width: none
}

.pS .widget,
.ps .pAd>* {
    margin: 40px 0
}

/* Note */
.note {
    position: relative;
    padding: 16px 20px 16px 50px;
    background: #ed143d;
    color: #fff;
    font-size: .85rem;
    font-family: var(--fontB);
    line-height: 1.6em;
    border-radius: 10px;
    overflow: hidden;
    font-size: 10px
}

.note::before {
    content: '';
    width: 60px;
    height: 60px;
    background: #df0e0e;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -12px;
    left: -12px;
    opacity: 1
}

.note::after {
    content: url('data:image/svg+xml;charset=utf-8,<svg style="width:24px;height:24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M19,15V7L15,11L13,9L7,15H19M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"/></svg>');
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 20px;
    min-width: 15px;
    text-align: center;
    width: 20px;
    height: 20px
}

.note.wr {
    background: #ffdfdf;
    color: #48525c
}

.note.wr::before {
    background: #e65151
}

.note.wr::after {
    content: '\0021'
}

/* Ext link */
.extL::after {
    content: '';
    width: 14px;
    height: 14px;
    display: inline-block;
    margin: 0 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='2' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>") center / 16px no-repeat
}

/* Scroll img */
.psImg {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    margin: 2em 0;
    position: relative;
    left: -7px;
    right: -7px;
    width: calc(100% + 14px)
}

.psImg>* {
    width: calc(50% - 14px);
    margin: 0 7px 14px;
    position: relative
}

.psImg img {
    display: block
}

.scImg>* {
    width: calc(33.3% - 14px);
    margin: 0 7px
}

.btImg label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    transition: var(--trans-1);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    color: var(--darkT);
    font-size: 13px;
    font-family: var(--fontB)
}

.hdImg .shImg {
    width: 100%;
    margin: 0;
    left: 0;
    right: 0;
    transition: var(--trans-1);
    max-height: 0;
    opacity: 0;
    visibility: hidden
}

.inImg:checked~.hdImg .shImg {
    max-height: 1000vh;
    opacity: 1;
    visibility: visible
}

.inImg:checked~.hdImg .btImg label {
    opacity: 0;
    visibility: hidden
}

/* Post related */
.pRelate {
    margin: 40px 0;
    padding: 20px 0;
    border: 1px solid #989b9f;
    border-left: 0;
    border-right: 0;
    font-size: 14px;
    line-height: 1.8em
}

.pRelate b {
    font-weight: 400;
    margin: 0;
    opacity: .8
}

.pRelate ul,
.pRelate ol {
    margin: 8px 0 0;
    padding: 0 20px
}

/* Blockquote */
blockquote,
.cmC i[rel=quote] {
    position: relative;
    font-size: .97rem;
    opacity: .8;
    line-height: 1.6em;
    margin-left: 0;
    margin-right: 0;
    padding: 5px 20px;
    border-left: 2px solid var(--contentL)
}

blockquote.s-1,
details.sp {
    font-size: .93rem;
    padding: 25px 25px 25px 45px;
    border: 1px solid #989b9f;
    border-left: 0;
    border-right: 0;
    line-height: 1.7em
}

blockquote.s-1::before {
    content: '\201D';
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 60px;
    line-height: normal;
    opacity: .5
}

/* Table */
.ps table {
    margin: 0 auto;
    font-size: 14px;
    font-family: var(--fontB)
}

.ps table:not(.tr-caption-container) {
    min-width: 90%;
    border: 1px solid var(--contentL);
    border-radius: 3px;
    overflow: hidden
}

.ps table:not(.tr-caption-container) td {
    padding: 16px
}

.ps table:not(.tr-caption-container) tr:not(:last-child) td {
    border-bottom: 1px solid var(--contentL)
}

.ps table:not(.tr-caption-container) tr:nth-child(2n+1) td {
    background: rgba(0, 0, 0, .01)
}

.ps table th {
    padding: 16px;
    text-align: inherit;
    border-bottom: 1px solid var(--contentL)
}

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

/* Img caption */
figure {
    margin-left: 0;
    margin-right: 0
}

.ps .tr-caption,
.psCaption,
figcaption {
    display: block;
    font-size: 14px;
    line-height: 1.6em;
    font-family: var(--fontB);
    opacity: .7
}

/* Syntax */
.pre {
    background: var(--synxBg);
    color: var(--synxC);
    direction: ltr
}

.pre:not(.tb) {
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    margin: 1.7em auto;
    font-family: var(--fontC)
}

.pre pre {
    margin: 0;
    color: inherit;
    background: inherit
}

.pre:not(.tb)::before,
.cmC i[rel=pre]::before {
    content: '</>';
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    background: inherit;
    color: var(--synxGray);
    font-size: 10px;
    padding: 0 10px;
    z-index: 2;
    line-height: 30px
}

.pre:not(.tb).html::before {
    content: '.html'
}

.pre:not(.tb).css::before {
    content: '.css'
}

.pre:not(.tb).js::before {
    content: '.js'
}

pre,
.cmC i[rel=pre] {
    display: block;
    position: relative;
    font-family: var(--fontC);
    font-size: 13px;
    line-height: 1.6em;
    border-radius: 3px;
    background: var(--synxBg);
    color: var(--synxC);
    padding: 30px 20px 20px;
    margin: 1.7em auto;
    -moz-tab-size: 2;
    tab-size: 2;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    overflow: auto;
    direction: ltr;
    white-space: pre
}

pre i {
    color: var(--synxBlue);
    font-style: normal
}

pre i.block {
    color: #fff;
    background: var(--synxBlue)
}

pre i.green {
    color: var(--synxGreen)
}

pre i.gray {
    color: var(--synxGray)
}

pre i.red {
    color: var(--synxOrange)
}

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

code {
    display: inline;
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
    line-height: inherit;
    color: var(--synxC);
    background: #f2f3f5;
    font-family: var(--fontC)
}

/* Multi syntax */
.pre.tb {
    border-radius: 5px
}

.pre.tb pre {
    margin: 0;
    background: inherit
}

.pre.tb .preH {
    font-size: 13px;
    border-color: rgba(0, 0, 0, .05);
    margin: 0
}

.pre.tb .preH>* {
    padding: 13px 20px
}

.pre.tb .preH::after {
    content: '</>';
    font-size: 10px;
    font-family: var(--fontC);
    color: var(--synxGray);
    padding: 15px;
    margin-left: auto
}

.pre.tb>:not(.preH) {
    display: none
}

.pS input[id*="1"]:checked~div[class*="C-1"],
.pS input[id*="2"]:checked~div[class*="C-2"],
.pS input[id*="3"]:checked~div[class*="C-3"],
.pS input[id*="4"]:checked~div[class*="C-4"] {
    display: block
}

/* ToC */
.pS details summary {
    list-style: none;
    outline: none
}

.pS details summary::-webkit-details-marker {
    display: none
}

details.sp {
    padding: 20px 15px
}

details.sp summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

details.sp summary::after {
    content: attr(data-show);
    font-size: 12px;
    opacity: .7;
    cursor: pointer
}

details.sp[open] summary::after {
    content: attr(data-hide)
}

details.toc a:hover {
    text-decoration: underline
}

details.toc a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: inherit
}

details.toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.6em;
    counter-reset: toc-count
}

details.toc ol ol ol ol {
    display: none
}

details.toc ol ol,
.tocIn li:not(:last-child) {
    margin-bottom: 5px
}

details.toc li li:first-child {
    margin-top: 5px
}

details.toc li {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

details.toc li::before {
    flex: 0 0 23px;
    content: counters(toc-count, '.')'. ';
    counter-increment: toc-count
}

details.toc li a {
    flex: 1 0 calc(100% - 23px)
}

details.toc li li::before {
    flex: 0 0 28px;
    content: counters(toc-count, '.')
}

details.toc li li a {
    flex: 1 0 calc(100% - 28px)
}

details.toc li li li::before {
    flex: 0 0 45px
}

details.toc li li li a {
    flex: 1 0 calc(100% - 45px)
}

details.toc .toC>ol {
    margin-top: 1em
}

details.toc .toC>ol>li>ol {
    flex: 0 0 calc(100% - 23px)
}

details.toc .toC>ol>li>ol ol {
    flex: 0 0 calc(100% - 28px)
}

details.toc .toC>ol>li>ol ol ol {
    flex: 0 0 calc(100% - 45px)
}

/* Accordion */
.showH {
    margin: 1.7em 0;
    font-size: .93rem;
    font-family: var(--fontB);
    line-height: 1.7em
}

details.ac {
    padding: 18px 0;
    border-bottom: 1px solid var(--contentL)
}

details.ac:first-child {
    border-top: 1px solid var(--contentL)
}

details.ac summary {
    font-weight: 700;
    cursor: default;
    display: flex;
    align-items: baseline;
    transition: var(--trans-1)
}

details.ac summary::before {
    content: '\203A';
    flex: 0 0 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 5px;
    font-weight: 400;
    font-size: 1.33rem;
    color: inherit
}

details.ac[open] summary {
    color: var(--linkC)
}

details.ac:not(.alt)[open] summary::before {
    transform: rotate(90deg);
    padding: 0 0 0 5px;
    justify-content: center
}

details.ac.alt summary::before {
    content: '\002B';
    padding: 0 2px
}

details.ac.alt[open] summary::before {
    content: '\2212'
}

details.ac .aC {
    padding: 0 25px;
    opacity: .9
}

/* Tabs */
.tbHd {
    display: flex;
    border-bottom: 1px solid var(--contentL);
    margin-bottom: 30px;
    font-size: 14px;
    font-family: var(--fontB);
    line-height: 1.6em;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch
}

.tbHd>* {
    padding: 12px 15px;
    border-bottom: 1px solid transparent;
    transition: var(--trans-1);
    opacity: .6;
    white-space: nowrap;
    scroll-snap-align: start
}

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

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

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

.pS input[id*="1"]:checked~.tbHd label[for*="1"],
.pS input[id*="2"]:checked~.tbHd label[for*="2"],
.pS input[id*="3"]:checked~.tbHd label[for*="3"],
.pS input[id*="4"]:checked~.tbHd label[for*="4"] {
    border-color: var(--linkB);
    opacity: 1
}

.pS input[id*="1"]:checked~.tbCn div[class*="Text-1"],
.pS input[id*="2"]:checked~.tbCn div[class*="Text-2"],
.pS input[id*="3"]:checked~.tbCn div[class*="Text-3"],
.pS input[id*="4"]:checked~.tbCn div[class*="Text-4"] {
    display: block
}

.tbHd.stick {
    position: -webkit-sticky;
    position: sticky;
    top: var(--headerH);
    background: var(--bodyB)
}

/* Split */
.ps .blogPg {
    font-size: 13px;
    justify-content: center;
    position: relative;
    width: calc(100% + 8px);
    left: -4px;
    right: -4px
}

.ps .blogPg>* {
    padding: 8px 15px;
    margin: 0 4px 8px
}

/* Youtube fullpage */
.videoYt {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: 5px
}

.videoYt iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0
}

/* Lazy Youtube */
.lazyYt {
    background: var(--synxBg);
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    border-radius: 5px
}

.lazyYt img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: .95
}

.lazyYt img,
.lazyYt iframe,
.lazyYt .play {
    position: absolute
}

.lazyYt iframe {
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0
}

.lazyYt .play {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: all .5s ease;
    display: block;
    width: 70px;
    height: 70px;
    z-index: 1
}

.lazyYt .play svg {
    width: inherit;
    height: inherit;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke-width: 8
}

.lazyYt .play .c {
    stroke: rgba(255, 255, 255, .85);
    stroke-dasharray: 650;
    stroke-dashoffset: 650;
    transition: all .4s ease-in-out;
    opacity: .3
}

.lazyYt .play .t {
    stroke: rgba(255, 255, 255, .75);
    stroke-dasharray: 240;
    stroke-dashoffset: 480;
    transition: all .6s ease-in-out;
    transform: translateY(0)
}

.lazyYt .play:hover .t {
    animation: nudge .6s ease-in-out;
    -webkit-animation: nudge .6s ease-in-out
}

.lazyYt .play:hover .t,
.lazyYt .play:hover .c {
    stroke-dashoffset: 0;
    opacity: .7;
    stroke: #FF0000
}

.nAmp .lazyYt {
    display: none
}

/* Button */
.button {
    display: inline-flex;
    align-items: center;
    margin: 10px 0;
    padding: 12px 15px;
    outline: 0;
    border: 0;
    border-radius: 3px;
    line-height: 20px;
    color: #fffdfc;
    background: var(--linkB);
    font-size: 14px;
    font-family: var(--fontB);
    white-space: nowrap;
    overflow: hidden;
    max-width: 320px
}

.button.ln {
    color: inherit;
    background: transparent;
    border: 1px solid var(--bodyCa)
}

.button.ln:hover {
    border-color: var(--linkB);
    box-shadow: 0 0 0 1px var(--linkB) inset
}

.btnF {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    width: calc(100% + 12px);
    left: -6px;
    right: -6px;
    position: relative
}

.btnF>* {
    margin: 0 6px
}

/* Download btn */
.dlBox {
    max-width: 500px;
    background: #f1f1f0;
    border-radius: 10px;
    padding: 12px;
    margin: 1.7em 0;
    display: flex;
    align-items: center;
    font-size: 14px
}

.dlBox .fT {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    padding: 10px;
    background: rgba(0, 0, 0, .1);
    border-radius: 5px
}

.dlBox .fT::before {
    content: attr(data-text);
    opacity: .7
}

.dlBox .fT.lazy {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.dlBox .fT.lazy::before {
    display: none
}

.dlBox a {
    flex-shrink: 0;
    margin: 0;
    padding: 10px 12px;
    border-radius: 5px;
    font-size: 13px
}

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

.dlBox .fN {
    flex-grow: 1;
    width: calc(100% - 200px);
    padding: 0 15px
}

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

.dlBox .fS {
    line-height: 16px;
    font-size: 12px;
    opacity: .8
}

/* Icon btn */
.icon {
    flex-shrink: 0;
    display: inline-flex
}

.icon::before {
    content: '';
    width: 18px;
    height: 18px;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center
}

.icon::after {
    content: '';
    padding: 0 6px
}

.icon.dl::before,
.drK .button.ln .icon.dl::before {
    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'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg>")
}

.icon.demo::before {
    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='M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z'/><path d='M10.11 13.6501L13.69 10.0601'/></svg>")
}

.icon.cart:before {
    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>")
}

.button.ln .icon.dl::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308102b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg>")
}

/* Lightbox image */
.zmImg.s {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    margin: 0;
    background: rgba(0, 0, 0, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    -webkit-backdrop-filter: saturate(180%) blur(15px);
    backdrop-filter: saturate(180%) blur(15px)
}

.zmImg.s img {
    display: block;
    max-width: 92%;
    max-height: 92%;
    width: auto;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05)
}

.zmImg.s img.full {
    left: auto;
    right: auto;
    border-radius: 10px;
    width: auto
}

.zmImg::after {
    content: '\2715';
    line-height: 16px;
    font-size: 14px;
    color: #fffdfc;
    background: var(--linkB);
    position: fixed;
    bottom: -20px;
    right: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: var(--trans-1);
    opacity: 0;
    visibility: hidden
}

.zmImg.s::after {
    bottom: 20px;
    right: 20px;
    opacity: 1;
    visibility: visible;
    cursor: pointer
}

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

    .note {
        font-size: 13px
    }

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

    .scImg>* {
        flex: 0 0 80%;
        scroll-snap-align: center
    }

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

@media screen and (max-width:500px) {
    .hdImg {
        width: 100%;
        left: 0;
        right: 0
    }

    .hdImg>*,
    .shImg>* {
        width: 100%;
        margin: 0 0 16px
    }

    .ps .tr-caption,
    .psCaption,
    figcaption {
        font-size: 13px
    }

    .btnF>* {
        flex-grow: 1;
        justify-content: center
    }

    .btnF>*:first-child {
        flex: 0 0 auto
    }

    .dlBox a {
        width: 42px;
        height: 42px;
        justify-content: center
    }

    .dlBox a::after,
    .dlBox .icon::after {
        display: none
    }

    .pS .separator a {
        display: block !important;
        margin: 0 !important
    }
}

/* Author profile */
.admPs {
    display: flex;
    max-width: 480px;
    margin: 30px 0;
    padding: 12px 12px 15px;
    background: var(--contentB);
    border: 1px solid var(--contentL);
    border-radius: 8px;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, .1)
}

.admIm {
    flex-shrink: 0;
    padding: 5px 0 0
}

.admIm .im {
    width: 34px;
    height: 34px
}

.admI {
    flex-grow: 1;
    width: calc(100% - 34px);
    padding: 0 12px
}

.admN::before {
    content: attr(data-write) ' ';
    opacity: .7;
    font-size: 90%
}

.admN::after {
    content: attr(data-text)
}

.admA {
    margin: 5px 0 0;
    font-size: 90%;
    opacity: .9;
    line-height: 1.5em;
    /*display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden*/
}

/* Share btn */
.pSh {
    margin: 15px 0;
    padding: 18px 0;
    border: 1px solid rgba(0, 0, 0, .05);
    border-left: 0;
    border-right: 0
}

.pShc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    width: calc(100% + 18px);
    left: -9px;
    right: -9px;
    font-size: 13px;
    opacity: .8
}

.pShc::before {
    content: attr(data-text);
    margin: 0 9px;
    flex-shrink: 0
}

.pShc>* {
    margin: 0 5px;
    display: flex;
    align-items: center;
    color: inherit
}

.pShc a::after {
    content: attr(data-text);
    margin: 0 3px
}

.pShc svg,
.cpL svg {
    width: 18px;
    height: 18px;
    margin: 0 3px
}

.shL {
    position: relative;
    width: calc(100% + 20px);
    left: -10px;
    right: -10px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.shL>* {
    margin: 0 10px 20px;
    text-align: center
}

.shL>*::after {
    content: attr(data-text);
    font-size: 90%;
    opacity: .7;
    display: block
}

.shL a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 65px;
    height: 65px;
    color: inherit;
    margin: 0 auto 5px;
    padding: 8px;
    border-radius: 26px;
    background: #f1f1f0
}

.shL svg {
    opacity: .8
}

.cpL {
    padding-bottom: 15px
}

.cpL::before {
    content: attr(data-text);
    display: block;
    margin: 0 0 15px;
    opacity: .8
}

.cpL svg {
    margin: 0 4px;
    opacity: .7
}

.cpL input {
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(8, 16, 43, .4);
    padding: 18px 8px;
    flex-grow: 1
}

.cpL label {
    color: var(--linkC);
    display: flex;
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    padding: 0 8px
}

.cpLb {
    display: flex;
    align-items: center;
    position: relative;
    background: #f1f1f0;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    padding: 0 8px
}

.cpLb:hover {
    border-color: rgba(0, 0, 0, .42);
    background: #ececec
}

.cpLn span {
    display: block;
    padding: 5px 14px 0;
    font-size: 90%;
    color: #2e7b32;
    transition: var(--trans-1);
    animation: fadein 2s ease forwards;
    opacity: 0;
    height: 22px
}

/* Comments */
.pCmnts {
    margin-top: 50px
}

.cmDis {
    text-align: center;
    margin-top: 20px;
    opacity: .7
}

.cmMs {
    margin-bottom: 20px
}

.cm iframe {
    width: 100%
}

.cm:not(.cmBr) .cmBrs {
    background: transparent;
    position: relative;
    padding: 60px 20px 0;
    width: calc(100% + 40px);
    left: -20px;
    right: -20px
}

.cmH h3.title {
    margin: 0;
    flex-grow: 1;
    padding: 16px 10px
}

.cmH .s {
    margin: 0 14px
}

.cmH .s::before {
    content: attr(data-text);
    margin: 0 6px;
    opacity: .7;
    font-size: 90%
}

.cmH .s::after {
    content: '\296E';
    line-height: 18px;
    font-size: 17px
}

.cmAv {
    flex-shrink: 0;
    width: 35px
}

.cmAv .im {
    width: 35px;
    height: 35px;
    border-radius: 50%
}

.cmIn {
    flex-grow: 1;
    width: 100%;
    position: relative
}

.cmBd.del .cmCo {
    font-style: italic;
    font-size: 90%;
    line-height: normal;
    border: 1px dashed rgba(0, 0, 0, .2);
    border-radius: 3px;
    margin: .5em 0;
    padding: 15px;
    opacity: .7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cmHr {
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cmHr .d {
    font-size: 90%;
    color: var(--darkTa)
}

.cmHr.a .n {
    display: inline-flex;
    align-items: center
}

.cmHr.a .n::after {
    content: '\2714';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 8px;
    background: #519bd6;
    color: #fefefe;
    border-radius: 50%;
    margin-left: 3px
}

.cmCo {
    line-height: 1.4em;
    opacity: .9
}

.cmCo img {
    margin-top: 1em;
    margin-bottom: 1em
}

.cmC i[rel=image] {
    font-size: 90%;
    display: block;
    position: relative;
    min-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 1em auto
}

.cmC i[rel=image]::before {
    content: 'This feature isn\0027t available!';
    border: 1px dashed rgba(0, 0, 0, .2);
    border-radius: 3px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--contentB)
}

.cmC i[rel=pre],
.cmC i[rel=quote] {
    margin-top: 1em;
    margin-bottom: 1em;
    font-style: normal;
    line-height: inherit;
    padding: 20px;
    opacity: 1
}

.cmC i[rel=pre]::before {
    display: block;
    width: auto
}

.cmC i[rel=pre] {
    text-align: left
}

.cmC i[rel=quote] {
    display: block;
    font-style: italic;
    font-size: inherit;
    padding: 5px 15px
}

.cmAc {
    margin-top: 10px
}

.cmAc a {
    font-size: 90%;
    color: inherit;
    opacity: .7;
    display: inline-flex
}

.cmAc a::before {
    content: '\2934';
    line-height: 18px;
    font-size: 16px;
    transform: rotate(90deg)
}

.cmAc a::after {
    content: attr(data-text);
    margin: 0 4px
}

.cmR {
    margin: 10px calc(25px + 8px) 0
}

.cmRp~.cmAc,
.cmBd.del~.cmAc,
.onIt:not(.Rtl) .cmHr .date {
    display: none
}

.cmRi:checked~.cmRp .thTg {
    margin-bottom: 0
}

.cmRi:checked~.cmRp .thTg::before {
    content: attr(aria-label)
}

.cmRi:checked~.cmRp .thCh,
.cmRi:checked~.cmRp .cmR {
    display: none
}

.cmAl:checked~.cm .cmH .s::before {
    content: attr(data-new)
}

.cmAl:checked~.cm .cmCn>ol {
    flex-direction: column-reverse
}

.thTg {
    display: inline-flex;
    align-items: center;
    margin: 15px 0 18px;
    font-size: 90%
}

.thTg::after {
    content: '';
    width: 20px;
    border-bottom: 1px solid var(--widgetTac);
    opacity: .5;
    margin: 0 10px
}

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

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

.cmCn li {
    display: block;
    padding-bottom: 25px;
    position: relative
}

.cmCn li .cmRbox {
    margin-top: 20px;
    flex-grow: 1
}

.cmCn li li {
    padding-bottom: 15px;
    display: flex;
    width: calc(100% + 8px);
    left: -4px;
    right: -4px
}

.cmCn li li:last-child {
    padding-bottom: 0
}

.cmCn li li .cmAv {
    width: calc(25px + 8px);
    padding: 0 4px
}

.cmCn li li .cmAv .im {
    width: 25px;
    height: 25px
}

.cmCn li li .cmIn {
    width: calc(100% - 25px - 8px);
    padding: 0 4px
}

.cmHl li li .cmIn::before {
    content: '';
    border-left: 1px solid var(--contentL);
    position: absolute;
    left: -18px;
    top: 30px;
    height: calc(100% - 20px)
}

.cmHl li li:last-child .cmIn::before {
    height: 100%
}

.cmHl.noNew li li:last-child .cmIn::before {
    height: calc(100% - 30px)
}

.cmHl li li .cmHr .d::before {
    content: '\00B7';
    display: inline-block;
    text-indent: 2px;
    letter-spacing: 4px
}

.cmHl>li:not(:last-child) {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--contentL)
}

.cmHl>li>.cmAv {
    position: absolute
}

.cmHl>li>.cmIn>.cmBd .cmHr {
    height: 36px;
    padding-left: calc(35px + 8px);
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: normal
}

/* Comments Show/Hide */
#comment:target {
    margin: 0;
    padding-top: 60px
}

.cmSh:checked~.cmShw,
.cmShw~.cm:not(.cmBr),
#comment:target .cmShw,
#comment:target .cmSh:checked~.cm:not(.cmBr) {
    display: none
}

.cmSh:checked~.cm:not(.cmBr),
#comment:target .cm:not(.cmBr),
#comment:target .cmSh:checked~.cmShw {
    display: block
}

.cmBtn {
    display: block;
    margin: 0;
    padding: 20px;
    text-align: center;
    max-width: 100%
}

.cmBtn.ln:hover {
    color: var(--linkB)
}

/* Comments Pop-up */
#comment:target .cmSh:checked~.cm.cmBr {
    bottom: -100%;
    opacity: 0;
    visibility: hidden
}

#comment:target .cmSh:checked~.cm.cmBr .fCls {
    opacity: 0;
    visibility: hidden
}

/* Swich Language */
.nLng .lnDef,
.lnAlt {
    display: none
}

.nLng .lnAlt {
    display: block
}

/* Widget Style */
.widget .imgThm {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    max-height: 108%;
    font-size: 12px;
    text-align: center;
    transform: translate(-50%, -50%)
}

.widget .title {
    margin: 0 0 25px;
    font-size: var(--widgetT);
    font-weight: var(--widgetTw);
    position: relative
}

.widget .title::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: var(--widgetTa);
    margin: 0 10px;
    border-bottom: 1px solid var(--widgetTac);
    opacity: .5
}

.widget input[type=text],
.widget input[type=email],
.widget textarea {
    display: block;
    width: 100%;
    outline: 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    border-radius: 4px 4px 0 0;
    background: #f3f3f4;
    padding: 16px;
    line-height: 1.6em;
    transition: var(--trans-1)
}

.widget input[type=text]:hover,
.widget input[type=email]:hover,
.widget textarea:hover {
    border-color: rgba(0, 0, 0, .42);
    background: #ececec
}

.widget input[type=text]:focus,
.widget input[type=email]:focus,
.widget textarea:focus,
.widget input[data-text=fl],
.widget textarea[data-text=fl] {
    border-color: var(--linkB);
    background: #ececec
}

.widget input[type=button],
.widget input[type=submit] {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    outline: 0;
    border: 0;
    border-radius: 4px;
    color: #fffdfc;
    background: var(--linkB);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%
}

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

/* Widget BlogSearch */
.BlogSearch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12
}

.BlogSearch form {
    position: relative
}

.BlogSearch input {
    position: relative;
    display: block;
    background: var(--srchB);
    border: 0;
    margin-top: -100%;
    padding: 10px 55px;
    width: 100%;
    height: var(--headerH);
    transition: var(--trans-1);
    z-index: 2
}

.BlogSearch input:focus {
    margin-top: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2)
}

.BlogSearch input[type=search]::-ms-clear,
.BlogSearch input[type=search]::-ms-reveal {
    display: none;
    appearance: none;
    width: 0;
    height: 0
}

.BlogSearch input[type=search]::-webkit-search-decoration,
.BlogSearch input[type=search]::-webkit-search-cancel-button,
.BlogSearch input[type=search]::-webkit-search-results-button,
.BlogSearch input[type=search]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
    appearance: none
}

.BlogSearch input:focus~button.sb,
.BlogSearch input:hover~button.sb {
    opacity: .9
}

.BlogSearch .sb {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 3;
    opacity: .7;
    height: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    transition: var(--trans-2)
}

.BlogSearch .sb svg {
    width: 18px;
    height: 18px;
    stroke: var(--srchI)
}

.BlogSearch button.sb {
    left: auto;
    right: 0;
    opacity: 0
}

.BlogSearch button.sb::before {
    content: '\2715'
}

.mainWrp>:not(.header) .BlogSearch {
    margin: 0
}

@media screen and (min-width:640px) {
    .mainWrp>:not(.header) .BlogSearch {
        position: static
    }

    .mainWrp>:not(.header) .BlogSearch input {
        margin-top: 0;
        padding: 8px 36px;
        height: auto;
        font-size: 13px;
        border: var(--srchL) solid var(--srchLc);
        border-radius: 20px
    }

    .mainWrp>:not(.header) .BlogSearch .sb {
        padding: 0 10px;
        font-size: 12px
    }

    .mainWrp>:not(.header) .BlogSearch input:focus,
    .mainWrp>.header .BlogSearch input:focus {
        box-shadow: none
    }

    .mainWrp>:not(.header) .BlogSearch .fCls,
    .mainWrp>.header .BlogSearch .fCls {
        display: none
    }

    .mainWrp>.header .BlogSearch {
        position: absolute
    }

    .mainWrp>.header .BlogSearch input {
        background: var(--headerB);
        border-radius: 0
    }

    .drK *.navIn .BlogSearch input {
        border-color: transparent
    }

    .drK .mainWrp>.header .BlogSearch input {
        background: var(--darkB)
    }
}

/* Widget FeaturedPost */
.itemFt .itm>*:last-child {
    flex-grow: 1
}

/* Widget PopularPosts */
.itemPp {
    counter-reset: p-cnt
}

.itemPp .iCtnt {
    display: flex
}

.itemPp>*:not(:last-child) {
    margin-bottom: 20px
}

.itemPp .iCtnt::before {
    flex-shrink: 0;
    content: '0' counter(p-cnt);
    counter-increment: p-cnt;
    width: 25px;
    opacity: .6;
    font-size: 85%;
    line-height: 1.8em
}

.iInr {
    flex: 1 0;
    width: calc(100% - 25px)
}

.iTtl {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.5em
}

.iTtmp {
    display: inline-flex
}

.iTtmp::after {
    content: '\2014';
    margin: 0 5px;
    color: var(--widgetTac);
    opacity: .7
}

.iInf {
    margin: 0 25px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 25px
}

.iInf .pLbls {
    display: inline;
    opacity: .8
}

/* Widget Label */
/* List Label */
.wL ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: calc(100% + 30px);
    left: -15px;
    right: -15px;
    font-size: 13px
}

.wL li {
    width: calc(50% - 10px);
    margin: 0 5px
}

.wL li>* {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: inherit;
    width: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    line-height: 20px
}

.wL li>* svg {
    width: 18px;
    height: 18px;
    opacity: .8
}

.wL li>*:hover svg,
.wL li>div svg {
    /*fill:var(--linkC) !important;*/
    stroke: var(--linkC)
}

.wL li>*:hover .lbC,
.wL li>div .lbC {
    color: var(--linkC)
}

.wL .lbR {
    display: inline-flex;
    align-items: center
}

.wL .lbR .lbC {
    margin: 0 5px
}

.wL .lbAl {
    max-height: 0;
    overflow: hidden;
    transition: var(--trans-4)
}

.wL .lbM {
    display: inline-block;
    margin-top: 10px;
    line-height: 25px;
    color: var(--linkC)
}

.wL .lbM::before {
    content: attr(data-show)
}

.wL .lbM::after,
.wL .lbC::after {
    content: attr(data-text)
}

.wL .lbM::after {
    margin: 0 8px
}

.wL .lbT {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .7
}

.wL .lbC,
.wL .lbM::after {
    flex-shrink: 0;
    font-size: 12px;
    opacity: .7
}

.lbIn:checked~.lbAl {
    max-height: 1000vh
}

.lbIn:checked~.lbM::before {
    content: attr(data-hide)
}

.lbIn:checked~.lbM::after {
    visibility: hidden
}

.wL.bg ul {
    width: calc(100% + 10px);
    left: -5px;
    right: -5px
}

.wL.bg li {
    margin-bottom: 10px
}

.wL.bg li>* {
    background: #f6f6f6
}

/* Cloud Label */
.wL.cl {
    display: flex;
    flex-wrap: wrap
}

.wL.cl>*,
.wL.cl .lbAl>* {
    display: block;
    max-width: 100%
}

.wL.cl .lbAl {
    display: flex;
    flex-wrap: wrap
}

.wL.cl .lbC::before {
    content: '';
    margin: 0 4px;
    flex: 0 0
}

.wL.cl .lbN {
    display: flex;
    justify-content: space-between;
    margin: 0 0 8px;
    padding: 9px 13px;
    border: 1px solid var(--contentL);
    border-radius: 3px;
    color: inherit;
    line-height: 20px
}

.wL.cl .lbN:hover .lbC,
.wL.cl div.lbN .lbC {
    color: var(--linkB);
    opacity: 1
}

.wL.cl .lbN:not(div):hover,
.wL.cl div.lbN {
    border-color: var(--linkB)
}

.wL.cl .lbSz {
    display: flex
}

.wL.cl .lbSz::after {
    content: '';
    margin: 0 4px;
    flex: 0 0
}

/* Widget Sliders */
.sldO {
    position: relative;
    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
}

.sldO.no-items {
    display: none
}

.sldO.no-items+.section {
    margin-top: 0
}

.sldO .widget:not(:first-child) {
    margin-top: 0
}

.sldO .widget {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    background: transparent;
    outline: 0;
    border: 0
}

.sldC {
    position: relative
}

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

.sldIm {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--transB);
    display: block;
    padding-top: 40%;
    border-radius: 3px;
    color: #fffdfc;
    font-size: 13px
}

.sldT {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    padding: 20px;
    background: linear-gradient(0deg, rgba(30, 30, 30, .1) 0%, rgba(30, 30, 30, .05) 60%, rgba(30, 30, 30, 0) 100%);
    border-radius: 0 0 3px 3px
}

.sldS {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite
}

.sldO .widget:last-child .sldS {
    animation-name: tostart, snap
}

.Rtl .sldS {
    animation-name: tonext-rev, snap
}

.Rtl .sldO .widget:last-child .sldS {
    animation-name: tostart-rev, snap
}

.sldO:hover .widget .sldS,
.Rtl .sldO:hover .widget .sldS,
.sldO:focus-within .widget .sldS,
.Rtl .sldO:focus-within .widget .sldS {
    animation-name: none
}

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

    .sldS,
    .Rtl .sldS {
        animation-name: none
    }
}

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

    .sldO .widget {
        flex: 0 0 90%;
        width: 90%;
        margin: 0 7.5px;
        box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%)
    }

    .sldT {
        padding: 10px 15px
    }

    .sldIm {
        font-size: 12px
    }
}

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

.erroC {
    width: calc(100% - 40px);
    max-width: 450px;
    margin: auto;
    font-family: var(--fontBa)
}

.erroC h3 {
    font-size: 1.414rem;
    font-family: inherit
}

.erroC h3 span:not(.e) {
    position: relative
}

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

.erroC h3 span.e {
    animation: glitch 1s linear infinite
}

.erroC h3 span.e::before,
.erroC h3 span.e::after {
    content: attr(title);
    position: absolute;
    left: 0;
    right: 0
}

.erroC h3 span.e::before {
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%)
}

.erroC h3 span.e::after {
    animation: glitchBotom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%)
}

.erroC p {
    margin: 30px 5%;
    line-height: 1.6em;
    opacity: .7
}

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

/* Responsive */
@media screen and (min-width:897px) {

    /* Header */
    /* Delete this to enable search icon */
    .headP {
        display: none
    }

    .headP::before {
        content: '';
        display: block;
        margin-left: 15px
    }

    .headP .isMn,
    .headM .HTML+.PageList {
        display: none
    }

    /* mainIn */
    .mainIn {
        padding-top: 30px
    }

    .mainIn .secIn,
    .mainIn .secIn>* {
        display: flex
    }

    .blogTopc {
        flex: 0 0 215px;
        width: 215px
    }

    .blogTopc::after,
    .blogCont::before {
        content: '';
        flex: 0 0 25px
    }

    /*.blogCont::after{content:'';display:block; position:absolute;top:-20px;left:0;right:0; width:calc(100% + 20px);height:calc(100% + 40px); background:rgba(0,0,0,.01); border-radius:20px;z-index:-1}*/
    .blogCont {
        width: calc(100% - 215px)
    }

    .blogIn {
        width: calc(100% - 25px)
    }

    .blogM {
        display: flex
    }

    .mainbar {
        flex: 1 0 calc(100% - var(--sideW) - 25px);
        width: calc(100% - var(--sideW) - 25px);
        transition: var(--trans-2)
    }

    .sidebar {
        display: flex;
        flex: 0 0 calc(var(--sideW) + 25px);
        width: calc(var(--sideW) + 25px);
        margin: 0
    }

    .sidebar::before {
        content: '';
        flex: 0 0 25px
    }

    .sidebar .sideIn {
        width: calc(100% - 25px)
    }

    .onPg .blogCont::before,
    .onPg .blogCont::after,
    .onHm .blogCont::before,
    .onHm .blogCont::after {
        display: none
    }

    /* mainNav */
    .mnH {
        display: none
    }

    .mnMn svg:not(.d) {
        display: none
    }

    .mnMn {
        display: flex;
        justify-content: flex-end;
        position: relative;
        width: calc(100% + 25px);
        left: -12.5px;
        right: -12.5px
    }

    .mnMn>li {
        display: inline-flex;
        align-items: center;
        margin: 0 12.5px;
        position: relative;
        white-space: nowrap;
        height: var(--headerH)
    }

    .mnMn>li:hover ul {
        max-height: 100vh;
        opacity: 1;
        visibility: visible
    }

    .mnMn>li:last-child ul {
        left: auto;
        border-radius: 16px 5px 16px 16px
    }

    .mnMn ul {
        display: block;
        position: absolute;
        top: calc(var(--headerH) - 15px);
        left: -15px;
        right: -15px;
        min-width: 180px;
        max-height: 0vh;
        background: var(--contentB);
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .1);
        border-radius: 5px 16px 16px 16px;
        transition: var(--trans-1);
        opacity: 0;
        visibility: hidden;
        z-index: 1;
        overflow: hidden
    }

    .mnMn ul li>* {
        display: block;
        padding: 8px 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: .8
    }

    .mnMn ul li>*:hover {
        background: var(--transB)
    }

    .mnMn ul li:last-child>* {
        padding-bottom: 15px
    }

    .mnMn .a {
        display: inline-flex;
        align-items: center
    }

    .mnMn .a:hover {
        color: var(--linkC)
    }

    .mnMn .a:hover::after {
        opacity: 1
    }

    .mnMn .a::after {
        content: '';
        border-bottom: 1px solid var(--linkC);
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        opacity: 0;
        transition: var(--trans-1)
    }

    .mnMn .drp .n::after {
        content: '';
        padding: 0 3px;
        flex: 0 0
    }
}

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

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

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

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

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

@media screen and (max-width:1100px) and (min-width: 897px) {
    .pTtl {
        font-size: 1.1rem
    }

    /* mainIn */
    .mainIn .secIn,
    .mainIn .secIn>* {
        display: block
    }

    .blogTopc::after,
    .blogCont::before,
    .blogTopc .adSticky {
        display: none
    }

    .blogTopc,
    .blogCont {
        width: auto
    }

    .blogIn {
        width: 100%
    }
}

@media screen and (min-width:1101px) {
    .tpC {
        display: none
    }

    .topM #HTML11 {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--headerH) + 10px)
    }

    .topM #HTML11~.widget {
        visibility: hidden
    }
}

@media screen and (max-width:1100px) {
    .topM #HTML11~.widget {
        display: none
    }

    .topM {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -320px;
        width: 80%;
        max-width: 320px;
        transition: var(--trans-1);
        z-index: 11
    }

    .topM .section {
        padding: 30px 20px 20px;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
        max-height: 100%
    }

    .tpMn .a,
    .tpMn ul li>* {
        padding-top: 10px;
        padding-bottom: 10px
    }

    .tpBr {
        width: 100%;
        height: 100%;
        position: relative;
        background: var(--contentB);
        box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05);
        z-index: 2
    }

    .tpBrs {
        width: 100%;
        height: 100%
    }

    .tpC {
        position: absolute;
        right: -45px;
        top: 120px;
        transition: var(--trans-1);
        z-index: 1
    }

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

    .tpC svg.rad {
        width: 20px;
        height: 20px;
        position: absolute;
        left: -2px;
        top: -19px;
        fill: var(--contentB);
        transform: rotate(176deg);
        transition: inherit;
        z-index: 1
    }

    .tpC svg.rad.in {
        top: auto;
        bottom: -19px;
        transform: rotate(-86deg)
    }

    .tpC label {
        display: flex;
        align-items: center;
        position: relative;
        justify-content: center;
        width: 45px;
        height: 40px;
        background: var(--contentB);
        transition: inherit;
        border-radius: 0 20px 20px 0;
        box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1)
    }

    .topI:checked~.topM {
        left: 0;
        z-index: 12
    }

    .topI:checked~.topM .tpC {
        right: -17.5px
    }

    .topI:checked~.topM .tpC svg.rad {
        visibility: hidden
    }

    .topI:checked~.topM .tpC label {
        border-radius: 20px;
        width: 40px;
        background: var(--linkB)
    }

    .topI:checked~.topM .tpC label svg {
        transform: rotate(180deg);
        stroke: var(--darkT)
    }

    .topI:checked~.topM .fCls {
        opacity: 1;
        visibility: visible;
        background: rgba(0, 0, 0, .25)
    }
}

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

    /* mainIn */
    .mainbar {
        margin: 0 auto
    }

    .blogTopc .adSticky {
        display: none
    }

    /* Header */
    .headIn {
        padding: 0
    }

    .headL {
        padding: 0 0 0 20px;
        flex-grow: 1;
        width: 50%;
        max-width: none
    }

    .headR {
        padding: 0 20px 0 0;
        flex-shrink: 0
    }

    .headL .headN {
        width: 100%
    }

    /* mainNav */
    .headM {
        display: flex;
        justify-content: flex-end;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 20;
        transition: var(--trans-1);
        visibility: hidden;
        opacity: 0;
        margin: 0
    }

    .mnBr {
        width: 85%;
        max-width: 480px;
        height: 100%;
        margin-right: -480px;
        transition: inherit;
        z-index: 3;
        overflow: hidden;
        position: relative;
        box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05);
        border-radius: 0
    }

    .mnBrs {
        padding: 50px 0 0;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
        height: 100%;
        background: var(--contentB)
    }

    .mnH {
        padding: 0;
        justify-content: flex-end
    }

    .mnH label {
        padding: 15px 20px
    }

    .navi:checked~.mainWrp .header {
        z-index: 13
    }

    .navi:checked~.mainWrp .headM {
        opacity: 1;
        visibility: visible
    }

    .navi:checked~.mainWrp .headM .mnBr {
        margin-right: 0
    }

    .navi:checked~.mainWrp .headM .fCls {
        opacity: 1;
        visibility: visible;
        background: rgba(0, 0, 0, .2);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        backdrop-filter: saturate(180%) blur(10px)
    }

    .mnMen {
        padding: 0 15px 20px
    }

    .mnMn svg {
        width: 20px;
        height: 20px;
        opacity: .8
    }

    .mnMn>li {
        position: relative
    }

    .mnMn>li.br::after {
        content: '';
        display: block;
        border-bottom: 1px solid var(--contentL);
        margin: 12px 5px
    }

    .mnMn li:not(.drp) .a:hover,
    .mnMn ul li a:hover,
    .mnMn li:not(.mr) .drpI:checked~.a {
        color: var(--linkC)
    }

    .mnMn li:not(.mr) .a::before,
    .mnMn .drp.mr li>*::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        border-left: 1px solid var(--linkC);
        transition: var(--trans-1);
        opacity: 0
    }

    .mnMn li:not(.drp) .a:hover::before,
    .mnMn li:not(.mr) .drpI:checked~.a::before,
    .mnMn .drp.mr li>*:hover::before {
        opacity: 1
    }

    .mnMn li:not(.mr) ul {
        position: relative;
        padding-left: 5px
    }

    .mnMn li:not(.mr) ul::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        border-left: 1px solid var(--contentL);
        height: calc(100% - 19px)
    }

    .mnMn li ul {
        display: none;
        opacity: 0;
        visibility: hidden
    }

    .mnMn li:not(.mr) li>* {
        padding: 10px 15px;
        opacity: .8
    }

    .mnMn li:not(.mr) li {
        position: relative
    }

    .mnMn li:not(.mr) li::before {
        content: '';
        width: 8px;
        border-bottom: 1px solid var(--contentL);
        display: block;
        position: absolute;
        top: 19px
    }

    .mnMn .a,
    .mnMn .drp.mr li>* {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        position: relative;
        width: calc(100% + 30px);
        left: -15px;
        right: -15px;
        transition: var(--trans-1)
    }

    .mnMn .a>* {
        margin: 0 5px
    }

    .mnMn .a:hover svg:not(.d) {
        fill: var(--linkC)
    }

    .mnMn .a:hover svg.line:not(.d) {
        fill: none;
        stroke: var(--linkC)
    }

    .mnMn .n,
    .mnMn ul li>* {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 0 calc(100% - 64px)
    }

    .mnMn .drp.mr .a {
        font-size: 13px;
        padding-bottom: 0;
        opacity: .7
    }

    .mnMn .drp.mr li>* {
        display: block;
        padding: 10px 20px
    }

    .mnMn .drp.mr svg.d {
        display: none
    }

    .mnMn .drpI:checked~.a svg.d {
        transform: rotate(180deg)
    }

    .mnMn .drpI:checked~ul {
        display: block;
        opacity: 1;
        visibility: visible
    }

    /* Font and Blog */
    .pTtl {
        font-size: 1.1rem
    }

    .onId:not(.onBl) .pTtl {
        font-size: 1rem
    }
}

@media screen and (min-width:641px) {
    .onId:not(.onBl) .blogPts>* {
        width: calc(33.333% - 22px);
        flex: 0 0 calc(33.333% - 22px)
    }
}

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

    /* Header */
    .headCn {
        height: var(--headerHm)
    }

    /* Pop-up */
    .fixL {
        align-items: flex-end
    }

    .fixL .fixLi,
    .fixL .cmBri {
        border-radius: 16px 16px 0 0;
        max-width: 680px
    }

    .fixL .cmBri:not(.mty) {
        border-radius: 0;
        height: 100%;
        max-height: 100%
    }

    /* Article */
    .onId .blogPts,
    .itemFt .itm {
        width: calc(100% + 15px);
        left: -7.5px;
        right: -7.5px
    }

    .onId .blogPts>*,
    .itemFt .itm>* {
        flex: 0 0 calc(50% - 15px);
        width: calc(50% - 15px);
        margin-left: 7.5px;
        margin-right: 7.5px
    }

    .onId .blogPts .nAd {
        flex: 0 0 calc(100% - 15px)
    }

    .onId:not(.onBl) .pTtl {
        font-size: 1.1rem
    }
}

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

    /* blogTopc */
    .topM {
        left: -280px;
        width: 280px
    }

    /* Font size */
    .iFxd {
        font-size: 12px
    }

    .cdtIn,
    .pInf.ps {
        font-size: 13px
    }

    .pDesc {
        font-size: 14px
    }

    .pEnt {
        font-size: var(--postFm)
    }

    .pTtl.itm {
        font-size: var(--postTm)
    }

    /* Share */
    .pShc a::after {
        display: none
    }

    /* Article */
    .onId:not(.oGrd) .ntry .pTtl {
        font-size: 1rem
    }

    .onId:not(.oGrd) .ntry .pSml {
        font-size: 12px
    }

    .onId:not(.oGrd) .ntry .pSnpt {
        font-size: 13px;
        display: none
    }

    .onId:not(.oGrd) .ntry .iFxd .spnr {
        display: none
    }

    .onId:not(.oGrd) .ntry .iFxd {
        padding: 8px 3px
    }

    .onId:not(.oGrd) .ntry .iFxd .cmnt {
        padding: 3px
    }

    .onId:not(.oGrd) .ntry .iFxd>* svg {
        padding: 1px
    }

    .onId.oGrd .blogPts>* {
        flex: 1 0 calc(100% - 15px);
        padding-bottom: 0
    }

    .onId.oGrd .blogPts .pInf {
        position: relative
    }

    /* Widget Featured */
    .itemFt .itm>* {
        flex: 1 0 calc(100% - 15px)
    }

    .itemFt .itm .iThmb {
        margin-bottom: 20px
    }

    .itemFt .itm .iCtnt {
        padding-bottom: 30px;
        border-bottom: 1px solid var(--contentL)
    }

    .itemFt .itm .pInf {
        margin-top: 15px
    }
}

/* Keyframes Animation */
@keyframes shimmer {
    100% {
        transform: translateX(100%)
    }
}

@keyframes fadein {
    50% {
        opacity: 1
    }

    80% {
        opacity: 1;
        padding-top: 5px;
        height: 22px
    }

    100% {
        opacity: 0;
        padding-top: 0;
        height: 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
    }
}

@-webkit-keyframes fadein {
    50% {
        opacity: 1
    }

    80% {
        opacity: 1;
        padding-top: 5px;
        height: 22px
    }

    100% {
        opacity: 0;
        padding-top: 0;
        height: 0
    }
}

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

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

    50% {
        transform: translateX(5px)
    }

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

    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes tonext {
    75% {
        left: 0
    }

    95% {
        left: 100%
    }

    98% {
        left: 100%
    }

    99% {
        left: 0
    }
}

@-webkit-keyframes tostart {
    75% {
        left: 0
    }

    95% {
        left: -300%
    }

    98% {
        left: -300%
    }

    99% {
        left: 0
    }
}

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

    95% {
        right: 100%
    }

    98% {
        right: 100%
    }

    99% {
        right: 0
    }
}

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

    95% {
        right: -300%
    }

    98% {
        right: -300%
    }

    99% {
        right: 0
    }
}

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

    97% {
        scroll-snap-align: none
    }

    99% {
        scroll-snap-align: none
    }

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

@keyframes glitch {

    2%,
    64% {
        transform: translate(2px, 0) skew(0deg)
    }

    4%,
    60% {
        transform: translate(-2px, 0) skew(0deg)
    }

    62% {
        transform: translate(0, 0) skew(5deg)
    }
}

@keyframes glitchTop {

    2%,
    64% {
        transform: translate(2px, -2px)
    }

    4%,
    60% {
        transform: translate(-2px, 2px)
    }

    62% {
        transform: translate(13px, -1px) skew(-13deg)
    }
}

@keyframes glitchBotom {

    2%,
    64% {
        transform: translate(-2px, 0)
    }

    4%,
    60% {
        transform: translate(-2px, 0)
    }

    62% {
        transform: translate(-22px, 5px) skew(21deg)
    }
}

/* Noscript Option */
.lazy:not([lazied]) {
    display: none
}

.noJs {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 99;
    max-width: 640px;
    border-radius: 12px;
    margin: auto;
    padding: 10px 5px;
    background: #ffdfdf;
    font-size: 13px;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .1);
    color: #48525c
}

.noJs::before {
    content: attr(data-text);
    padding: 0 10px;
    flex-grow: 1
}

.noJs label {
    flex-shrink: 0;
    padding: 10px
}

.noJs label::after {
    content: '\2715';
    line-height: 18px;
    font-size: 14px
}

.nJs:checked~.noJs {
    display: none
}

/* Hide Scroll */
.scrlH::-webkit-scrollbar {
    width: 0;
    height: 0
}

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

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

/* --- Remove to reduce CSS size or if you aren't using RTL --- */
.adB {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--darkTa);
    border: 1px solid var(--contentL);
    border-radius: 3px
}

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

/* Article Style RTL */
.Rtl .note {
    padding: 20px 50px 20px 20px
}

.Rtl .note::before {
    left: auto;
    right: -12px
}

.Rtl .note::after {
    left: auto;
    right: 18px
}

.Rtl .pS hr::before {
    text-indent: -0.6em
}

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

.Rtl blockquote,
.Rtl .cmC i[rel=quote] {
    border-left: 0;
    border-right: 2px solid var(--contentL)
}

.Rtl blockquote.s-1 {
    padding: 25px 45px 25px 25px;
    border-right: 0
}

.Rtl blockquote.s-1::before {
    left: auto;
    right: 0
}

/* RTL Mode */
.Rtl .ntfT {
    padding: 0 0 0 15px
}

.Rtl .ntfC::before {
    left: auto;
    right: -12px
}

.Rtl .ntfA>a {
    margin-left: 0;
    margin-right: 10px
}

.Rtl .cmHr.a .n::after {
    margin: 0 3px 0 0
}

.Rtl .cmAc a::before {
    content: '\2935'
}

.Rtl .cmHl li li .cmIn::before {
    right: -18px;
    left: auto
}

.Rtl .cmHl>li>.cmIn>.cmBd .cmHr {
    padding: 0 calc(35px + 8px) 0 0
}

.Rtl .BlogSearch .sb,
.Rtl .fotCd .creator {
    left: auto;
    right: 0
}

.Rtl .BlogSearch button.sb {
    left: 0;
    right: auto
}

@media screen and (max-width:1100px) {
    .Rtl .topM {
        left: auto;
        right: -320px
    }

    .Rtl .topI:checked~.topM {
        left: auto;
        right: 0
    }

    .Rtl .topI:checked~.topM .tpC {
        left: -17.5px;
        right: auto
    }

    .Rtl .tpC {
        left: -45px;
        right: auto
    }

    .Rtl .tpC label {
        border-radius: 20px 0 0 20px
    }

    .Rtl .tpC svg.rad {
        transform: rotate(92deg);
        left: auto;
        right: -2px
    }

    .Rtl .tpC svg.rad.in {
        transform: rotate(-2deg)
    }
}

@media screen and (min-width:897px) {
    .Rtl .mnMn ul {
        border-radius: 16px 5px 16px 16px
    }

    .Rtl .mnMn>li:last-child ul {
        left: -15px;
        right: auto;
        border-radius: 5px 16px 16px 16px
    }
}

@media screen and (max-width:896px) {
    .Rtl .headR {
        padding: 0 0 0 20px
    }

    .Rtl .headL {
        padding: 0 20px 0 0
    }

    .Rtl .navi:checked~.mainWrp .headM .mnBr {
        margin-right: auto;
        margin-left: 0
    }

    .Rtl .mnBr {
        margin-right: auto;
        margin-left: -480px
    }

    .Rtl .mnMn li:not(.mr) ul {
        padding-left: 0;
        padding-right: 5px
    }

    .Rtl .mnMn li:not(.mr) .a::before,
    .Rtl .mnMn .drp.mr li>*::before {
        left: auto;
        right: 0
    }
}

@media screen and (max-width:500px) {
    .Rtl .topM {
        left: auto;
        right: -280px
    }

    .Rtl .ftMn {
        right: auto;
        left: 0;
        border-radius: 16px 16px 16px 5px
    }

    .Rtl .cdtIn .PageList {
        margin-left: 5px;
        margin-right: auto
    }
}

/* --- End --- */

.tpMn li:not(.mr) ul {
    padding-left: 30px
}

/* LANDING STU */
body.onHm {
    background: var(--colorMain-S)
}

.onHm .headCn {
    color: var(--headerC-S);
    background: var(--colorMain-S)
}

.onHm header.stick {
    border-bottom: 0
}

.onHm header {
    position: relative
}

.onHm header svg.line {
    stroke-width: 2px
}

.onHm footer {
    color: var(--fotT-S);
    background: var(--colorMain-S)
}

.onHm .isSrh {
    display: none
}

.onHm footer .mSoc svg {
    fill: #fff
}

@media screen and (max-width: 896px) {
    .onHm header svg.line {
        stroke: currentColor
    }

    .onHm .mnMn {
        color: var(--bodyC)
    }

    .onHm .mnH {
        color: var(--bodyC);
        border-bottom: 1px solid var(--contentL)
    }

    .onHm .mnBr {
        border-radius: 10px
    }

    .onHm .headM {
        left: unset;
        bottom: unset;
        position: absolute;
        top: 20px;
        right: 20px
    }

    .onHm .navi:checked~.mainWrp .headM .fCls {
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }
}

/* Landing Page */
.landing-page .widget .title {
    font-size: 2.3rem;
    font-family: var(--fontBa);
    font-weight: 900;
    line-height: 1.6em
}

.landing-page p {
    font-size: 13px;
    font-family: var(--fontBa);
    margin: 20px 0;
    line-height: 1.7em
}

.landing-page ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    line-height: normal;
    font-size: 14px;
    font-family: var(--fontB)
}

.landing-page ul li {
    display: flex;
    margin-bottom: 10px;
    position: relative;
    width: calc(100% + 10px)
}

.landing-page ul li>* {
    margin: 0 5px;
    display: block;
    color: inherit
}

.pgCont {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px
}

.page-2 {
    background: var(--page-9)
}

.page-2 .pgCont {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto
}

.page-4 {
    background: #FFF;
    padding-top: 40px
}

/*STU*/
.fgSTU .button.fLnk2,
.fgSTU .button.fLnk3 {
    background: #25d366;
}

.headCn .mnMn .a:hover {
    color: inherit
}

.headCn .mnMn .a::after {
    bottom: 22px;
    border-color: currentColor
}

.landing-page {
    background: #f7f7fc
}

#i-enStu {
    padding: 15px 80px 15px 20px
}

.cpStu {
    line-height: 1.6em;
    padding: 5px 10px;
    position: absolute;
    right: 8px;
    top: calc(0% + 3px)
}

.fgSTU {
    border-radius: 20px;
}

.fgSTU .add {
    display: none
}

.fgSTU .lbl label {
    width: 150px;
    margin: 0 7px 6px 0;
    padding: 8px 17px;
    border-radius: 7px;
    font-size: 12px
}

.fgSTU .lbl label::before {
    content: "+";
    font-weight: 700;
    font-size: 120%;
    margin-right: 7px;
    border-radius: 5px;
    border: 2px solid;
    padding: 0 7px;
    transition: var(--trans-2)
}

.cbNot:checked~.fgSTU .lbl .fNot::before,
.cbPas1:checked~.fgSTU .lbl .fPas1::before,
.cbIg1:checked~.fgSTU .lbl .fIg1::before,
.cbIg2:checked~.fgSTU .lbl .fIg2::before,
.cbIgl1:checked~.fgSTU .lbl .fIgl1::before,
.cbLnk2:checked~.fgSTU .lbl .fLnk2::before,
.cbLnk3:checked~.fgSTU .lbl .fLnk3::before,
.cbTk1:checked~.fgSTU .lbl .fTk1::before,
.cbYt1:checked~.fgSTU .lbl .fYt1::before,
.cbYt2:checked~.fgSTU .lbl .fYt2::before,
.cbYt3:checked~.fgSTU .lbl .fYt3::before,
.cbYt4:checked~.fgSTU .lbl .fYt4::before,
.cbYt5:checked~.fgSTU .lbl .fYt5::before,
.cbYtl1:checked~.fgSTU .lbl .fYtl1::before,
.cbYtl2:checked~.fgSTU .lbl .fYtl2::before,
.cbYtl3:checked~.fgSTU .lbl .fYtl3::before,
.cbYtl4:checked~.fgSTU .lbl .fYtl4::before,
.cbYtl5:checked~.fgSTU .lbl .fYtl5::before {
    content: " - ";
    padding: 0 8px;
    background-color: #c62424
}

.cbNot:checked~.fgSTU .lbl .fNot,
.cbPas1:checked~.fgSTU .lbl .fPas1,
.cbIg1:checked~.fgSTU .lbl .fIg1,
.cbIg2:checked~.fgSTU .lbl .fIg2,
.cbIgl1:checked~.fgSTU .lbl .fIgl1,
.cbLnk2:checked~.fgSTU .lbl .fLnk2,
.cbLnk3:checked~.fgSTU .lbl .fLnk3,
.cbTk1:checked~.fgSTU .lbl .fTk1,
.cbYt1:checked~.fgSTU .lbl .fYt1,
.cbYt2:checked~.fgSTU .lbl .fYt2,
.cbYt3:checked~.fgSTU .lbl .fYt3,
.cbYt4:checked~.fgSTU .lbl .fYt4,
.cbYt5:checked~.fgSTU .lbl .fYt5,
.cbYtl1:checked~.fgSTU .lbl .fYtl1,
.cbYtl2:checked~.fgSTU .lbl .fYtl2,
.cbYtl3:checked~.fgSTU .lbl .fYtl3,
.cbYtl4:checked~.fgSTU .lbl .fYtl4,
.cbYtl5:checked~.fgSTU .lbl .fYtl5 {
    animation: nudge .5s 0s
}

.cbNot:checked~.fgSTU .not,
.cbPas1:checked~.fgSTU .pas1,
.cbIg1:checked~.fgSTU .ig1,
.cbIg2:checked~.fgSTU .ig2,
.cbIgl1:checked~.fgSTU .igl1,
.cbLnk2:checked~.fgSTU .lnk2,
.cbLnk2:checked~.fgSTU .lnk2t,
.cbLnk3:checked~.fgSTU .lnk3,
.cbLnk3:checked~.fgSTU .lnk3t,
.cbTk1:checked~.fgSTU .tk1,
.cbYt1:checked~.fgSTU .yt1,
.cbYt2:checked~.fgSTU .yt2,
.cbYt3:checked~.fgSTU .yt3,
.cbYt4:checked~.fgSTU .yt4,
.cbYt5:checked~.fgSTU .yt5,
.cbYtl1:checked~.fgSTU .ytl1,
.cbYtl2:checked~.fgSTU .ytl2,
.cbYtl3:checked~.fgSTU .ytl3,
.cbYtl4:checked~.fgSTU .ytl4,
.cbYtl5:checked~.fgSTU .ytl5 {
    display: block;
    animation: opaC0 .3s 0s, opaCity .5s .3s, invFz .8s 0s
}

.button {
    background: var(--page-1);
    border-radius: 7px;
    font-weight: 600;
}

.button:hover {
    opacity: .9;
    transform: scale (1.02, 1.02)
}

.fgSTU .cArea:not(:last-child) {
    margin: 15px 0
}

.widget .fgSTU input {
    padding: 10px 16px 10px 75px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-weight: 600;
    background: #eaf2ff;
}

.widget .fgSTU input:hover {
    background: #eaf2ff
}

.widget .fgSTU input:focus {
    border: 1px solid var(--colorMain-S)
}

.fgSTU label .i {
    position: absolute;
    left: 0;
    top: calc(0% + 9px);
    z-index: 1;
    border-right: 1px dotted var(--bodyCa);
    height: calc(100% - 18px);
    padding: 0 15px
}

.fgSTU label .i svg {
    color: #666;
    fill: #666;
    width: 25px;
    height: 25px
}

.fgSTU .tk1 .i svg {
    height: 18px
}

.fgSTU input:focus~.i svg {
    color: var(--colorMain-S)
}

.fgSTU .cbThmb {
    padding: 10px 0 0 0;
    display: flex;
    align-items: center
}

.fgSTU .cbThmb input {
    margin: 0 20px
}

#genLoader {
    display: flex
}

#genLoader svg {
    fill: #fff;
    animation: elRotation 2s 0s infinite linear;
    height: 20px
}

#rStu {
    margin-bottom: 10px;
    animation: opaC0 .5s 0s, opaCity .5s .5s, nudge .3s .7s
}

@keyframes elRotation {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(720deg)
    }
}

@keyframes opaC0 {
    0% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes invFz {
    0% {
        font-size: 0
    }

    100% {
        font-size: 100%
    }
}

@keyframes opaCity {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.cbLnk2:checked~.fgSTU .lbl .fLnk2::before,
.cbLnk3:checked~.fgSTU .lbl .fLnk3::before {
    background-color: #1b6b2d
}

@media screen and (max-width:400px) {
    .fgSTU .lbl label {
        padding: 6px 8px;
        font-size: 11px;
        margin: 0 2px 3px 0
    }

    .fgSTU .lbl label::before {
        font-size: 150%
    }
}

.toC.lbl.text-center {
    max-width: 500px;
    margin: 0 auto
}

@media screen and (max-width:400px) {
    .fgSTU .lbl label {
        width: 130px;
        font-size: 11px
    }
}

@media screen and (max-width:350px) {
    .fgSTU .lbl label {
        width: 120px;
        font-size: 10px;
        padding: 4px 8px
    }

    .widget .fgSTU input {
        font-size: 11px
    }

    .landing-page p {
        font-size: 10px
    }

    .fgSTU label .i svg {
        width: 20px;
        height: 20px
    }

    .button {
        font-size: 10px;
        padding: 6px 8px
    }
}

.page-1 {
    display: flex;
    position: relative;
    justify-content: center;
    overflow: hidden;
}

.landing-page .landing-content {
    width: 90%;
    max-width: 1100px;
    margin: auto
}

.page-1 .landing-svg {
    position: absolute;
    bottom: -42px;
    width: 100%;
    height: 42px
}

.landing-page .titlex {
    text-align: center;
    margin-bottom: 50px
}

.landing-page .titlex h2 {
    position: relative;
    line-height: 1.5em;
    color: inherit
}

.landing-page .titlex span {
    display: block;
    font-weight: 400;
    font-size: 15px;
    margin-top: 10px;
    color: #505050;
    line-height: 1.58em
}

.page-1 .rpSTU {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    z-index: 2;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .98);
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%);
    bottom: -300px
}

.page-3 {
    padding: 50px 0
}

.featured {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.landing-page .featured li {
    position: relative;
    width: 32%;
    margin-bottom: 15px
}

.featured .featuredSc-content {
    text-align: center;
    height: 100%;
    display: block;
    position: relative;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .9);
    padding: 15px 20px 20px;
    overflow: hidden;
    box-shadow: 0 6px 18px 0 rgba(9, 32, 76, .05);
    margin: 0;
    flex: 1
}

.featured .featuredSc-title {
    font-weight: 700;
    line-height: 1.48em;
    font-size: 18px;
    color: #161617
}

.featured .content {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.48em
}

.how {
    display: flex;
    text-align: center;
    flex-wrap: wrap
}

.how .how-item {
    width: calc(100% / 3);
    padding: 0 20px;
    position: relative
}

.how .how-item .how-icon {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #FFF;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    transition: .3s ease
}

.how .how-item .how-icon:hover {
    transform: scale(1.05);
    box-shadow: rgba(149, 157, 165, 0.25) 0 8px 24px
}

.how .how-item .how-icon svg {
    height: 50px;
    width: 50px
}

.how .how-item .how-icon .process-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    top: 13px;
    right: 0;
    background: var(--page-1);
    color: #fefefe;
    display: flex;
    justify-content: center;
    align-items: center
}

.how .how-item .how-title {
    margin-top: 15px
}

.how .how-item .how-title span {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 15px
}

.how .how-item .how-title p {
    font-size: 95%;
    color: #999
}

.page-5 {
    padding: 100px 0
}

.review {
    position: relative;
    list-style: none;
    margin: 50px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap
}

.landing-page .review li {
    width: 50%;
    display: block;
    margin: 0
}

.landing-page .review .review-content {
    padding: 40px 30px;
    font-size: 15px;
    width: 100%;
    line-height: 1.58em;
    margin: 0
}

.review li.color .review-content {
    background-color: #fff
}

.page-6 {
    padding: 60px 0;
    background-color: var(--page-6)
}

.page-6 .landing-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center
}

.page-6 .landing-content .titlex {
    margin: 0;
    text-align: inherit;
    color: #fefefe
}

.page-6 .landing-content .titlex span {
    color: #fefefe;
    opacity: .6
}

.page-6 .button.outline {
    background-color: transparent;
    border: 3px solid #fff;
    color: #fff;
    font-size: .9rem
}

@media screen and (min-width:767px) {
    .how .how-item:not(:last-child)::after {
        content: "";
        height: 4px;
        width: 80px;
        background: #ededed;
        position: absolute;
        top: 65px;
        right: -14%;
        border-radius: 50px
    }
}

@media screen and (max-width:768px) {
    .landing-page .featured li {
        width: 100%
    }

    .review {
        max-width: 500px;
        margin: auto;
        display: block
    }

    .landing-page .review li {
        width: 100%
    }

    .review .review-content {
        font-size: 14px;
        line-height: 1.58em
    }

    .review .review-content {
        font-size: 14px
    }

    .how .how-item {
        width: 100%;
        margin-bottom: 15px
    }

    .review li:nth-child(3) .review-content {
        background-color: transparent
    }

    .review li:nth-child(4) .review-content {
        background-color: #fff
    }
}

.prv_cnt,
.stu_cnt {
    --mnclr: #ed143d !important;
    font-family: 'Product Sans', sans-serif !important;
    padding: 20px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 1080px !important;
    border-radius: 12px !important;
    box-shadow: 0 0 25px -5px rgba(0, 0, 0, .3) !important;
}

.stu_ftr_inp input {
    -webkit-box-shadow: 0 0 0 50px #f5f5f5 inset !important;
    -webkit-text-fill-color: #333;
}

.note a {
    text-decoration: underline;
    color: #fff;
}

.footR {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px
}

.cbProfil:checked~.Iprofil,
.cbLang:checked~.Ilang,
.cbNotif:checked~.Inotif {
    visibility: visible;
    opacity: 1
}

.iPu {
    position: absolute;
    display: block;
    /* bottom:calc(65px - 80%);*/
    bottom: 0;
    right: 0;
    /* margin:0 15px;*/
    /* padding:15px;*/
    width: auto;
    max-width: 350px;
    min-width: 200px;
    background: #fff;
    color: #000;
    border-radius: 10px;
    border: 1px solid #e7eaf0;
    box-shadow: 0 10px 30px -8px rgb(0 0 0 / 15%);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 99;
    opacity: 0;
    visibility: hidden
}

.fc-ovl::after {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: background 0.1s ease, opacity 0.1s ease, visibility 0.1s ease, backdrop-filter 0.1s ease;
    background-color: transparent;
    opacity: 0;
    visibility: hidden
}

.cbProfil:checked~.profile.fc-ovl::after,
.cbLang:checked~.language.fc-ovl::after,
.cbNotif:checked~.notification.fc-ovl::after {
    opacity: 1;
    visibility: visible
}

.ipopUp-lang>.a {
    background-color: rgba(0, 0, 0, .05)
}

.iPu .ipopUp-lang>* {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    color: #000
}

.ipopUp-lang>.a::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 15px;
    border: 1px solid #000;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
    margin-right: 5px
}

/*cookie css*/
.nJ {
    position: fixed;
    left: 0;
    bottom: 22px;
    right: 0;
    max-width: 400px;
    margin-inline: 22px;
    padding: 18px 20px;
    padding-block-end: 36px;
    border-radius: 8px;
    color: var(--warnC);
    background: var(--warnBg);
    font: small/1.3 var(--fontBody-alt);
    box-shadow: 0 15px 30px -8px rgb(0 0 0 / 8%);
    z-index: 99
}

.nJ.cookie:not(.hidden) {
    display: block
}

.nJ.cookie {
    bottom: 0;
    margin-bottom: 22px;
    padding-block-end: 15px;
    color: #0e2045;
    background-color: #fffdfc;
    font-size: .94rem;
    box-shadow: 0 15px 30px 8px rgb(0 0 0 / 8%);
    transition: bottom .1s ease, opacity .1s ease, visibility .1s ease;
    animation: slideTop 2.2s ease-in forwards
}

.nJ.cookie p {
    margin-block: 0 5px
}

.nJ.cookie p a:hover {
    text-decoration: underline;
    opacity: 1
}

.nJ.cookie .ft {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    font-weight: 500
}

.nJ.cookie .ft>* {
    padding-block: 5px
}

.nJ.cookie .acc {
    cursor: pointer;
    width: auto;
    color: #fefefe;
    background: #ed143d;
    padding: 5px 12px;
    border-radius: 20px
}

.nJ.cookie .acc:hover {
    opacity: 0.8
}

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

    /* noScript/cookie */
    .nJ {
        bottom: 0;
        max-width: none;
        margin-inline: 0;
        border-radius: 0;
        box-shadow: none
    }

    .nJ.cookie {
        margin-bottom: 0
    }
}

/*<![CDATA[*/
/* Dark Mode */
.drK .tDL .d2 {
    display: block
}

.drK .tDL svg .f {
    stroke: none;
    fill: var(--darkT)
}

.drK .pThmb:not(.nul)::before {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .07) 20%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, 0))
}

.drK input::placeholder,
.drK .cpL input,
.drK .cArea label .n {
    color: rgba(255, 255, 255, .25)
}

.drK .nArea .contact-form-error-message-with-border {
    color: #f94f4f
}

.drK .cmC i[rel=image]::before,
.drK .widget input[type=text],
.drK .widget input[type=email],
.drK .widget textarea {
    background: var(--darkBs);
    border-color: rgba(255, 255, 255, .15)
}

.drK .erroC h3 span.e {
    color: var(--darkBa)
}

.drK svg,
.drK svg.c-1 {
    fill: var(--darkT)
}

.drK svg.line {
    fill: none;
    stroke: var(--darkT)
}

.drK svg.c-2 {
    fill: var(--darkTalt);
    opacity: .4
}

.drK,
.drK .headCn,
.drK .navbar {
    background: var(--darkB);
    color: var(--darkT)
}

.drK .ntfC {
    background: var(--darkBa);
    color: var(--darkTa)
}

.drK header,
.drK .tbHd,
.drK .pRelate,
.drK blockquote,
.drK blockquote.s-1,
.drK .cmC i[rel=quote],
.drK details.sp,
.drK .ps table:not(.tr-caption-container),
.drK .ps table th,
.drK .ps table:not(.tr-caption-container) tr:not(:last-child) td,
.drK .pre.tb .preH,
.drK details.ac,
.drK .ancrA,
.drK .ancrC,
.drK .pSh,
.drK .cmBd.del .cmCo,
.drK .cmHl li li .cmIn::before,
.drK .cpLb,
.drK .tpMn li.br::after,
.drK .cmHl>li:not(:last-child) {
    border-color: rgba(255, 255, 255, .15)
}

.drK .pre {
    background: var(--darkBs);
    color: var(--darkTa)
}

.drK .cmC i[rel=pre] {
    background: var(--darkB);
    color: var(--darkTa)
}

.drK footer {
    background: var(--darkBs);
    border-color: rgba(255, 255, 255, .15)
}

.drK .tIc::after,
.drK .shL a,
.drK .cpLb {
    background: rgba(0, 0, 0, .15)
}

.drK h1,
.drK h2,
.drK h3,
.drK h4,
.drK h5,
.drK h6,
.drK footer,
.drK .button {
    color: var(--darkT)
}

.drK .admPs {
    border-color: transparent
}

.drK .admPs,
.drK .dlBox,
.drK .fixLs,
.drK .cArea input:focus~.n,
.drK .cArea textarea:focus~.n,
.drK .cArea input[data-text=fl]~.n,
.drK .cArea textarea[data-text=fl]~.n,
.drK .wL.bg li>*,
.drK .BlogSearch input {
    background: var(--darkBs)
}

.drK .ancrA {
    background: var(--darkBa)
}

.drK .button.ln {
    background: transparent
}

.drK::selection,
.drK a,
.drK .free::after,
.drK .new::after,
.drK .aTtl a:hover,
.drK details.ac[open] summary,
.drK .cpL label,
.drK .wL li>*:hover .lbC,
.drK .wL li>div .lbC,
.drK .wL .lbM,
.drK .cmBtn.ln:hover,
.drK .wL.cl .lbN:hover .lbC,
.drK .wL.cl div.lbN .lbC,
.drK .tpMn .a:hover,
.drK .tpMn ul li a:hover {
    color: var(--darkU)
}

.drK .wL li>*:hover svg,
.drK .wL li>div svg {
    stroke: var(--darkU)
}

.drK .blogPg>*,
.drK .button,
.drK .zmImg::after,
.drK .widget input[type=button],
.drK .widget input[type=submit] {
    background: var(--darkU)
}

.drK .pS input[id*="1"]:checked~.tbHd label[for*="1"],
.drK .pS input[id*="2"]:checked~.tbHd label[for*="2"],
.drK .pS input[id*="3"]:checked~.tbHd label[for*="3"],
.drK .pS input[id*="4"]:checked~.tbHd label[for*="4"],
.drK .widget input[type=text]:focus,
.drK .widget input[type=email]:focus,
.drK .widget textarea:focus,
.drK .widget input[data-text=fl],
.drK .widget textarea[data-text=fl],
.drK .wL.cl .lbN:not(div):hover,
.drK .wL.cl div.lbN {
    border-color: var(--darkU)
}

.drK .button.ln:hover {
    border-color: var(--darkU);
    box-shadow: 0 0 0 1px var(--darkU) inset
}

.drK header a,
.drK .pLbls>*,
.drK .aTtl a,
.drK .blogPg>*,
.drK .brdCmb a,
.drK .wL li>*,
.drK .cmAc a,
.drK .pShc>*,
.drK .topM a,
.drK footer a {
    color: inherit
}

.drK .blogPg .nPst,
.drK .blogPg .current {
    background: var(--contentL);
    color: var(--bodyCa)
}

@media screen and (max-width:1100px) {
    .drK .tpBr {
        background: var(--darkBs)
    }

    .drK .tpC label {
        background: var(--darkBa)
    }

    .drK .tpC svg.rad {
        fill: var(--darkBa)
    }

    .drK .topI:checked~.topM .tpC label {
        background: var(--darkU)
    }
}

@media screen and (min-width:897px) {
    .drK .mnMn .a:hover {
        color: var(--darkU)
    }

    .drK .mnMn .a::after {
        border-color: var(--darkU)
    }

    .drK .mnMn ul {
        background: var(--darkBs)
    }

    .drK .mnMn ul li>*:hover {
        background: rgba(0, 0, 0, .15)
    }
}

@media screen and (min-width:641px) {
    .drK .ftMn a:hover {
        color: var(--darkU)
    }
}

@media screen and (max-width:640px) {
    .drK .ftMn {
        background: var(--darkBa)
    }
}

@media screen and (max-width:896px) {
    .drK .mnBrs {
        background: var(--darkBs)
    }

    .drK .mnMn li:not(.drp) .a:hover,
    .drK .mnMn ul li a:hover,
    .drK .mnMn li:not(.mr) .drpI:checked~.a {
        color: var(--darkU)
    }

    .drK .mnMn .a:hover svg:not(.d) {
        fill: var(--darkU)
    }

    .drK .mnMn .a:hover svg.line:not(.d) {
        fill: none;
        stroke: var(--darkU)
    }

    .drK .mnMn li:not(.mr) .a::before,
    .drK .mnMn .drp.mr li>*::before {
        border-color: var(--darkU)
    }

    .drK .mnMn>li.br::after,
    .drK .mnMn li:not(.mr) ul::before,
    .drK .mnMn li:not(.mr) li::before {
        border-color: rgba(255, 255, 255, .15)
    }
}

@media screen and (max-width:500px) {
    .drK .itemFt .itm .iCtnt {
        border-color: rgba(255, 255, 255, .15)
    }
}

/*]]>*/
.swal2-popup.swal2-toast {
    box-sizing: border-box;
    grid-column: 1/4 !important;
    grid-row: 1/4 !important;
    grid-template-columns: 1fr 99fr 1fr;
    padding: 1em;
    overflow-y: hidden;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, .075), 0 1px 2px rgba(0, 0, 0, .075), 1px 2px 4px rgba(0, 0, 0, .075), 1px 3px 8px rgba(0, 0, 0, .075), 2px 4px 16px rgba(0, 0, 0, .075);
    pointer-events: all
}

.swal2-popup.swal2-toast>* {
    grid-column: 2
}

.swal2-popup.swal2-toast .swal2-title {
    margin: .5em 1em;
    padding: 0;
    font-size: 1em;
    text-align: initial
}

.swal2-popup.swal2-toast .swal2-loading {
    justify-content: center
}

.swal2-popup.swal2-toast .swal2-input {
    height: 2em;
    margin: .5em;
    font-size: 1em
}

.swal2-popup.swal2-toast .swal2-validation-message {
    font-size: 1em
}

.swal2-popup.swal2-toast .swal2-footer {
    margin: .5em 0 0;
    padding: .5em 0 0;
    font-size: .8em
}

.swal2-popup.swal2-toast .swal2-close {
    grid-column: 3/3;
    grid-row: 1/99;
    align-self: center;
    width: .8em;
    height: .8em;
    margin: 0;
    font-size: 2em
}

.swal2-popup.swal2-toast .swal2-html-container {
    margin: .5em 1em;
    padding: 0;
    font-size: 1em;
    text-align: initial
}

.swal2-popup.swal2-toast .swal2-html-container:empty {
    padding: 0
}

.swal2-popup.swal2-toast .swal2-loader {
    grid-column: 1;
    grid-row: 1/99;
    align-self: center;
    width: 2em;
    height: 2em;
    margin: .25em
}

.swal2-popup.swal2-toast .swal2-icon {
    grid-column: 1;
    grid-row: 1/99;
    align-self: center;
    width: 2em;
    min-width: 2em;
    height: 2em;
    margin: 0 .5em 0 0
}

.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 1.8em;
    font-weight: 700
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    top: .875em;
    width: 1.375em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: .3125em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: .3125em
}

.swal2-popup.swal2-toast .swal2-actions {
    justify-content: flex-start;
    height: auto;
    margin: 0;
    margin-top: .5em;
    padding: 0 .5em
}

.swal2-popup.swal2-toast .swal2-styled {
    margin: .25em .5em;
    padding: .4em .6em;
    font-size: 1em
}

.swal2-popup.swal2-toast .swal2-success {
    border-color: #a5dc86
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
    position: absolute;
    width: 1.6em;
    height: 3em;
    transform: rotate(45deg);
    border-radius: 50%
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
    top: -.8em;
    left: -.5em;
    transform: rotate(-45deg);
    transform-origin: 2em 2em;
    border-radius: 4em 0 0 4em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
    top: -.25em;
    left: .9375em;
    transform-origin: 0 1.5em;
    border-radius: 0 4em 4em 0
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
    top: 0;
    left: .4375em;
    width: .4375em;
    height: 2.6875em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
    height: .3125em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
    top: 1.125em;
    left: .1875em;
    width: .75em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
    top: .9375em;
    right: .1875em;
    width: 1.375em
}

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
    -webkit-animation: swal2-toast-animate-success-line-tip .75s;
    animation: swal2-toast-animate-success-line-tip .75s
}

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
    -webkit-animation: swal2-toast-animate-success-line-long .75s;
    animation: swal2-toast-animate-success-line-long .75s
}

.swal2-popup.swal2-toast.swal2-show {
    -webkit-animation: swal2-toast-show .5s;
    animation: swal2-toast-show .5s
}

.swal2-popup.swal2-toast.swal2-hide {
    -webkit-animation: swal2-toast-hide .1s forwards;
    animation: swal2-toast-hide .1s forwards
}

.swal2-container {
    display: grid;
    position: fixed;
    z-index: 1060;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    grid-template-areas: "top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";
    grid-template-rows: minmax(-webkit-min-content, auto) minmax(-webkit-min-content, auto) minmax(-webkit-min-content, auto);
    grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
    height: 100%;
    padding: .625em;
    overflow-x: hidden;
    transition: background-color .1s;
    -webkit-overflow-scrolling: touch
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(0, 0, 0, .4)
}

.swal2-container.swal2-backdrop-hide {
    background: 0 0 !important
}

.swal2-container.swal2-bottom-start,
.swal2-container.swal2-center-start,
.swal2-container.swal2-top-start {
    grid-template-columns: minmax(0, 1fr) auto auto
}

.swal2-container.swal2-bottom,
.swal2-container.swal2-center,
.swal2-container.swal2-top {
    grid-template-columns: auto minmax(0, 1fr) auto
}

.swal2-container.swal2-bottom-end,
.swal2-container.swal2-center-end,
.swal2-container.swal2-top-end {
    grid-template-columns: auto auto minmax(0, 1fr)
}

.swal2-container.swal2-top-start>.swal2-popup {
    align-self: start
}

.swal2-container.swal2-top>.swal2-popup {
    grid-column: 2;
    align-self: start;
    justify-self: center
}

.swal2-container.swal2-top-end>.swal2-popup,
.swal2-container.swal2-top-right>.swal2-popup {
    grid-column: 3;
    align-self: start;
    justify-self: end
}

.swal2-container.swal2-center-left>.swal2-popup,
.swal2-container.swal2-center-start>.swal2-popup {
    grid-row: 2;
    align-self: center
}

.swal2-container.swal2-center>.swal2-popup {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center
}

.swal2-container.swal2-center-end>.swal2-popup,
.swal2-container.swal2-center-right>.swal2-popup {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: end
}

.swal2-container.swal2-bottom-left>.swal2-popup,
.swal2-container.swal2-bottom-start>.swal2-popup {
    grid-column: 1;
    grid-row: 3;
    align-self: end
}

.swal2-container.swal2-bottom>.swal2-popup {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    align-self: end
}

.swal2-container.swal2-bottom-end>.swal2-popup,
.swal2-container.swal2-bottom-right>.swal2-popup {
    grid-column: 3;
    grid-row: 3;
    align-self: end;
    justify-self: end
}

.swal2-container.swal2-grow-fullscreen>.swal2-popup,
.swal2-container.swal2-grow-row>.swal2-popup {
    grid-column: 1/4;
    width: 100%
}

.swal2-container.swal2-grow-column>.swal2-popup,
.swal2-container.swal2-grow-fullscreen>.swal2-popup {
    grid-row: 1/4;
    align-self: stretch
}

.swal2-container.swal2-no-transition {
    transition: none !important
}

.swal2-popup {
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    width: 32em;
    max-width: 100%;
    padding: 0 0 1.25em;
    border: none;
    border-radius: 5px;
    background: #fff;
    color: #545454;
    font-family: inherit;
    font-size: 1rem
}

.swal2-popup:focus {
    outline: 0
}

.swal2-popup.swal2-loading {
    overflow-y: hidden
}

.swal2-title {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: .8em 1em 0;
    color: inherit;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word
}

.swal2-actions {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 1.25em auto 0;
    padding: 0
}

.swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
    opacity: .4
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1))
}

.swal2-actions:not(.swal2-loading) .swal2-styled:active {
    background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2))
}

.swal2-loader {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    margin: 0 1.875em;
    -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    border-width: .25em;
    border-style: solid;
    border-radius: 100%;
    border-color: #2778c4 transparent #2778c4 transparent
}

.swal2-styled {
    margin: .3125em;
    padding: .625em 1.1em;
    transition: box-shadow .1s;
    box-shadow: 0 0 0 3px transparent;
    font-weight: 500
}

.swal2-styled:not([disabled]) {
    cursor: pointer
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #7066e0;
    color: #fff;
    font-size: 1em
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(112, 102, 224, .5)
}

.swal2-styled.swal2-deny {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #dc3741;
    color: #fff;
    font-size: 1em
}

.swal2-styled.swal2-deny:focus {
    box-shadow: 0 0 0 3px rgba(220, 55, 65, .5)
}

.swal2-styled.swal2-cancel {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #6e7881;
    color: #fff;
    font-size: 1em
}

.swal2-styled.swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(110, 120, 129, .5)
}

.swal2-styled.swal2-default-outline:focus {
    box-shadow: 0 0 0 3px rgba(100, 150, 200, .5)
}

.swal2-styled:focus {
    outline: 0
}

.swal2-styled::-moz-focus-inner {
    border: 0
}

.swal2-footer {
    justify-content: center;
    margin: 1em 0 0;
    padding: 1em 1em 0;
    border-top: 1px solid #eee;
    color: inherit;
    font-size: 1em
}

.swal2-timer-progress-bar-container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    grid-column: auto !important;
    overflow: hidden;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
}

.swal2-timer-progress-bar {
    width: 100%;
    height: .25em;
    background: rgba(0, 0, 0, .2)
}

.swal2-image {
    max-width: 100%;
    margin: 2em auto 1em
}

.swal2-close {
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: -1.2em;
    padding: 0;
    overflow: hidden;
    transition: color .1s, box-shadow .1s;
    border: none;
    border-radius: 5px;
    background: 0 0;
    color: #ccc;
    font-family: serif;
    font-family: monospace;
    font-size: 2.5em;
    cursor: pointer;
    justify-self: end
}

.swal2-close:hover {
    transform: none;
    background: 0 0;
    color: #f27474
}

.swal2-close:focus {
    outline: 0;
    box-shadow: inset 0 0 0 3px rgba(100, 150, 200, .5)
}

.swal2-close::-moz-focus-inner {
    border: 0
}

.swal2-html-container {
    z-index: 1;
    justify-content: center;
    margin: 1em 1.6em .3em;
    padding: 0;
    overflow: auto;
    color: inherit;
    font-size: 1.125em;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    word-wrap: break-word;
    word-break: break-word
}

.swal2-checkbox,
.swal2-file,
.swal2-input,
.swal2-radio,
.swal2-select,
.swal2-textarea {
    margin: 1em 2em 3px
}

.swal2-file,
.swal2-input,
.swal2-textarea {
    box-sizing: border-box;
    width: auto;
    transition: border-color .1s, box-shadow .1s;
    border: 1px solid #d9d9d9;
    border-radius: .1875em;
    background: inherit;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px transparent;
    color: inherit;
    font-size: 1.125em
}

.swal2-file.swal2-inputerror,
.swal2-input.swal2-inputerror,
.swal2-textarea.swal2-inputerror {
    border-color: #f27474 !important;
    box-shadow: 0 0 2px #f27474 !important
}

.swal2-file:focus,
.swal2-input:focus,
.swal2-textarea:focus {
    border: 1px solid #b4dbed;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(100, 150, 200, .5)
}

.swal2-file::-moz-placeholder,
.swal2-input::-moz-placeholder,
.swal2-textarea::-moz-placeholder {
    color: #ccc
}

.swal2-file:-ms-input-placeholder,
.swal2-input:-ms-input-placeholder,
.swal2-textarea:-ms-input-placeholder {
    color: #ccc
}

.swal2-file::placeholder,
.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: #ccc
}

.swal2-range {
    margin: 1em 2em 3px;
    background: #fff
}

.swal2-range input {
    width: 80%
}

.swal2-range output {
    width: 20%;
    color: inherit;
    font-weight: 600;
    text-align: center
}

.swal2-range input,
.swal2-range output {
    height: 2.625em;
    padding: 0;
    font-size: 1.125em;
    line-height: 2.625em
}

.swal2-input {
    height: 2.625em;
    padding: 0 .75em
}

.swal2-file {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    background: inherit;
    font-size: 1.125em
}

.swal2-textarea {
    height: 6.75em;
    padding: .75em
}

.swal2-select {
    min-width: 50%;
    max-width: 100%;
    padding: .375em .625em;
    background: inherit;
    color: inherit;
    font-size: 1.125em
}

.swal2-checkbox,
.swal2-radio {
    align-items: center;
    justify-content: center;
    background: #fff;
    color: inherit
}

.swal2-checkbox label,
.swal2-radio label {
    margin: 0 .6em;
    font-size: 1.125em
}

.swal2-checkbox input,
.swal2-radio input {
    flex-shrink: 0;
    margin: 0 .4em
}

.swal2-input-label {
    display: flex;
    justify-content: center;
    margin: 1em auto 0
}

.swal2-validation-message {
    align-items: center;
    justify-content: center;
    margin: 1em 0 0;
    padding: .625em;
    overflow: hidden;
    background: #f0f0f0;
    color: #666;
    font-size: 1em;
    font-weight: 300
}

.swal2-validation-message::before {
    content: "!";
    display: inline-block;
    width: 1.5em;
    min-width: 1.5em;
    height: 1.5em;
    margin: 0 .625em;
    border-radius: 50%;
    background-color: #f27474;
    color: #fff;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center
}

.swal2-icon {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 2.5em auto .6em;
    border: .25em solid transparent;
    border-radius: 50%;
    border-color: #000;
    font-family: inherit;
    line-height: 5em;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 3.75em
}

.swal2-icon.swal2-error {
    border-color: #f27474;
    color: #f27474
}

.swal2-icon.swal2-error .swal2-x-mark {
    position: relative;
    flex-grow: 1
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    display: block;
    position: absolute;
    top: 2.3125em;
    width: 2.9375em;
    height: .3125em;
    border-radius: .125em;
    background-color: #f27474
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: 1.0625em;
    transform: rotate(45deg)
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: 1em;
    transform: rotate(-45deg)
}

.swal2-icon.swal2-error.swal2-icon-show {
    -webkit-animation: swal2-animate-error-icon .5s;
    animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark {
    -webkit-animation: swal2-animate-error-x-mark .5s;
    animation: swal2-animate-error-x-mark .5s
}

.swal2-icon.swal2-warning {
    border-color: #facea8;
    color: #f8bb86
}

.swal2-icon.swal2-warning.swal2-icon-show {
    -webkit-animation: swal2-animate-error-icon .5s;
    animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-warning.swal2-icon-show .swal2-icon-content {
    -webkit-animation: swal2-animate-i-mark .5s;
    animation: swal2-animate-i-mark .5s
}

.swal2-icon.swal2-info {
    border-color: #9de0f6;
    color: #3fc3ee
}

.swal2-icon.swal2-info.swal2-icon-show {
    -webkit-animation: swal2-animate-error-icon .5s;
    animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-info.swal2-icon-show .swal2-icon-content {
    -webkit-animation: swal2-animate-i-mark .8s;
    animation: swal2-animate-i-mark .8s
}

.swal2-icon.swal2-question {
    border-color: #c9dae1;
    color: #87adbd
}

.swal2-icon.swal2-question.swal2-icon-show {
    -webkit-animation: swal2-animate-error-icon .5s;
    animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-question.swal2-icon-show .swal2-icon-content {
    -webkit-animation: swal2-animate-question-mark .8s;
    animation: swal2-animate-question-mark .8s
}

.swal2-icon.swal2-success {
    border-color: #a5dc86;
    color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
    position: absolute;
    width: 3.75em;
    height: 7.5em;
    transform: rotate(45deg);
    border-radius: 50%
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
    top: -.4375em;
    left: -2.0635em;
    transform: rotate(-45deg);
    transform-origin: 3.75em 3.75em;
    border-radius: 7.5em 0 0 7.5em
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
    top: -.6875em;
    left: 1.875em;
    transform: rotate(-45deg);
    transform-origin: 0 3.75em;
    border-radius: 0 7.5em 7.5em 0
}

.swal2-icon.swal2-success .swal2-success-ring {
    position: absolute;
    z-index: 2;
    top: -.25em;
    left: -.25em;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    border: .25em solid rgba(165, 220, 134, .3);
    border-radius: 50%
}

.swal2-icon.swal2-success .swal2-success-fix {
    position: absolute;
    z-index: 1;
    top: .5em;
    left: 1.625em;
    width: .4375em;
    height: 5.625em;
    transform: rotate(-45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    display: block;
    position: absolute;
    z-index: 2;
    height: .3125em;
    border-radius: .125em;
    background-color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
    top: 2.875em;
    left: .8125em;
    width: 1.5625em;
    transform: rotate(45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
    top: 2.375em;
    right: .5em;
    width: 2.9375em;
    transform: rotate(-45deg)
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip {
    -webkit-animation: swal2-animate-success-line-tip .75s;
    animation: swal2-animate-success-line-tip .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
    -webkit-animation: swal2-animate-success-line-long .75s;
    animation: swal2-animate-success-line-long .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
    -webkit-animation: swal2-rotate-success-circular-line 4.25s ease-in;
    animation: swal2-rotate-success-circular-line 4.25s ease-in
}

.swal2-progress-steps {
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    margin: 1.25em auto;
    padding: 0;
    background: inherit;
    font-weight: 600
}

.swal2-progress-steps li {
    display: inline-block;
    position: relative
}

.swal2-progress-steps .swal2-progress-step {
    z-index: 20;
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background: #2778c4;
    color: #fff;
    line-height: 2em;
    text-align: center
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: #2778c4
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step {
    background: #add8e6;
    color: #fff
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line {
    background: #add8e6
}

.swal2-progress-steps .swal2-progress-step-line {
    z-index: 10;
    flex-shrink: 0;
    width: 2.5em;
    height: .4em;
    margin: 0 -1px;
    background: #2778c4
}

[class^=swal2] {
    -webkit-tap-highlight-color: transparent
}

.swal2-show {
    -webkit-animation: swal2-show .3s;
    animation: swal2-show .3s
}

.swal2-hide {
    -webkit-animation: swal2-hide .15s forwards;
    animation: swal2-hide .15s forwards
}

.swal2-noanimation {
    transition: none
}

.swal2-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.swal2-rtl .swal2-close {
    margin-right: initial;
    margin-left: 0
}

.swal2-rtl .swal2-timer-progress-bar {
    right: 0;
    left: auto
}

@-webkit-keyframes swal2-toast-show {
    0% {
        transform: translateY(-.625em) rotateZ(2deg)
    }

    33% {
        transform: translateY(0) rotateZ(-2deg)
    }

    66% {
        transform: translateY(.3125em) rotateZ(2deg)
    }

    100% {
        transform: translateY(0) rotateZ(0)
    }
}

@keyframes swal2-toast-show {
    0% {
        transform: translateY(-.625em) rotateZ(2deg)
    }

    33% {
        transform: translateY(0) rotateZ(-2deg)
    }

    66% {
        transform: translateY(.3125em) rotateZ(2deg)
    }

    100% {
        transform: translateY(0) rotateZ(0)
    }
}

@-webkit-keyframes swal2-toast-hide {
    100% {
        transform: rotateZ(1deg);
        opacity: 0
    }
}

@keyframes swal2-toast-hide {
    100% {
        transform: rotateZ(1deg);
        opacity: 0
    }
}

@-webkit-keyframes swal2-toast-animate-success-line-tip {
    0% {
        top: .5625em;
        left: .0625em;
        width: 0
    }

    54% {
        top: .125em;
        left: .125em;
        width: 0
    }

    70% {
        top: .625em;
        left: -.25em;
        width: 1.625em
    }

    84% {
        top: 1.0625em;
        left: .75em;
        width: .5em
    }

    100% {
        top: 1.125em;
        left: .1875em;
        width: .75em
    }
}

@keyframes swal2-toast-animate-success-line-tip {
    0% {
        top: .5625em;
        left: .0625em;
        width: 0
    }

    54% {
        top: .125em;
        left: .125em;
        width: 0
    }

    70% {
        top: .625em;
        left: -.25em;
        width: 1.625em
    }

    84% {
        top: 1.0625em;
        left: .75em;
        width: .5em
    }

    100% {
        top: 1.125em;
        left: .1875em;
        width: .75em
    }
}

@-webkit-keyframes swal2-toast-animate-success-line-long {
    0% {
        top: 1.625em;
        right: 1.375em;
        width: 0
    }

    65% {
        top: 1.25em;
        right: .9375em;
        width: 0
    }

    84% {
        top: .9375em;
        right: 0;
        width: 1.125em
    }

    100% {
        top: .9375em;
        right: .1875em;
        width: 1.375em
    }
}

@keyframes swal2-toast-animate-success-line-long {
    0% {
        top: 1.625em;
        right: 1.375em;
        width: 0
    }

    65% {
        top: 1.25em;
        right: .9375em;
        width: 0
    }

    84% {
        top: .9375em;
        right: 0;
        width: 1.125em
    }

    100% {
        top: .9375em;
        right: .1875em;
        width: 1.375em
    }
}

@-webkit-keyframes swal2-show {
    0% {
        transform: scale(.7)
    }

    45% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(.95)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes swal2-show {
    0% {
        transform: scale(.7)
    }

    45% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(.95)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes swal2-hide {
    0% {
        transform: scale(1);
        opacity: 1
    }

    100% {
        transform: scale(.5);
        opacity: 0
    }
}

@keyframes swal2-hide {
    0% {
        transform: scale(1);
        opacity: 1
    }

    100% {
        transform: scale(.5);
        opacity: 0
    }
}

@-webkit-keyframes swal2-animate-success-line-tip {
    0% {
        top: 1.1875em;
        left: .0625em;
        width: 0
    }

    54% {
        top: 1.0625em;
        left: .125em;
        width: 0
    }

    70% {
        top: 2.1875em;
        left: -.375em;
        width: 3.125em
    }

    84% {
        top: 3em;
        left: 1.3125em;
        width: 1.0625em
    }

    100% {
        top: 2.8125em;
        left: .8125em;
        width: 1.5625em
    }
}

@keyframes swal2-animate-success-line-tip {
    0% {
        top: 1.1875em;
        left: .0625em;
        width: 0
    }

    54% {
        top: 1.0625em;
        left: .125em;
        width: 0
    }

    70% {
        top: 2.1875em;
        left: -.375em;
        width: 3.125em
    }

    84% {
        top: 3em;
        left: 1.3125em;
        width: 1.0625em
    }

    100% {
        top: 2.8125em;
        left: .8125em;
        width: 1.5625em
    }
}

@-webkit-keyframes swal2-animate-success-line-long {
    0% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }

    65% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }

    84% {
        top: 2.1875em;
        right: 0;
        width: 3.4375em
    }

    100% {
        top: 2.375em;
        right: .5em;
        width: 2.9375em
    }
}

@keyframes swal2-animate-success-line-long {
    0% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }

    65% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }

    84% {
        top: 2.1875em;
        right: 0;
        width: 3.4375em
    }

    100% {
        top: 2.375em;
        right: .5em;
        width: 2.9375em
    }
}

@-webkit-keyframes swal2-rotate-success-circular-line {
    0% {
        transform: rotate(-45deg)
    }

    5% {
        transform: rotate(-45deg)
    }

    12% {
        transform: rotate(-405deg)
    }

    100% {
        transform: rotate(-405deg)
    }
}

@keyframes swal2-rotate-success-circular-line {
    0% {
        transform: rotate(-45deg)
    }

    5% {
        transform: rotate(-45deg)
    }

    12% {
        transform: rotate(-405deg)
    }

    100% {
        transform: rotate(-405deg)
    }
}

@-webkit-keyframes swal2-animate-error-x-mark {
    0% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }

    50% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }

    80% {
        margin-top: -.375em;
        transform: scale(1.15)
    }

    100% {
        margin-top: 0;
        transform: scale(1);
        opacity: 1
    }
}

@keyframes swal2-animate-error-x-mark {
    0% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }

    50% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }

    80% {
        margin-top: -.375em;
        transform: scale(1.15)
    }

    100% {
        margin-top: 0;
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes swal2-animate-error-icon {
    0% {
        transform: rotateX(100deg);
        opacity: 0
    }

    100% {
        transform: rotateX(0);
        opacity: 1
    }
}

@keyframes swal2-animate-error-icon {
    0% {
        transform: rotateX(100deg);
        opacity: 0
    }

    100% {
        transform: rotateX(0);
        opacity: 1
    }
}

@-webkit-keyframes swal2-rotate-loading {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes swal2-rotate-loading {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes swal2-animate-question-mark {
    0% {
        transform: rotateY(-360deg)
    }

    100% {
        transform: rotateY(0)
    }
}

@keyframes swal2-animate-question-mark {
    0% {
        transform: rotateY(-360deg)
    }

    100% {
        transform: rotateY(0)
    }
}

@-webkit-keyframes swal2-animate-i-mark {
    0% {
        transform: rotateZ(45deg);
        opacity: 0
    }

    25% {
        transform: rotateZ(-25deg);
        opacity: .4
    }

    50% {
        transform: rotateZ(15deg);
        opacity: .8
    }

    75% {
        transform: rotateZ(-5deg);
        opacity: 1
    }

    100% {
        transform: rotateX(0);
        opacity: 1
    }
}

@keyframes swal2-animate-i-mark {
    0% {
        transform: rotateZ(45deg);
        opacity: 0
    }

    25% {
        transform: rotateZ(-25deg);
        opacity: .4
    }

    50% {
        transform: rotateZ(15deg);
        opacity: .8
    }

    75% {
        transform: rotateZ(-5deg);
        opacity: 1
    }

    100% {
        transform: rotateX(0);
        opacity: 1
    }
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow: hidden
}

body.swal2-height-auto {
    height: auto !important
}

body.swal2-no-backdrop .swal2-container {
    background-color: transparent !important;
    pointer-events: none
}

body.swal2-no-backdrop .swal2-container .swal2-popup {
    pointer-events: all
}

body.swal2-no-backdrop .swal2-container .swal2-modal {
    box-shadow: 0 0 10px rgba(0, 0, 0, .4)
}

@media print {
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
        overflow-y: scroll !important
    }

    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown)>[aria-hidden=true] {
        display: none
    }

    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
        position: static !important
    }
}

body.swal2-toast-shown .swal2-container {
    box-sizing: border-box;
    width: 360px;
    max-width: 100%;
    background-color: transparent;
    pointer-events: none
}

body.swal2-toast-shown .swal2-container.swal2-top {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto
}

body.swal2-toast-shown .swal2-container.swal2-top-left,
body.swal2-toast-shown .swal2-container.swal2-top-start {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0
}

body.swal2-toast-shown .swal2-container.swal2-center-left,
body.swal2-toast-shown .swal2-container.swal2-center-start {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-center {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%)
}

body.swal2-toast-shown .swal2-container.swal2-center-end,
body.swal2-toast-shown .swal2-container.swal2-center-right {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-left,
body.swal2-toast-shown .swal2-container.swal2-bottom-start {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0
}

body.swal2-toast-shown .swal2-container.swal2-bottom {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-end,
body.swal2-toast-shown .swal2-container.swal2-bottom-right {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto
}