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

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

.drK .downloadInfo a, .drK .downloadInfo .fileType{
    background: rgba(0,0,0,.1);
    border-radius: 50px;
    color: white;
}

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

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

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

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

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

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

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

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

.kailyTargetLink {
    display: none
}

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

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

    .downloadInfo a:after {
        display: none
    }

    .downloadInfo a .icon {
        margin: 0
    }
}

/* CSS darkmode adjust the class if different or delete this section */
.drK .downloadInfo {
    background: var(--darkBa);
}

.drk .downloadInfo .fileType {
    background-color: #212121
}

.drK .downloadInfo .fileLink {
    color: #FFFFFF
}

/*Pricing Section by Kaily*/
.tableWrap {
    position: relative;
    width: 350px;
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 3px 5px 30px 5px rgba(46, 56, 77, .1);
    margin: auto
}

.tableWrap .tab {
    height: 55px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 30px;
    position: relative
}

.tab label {
    height: 100%;
    z-index: 2;
    width: 30%;
    display: flex;
    cursor: pointer;
    font-size: 15px;
    position: relative;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease
}

#tab-1:checked~.tab .tab-1,
#tab-2:checked~.tab .tab-2,
#tab-3:checked~.tab .tab-3 {
    color: #fefefe
}

.tab label:nth-child(2) {
    width: 40%
}

.tab .tabSlider {
    position: absolute;
    height: 85%;
    border-radius: inherit;
    background: #aa00f8;
    opacity: .8;
    transition: all 0.3s ease
}

#tab-1:checked~.tab .tabSlider {
    left: 0%;
    width: 90px;
    transform: translateX(5%)
}

#tab-2:checked~.tab .tabSlider {
    left: 50%;
    width: 120px;
    transform: translateX(-50%)
}

#tab-3:checked~.tab .tabSlider {
    left: 100%;
    width: 95px;
    transform: translateX(-105%)
}

.tableWrap input[type='radio'] {
    display: none
}

.tableCard {
    overflow: hidden
}

.tableCard .tableCards {
    display: flex;
    width: 300%
}

.tableCards .tableS {
    width: 33.4%
}

.tableCards .tableRow-1 {
    transition: all 0.3s ease
}

#tab-1:checked~.tableCard .tableCards .tableRow-1 {
    margin-left: 0%
}

#tab-2:checked~.tableCard .tableCards .tableRow-1 {
    margin-left: -33.4%
}

#tab-3:checked~.tableCard .tableCards .tableRow-1 {
    margin-left: -66.8%
}

.tableS .tableDetail {
    margin: 20px 0;
    text-align: center;
    padding-bottom: 25px;
    border-bottom: 1px solid #e6e6e6
}

.tableDetail .tableHarga {
    font-size: 55px;
    font-weight: 600;
    position: relative
}

.tableDetail .tableHarga:before,
.tableDetail .tableHarga:after {
    position: absolute;
    font-weight: 400
}

.tableDetail .tableHarga:before {
    content: 'Rs';
    left: -30px;
    top: 17px;
    font-size: 20px
}

.tableDetail .tableHarga:after {
    content: '/-';
    right: -27px;
    bottom: 12px;
    font-size: 23px;
    font-weight: 600
}

.tableDetail p {
    font-size: 18px;
    margin-top: 5px
}

.tableS .tableContent li {
    display: flex;
    font-size: 15px;
    list-style: none;
    margin-bottom: 10px;
    align-items: center
}

.tableContent li svg {
    flex-shrink: 0;
    height: 20px;
    margin-right: 10px;
    margin-top: 4px;
    stroke: #aa00f8;
    fill: none;
}

.tableContent li span {
    margin-left: 10px
}

.tableWrap .buttonx {
    width: 90%;
    border-radius: 25px;
    border: 1px #ccc solid;
    outline: none;
    height: 50px;
    font-size: 18px;
    color: #444;
    cursor: pointer;
    margin: 20px 25px 20px 10px;
    background: transparent;
    transition: transform 0.3s ease;
    align-items: center
}

.tableWrap .buttonx:hover {
    transform: scale(0.98);
    border: 1px #aa00f8 solid;
    color: #8800f8;
    outline: none
}

.buttonx a {
    color: black;
    text-decoration: none
}

/*Dark mode CSS (.drK) adjust the class if different or delete this section */
.drK .tableWrap {
    background-color: var(--darkBa);
    color: #fefefe
}

.drK .buttonx a {
    color: #fefefe
}

.drK .tableWrap .tab,
.drK .tableS .tableDetail,
.drK .tableWrap .buttonx {
    border-color: rgba(255, 255, 255, .1)
}

/* bookmark */
.isBkm,
.cBkPs {
    display: block
}


.tBkmt::before {
    background: #e6e6e6;
    border-radius: 10px;
    color: var(--bodyC);
    content: attr(data-text);
    font-size: 90%;
    padding: 2px 5px;
    position: absolute;
    right: 2px;
    top: -3px;
    z-index: 2
}

.tBkmt.n::before {
    display: none
}

.wBkm {
    background: var(--contentB);
    border-radius: 16px 5px 16px 16px;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, .1);
    display: flex;
    max-height: 400px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: -5px;
    transition: var(--trans-4);
    visibility: hidden;
    width: 375px;
    z-index: 4;
    right: 25px
}

.Rtl .wBkm {
    right: unset;
    left: 0;
    border-radius: 5px 16px 16px 16px
}

.drK .wBkm {
    background: var(--darkBs)
}

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

.bkmI:checked~.wBkm {
    opacity: 1;
    top: 0;
    visibility: visible;
    margin-top: 20px;
}

.bkmI:checked~.bkmCls {
    opacity: 1;
    visibility: visible;
    z-index: 3
}

.bkmH .c {
    display: none
}

@media screen and (max-width:500px) {
    .bkmI:checked~.wBkm {
        bottom: 0;
        top: auto
    }

    .wBkm,
    .Rtl .wBkm {
        border-radius: 12px 12px 0 0;
        bottom: -100%;
        left: 0;
        max-height: calc(100% - var(--headerH));
        position: fixed;
        right: 0;
        top: auto;
        width: 100%
    }

    .bkmH .c {
        display: flex
    }

    .bkmI:checked~.bkmCls {
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        backdrop-filter: saturate(180%) blur(10px);
        background: rgba(0, 0, 0, .2)
    }
}

.bkmC>.n {
    animation: opaC0 .3s 0s, opaCity .5s .3s;
    text-align: center
}

.bkmC .n>svg {
    color: var(--linkC);
    height: 30px;
    width: 30px
}

.drK .bkmC .n>svg {
    color: var(--darkU)
}

.bkmC .n>a {
    font-size: 90%;
    justify-content: center;
    min-width: 100%;
    padding: 6px 12px
}

.bkmC .item {
    align-items: center;
    display: flex;
    position: relative;
    width: 100%
}

.bkmC .item:not(:last-child) {
    margin-bottom: 15px
}

.bkmC .pThmb {
    border-radius: 10px;
    flex: 0 0 80px;
    margin: 0
}

.bkmC .pThmb>* {
    padding-top: 100%
}

.bkmC .thmb {
    text-align: center
}

.bkmC .pThmb .bkmImg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: var(--trans-2)
}

.bkmC .pThmb:hover .bkmImg {
    transform: scale(1.04)
}

.bkmC .pThmb>::before {
    -webkit-transform: translate(-50%, -50%);
    content: 'No image';
    display: block;
    font-size: 12px;
    left: 50%;
    max-height: 100%;
    max-width: none;
    opacity: .7;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.bkmC .itmTtl {
    padding: 0 12px;
    position: relative;
    width: calc(100% - 80px)
}

.bkmC a.thmb::before {
    color: var(--bodyC)
}

.drK .bkmC a.thmb::before {
    color: var(--darkT)
}

.bkmC .itmTtl>* {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
    line-height: 22px
}

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

.drK .bkmC .item a:hover {
    color: var(--darkU)
}

.del svg {
    transition: var(--trans-2)
}

.del:hover svg {
    cursor: pointer;
    stroke: var(--linkC);
    transform: scale(1.1)
}

.drK .del:hover svg {
    stroke: var(--darkU)
}

.bkmC .item.d {
    animation: delBkm 1s 0s forwards;
    overflow: hidden
}

@keyframes delBkm {
    0% {
        opacity: 1
    }

    50% {
        opacity: .5;
        left: 0
    }

    100% {
        opacity: 0;
        left: 500px
    }
}

.bM {
    overflow: hidden;
    cursor: pointer
}

.iFxd .bM::after {
    content: attr(aria-label);
    white-space: nowrap;
    transition: all .4s cubic-bezier(.18, .89, .32, 1.28);
    width: 0;
    opacity: 0;
    visibility: hidden
}

.iFxd .bM:hover::after {
    width: 63px;
    opacity: 1;
    visibility: visible
}

.iFxd .bM.a::after {
    content: attr(data-added)
}

.iFxd .bM.a:hover::after {
    width: 50px
}

.iFxd .bM:hover {
    opacity: .8
}

.drK .iFxd .bM:hover::after {
    color: black;
}


/* Toast Notification by Kaily */
.tNtf span {
    position: fixed;
    left: 24px;
    bottom: -70px;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-bottom: 20px;
    z-index: 99981;
    background: #323232;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    font-family: inherit;
    border-radius: 3px;
    padding: 13px 24px;
    box-shadow: 0 5px 35px rgba(149, 157, 165, .3);
    opacity: 0;
    transition: all .1s ease;
    animation: slideinwards 2s ease forwards;
    -webkit-animation: slideinwards 2s ease forwards
}

@media screen and (max-width:500px) {
    .tNtf span {
        margin-bottom: 20px;
        left: 20px;
        right: 20px;
        font-size: 13px
    }
}

@keyframes slideinwards {
    0% {
        opacity: 0
    }

    20% {
        opacity: 1;
        bottom: 0
    }

    50% {
        opacity: 1;
        bottom: 0
    }

    80% {
        opacity: 1;
        bottom: 0
    }

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

@-webkit-keyframes slideinwards {
    0% {
        opacity: 0
    }

    20% {
        opacity: 1;
        bottom: 0
    }

    50% {
        opacity: 1;
        bottom: 0
    }

    80% {
        opacity: 1;
        bottom: 0
    }

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

.drK .tNtf span {
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2)
}

.drK .tNtf svg {
    stroke: #fefefe
}

/* Pop-Up Box (Style 2) by Kaily */
.popSc {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 99980;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center
}

.popSc.hidden {
    display: none
}

.popSc .popBo {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgb(0 0 0 / 20%)
}

.popSc .popBo svg {
    display: block;
    width: 50px;
    height: 50px;
    fill: none !important;
    stroke: #08102b;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5
}

.popSc .popBo h2 {
    margin: 10px 0 15px 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #08102b
}

.popSc .popBo p {
    margin: 0;
    line-height: 1.7em;
    font-size: 0.9rem;
    color: #08102b
}

.popSc .popBo .popBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    outline: none;
    border: none;
    background: #482dff;
    border-radius: 50%;
    margin-top: 20px;
    transition: all .2s ease;
    -webkit-transition: all .2s ease
}

.popSc .popBo .popBtn:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05)
}

.popSc .popBo .popBtn svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
    flex-shrink: 0
}

.popSc .popBo .popBtn svg.r {
    animation: rotateIcn 1.5s infinite linear;
    -webkit-animation: rotateIcn 1.5s infinite linear
}

.popSc {
    animation: popupBlur .3s ease-in;
    -webkit-animation: popupBlur .3s
}

.popSc>* {
    animation: popupScale .3s ease-in;
    -webkit-animation: popupScale .3s
}

.drK .popSc {
    background: rgba(0, 0, 0, 0.1)
}

.drK .popSc .popBo {
    background: rgba(50, 50, 50, 0.8)
}

.drK .popSc .popBo svg {
    stroke: #fefefe
}

.drK .popSc .popBo p,
.drK .popSc .popBo h2 {
    color: #fefefe
}

@keyframes popupBlur {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes popupBlur {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes popupScale {
    from {
        transform: scale(0);
        animation-timing-function: ease-in;
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes popupScale {
    from {
        -webkit-transform: scale(0);
        -webkit-animation-timing-function: ease-in;
        opacity: 0
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

@keyframes rotateIcn {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(359deg)
    }
}

@-webkit-keyframes rotateIcn {
    from {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg)
    }
}

/* Cookies Consent Notice by Kaily */
.ckW {
    position: fixed;
    top: auto;
    left: 40px;
    right: auto;
    bottom: -600px;
    z-index: 10;
    display: none;
    padding: 20px;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 0 40px rgba(0, 0, 0, .1);
    animation: ckUpD 2.5s forwards;
    -webkit-animation: ckUpD 2.5s forwards;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    max-width: 400px
}

.ckW.v {
    display: block
}

.ckW.a {
    animation: ckDnD 2.5s backwards;
    -webkit-animation: ckDnD 2.5s backwards;
    animation-delay: .3s;
    -webkit-animation-delay: .3s
}

.ckH {
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--fontBa)
}

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

.ckD {
    font-size: 14px;
    line-height: 1.4rem;
    font-family: var(--fontBa)
}

.ckF {
    margin-top: 15px;
    display: flex;
    justify-content: center
}

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

.ckF>*:first-child {
    margin-right: 10px;
    background: var(--linkB);
    color: #fffdfc
}

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

.ckB {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 15px;
    outline: 0;
    border: 0;
    border-radius: var(--buttonR);
    line-height: 20px;
    color: rgba(0, 0, 0, .8);
    background: #e9e9e9;
    font-size: 14px;
    font-family: var(--fontB);
    white-space: nowrap;
    overflow: hidden
}

.ckB:hover {
    opacity: .8
}

.Rtl .ckW {
    left: auto;
    right: 40px
}

.Rtl .ckF>*:first-child {
    margin-right: 0
}

.Rtl .ckF>*:last-child {
    margin-right: 10px
}

@media screen and (max-width:768px) {
    .ckW {
        left: 20px;
        right: 20px;
        animation: ckUpM 2.5s forwards;
        -webkit-animation: ckUpM 2.5s forwards
    }

    .ckW.a {
        animation: ckDnM 2.5s backwards;
        animation-delay: .3s;
        -webkit-animation: ckDnM 2.5s backwards;
        -webkit-animation-delay: .3s
    }

    .Rtl .ckW {
        left: 20px;
        right: 20px
    }
}

@keyframes ckUpD {
    100% {
        bottom: 40px
    }
}

@keyframes ckUpM {
    100% {
        bottom: 20px
    }
}

@keyframes ckDnD {
    0% {
        bottom: 40px
    }

    100% {
        bottom: -600px
    }
}

@keyframes ckDnM {
    0% {
        bottom: 20px
    }

    100% {
        bottom: -600px
    }
}

@-webkit-keyframes ckUpD {
    100% {
        bottom: 40px
    }
}

@-webkit-keyframes ckUpM {
    100% {
        bottom: 20px
    }
}

@-webkit-keyframes ckDnD {
    0% {
        bottom: 40px
    }

    100% {
        bottom: -600px
    }
}

@-webkit-keyframes ckDnM {
    0% {
        bottom: 20px
    }

    100% {
        bottom: -600px
    }
}

.drK .ckW {
    background: rgba(55, 55, 55, .8)
}

.drK .ckF>*:first-child {
    background: var(--darkU)
}

.drK .ckF>*:last-child {
    background: var(--darkBa);
    color: rgba(255, 255, 255, .8)
}

/* Post Next or Prev */
.chpN {
    margin: 4em 0 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    width: calc(100% + 20px);
    left: -10px;
    right: -10px;
    font-size: 14px;
    font-family: var(--fontB);
    line-height: 1.6em
}

.chpN>* {
    margin: 0 10px;
    flex: 0 0 calc(50% - 20px);
    display: inline-flex;
    flex-direction: column;
    color: inherit !important;
    cursor: default
}

.chpN>*::before {
    content: 'Previous Chapter'
}

.chpN>*:not(:first-child)::before {
    content: 'Next Chapter'
}

.chpN>*::after {
    content: attr(data-text);
    display: block;
    /*display:-webkit-box;*/
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .6;
    font-size: 12px;
    font-family: var(--fontBa);
    line-height: 1.5em;
    margin-top: 4px;
    cursor: pointer
}

.chpN>*:hover::after {
    text-decoration: underline
}

.chpN>*:not(:first-child) {
    align-items: flex-end;
    text-align: right
}

.chpN.n {
    justify-content: flex-end
}

.chpN.p {
    justify-content: flex-start
}

/* css for product post by kaily code */
.kaily-checkout-content {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 35px 10px 10px 10px;
    transform: translate(-50%, -45%);
    background-color: #fff;
    border-radius: .5rem;
    max-width: 500px;
    width: 90%;
    box-shadow: inset 0 2px 6px 0 rgba(49, 53, 59, .12);
    max-height: calc(100vh - 150px);
    overflow: auto;
    margin: auto
}

.kaily-checkout-content:hover {
    overflow-x: hidden;
    overflow-y: auto
}

.kaily-checkout-content .kaily-close {
    position: absolute;
    right: 15px;
    top: 3px;
    font-size: 15px;
}

.kaily-checkout-content .kaily-close:before {
    content: 'Close';
    position: relative;
    right: 2px;
    top: 0;
    font-size: 12px;
    color: #999
}

.kaily-checkout-content .kaily-close a.button-open-close {
    width: auto;
    background: transparent;
    color: #999;
    text-decoration: none
}

.kaily-checkout-wrap {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}

#kaily-shopping {
    padding: 5px;
    display: block
}

#kaily-confirmation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 15px
}

.kaily-datainput {
    position: relative;
    margin-bottom: 5px;
    margin-right: 5px
}

.kaily-datainput select {
    padding: 12px 0;
    color: #555;
    font-size: 14px;
    width: 100%;
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
    outline: none;
    background: #fff
}

.kaily-datainput input {
    font-size: 14px;
    padding: 12px 0 !important;
    display: block;
    width: 100%;
    border: none !important;
    border-bottom: 1px solid #ddd !important
}

.kaily-datainput input:focus {
    outline: none
}

.kaily-datainput label {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 10px;
    transition: .2s ease all
}

.kaily-datainput .focus {
    box-shadow: inset 0 -1px 0 0 var(--darkU) !important
}

.kaily-datainput .kaily-validation {
    position: absolute;
    z-index: 2;
    top: calc(100% + 20px);
    left: 0;
    background: var(--darkU);
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 80%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .08);
    transition: .4s;
    visibility: hidden;
    opacity: 0;
    display: inline-block !important
}

.kaily-datainput .kaily-validation.show {
    visibility: visible;
    opacity: 1;
    top: calc(100% + 10px)
}

.kaily-datainput .kaily-validation:after {
    position: absolute;
    bottom: 100%;
    left: 12px;
    content: '';
    border: 8px solid;
    border-color: transparent transparent var(--darkU) transparent
}

a.send_form {
    position: relative;
    display: inline-block;
    background: var(--darkU);
    color: #ffffff;
    padding: 7px;
    border-radius: 5px;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    margin-top: 5px
}

.img-product {
    display: grid;
    grid-template-columns: 1fr 2.7fr
}

.img-product img {
    max-width: 150px;
    float: left;
    margin: 10px 15px 0 0;
    border-radius: 5px
}

.info-product {
    font-size: 13px;
    margin-top: 10px
}

.info-product i {
    color: #999;
    font-size: 11px;
    margin: 8px 0;
    display: block
}

#name_product {
    font-size: 20px;
    font-weight: 600
}

/* css drK adjust the class if different or delete this section */
.drK .send_form,
.drK .button-open-close {
    color: #fff
}

.drK .kaily-checkout-content,
.drK .kaily-datainput select,
.drK .kaily-datainput input {
    background-color: #252526 !important
}

/* css for product post by kaily code */
.image-product {
    float: left;
    width: 40%;
    margin: 0 25px 0 0
}

.product-right {
    float: right;
    width: 55%
}

.image-product img {
    width: 100%;
    margin: 15px 0;
    border-radius: 5px;
    box-shadow: 0 2px 8px 0 rgb(60 64 67 / 11%)
}

.image-product a:nth-child(n+2) img {
    width: 35% !important;
    height: 100px !important;
    object-fit: cover;
    float: left;
    margin-right: 10px
}

.description-product {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
    border-top: 1px solid #eee
}

.status-product {
    margin: 10px 0 20px;
    font-size: 13px;
    background: #f4f5f9;
    display: inline-block;
    color: #444;
    padding: 3px 15px;
    border-radius: 5px
}

.product-right #buy-now {
    color: #fff;
    font-weight: 600;
    padding: 10px 25px;
    display: inline-block;
    border-radius: 5px
}

.input-field {
    position: relative;
    margin: 15px 0
}

.input-field textarea {
    font-size: 15px;
    padding: 15px 0 15px 15px;
    display: block;
    width: 94%;
    border: 1px solid #f4f5f9;
    border-radius: 7px
}

.input-field textarea:focus {
    outline: none
}

.input-field textarea:focus {
    border: 2px solid var(--darkU) !important
}

.product-right #buy-now {
    background: var(--darkU);
    text-decoration: none
}

.product-right #buy-now:hover,
.marketplace a:hover {
    opacity: .8
}

.price-product #price-s {
    color: var(--darkU);
    font-weight: 700;
    font-size: 25px
}

.price-product strike {
    opacity: .5
}

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

.marketplace>* {
    display: block
}

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

.marketplace>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 8px 8px 0;
    border: 1px solid #ddd;
    border-radius: 3px
}

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

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

.pPrice {
    font-size: 0;
}

@media screen and (max-width:768px) {
    .product-right {
        width: 100%;
        float: none
    }

    .image-product a:nth-child(n+2) img,
    .image-product {
        width: 100%;
        float: left
    }
}

/* rating product */
.rating-product i.icon-star-angka {
    font-weight: 400;
    font-size: 12px;
    margin-left: 5px;
    vertical-align: 1px
}

.rating-product {
    padding: 0;
    width: 55%;
    float: left;
    box-sizing: border-box;
    margin-top: 10px
}

b.widget-rating {
    display: block;
    margin-bottom: 10px
}

i.icon-star,
.icon-star {
    font-weight: 400;
    font-style: normal;
    display: inline-block
}

i.icon-star:before,
.icon-star:before {
    content: '';
    width: 17px;
    height: 17px;
    display: inline-block;
    margin: -2px;
    transition: all .3s ease;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23ffc53e'/%3E%3C/svg%3E") no-repeat
}

i.icon-star.silver:before,
i.icon-star.silver:before {
    content: '';
    width: 17px;
    height: 17px;
    display: inline-block;
    margin: -2px;
    transition: all .3s ease;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23a9acad'/%3E%3C/svg%3E") no-repeat
}

/* css drK adjust the class if different or delete this section */
.drK table th,
.drK table td {
    border-color: rgba(255, 255, 255, .1)
}

.drK table {
    color: #fefefe
}

.drK .input-field textarea,
.drK .status-product {
    border-color: rgba(255, 255, 255, .1);
    background: #2d2d30;
    color: #fefefe
}

/* 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-bottom: 20px
}

.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
}

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

.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(--linkC);
    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: var(--buttonR);
    background: #fffdfc;
    color: var(--notifC);
    font-size: 12px;
    font-weight: 400;
    box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
    text-decoration: none
}

.drK .ntfA>a {
    background: var(--darkU);
    color: #fffdfc
}

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

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

.note::after {
    content: '\002A';
    position: absolute;
    left: 18px;
    top: 16px;
    font-size: 20px;
    min-width: 15px;
    text-align: center
}

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

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

.drK .note {
    background: var(--darkBa);
    color: rgba(255, 255, 255, .9)
}

/* 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'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>") center / 14px 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 */
.post-body pre {
    position: relative;
    width: 100%;
    background-color: #262a2d;
    border-radius: 4px;
    margin: 25px auto;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    word-break: normal;
    user-select: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

.post-body pre code {
    color: rgba(255, 255, 255, .9);
    display: block;
    padding: 20px;
    white-space: pre;
    font-family: monospace;
    font-size: 14px;
    overflow-x: auto;
    line-height: 1.5em;
    background: #2d2d30;
}

.post-body pre:hover:before {
    content: 'Double click to copy | </>';
    position: absolute;
    right: 0;
    color: #c5c8c6;
    font-size: 10px;
    padding: 20px 15px;
    z-index: 2;
    line-height: 35px
}

.post-body pre.html:hover:before {
    content: 'Double click to copy | .html'
}

.post-body pre.css:hover:before {
    content: 'Double click to copy | .css'
}

.post-body pre.js:hover:before {
    content: 'Double click to copy | .js'
}

.hljs-name,
.hljs-strong {
    font-weight: bold
}

.hljs-code,
.hljs-emphasis {
    font-style: italic
}

.hljs-tag {
    color: #62c8f3
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
    color: #ade5fc
}

.hljs-string,
.hljs-bullet {
    color: #a2fca2
}

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
    color: #ffa
}

.hljs-number,
.hljs-symbol,
.hljs-bullet {
    color: #d36363
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
    color: #fcc28c
}

.hljs-comment,
.hljs-deletion,
.hljs-code {
    color: #888
}

.hljs-regexp,
.hljs-link {
    color: #c6b4f0
}

.hljs-meta {
    color: #fc9b9b
}

.hljs-deletion {
    background-color: #fc9b9b;
    color: #333
}

.hljs-addition {
    background-color: #a2fca2;
    color: #333
}

.hljs a {
    color: inherit
}

.hljs a:focus,
.hljs a:hover {
    color: inherit;
    text-decoration: underline
}

mark {
    padding: 1px 6px;
    border-radius: 2px;
    font-family: 'Fira Mono', monospace;
    font-size: 15px
}

code mark {
    font-size: 13px;
    margin: 2px;
    display: inline-block;
}

pre code mark {
    font-size: 13px;
    margin: 2px;
    display: inline-block;
}

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

highlightDrk {
    display: inline;
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
    line-height: inherit;
    color: var(--darkT);
    background: rgba(255, 255, 255, .1);
    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;
    background: #303031;
    color: white;
}

.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 ol,
details.toc ul {
    padding: 0 20px;
    list-style-type: decimal
}

details.toc li ol,
details.toc li ul {
    margin: 5px 0 10px;
    list-style-type: lower-alpha
}

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

details.ac {
    padding: 18px 15px;
    background: var(--contentB);
    box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
    margin: 20px 0;
    border-radius: 10px
}

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

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 15px;
    opacity: .9
}

.drK details.sp,
.drK details.ac {
    background: var(--darkBa)
}

/* 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;
    cursor: pointer;
}

.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 .postNav {
    font-size: 13px;
    margin: 50px 0;
    justify-content: center;
    position: relative;
    width: calc(100% + 8px);
    left: -4px;
    right: -4px
}

.ps .postNav>* {
    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
}

/* Blog pager */
.blogPg,
.postNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 90%;
    font-family: var(--fontB);
    line-height: 20px;
    color: #ffffff;
    margin-bottom: 50px
}

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

.blogPg>* svg {
    width: 18px;
    height: 18px;
    stroke: #651299;
    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 {
    cursor: not-allowed
}

.blogPg .nPst,
.blogPg .current,
.postNav .current {
    background: #851687;
    color: #ffffff
}

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

.postNav .splita {
    color: #ffffff
}

/* Greetings */
.pGV {
    display: flex;
    justify-content: space-between;
    position: relative;
    font-size: 13px;
    padding-top: 6px;
    padding-bottom: 20px;
}

.pGV>* {
    padding: 10px;
    background: var(--contentB);
    box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
    border-radius: var(--greetR);
    display: flex;
    align-items: center;
    justify-content: center
}

.pGV>*:first-child {
    margin-right: 5px
}

.pGV>*:last-child {
    margin-left: 5px
}

.Rtl .pGV>*:first-child {
    margin-right: 0;
    margin-left: 5px
}

.Rtl .pGV>*:last-child {
    margin-left: 0;
    margin-right: 5px
}

.pGV .pVws.hidden {
    display: none
}

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

.pGV .pVws::after {
    content: attr(data-text) ' views'
}

.pGV svg {
    width: 15px;
    height: 15px;
    margin-right: 6px
}

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

.Rtl .pGV svg {
    margin-right: 0;
    margin-left: 6px
}

.drK .pGV>* {
    background: var(--darkBa)
}

/* Lightbox image */
.zmImg:not(.s) {
    position: relative
}

.zmImg:not(.s)::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    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='%23363637' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/></svg>") center / 14px no-repeat;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 50%;
    z-index: 2;
    opacity: 0;
    transition: var(--trans-2);
    -webkit-transition: var(--trans-2);
    cursor: pointer
}

.zmImg:not(.s):hover::before {
    opacity: 1
}

.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 a,
.zmImg.s a:hover {
    opacity: 1
}

.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
}

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

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

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

.pShc>* {
    margin: 0 5px;
    display: flex;
    align-items: center;
    color: inherit;
    padding: 12px;
    border-radius: var(--buttonR);
    background: #f1f1f0
}

.pShc .c {
    color: #fffdfc
}

.pShc .c svg {
    fill: #fffdfc
}

.pShc .c::after {
    content: attr(aria-label)
}

.pShc .fb {
    background: #1778F2
}

.pShc .wa {
    background: #128C7E
}

.pShc .tw {
    background: #1DA1F2
}

.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
}

/* Label Hashtags */
.lbsHs {
    display: block;
    direction: ltr;
    text-align: left;
    margin-bottom: 25px
}

.lbsHs>a {
    color: var(--bodyC)
}

.drK .lbsHs>a {
    color: var(--darkT)
}

.lbHs {
    padding: 9px 12px;
    background: var(--contentB);
    font-family: var(--fontVa);
    font-size: 13px;
    border-radius: var(--greetR);
    box-shadow: 3px 6px 15px rgba(0, 0, 0, .07);
    margin-right: 5px
}

.lbHs::before {
    content: attr(data-text);
    opacity: .8
}

.drK .lbHs {
    background: var(--darkBa)
}

.Rtl .lbsHs {
    text-align: right
}

.Rtl .lbHs {
    margin-right: 0;
    margin-left: 5px
}

/* Views */
.blog-views::after {
    content: attr(data-text);
    opacity: .8;
    font-weight: bold;
}

.drK .blog-views::after {
    color: var(--darkB)
}

#post-view::after {
    content: attr(data-text) ' views'
}

/* Homepage Post author name CSS  */
.iFxd.bl {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0
}

.aNm.t {
    background: rgba(255, 255, 255, .8);
    padding: 6px
}

.aNm.t .im {
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.aNm.t .nm {
    font-size: 13px;
    color: var(--bodyC)
}

.aNm.t svg {
    width: 13px;
    height: 13px;
    fill: #1DA1F2;
    margin-left: 4px
}

.Rtl .iFxd.bl {
    top: auto;
    bottom: 0;
    right: 0;
    left: auto
}

.Rtl .aNm.t .im {
    margin-left: 4px;
    margin-right: 0
}

.Rtl .aNm.t svg {
    margin-left: 0;
    margin-right: 4px
}

.onIndx .blogPts .ntry,
.PopularPosts,
.widget.Label,
.footer {
    position: relative;
    overflow: hidden
}

@media screen and (min-width:501px) {
    .itemFt .iCtnt::before {
        display: none
    }
}

.pTtmp[data-type] {
    display: inline-flex;
    align-items: center
}

.pTtmp[data-type]::before {
    content: attr(data-type);
    display: inline;
    background: var(--linkB);
    color: #fff;
    font-size: 10px;
    line-height: .6rem;
    padding: 3px;
    border-radius: 2px;
    margin-right: 4px
}

.drK .pTtmp[data-type]::before {
    background: var(--darkU)
}

.pTtmp[data-type]::after {
    display: inline
}

.Rtl .pTtmp[data-type]::before {
    margin-left: 4px;
    margin-right: 0
}

.Rtl .FeaturedPost .itemFt::after {
    left: 0;
    right: unset;
    border-radius: 0 0 20px 0
}

.Rtl .toTopB {
    right: unset;
    left: 20px
}

.Rtl .mainWrp .headIc .tNav svg {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg)
}

.drK .aNm.t {
    background: var(--darkBs);
    padding: 6px;
}

.drK .nm::after {
    content: attr(data-text);
    color: white
}

/* Donation Box By Kaily */
.Kaily-dnt-box {
    position: relative;
    max-width: 500px;
    background-color: #fefefe;
    box-shadow: 0 5px 12px -2px rgb(0 0 0 / 12%);
    border: 1px solid #eceff1;
    border-radius: 5px;
    padding: 15px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    font-size: 13px;
    transition: all .2s ease;
}

.Kaily-dnt-box .Kaily-dnt-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 10px;
    background: #f1f1f0;
    border-radius: 5px;
    border: 1px solid transparent
}

.Kaily-dnt-box .Kaily-dnt-txt {
    flex-grow: 1;
    width: calc(100% - 150px);
    padding: 0 15px;
    line-height: 20px
}

.Kaily-dnt-box .Kaily-dnt-sw {
    position: absolute;
    padding: 1px 3px;
    margin-top: -80px;
    margin-left: 230px;
    width: 30px;
    height: 30px;
    background: #0000FF;
    border-radius: 50%;
    border: 1px solid #eceff1;
    transition: all .2s ease;
    z-index: 3
}

#Kaily-check-dnt:checked~.Kaily-dnt-box {
    padding-top: 200px
}

#Kaily-check-dnt:checked~.Kaily-dnt-box .Kaily-dnt-hidden {
    visibility: visible;
    opacity: 1
}

#Kaily-check-dnt:checked~.Kaily-dnt-box .Kaily-dnt-sw {
    margin-top: -450px
}

#Kaily-check-dnt:checked~.Kaily-dnt-box .Kaily-dnt-sw svg {
    transform: rotate(180deg)
}

#Kaily-check-dnt,
#Kaily-check-bnk {
    display: none
}

#Kaily-check-bnk:checked~.Kaily-dnt-pp {
    visibility: hidden;
    opacity: 0;
    position: relative
}

#Kaily-check-bnk:checked~.Kaily-dnt-rk {
    visibility: visible;
    opacity: 1;
    position: absolute;
    margin-top: -43px
}

.Kaily-dnt-hidden {
    position: absolute;
    width: calc(100% - 30px);
    background-color: transparent;
    margin: -250px auto auto -15px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease
}

.Kaily-dnt-hidden h2 {
    font-size: 20px;
    margin: 10px auto;
    text-align: center
}

.Kaily-dnt-hidden span {
    font-size: 17px;
    color: #767676;
    margin-left: 35px
}

.Kaily-dnt-trn,
.Kaily-dnt-pp,
.Kaily-dnt-rk {
    display: inline-block;
    width: calc(100% - 30px);
    border: 1px solid #999;
    background: #fefefe;
    border-radius: 3px;
    margin: 10px 25px 0;
    padding: 10px;
    transition: all .2s ease
}

.Kaily-dnt-pp {
    position: absolute
}

.Kaily-dnt-rk {
    margin: 10px 25px 0;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease;
}

.Kaily-dnt-svg {
    width: 20px;
    height: 20px;
    position: absolute;
    fill: #767676;
    margin-top: 3px
}

.Kaily-dnt-sw svg,
.Kaily-dnt-svg.line {
    fill: none !important;
    stroke: #fff;
    stroke-width: 2
}

.Kaily-dnt-svg.line {
    stroke: #767676
}

@media screen and (max-width:500px) {
    .Kaily-dnt-box .Kaily-dnt-sw {
        margin-left: 160px
    }
}

@media screen and (max-width:455px) {
    .Kaily-dnt-box .Kaily-dnt-sw {
        margin: -90px auto auto 130px
    }

    #Kaily-check-dnt:checked~.Kaily-dnt-box .Kaily-dnt-sw {
        margin-top: -460px
    }
}

/* CSS drK adjust the class if different or delete this section */
.drK .Kaily-dnt-box,
.drK .Kaily-dnt-rk,
.drK .Kaily-dnt-trn,
.drK .Kaily-dnt-pp,
.drK .Kaily-dnt-hidden span,
.drK .Kaily-dnt-icon {
    background-color: #2d2d30;
    color: #fefefe
}

.drK .Kaily-dnt-svg {
    fill: #fefefe;
    stroke: #fefefe
}

.drK .Kaily-dnt-box,
.drK .Kaily-dnt-sw,
.drK .Kaily-dnt-icon {
    border-color: rgba(255, 255, 255, .1)
}

/* YouTube subscribe box widget by Kaily */
.kaily-ytbox-wrap {
    position: relative;
    max-width: 400px;
    background-color: #fefefe;
    color: #444;
    box-shadow: 0 5px 12px -2px rgb(0 0 0 / 12%);
    border: 1px solid #eceff1;
    border-radius: 5px;
    padding: 15px;
    margin: 20px 0;
    font-size: 13px;
    line-height: 1.7em
}

.kaily-ytbox-wrap img {
    width: 70px;
    border: 1px solid #eceff1;
    border-radius: 0 50% 50%;
    padding: 5px
}

.kaily-ytsub-name {
    position: absolute;
    font-size: 14px;
    font-weight: 600;
    margin: -80px 0 0 100px
}

.kaily-ytsub-info {
    margin: -55px 0 0 100px;
    color: #908989;
    font-size: 12px
}

.kaily-ytsub-sub {
    margin-left: 100px;
    color: #e17070;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none
}

.kaily-ytsub-td {
    position: absolute;
    right: 10px;
    top: 5px;
    transform: rotate(90deg);
    color: #444
}

.kaily-ytsub-hdn {
    position: absolute;
    background-color: #fefefe;
    top: 5px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease
}

.kaily-ytsub-clsbtn {
    position: absolute;
    top: 0;
    right: -10px;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 25px
}

#kaily-ytsub-check:checked~.kaily-ytsub-hdn {
    visibility: visible;
    opacity: 1
}

#kaily-ytsub-check {
    display: none
}

/* CSS drK adjust the class if different or delete this section */
.drK .kaily-ytbox-wrap,
.drK .kaily-ytsub-hdn {
    background-color: #2d2d30;
    color: #fefefe
}

.drK .kaily-ytbox-wrap,
.drK .kaily-ytbox-wrap img {
    border-color: rgba(255, 255, 255, .1)
}

.drK .kaily-ytsub-sub {
    color: #e17070
}

.drK .kaily-ytsub-td {
    color: #FEFEFE
}

.ytShdw {
    padding: 10px;
    background: var(--contentB);
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0, 0, 0, .08)
}

.drK .ytShdw {
    background: var(--darkBa)
}

/* Download Codebox By Kaily */
.pre,
.pre pre {
    position: relative;
    border-radius: 3px;
    direction: ltr
}

.pre,
.preT {
    color: white;
    overflow: hidden
}

.preA,
.preM {
    display: flex
}

.preA,
.preT {
    white-space: nowrap
}

.pre {
    background: #f6f6f6;
    color: #2f3337;
    margin: 1.7em auto
}

.pre pre {
    margin: 0;
    color: inherit;
    background: inherit;
    display: block;
    font-size: 13px;
    line-height: 1.6em;
    -moz-tab-size: 2;
    tab-size: 2;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    overflow: auto;
    white-space: pre
}

.pre.adv {
    border-radius: 10px
}

.pre.adv::before,
.pre.str .prTl,
.pre:not(.str) .prCd {
    display: none
}

.pre.adv pre {
    padding-top: 60px
}

.preM {
    width: 100%;
    background: #303031;
    padding: 10px 10px 10px 20px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.preT {
    font-size: 12px;
    font-family: var(--fontC);
    line-height: 1rem;
    position: relative;
    text-overflow: ellipsis;
    padding-right: 10px
}

.preA {
    gap: 8px
}

.preA button {
    outline: 0;
    border: none;
    width: 30px;
    height: 30px;
    background: #252526;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    transition: border-radius .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.preA button:hover {
    border-radius: 40%
}

.preA button>svg {
    width: 18px;
    height: 18px;
    stroke: none;
    fill: #d5d5d5;
    transition: .5s
}

.pre.cpd .prCp svg,
.pre.dwn .prDl svg,
.pre.pnd .prDl svg {
    animation: 1s jiggle
}

.pre.cpd .prCp svg .a,
.pre.dwn .prDl svg .a,
.pre.pnd .prDl svg .a,
.pre:not(.cpd) .prCp svg .b,
.pre:not(.dwn) .prDl svg .c,
.pre:not(.pnd) .prDl svg .b {
    opacity: 0
}

@keyframes jiggle {

    0%,
    100% {
        transform: rotate(0)
    }

    20%,
    60% {
        transform: rotate(26deg)
    }

    40%,
    80% {
        transform: rotate(-26deg)
    }
}

@-webkit-keyframes jiggle {

    0%,
    100% {
        transform: rotate(0)
    }

    20%,
    60% {
        transform: rotate(26deg)
    }

    40%,
    80% {
        transform: rotate(-26deg)
    }
}

.drK .preM {
    background: #303031
}

/* Category posts */
.ctgC {
    margin-bottom: 20px
}

.ctgC.loaded {
    animation: opaC .5s 0s;
    -webkit-animation: opaC .5s 0s
}

.ctgC .blogPg>* {
    margin-left: auto;
    margin-right: auto
}

@keyframes opaC {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes opaC {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

/* Auto Related Post using js Kaily */
.postTextRelated {
    position: relative;
    margin: 42px 0;
    padding: 1.5em 0;
    border: 1px solid #eceff1;
    border-left: 0;
    border-right: 0;
    font-size: 14px;
    line-height: 1.8em;
    display: none
}

.postTextRelated a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent
}

.postTextRelated a:hover {
    opacity: .8
}

.postTextRelated b {
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    padding: 2px 14px;
    background-color: #fefefe;
    border: 1px solid #e6e6e6;
    border-radius: 15px;
    position: absolute;
    top: -15.5px;
    left: 20px
}

.postTextRelated ul {
    margin: 8px 0 0;
    padding-left: 20px
}

.postTextRelated li:hover {
    margin-left: 5px
}

.postTextRelated li {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(6.500000, 3.000000)'><line fill='none' stroke='%23005af0' x1='5.3939' y1='9.7001' x2='5.3939' y2='0.7501'></line><path fill='none' stroke='%23005af0' d='M5.3998,17.3539 C6.6558,17.3539 10.6708,10.9899 9.9488,10.2679 C9.2268,9.5459 1.6418,9.4769 0.8508,10.2679 C0.0598,11.0599 4.1448,17.3539 5.3998,17.3539 Z'></path></g></svg>") left / 20px no-repeat;
    list-style-type: none;
    padding: 0 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #005af0;
    transition: all .4s ease
}

/* css darkmode customize class (.drK) */
.drK .postTextRelated b {
    background-color: #1e1e1e;
}

.drK .postTextRelated,
.drK .postTextRelated b {
    border-color: rgba(255, 255, 255, .15)
}

/* Social Media Blockquote By Kaily*/
.kaily_blq {
    background: #fff;
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 3px 3px 25px rgba(0, 0, 0, .08);
    border: 1px solid rgba(0, 0, 0, .1)
}

.blq-con {
    margin-bottom: 20px
}

.kaily_blq blockquote {
    position: relative;
    font-size: 1rem;
    opacity: .8;
    line-height: 1.6em;
    margin: 0;
    padding: 30px 0 0 0;
    display: block;
    border: none
}

.kaily_blq blockquote::before {
    content: "\201C";
    position: absolute;
    top: -8px;
    left: 0;
    font-size: 60px;
    line-height: normal;
    opacity: .8
}

.kaily_blq blockquote[data-author]::after {
    content: "- " attr(data-author);
    display: block;
    margin-top: 8px;
    opacity: .95
}

.blq-shr {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px
}

.blq-shr .btn {
    position: relative;
    top: 0;
    outline: 0;
    border: none;
    width: 35px;
    height: 35px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30%;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
    transition: all .3s ease, top .2s linear;
    cursor: pointer
}

.blq-shr .btn:hover {
    top: -3px;
    border-radius: 50%;
    border-color: transparent !important;
    box-shadow: 3px 3px 12px rgba(0, 0, 0, .15);
    transform: scale(1.08)
}

.blq-shr .shr-wa:hover {
    background: #128c7e !important
}

.blq-shr .shr-fb:hover {
    background: #39569c !important
}

.blq-shr .shr-tw:hover {
    background: #00acee !important
}

.blq-shr .shr-tg:hover {
    background: #229ed9 !important
}

.blq-shr .btn-dl:hover {
    background: #009688 !important
}

.blq-shr .btn-cp:hover {
    background: #009688 !important
}

.kaily_blq.dwn .blq-shr .btn-dl:hover {
    background: #239b56 !important
}

.kaily_blq.cpd .blq-shr .btn-cp:hover {
    background: #239b56 !important
}

.blq-shr .btn>svg {
    width: 18px;
    height: 18px;
    fill: #4f4d4d;
    stroke: none !important;
    transition: all .3s ease
}

.blq-shr .btn:hover>svg {
    fill: #fff
}

.kaily_blq.dwn .blq-shr .btn-dl>svg,
.kaily_blq.cpd .blq-shr .btn-cp>svg {
    animation: jiggle 1s;
    -webkit-animation: jiggle 1s
}

.kaily_blq.dwn .blq-shr .btn-dl .svg1,
.kaily_blq:not(.dwn) .blq-shr .btn-dl .svg2,
.kaily_blq.cpd .blq-shr .btn-cp .svg1,
.kaily_blq:not(.cpd) .blq-shr .btn-cp .svg2 {
    opacity: 0
}

@keyframes jiggle {
    0% {
        transform: rotate(0)
    }

    20% {
        transform: rotate(26deg)
    }

    40% {
        transform: rotate(-26deg)
    }

    60% {
        transform: rotate(26deg)
    }

    80% {
        transform: rotate(-26deg)
    }

    100% {
        transform: rotate(0)
    }
}

@-webkit-keyframes jiggle {
    0% {
        transform: rotate(0)
    }

    20% {
        transform: rotate(26deg)
    }

    40% {
        transform: rotate(-26deg)
    }

    60% {
        transform: rotate(26deg)
    }

    80% {
        transform: rotate(-26deg)
    }

    100% {
        transform: rotate(0)
    }
}

.drK .kaily_blq {
    background: #252526;
    border-color: rgba(255, 255, 255, .1)
}

.drK .blq-shr .btn {
    background: #303030;
    border-color: rgba(255, 255, 255, .08)
}

.drK .blq-shr .btn>svg {
    fill: #d5d5d5
}

/* ol style1 */
ol.style1 {
    counter-reset: numbers;
    list-style: none;
    padding: 0
}

ol.style1>li {
    counter-increment: numbers;
    margin-bottom: 25px;
    position: relative;
    margin-left: 40px
}

ol.style1>li img {
    margin: 15px 0;
    width: 100%;
    display: block
}

ol.style1>li::before {
    content: counter(numbers);
    line-height: 23px;
    font-family: 'var(--fontB)';
    font-size: 14px;
    font-weight: bold;
    left: -45px;
    width: 32px;
    height: 32px;
    text-align: center;
    position: absolute;
    color: rgb(76 79 77);
    border: 5px solid rgb(220 226 224);
    border-radius: 50% 0 50% 50%;
    top: -2px
}

ol.style1 li ul li {
    margin-bottom: 15px
}

ol.style1 li ul {
    margin-top: 15px
}

.drK ol.style1>li::before {
    border-color: rgb(76 79 77);
    color: rgb(176 179 184)
}

/* pop up subscribe youtube channel by Kaily */
@keyframes show_kailyYT {
    0% {
        transform: translateX(100%)
    }

    40% {
        transform: translateX(-10%)
    }

    80% {
        transform: translateX(0%)
    }

    100% {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-10px)
    }
}

@keyframes hide_kailyYT {
    0% {
        transform: translateX(-10px)
    }

    40% {
        transform: translateX(0%)
    }

    80% {
        transform: translateX(-10%)
    }

    100% {
        transform: translateX(calc(100% + 100px))
    }
}

.kailyYTwrap {
    position: fixed;
    z-index: 9999999;
    right: 55px;
    bottom: 20px;
    animation: show_kailyYT 0.8s ease forwards;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    border-left: 5px solid #005af0;
    width: 300px;
    align-items: center;
    justify-content: space-between;
    display: none
}

.kailyYTwrap.hide {
    animation: hide_kailyYT 0.8s ease forwards
}

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

.kailyYTicon .kailylogo {
    max-width: 60px;
    border-radius: 100%;
    transition: all 0.3s ease
}

.kailyYTcontent .kailyYTdetails {
    margin-left: 15px;
    text-decoration: none;
    outline: none
}

.kailyYTdetails span {
    font-family: Noto Sans;
    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    top: 10px
}

.kailyYTdetails p {
    color: #878787;
    font-size: 12px
}

.kailyYtcloseIcon svg {
    position: absolute;
    fill: #878787;
    font-size: 20px;
    cursor: pointer;
    height: 28px;
    width: 28px;
    text-align: center;
    right: 13px;
    top: 8px;
    border-radius: 50%;
    background: #f2f2f2;
    transition: all 0.3s ease
}

.kailyYTwrap:hover .kailyYTicon img {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

.kailyYtcloseIcon:hover svg {
    fill: #444;
}

@media screen and (max-width: 480px) {
    .kailyYTwrap {
        right: 25px
    }
}

/* drK YouTube Popup */
.drK .kailyYTwrap,
.drK .kailyYtcloseIcon svg {
    background: #2d2d30
}

.drK .kailyYTwrap {
    border-color: #444
}

.drK .kailyYTdetails span,
.drK .kailyYTdetails p {
    color: #e2e2e2;
    margin-top: 10px;
    margin-bottom: 0px;
}

/* Quick Edit */
.blog-admin {
    display: none
}

.qeMn,
.qeBtn .svg-2 {
    display: none
}

.qeBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, .1);
    border-radius: 50px;
    z-index: 5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    -webkit-transition: all .2s ease, margin 1s ease;
    transition: all .2s ease, margin 1s ease;
    cursor: pointer
}

.qeBtns .qeBtn.a {
    bottom: 22.5px;
    right: 22.5px;
    width: 30px;
    height: 30px;
    z-index: 4;
    box-shadow: none;
    opacity: 0
}

.qeBtns .qeBtn.a:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1
}

.qeBtn svg {
    width: 18px;
    height: 18px;
    margin: auto
}

.qeBtn svg.line {
    stroke-width: 1.3
}

.qeBtn.a svg {
    width: 16px;
    height: 16px
}

.qeMn:checked+.qeBtn {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

.qeMn:checked+.qeBtn .svg-1 {
    display: none
}

.qeMn:checked+.qeBtn .svg-2 {
    display: block
}

.qeMn:checked~.qeBtns .qeBtn {
    box-shadow: 0 0 15px rgba(0, 0, 0, .1)
}

.qeMn:checked~.qeBtns .qeBtn.a {
    opacity: 1
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(1) {
    bottom: 60px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(2) {
    bottom: 95px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(3) {
    bottom: 130px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(4) {
    right: 60px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(5) {
    right: 95px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(6) {
    right: 130px
}

.qeMn:checked~.qeBtns+.fCls {
    visibility: visible;
    opacity: 1;
}

@media screen and (max-width:896px) {
    .qeBtn {
        margin-bottom: 60px
    }

    .qEdit.nBtm .qeBtn {
        margin-bottom: 150px;
        margin-right: 55px
    }

    .MN-4 .qeBtn {
        margin-bottom: 60px;
        margin-right: 5px
    }

    .MN-4 .qEdit.nBtm .qeBtn {
        margin-right: 55px;
        margin-bottom: 85px
    }
}

@media screen and (min-width:897px) {
    .qeBtn {
        margin-bottom: 5px;
        margin-right: 55px
    }
}

.drK .qeBtn {
    background: var(--darkBa)
}

.iFxd.l {
    right: auto;
}

.bookmarkbtn.a>svg .v {
    display: none
}

.iFxd .bM.a::after {
    content: attr(data-added)
}

/* Change Mode By Kaily */
.headR .headM {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 0;
    width: 150px;
    background: var(--contentB);
    font-size: 13px;
    border-radius: 10px 5px 10px 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .07);
    -webkit-transition: var(--trans-2);
    transition: var(--trans-2);
    overflow: hidden;
    z-index: 18;
    opacity: 0;
    visibility: hidden;
    border: 0.2px solid;
    cursor: auto
}

.headR .headM:before {
    content: attr(data-text);
    display: block;
    padding: 0 15px 10px;
    width: 100%;
    font-size: 11px;
    opacity: .7
}

.headR .headM>* {
    display: block;
    padding: 9px 15px;
    width: 100%;
    cursor: pointer
}

.headR .headM>*:before {
    content: attr(aria-label);
    opacity: .9
}

.headR .headM>*:hover {
    background: rgba(0, 0, 0, .05)
}

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

.navM:checked~.mainWrp .headM+.fCls {
    visibility: visible;
    opacity: 1;
    z-index: 17;
    cursor: auto;
}

.drK .headR .headM {
    background: var(--darkBs)
}

.Rtl .headR .headM {
    right: auto;
    left: 0;
    border-radius: 5px 10px 10px 10px
}

.chTheme {
    background-color: rgba(0, 0, 0, .1)
}

/* Countdown Discount by Kaily */
.cdCont {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #f7f3f6;
    padding: 40vh 20px 30px;
    border-radius: 10px;
    text-align: center;
    color: #08102b;
    font-family: inherit
}

.cdCont[data-disc]:not([data-disc=''])::before {
    content: attr(data-disc);
    display: block;
    font-weight: 700;
    font-size: 13px;
    width: 50px;
    height: 50px;
    padding: 10px 0 10px;
    background: #f5e2f1;
    border-radius: 5px 5px 50px 50px;
    position: absolute;
    top: -5px;
    right: 50px
}

.cdCont .cdH {
    margin: 0 0 20px;
    font-size: 1.3rem;
    font-weight: 700
}

.cdCont .cdD {
    font-size: 15px
}

.cdCont .cdHeadA .cdD {
    margin-bottom: 25px
}

.cdCont .cDown {
    width: 100%;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
    margin: 20px 0
}

.cdCont .cdBox {
    display: inline-block;
    width: 55px;
    height: 55px;
    margin: 3px;
    padding-top: 4px;
    background: #fff;
    border-radius: 10px
}

.cdCont .unit {
    display: block;
    font-size: 10px;
    margin-top: -4px;
    opacity: .8
}

.cdCont.ended[data-disc]::before,
.cdCont.ended .cdHeadB,
.cdCont:not(.ended) .cdHeadA,
.cdCont.ended .cdTmr {
    display: none
}

.drK .cdCont {
    background: #252526;
    color: #fffdfc
}

.drK .cdCont[data-disc]::before {
    background: #2d2d30
}

.drK .cdCont .cdBox {
    background-color: #1e1e1e
}

/* --- End --- */