/* Google Sans Text & Mono Fonts */ @font-face { font-family: 'Google Sans Text'; font-style: normal; font-weight: 400; font-display: swap; src: local('Google Sans Text'), local('Google-Sans-Text'), url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format('woff2'); } @font-face { font-family: 'Google Sans Text'; font-style: normal; font-weight: 500; font-display: swap; src: local('Google Sans Text Medium'), local('Google-Sans-Text-Medium'), url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format('woff2'); } @font-face { font-family: 'Google Sans Text'; font-style: normal; font-weight: 700; font-display: swap; src: local('Google Sans Text Bold'), local('Google-Sans-Text-Bold'), url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format('woff2'); } @font-face { font-family: 'Google Sans Mono'; font-style: normal; font-weight: 400; font-display: swap; src: local('Google Sans Mono'), local('Google-Sans-Mono'), url(https://fonts.gstatic.com/s/googlesansmono/v4/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wVQGrk.woff2) format('woff2'); } /* ========================================================== > Template Information: Name : Id : Version : Stage : Type : Filename : Published : Updated : Platform : CSS : Vanilla JavaScript : Vanilla, Modules Compatible Browsers : Modern Copyright (c) : Developers : Website : Demo : ========================================================== */ /*--[ CSS variables ]--*/ :root { /* Colors */ --lStatusC: ; --lHeadC: #08102b; --lBodyC: #08102b; --lBodyCa: #989b9f; --lBodyB: #fdfcff; --lLinkC: #1976d2; --lLinkB: #1976d2; --lIconC: #08102b; --lIconCa: #08102b; --lIconCs: #767676; --lHeaderC: #343435; --lHeaderB: #fffdfc; --lNotifB: #e8f0fe; --lNotifC: #01579b; --lContentB: #fffdfc; --lContentL: #f1f1f0; --lMenuB: #fffdfc; --lSrchB: #fffdfc; --lMobB: #fffdfc; --lMobC: #08102b; --lFotB: #fffdfc; --lFotC: #08102b; --darkT: #fffdfc; --darkTa: #989b9f; --darkL: #8775f5; --darkB: #1e1e1e; --darkBa: #2d2d30; --darkBs: #252526; /* Font family */ --fontS: 'Kohinoor Bangla', 'Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fontH: 'Kohinoor Bangla', 'Arabic', sans-serif; --fontB: 'Kohinoor Bangla', 'Arabic', sans-serif; --fontBa: 'Kohinoor Bangla', 'Arabic', sans-serif; --fontC: 'Google Sans Mono', monospace; /* SVG */ --svgW: 22px; --svgH: 22px; --svgC: currentColor; /* Icon */ --iconC: var(--lIconC); --iconCa: var(--lIconCa); --iconCs: var(--lIconCs); --iconHr: 50%; /* Body */ --headC: var(--lHeadC); --bodyC: var(--lBodyC); --bodyCa: var(--lBodyCa); --bodyB: var(--lBodyB); /* Link */ --linkC: var(--lLinkC); --linkB: var(--lLinkB); /* Button */ --linkR: 6px; /* Header */ --headerC: var(--lHeaderC); --headerB: var(--lHeaderB); --headerT: 16px; --headerW: 600; --headerL: 1px solid rgba(0,0,0,0.06); --headerH: 60px; --headerHm: 55px; --headerHc: var(--headerH); /* Notification */ --notifB: var(--lNotifB); --notifC: var(--lNotifC); --notifH: 40px; /* Content */ --contentB: var(--lContentB); --contentBs: #f1f1f0; --contentBa: #f6f6f6; --contentL: var(--lContentL); --contentLa: #b5b5b4; --contentW: 1280px; --sideW: 320px; --transB: rgba(0,0,0,.05); /* Page */ --pageW: 780px; --pageW: 780px; --postT: 26px; --postF: 16px; --postTm: 21px; --postFm: 15px; /* Widget */ --widgetT: 16px; --widgetTw: 600; --widgetTa: none; --widgetTac: #1976d2; /* Navigation Menu */ --menuB: var(--lMenuB); --menuC: #08102b; --menuW: 240px; --menuL: 1px solid rgba(0,0,0,0.06); /* Tabbed Menu */ --navB: var(--contentB); /* Search */ --srchB: var(--lSrchB); --srchDr : 8px; /* Mobile Menu */ --mobB: var(--lMobB); --mobC: var(--lMobC); --mobHv: #f5f5f5; --mobL: 1px solid rgba(0,0,0,0.06); --mobBr: 10px; /* Footer */ --fotB: var(--lFotB); --fotC: var(--lFotC); --fotL: 1px solid rgba(0,0,0,0.06); /* Border radius */ --greetR: 12px; --thumbEr: 10px; /* Thumbnail */ --thumbR: 16 / 9; --thumbSb: 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)); /* Carousel */ --sliderR: 5 / 2; /* Syntax */ --synxB: #f6f6f6; --synxC: #2f3337; --synxOrange: #b75501; --synxBlue: #015692; --synxGreen: #54790d; --synxRed: #f15a5a; --synxGray: #656e77; --synxGold: #72621d; --synxPurple: #803378; --synxDot1: #f1645e; --synxDot2: #eebd3e; --synxDot3: #3cab4e; /* Box shadow */ --bs-1: 0 5px 35px rgb(0 0 0 / 7%); /* Transitions */ --trans-1: all .1s ease; --trans-2: all .2s ease; --trans-3: all .3s ease; --trans-4: all .4s ease; --trans-5: all .15s cubic-bezier(0.4, 0, 0.2, 1); /* Status bar */ --statusC: var(--lStatusC); /* Selection */ --selectC: #fff; --selectB: var(--linkB); /* Scroll */ --scrollT: rgba(0,0,0,.05); --scrollB: rgba(0,0,0,.15); --scrollBh: rgba(0,0,0,.25); --scrollBa: rgba(0,0,0,.25); --scrollH: 8px; --scrollV: var(--scrollH); --scrollR: 2px; /* Constants */ --white: #fffdfc; --black: #1e1e1e; --aInvert: 0; /* Messages */ --m-new: ''; --m-free: ''; --m-showAll: ''; --m-hideAll: ''; } :root.drK, html.drK, body.drK, [data-theme="dark"] { --statusC: ; --bodyB: var(--darkB); --bodyC: var(--darkT); --headC: var(--darkT); --linkC: var(--darkL); --linkB: var(--darkL); --menuB: var(--darkB); --menuC: var(--darkT); --headerB: var(--darkB); --headerC: var(--darkT); --srchB: var(--darkB); --navB: var(--darkB); --notifB: var(--darkBa); --notifC: rgba(255,255,255,.9); --fotB: var(--darkB); --fotC: var(--darkT); --mobB: var(--darkBa); --mobC: var(--darkT); --mobHv: #252526; --contentB: #252526; --contentBs: #303031; --contentBa: #252526; --contentL: #444444; --contentLa: #696969; --transB: rgba(255,255,255,.05); --thumbSb: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,.2) 20%, rgba(0,0,0,.4) 60%, rgba(0,0,0,0)); --synxB: var(--darkBa); --synxC: #fff; --synxBlue: #41a2ef; --synxGreen: #98c379; --synxPurple: #c678dd; --synxRed: #e06c73; --synxGold: #bba43d; --synxOrange: #cc6c1a; --scrollT: rgba(255,255,255,.05); --scrollB: rgba(255,255,255,.15); --scrollBh: rgba(255,255,255,.25); --scrollBa: rgba(255,255,255,.25); --aInvert: 1; } :root.thS:not(.th0) { --linkC: var(--th-22); --linkB: var(--th-22); --selectB: var(--th-22); } :root.thS:not(.th0).drK { --linkC: var(--th-14); --linkB: var(--th-14); } :root.thS:not(.th0):not(.drK) { --statusC: var(--th-20); --notifB: var(--th-2); --notifC: var(--th-20); } /* Font CSS */ /* /*--[ Global ]--*/ /* Standard CSS */ *{-webkit-tap-highlight-color:transparent} *, ::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 ease} table{border-spacing:0} iframe{max-width:100%;border:0;margin-left:auto;margin-right:auto} input, button, select, textarea{outline:none;font:inherit;font-size:100%;color:inherit;line-height:normal} input[type=search]::-ms-clear, input[type=search]::-ms-reveal{display:none;appearance:none;width:0;height:0} input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration{display:none;-webkit-appearance:none;appearance:none} button{margin:0;padding:0;background:transparent;text-align:unset;border:none;outline:none} img{display:block;position:relative;max-width:100%;height:auto} svg{width:var(--svgW);height:var(--svgH);fill:var(--svgC)} svg.fill, svg .fill{fill:var(--svgC)} svg.line, svg .line{fill:none;stroke:var(--svgC);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.25} svg.line.c, svg.line .c, svg .line.c{fill:none;stroke:var(--linkC)} svg.c, svg .c, svg.fill.c, svg.fill c, svg .fill.c{fill:var(--linkC)} svg.line.c1, svg.line .c1, svg .line.c1{fill:none;stroke:var(--iconCa)} svg.c1, svg .c1, svg.fill.c1, svg .fill.c1{fill:var(--iconCa)} svg.line.c2, svg.line .c2, svg .line.c2{fill:none;stroke:var(--iconCs);opacity:.4} svg.c2, svg .c2, svg.fill.c2, svg .fill.c2{fill:var(--iconCs);opacity:.4} [hidden]:not([hidden=false]), body .hidden{display:none} body .invisible{visibility:hidden} .clear{width:100%;display:block;margin:0;padding:0;float:none;clear:both} .fCls{display:block;margin:0;padding:0;border:none;outline:none;position:fixed;inset:-50%;z-index:1;background:transparent;visibility:hidden;opacity:0;pointer-events:none;transition:var(--trans-1)} .free::after, .new::after{content:var(--m-free);display:inline-block;color:var(--linkC);font-size:12px;font-weight:400;margin:0 5px} .new::after{content:var(--m-new)} /* Blog admin */ .blog-admin{display:none} :root:not(.iAd) .show-if-admin, :root:not(.iUs) .show-if-user, :root.iAd .hide-if-admin, :root.iUs .hide-if-user{display:none} /* No script */ html:not(.nJs) .hide-if-js{display:none} /* Lazied */ :root:not(.lzD) .aprW,:root:not(.lzD) .thmW,:root:not(.lzD) .wBkm,:root:not(.lzD) .wTrans{display:none} /* Selection*/ ::selection{color:var(--selectC);background:var(--selectB)} /* Scrollbar */ ::-webkit-scrollbar{-webkit-appearance:none;width:var(--scrollV);height:var(--scrollH)} ::-webkit-scrollbar-track{background:var(--scrollT)} ::-webkit-scrollbar-thumb{background:var(--scrollB);border-radius:var(--scrollR);border:none} ::-webkit-scrollbar-thumb:hover{background:var(--scrollBh)} ::-webkit-scrollbar-thumb:active{background:var(--scrollBa)} @media screen and (max-width: 500px){ :root{--scrollH:4px;--scrollV:4px;--scrollR:0} } /* Main element */ html{scroll-behavior:smooth;overflow-x:hidden} body{position:relative;margin:0;padding:0;top:0;width:100%;font-family:var(--fontB);font-size:14px;background:var(--bodyB);color:var(--bodyC);-webkit-font-smoothing:antialiased;transition:inset .2s,padding .2s,margin .2s} .mainW{background:var(--bodyB);color:var(--bodyC)} .secIn{margin:0 auto;padding-left:20px;padding-right:20px} /* Notification section */ .ntfC{display:flex;position:relative;min-height:var(--notifH);background:var(--notifB);color:var(--notifC);padding:10px 0;font-size:13px;transition:var(--trans-2);transition-property:min-height;overflow:hidden} .ntfC::before{content:'';position:absolute;top:-12px;inset-inline-start:-12px;width:60px;height:60px;background:rgba(0,0,0,.15);display:block;border-radius:50%;opacity:.1} .ntfC .secIn{position:relative;width:100%;display:flex;align-items:center;gap:15px} .ntfC .c{display:flex;align-items:center;cursor:pointer} .ntfC .c::after{content:'\2715';line-height:18px;font-size:14px} .ntfT{width:100%;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-inline-start:10px;padding:8px 12px;border-radius:var(--linkR);background:var(--linkB);color:#fffdfc;font-size:12px;font-weight:400;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);text-decoration:none} /* Fixed element */ .fixL{display:flex;align-items:center;position:fixed;left:0;right:0;bottom:0;margin-bottom:-40px;padding:20px;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% - var(--headerHc));border-radius:12px;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{display:flex;flex-direction:column;width:100%;background:var(--contentB)} .fixH{position:-webkit-sticky;position:sticky;top:0;display:flex;align-items:center;gap:10px;width:100%;padding:0 20px;border-bottom:1px solid var(--contentL);z-index:1} .fixH a{color:inherit} .fixH .cl{display:flex;align-items:center;justify-content:flex-end;gap:2px} .fixH .cl, .fixH .c{position:relative;flex-shrink:0} .fixH .cl >*, .fixH .c{--svgW:16px;--svgH:16px;display:inline-flex;align-items:center;gap:6px;justify-content:center;min-width:30px;min-height:30px;padding:0 7px;} .fixH .cl >:last-child, .fixH .c:last-child{margin-inline-end:-7px} .fixH .cl label, .fixH .c{cursor:pointer} .fixT::before{content:attr(data-text);flex-grow:1;padding:16px 0;font-size:90%;opacity:.8} .fixT .c::before{content:attr(aria-label);font-size:11px;opacity:.7} .fixC{padding:20px;overflow-x:hidden;overflow-y:auto;width:100%} .fixL .fCls{background:rgba(0,0,0,.3);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px)} .fixI:checked ~ .fixL{margin-bottom:0;opacity:1;visibility:visible} .fixI:checked ~ .fixL .fCls{visibility:visible;opacity:1;pointer-events:auto} .shBri{max-width:520px} /* Header section */ .mainH{--svgW:20px;--svgH:20px;width:100%;z-index:10;position:-webkit-sticky;position:sticky;top:0;transition:inset .3s ease-in-out} .mainH a{color:inherit} .mainH svg{opacity:.8} .headC{position:relative;height:var(--headerHc);color:var(--headerC);background:var(--headerB);display:flex;gap:6px} .headC::after{content:'';position:absolute;inset:auto 0 0 0;border-top:var(--headerL) solid var(--contentL)} .headL{display:flex;align-items:center;width:var(--menuW);padding-inline-start:20px} .headL .tNav{flex-shrink:0;cursor:pointer} .headL .headN{display:flex;align-items:center;width:calc(100% - 30px);height:100%;padding-inline-start:5px} .headW{position:relative;display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;overflow:hidden} .headW img{max-width:160px;max-height:45px;width:auto;height:auto} .headW.r img{border-radius:5px} .headW.r .headH{display:none} .headW.a{padding:5px 8px;border-radius:5px} .headW.a .headIm,.headW.b .headIm{position:absolute;top:0;left:0;width:100%;height:100%} .headW.a img,.headW.b img{width:100%;height:100%;max-width:unset;max-height:unset;object-fit:cover;object-position:center} .headW.a .headI{position:absolute;top:0;left:0;width:100%;height:100%;min-width:unset;min-height:unset} .headW.b .headI{border-radius:8px} .headW.b .hasSub::after{display:block;margin-inline-start:0;text-overflow:ellipsis;overflow:hidden} .headI{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;min-height:40px;min-width:40px;overflow:hidden} .headH{position:relative;display:block;color:inherit;font-size:var(--headerT);font-weight:var(--headerW);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .headH::after{margin-inline-start:3px;font:400 11px var(--fontB);opacity:.6} .hasSub::after{content:attr(data-sub)} .headR{position:relative;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-grow:1;padding-inline-end:20px} .headP{display:flex;justify-content:flex-end;position:relative} .headIc{position:relative;display:flex;justify-content:flex-end;gap:4px;list-style:none;margin:0;padding:0;margin-inline-end:-5px;font-size:11px} .headIc .isSrh{display:none} .navI:checked ~ .mainW .tNav svg{transform:rotate(180deg)} [dir=rtl] .tNav svg{transform:rotate(180deg)} [dir=rtl] .navI:checked ~ .mainW .tNav svg{transform:rotate(0deg)} /* Toogle button */ .tIc{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;cursor:pointer} .tIc::before{content:'';background:var(--transB);border-radius:var(--iconHr);position:absolute;inset:0;opacity:0;visibility:hidden;transition:var(--trans-1)} .tIc:hover::before{opacity:1;visibility:visible;transform:scale(1.3)} :root.lzD.lgT .tDL .d1, :root.lzD.drK .tDL .d2, :root:not(.lzD) .modI:checked ~ .mainW .tDL .d2, :root:not(.lzD) .modI:not(:checked) ~ .mainW .tDL .d1{display:none} /* mainR section */ .mainR{flex-grow:1;position:relative;transition:var(--trans-1);transition-property:width} .mainC.secIn{padding-top:20px} .mainC .section, .mainC .widget{margin-top:40px} .mainC .section:first-child, .mainC .section.mobM, .mainC .widget:first-child, .mainC .widget.hidden + .widget, .mainC .section.no-items + .section, .mainC #HTML11, #sec_Under_Header .widget{margin-top:0} .mainR .section.no-items{display:none} .mainA .widget{margin-bottom:40px} .mainB{display:flex;flex-direction:column;justify-content:center} .sideB{display:flex;flex-direction:column;width:100%;max-width:500px;margin:50px auto 0} .sideS{position:-webkit-sticky;position:sticky;top:calc(var(--headerHc) + 20px)} /* Menu */ .mnBrs{display:flex;flex-direction:column;background:var(--menuB);color:var(--menuC)} .mnBr a{color:inherit} .mnBr ul{list-style:none;margin:0;padding:0} .mnMob{position:-webkit-sticky;position:sticky;bottom:0;background:inherit;border-top:1px solid var(--contentL);padding:15px 20px 20px;text-align:center;z-index:1} .mnMob .mSoc{display:flex;justify-content:center;left:-7px;margin-top:5px;position:relative;right:-7px;width:calc(100% + 14px)} .mnMob:not(.no-items) + .mnMen{padding-bottom:100px} .mnMen{height:100%;padding:20px 15px} .mnH{--svgW:16px;--svgH:16px;display:flex;background:inherit;padding:0 15px;border-bottom:1px solid var(--contentL);z-index:2} .mnH .c{display:inline-flex;align-items:center;padding:15px 10px;cursor:pointer} .mnH .c::after{content:attr(aria-label);font-size:11px;margin:0 12px;opacity:.6} .mMenu{margin-bottom:10px} .mMenu >*{display:inline} .mMenu >*:not(:last-child)::after{content:'\00B7';font-size:90%;opacity:.6} .mMenu a:hover{text-decoration:underline} .mSoc >*{position:relative} .mSoc svg{z-index:1} .mSoc svg, .mnMn svg{width:20px;height:20px;opacity:.8} .mSoc span, .mMenu span{opacity:.7} .mNav{display:none;position:relative;max-width:30px} .mNav > label{cursor:pointer} .mnMn input{display:none} .mnMn li{position:relative} .mnMn >li.br::after{content:'';display:block;border-bottom:1px solid var(--contentL);margin:12px 5px} .mnMn li:not(.mr) a:hover, .mnMn li:not(.mr) input + label:hover{background:var(--transB);color:var(--linkC)} .mnMn li:not(.mr) ul{padding-inline-start:14px;overflow:hidden} .mnMn li li{max-height:0;opacity:0;visibility:hidden;transition:all 0.3s ease;transition-property:max-height,opacity,visibility} .mnMn a, .mnMn li:not(.mr) input + label{display:flex;align-items:center;padding:10px 5px;position:relative;border-radius:8px} .mnMn a, .mnMn li input + label{cursor:pointer} .mnMn a:hover{opacity:1;color:inherit} .mnMn li.mr input + label{display:flex;padding:10px 0 5px;font-size:13px;opacity:0.7} .mnMn a span, .mnMn li input + label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mnMn >li >a, .mnMn >li:not(.mr) >label, .mnMn li.mr li a{width:calc(100% + 10px);left:-5px;right:-5px} .mnMn >li.nt >a::before, .mnMn >li.nt:not(.mr) >label::before, .mnMn ul li.nt a::before{content:'';position:absolute;inset-block-start:7px;inset-inline-start:7px;display:inline-flex;width:8px;height:8px;border-radius:99px;background-color:var(--linkC);animation:nav-notif 2s linear infinite;z-index:1} @keyframes nav-notif{0%{box-shadow:0 0 0 var(--linkC)}50%{box-shadow:0 0 10px var(--linkC)}} .mnMn input + label::after{content:'';flex-shrink:0;width:14px;height:14px;margin-inline:auto 5px;background:url("data:image/svg+xml;utf8,") center / cover no-repeat;transition:transform 0.3s ease;transform:rotate(0deg)} .mnMn ul li >*{height:40px} .mnMn li a >*, .mnMn input + label >*{margin:0 5px} .mnMn >li >a:hover svg{color:var(--linkC)} .mnMn svg{flex-shrink:0} .mnMn input:checked + label::after{transform:rotate(180deg)} .mnMn input:checked ~ ul li{max-height:40px;opacity:1;visibility:visible} .mnMn li:not(.mr) input ~ ul li::before{content:'';position:absolute;width:14px;height:60px;bottom:50%;border-end-start-radius:8px;border-inline-start:1px solid var(--contentL);border-block-end:1px solid var(--contentL)} /* Menu desktop */ @media screen and (min-width:896px){ .navI:checked ~ .ex .mainL, .navI:checked ~ .ex .mnMob, .navI:not(:checked) ~ .co .mainL, .navI:not(:checked) ~ .co .mnMob{width:75px} .navI:checked ~ .ex .mnMob .PageList, .navI:checked ~ .ex .mnMob .mSoc, .navI:not(:checked) ~ .co .mnMob .PageList, .navI:not(:checked) ~ .co .mnMob .mSoc{display:none} .navI:checked ~ .ex .mnBrs .mNav, .navI:not(:checked) ~ .co .mnBrs .mNav{display:flex} .navI:not(:checked) ~ .ex .mnMn li:not(.mr) ul li >*, .navI:checked ~ .co .mnMn li:not(.mr) ul li >*{margin-inline-start:14px} .navI:checked ~ .ex .mnMn li:hover li, .navI:not(:checked) ~ .co .mnMn li:hover li{max-height:40px;visibility:visible;opacity:1;transition:none} .navI:checked ~ .ex .mnMn input ~ ul li::before, .navI:not(:checked) ~ .co .mnMn input ~ ul li::before{display:none} .navI:not(:checked) ~ .ex .mnMn li:not(.mr) input:checked ~ label, .navI:checked ~ .co .mnMn li:not(.mr) input:checked ~ label{background:var(--transB);color:var(--linkC)} .navI:checked ~ .ex .mnMn a:hover, .navI:not(:checked) ~ .co .mnMn a:hover{opacity:1;color:inherit} .navI:checked ~ .ex .mnMn > li >a, .navI:checked ~ .ex .mnMn input + label, .navI:not(:checked) ~ .co .mnMn >li >a, .navI:not(:checked) ~ .co .mnMn input + label{max-width:40px;border-radius:var(--iconHr)} .navI:checked ~ .ex .mnMn input + label, .navI:not(:checked) ~ .co .mnMn input + label{overflow:hidden} .navI:checked ~ .ex .mnMn li.mr, .navI:not(:checked) ~ .co .mnMn li.mr{display:none} .navI:checked ~ .ex .mnMn >li.br::after, .navI:not(:checked) ~ .co .mnMn >li.br::after{max-width:20px} .navI:not(:checked) ~ .ex .mnBrs, .navI:checked ~ .co .mnBrs{overflow:hidden} .navI:checked ~ .ex .mnMen, .navI:checked ~ .ex .mnMen:hover, .navI:not(:checked) ~ .co .mnMen, .navI:not(:checked) ~ .co .mnMen:hover{overflow-y:visible;overflow-x:visible} .navI:checked ~ .ex .mnMn >li >a span, .navI:checked ~ .ex .mnMn li:not(.mr) ul, .navI:not(:checked) ~ .co .mnMn >li >a span, .navI:not(:checked) ~ .co .mnMn li:not(.mr) ul{position:absolute;top:3px;inset-inline-start:35px;margin:0 5px;padding:8px 10px;border-radius:16px;border-start-start-radius:5px;max-width:160px;background:var(--contentB);opacity:0;visibility:hidden;border:1px solid var(--contentL);z-index:2} .navI:checked ~ .ex .mnMn >li >a:hover span, .navI:checked ~ .ex .mnMn li:not(.mr):hover ul, .navI:not(:checked) ~ .co .mnMn >li >a:hover span, .navI:not(:checked) ~ .co .mnMn li:not(.mr):hover ul{opacity:1;visibility:visible} .navI:checked ~ .ex .mnMn li:not(.mr) ul, .navI:not(:checked) ~ .co .mnMn li:not(.mr) ul{padding:0;margin:0;overflow:hidden;display:block} .navI:checked ~ .ex .mnMn li:not(.mr):last-child ul, .navI:not(:checked) ~ .co .mnMn li:not(.mr):last-child ul{top:auto;bottom:3px;border-start-start-radius:15px;border-end-start-radius:5px} .navI:checked ~ .ex .mnMn ul li >*, .navI:not(:checked) ~ .co .mnMn ul li >*{border-radius:0} .mainW.ex .tNav svg{transform:rotate(180deg)} .navI:checked ~ .ex .tNav svg{transform:rotate(0deg)} [dir=rtl] .mainW.ex .tNav svg{transform:rotate(0deg)} [dir=rtl] .navI:checked ~ .ex .tNav svg{transform:rotate(180deg)} } /* Menu mobile */ @media screen and (max-width:896px){ .mnMn li:not(.mr) li >*{margin-inline-start:14px} .mnMn li:not(.mr) input:checked ~ label{background:var(--transB);color:var(--linkC)} .navI:checked ~ .mainW .mnMn li li a:hover svg{fill:var(--linkC)} .navI:checked ~ .mainW .mnMn li li a:hover svg.line{fill:none;stroke:var(--linkC)} } /* Footer */ .mainF{padding-top:30px;padding-bottom:30px;margin-top:40px;background:var(--fotB);font-size:97%;line-height:1.8em;color:var(--fotC);border-top:var(--fotL) solid var(--contentL)} .fotN{position:relative;display:flex;flex-wrap:wrap;gap:25px} .fotN .section,.fotN .widget{margin:0} .fotW{--numI:4;flex-grow:1;display:grid;grid-template-columns:repeat(var(--numI),1fr);gap:25px} .g3 > .fotW{--numI:3} .fotW .title{color:inherit;margin-bottom:12px;font-weight:700;font-size:14px} .fotW ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;line-height:20px} .fotW li{display:flex;gap:5px} .fotW li::before{content:'\2013';opacity:.3} .fotW a{display:inline-block;color:inherit;word-break:break-word} .fotW a:hover{text-decoration:underline} .fotA{width:35%;min-width:350px;display:flex;flex-direction:column;gap:20px} .abtU::before{content:attr(data-text);font-size:13px;opacity:.6;display:block;margin-bottom:10px} .abtL{position:relative;flex:0 0 40px;width:40px;height:40px;background:var(--transB);border-radius:8px;overflow:hidden} .abtI{position:absolute;inset:0} .abtL img{object-fit:cover;object-position:center;transition:var(--trans-3)} .abtL img.lazyload,.abtL img.lazyloading{filter:brightness(0.98) blur(10px);transform:scale(1.08)} .abtT{display:flex;align-items:center;gap:10px} .abtT h2{color:inherit;font-size:1.2rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .abtD{line-height:1.4em;margin:12px 0 0} .fotS{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;padding:0;margin:0} .fotS li >*{--svgW:20px;--svgH:20px;color:inherit;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--contentBa);border:1px solid var(--contentL);border-radius:var(--linkR);opacity:1} .fotS li >:not(a){opacity:.8} .fotS li >a:hover{background:var(--contentBs)} /* Footer bottom */ .fotB{display:flex;flex-direction:column;gap:12px;margin-top:30px;overflow:hidden} .fotC{display:inline-flex;justify-content:space-between;width:100%;line-height:1.4} .fotC .credit{flex-shrink:0;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .fotC .credit a{display:inline-flex;align-items:center;white-space:nowrap} .fotC .credit a svg{width:13px;height:13px;margin:0 3px;flex-shrink:0} .fotC .creator{margin-inline-start:20px;white-space:nowrap;opacity:0} /* Article section */ .blogP .ntry.noAd .widget{display:none} .onId .blogP{--gapC:18px;--gapR:36px;--numI:1;display:grid;grid-template-columns:repeat(var(--numI), 1fr);gap:var(--gapR) var(--gapC)} .onId .blogP.mty{display:block;width:100%;left:0;right:0} .onId .blogP.mty >.noPosts{width:100%;margin:0} .onId .blogP >*{--szpd:0px;position:relative;overflow:hidden} .onId .blogP >article:not(.pTag){padding-bottom:calc(var(--szpd) + 35px)} .onId .blogP .pAdIf{padding:0} .onId .blogP .pTag{padding-bottom:0} .onId .blogP .pInf{position:absolute;inset:auto var(--szpd, 0) var(--szpd, 0)} .onId .blogP .pTag .pCntn{padding-bottom:var(--szpd)} /* No post */ .blogP >.noPosts{display:flex;align-items:center;justify-content:center;min-height:120px;padding:40px 15px;background:var(--contentB);border:2px dashed var(--contentL);border-radius:5px} /* Blog title */ .blogT{position:relative;display:flex;align-items:center;justify-content:space-between;font-size:14px;margin:0 0 30px} .blogT .t, .blogT .title{margin:0;flex-grow:1} .blogT .t{word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .blogT .t span{font-weight:400;font-size:90%;opacity:.7} .blogT .t span::before{content:attr(data-text)} .blogT .t span::after{content:'';margin:0 4px} .blogT .t span.hm::after{content:'/';margin:0 8px} /* Thumbnail */ .pThmb{position:relative;border-radius:5px;margin-bottom:20px;background:var(--transB);overflow:hidden} .pThmb:not(.nul)::before{content:'';position:absolute;inset:0;transform:translateX(-100%);background-image:var(--thumbSb);animation:shimmer 2s infinite} .pThmb .thmb{display:block;position:relative;padding-top:calc(100% / (var(--thumbR)));color:inherit;transition:var(--trans-4)} .pThmb .thmb:hover{opacity:1} article:hover >.pThmb:not(.nul) .thmb{transform:scale(1.03)} .imgThm{display:block;position:absolute;top:50%;left:50%;font-size:12px;text-align:center;transform:translate(-50%,-50%);transition:var(--trans-3);transition-property:filter,transform} .imgThm.lblr.lazyload,.imgThm.lblr.lazyloading{filter:brightness(0.98) blur(10px);transform:translate(-50%,-50%) scale(1.08)} .imgThm:not(span){width:100%;height:100%} img.imgThm,.imgThm img{object-fit:cover;object-position:center} span.imgThm{display:flex} span.imgThm::before{content:'';width:28px;height:28px;background:url("data:image/svg+xml,") center / cover no-repeat;opacity:.3} .pThmb.iyt:not(.nul) .thmb::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4) url("data:image/svg+xml,") center / 35px no-repeat;opacity:0;transition:var(--trans-2)} .pThmb.iyt:not(.nul):hover a.thmb::after,.pThmb.iyt:not(.nul) .thmb:not(a)::after{opacity:1} /* Thumbnail items */ .tfxM{--gap:8px;--itmPd:5px;--itmPh:calc(var(--itmPd) / 2);--itmIc:16px;--itmFs:13px;position:absolute;inset-inline:0;display:flex;gap:var(--gap);justify-content:space-between;padding:8px;font-size:var(--itmFs);pointer-events:none} .tfxM.T{align-items:flex-start;top:0;padding-bottom:0} .tfxM.B{align-items:flex-end;bottom:0;padding-top:0} .tfxC{display:flex;flex-wrap:wrap;gap:var(--gap)} .tfxC:not(:first-child){margin-inline-start:auto;justify-content:flex-end} .tfxC >*{display:flex;align-items:center;padding:var(--itmPd) var(--itmPh);border-radius:var(--thumbEr);background:var(--contentB);color:inherit;box-shadow:0 8px 20px 0 rgba(0,0,0,.1);pointer-events:auto} .B >.tfxC >*{box-shadow:0 -8px 20px 0 rgba(0,0,0,.1)} .tfxC >* svg{width:var(--itmIc);height:var(--itmIc);stroke-width:1.5;margin:0 var(--itmPh);opacity:.8} .tfxC .cmnt::after, .tfxC .pV::after, .tfxC .bM::before, .tfxC .aNm .nm{margin:0 var(--itmPh)} .tfxC .cmnt, .tfxC .pV, .tfxC .bM:hover, .tfxC .aNm{padding:var(--itmPd)} .tfxC .cmnt::after{content:attr(data-text)} .tfxC .pV{--v:'0'} .tfxC .pV[data-views]{--v:attr(data-views)} .tfxC .pV::after{content:var(--v)} .tfxC .bM{transition:var(--trans-1);transition-property:padding;cursor:pointer} .tfxC .bM::before{content:attr(data-save);max-width:90px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:var(--trans-1);transition-property:max-width,margin} .tfxC .bM.added::before{content:attr(data-saved)} .tfxC .bM:not(:hover)::before{max-width:0;margin:0} .bm-button.added >svg .a,.bm-button:not(.added) >svg .t{display:none} .tfxC .aNm .im{flex-shrink:0;width:var(--itmIc);height:var(--itmIc);margin:0 var(--itmPh)} .tfxC .aNm::after, .sInf .sDt .l::after{--icon:url("data:image/svg+xml,");content:'';flex-shrink:0;width:13px;height:13px;-webkit-mask-image:var(--icon);mask-image:var(--icon);background:var(--linkC);margin:0 var(--itmPh);opacity:1} /* Label */ .pLbls::before, .pLbls >*::before{content:attr(data-text)} .pLbls::before{opacity:.7} .pLbls a:hover{text-decoration:underline} .pLbls >*{color:inherit;display:inline} .pLbls >*:not(:last-child)::after{content:'/'} /* Profile Images and Name */ .im{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:16px;background-color:var(--transB);background-size:cover;background-position:center;background-repeat:no-repeat} img.im{object-fit:cover;object-position:center} .im svg{width:18px;height:18px;opacity:.4} .nm::after{content:attr(data-text)} /* Title and Entry */ .pTtl{font-size:1.1rem;line-height:1.5em} .pTtl.sml{font-size:1rem} .pTtl.itm{font-size:var(--postT);font-family:var(--fontBa);font-weight:700;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;word-break:break-word} /* Snippet, Description, Headers and Info */ .onId .pCntn{padding:0 var(--szpd, 0)} .pHdr{margin-bottom:8px} .pHdr .pLbls{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8} .pSml{font-size:93%} .pSnpt{word-break:break-word;-webkit-line-clamp:2;margin:12px 0 0;font-family:var(--fontB);font-size:14px;line-height:1.5em;opacity:.8} .pSnpt.nTag{color:var(--linkC);opacity:1} .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:15px} .pInf.nTm{margin:0} .pInf.nSpr .pJmp{opacity:1} .pInf.nSpr .pJmp::before{content:attr(aria-label)} .pInf.ps{position:relative;display:block;margin-top:25px} .pInf.ps a{color:inherit} .pInf.ps .pTtmp{opacity:1} .pInf.ps .pTtmp::before{content:attr(data-text) ': '} .pInf.ps .pTtmp::after{display:inline-flex} .pInf.ps.nul{display:none} .pInf .pAi, .pInf .pAt{display:flex;align-items:center;gap:8px} .pInf .pCm{flex-shrink:0;margin-inline-start:auto} .pInf .pIc{display:inline-flex;justify-content:flex-end;position:relative;width:calc(100% + 14px);inset-inline:-7px} .pInf .pIc >*{display:flex;align-items:center;justify-content:center;width:30px;height:30px;position:relative;margin:0 2px;color:inherit;cursor:pointer} .pInf .pIc svg{width:20px;height:20px;opacity:.8;z-index:1} .pInf .pIc .cmnt[data-text]::after{content:attr(data-text);font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:var(--contentBs);position:absolute;top:-5px;right:0;z-index:2} .pInf .pDr{display:flex;flex-wrap:wrap;align-items:center;margin-top:12px;opacity:.8;overflow:hidden} .pInf .pDr >*{display:inline;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .pInf .pDr >*:not(:last-child)::after{content:'\00B7';margin:0 5px} .pInf .pLc a:hover{opacity:1;text-decoration:underline} .pInf .pLc a::before{content:attr(data-text)} .pInf a.nm:hover::after{text-decoration:underline} .pInf .pRd >*::before{content:attr(data-text) ': '} .pInf .pRd >*::after{content:attr(data-minutes) ' min';display:inline-block} .pInf .nm::before{content:attr(data-write) ' ';opacity:.8} .pInf .im{width:28px;height:28px} .aTtmp{opacity:.8} .aTtmp, .pJmp{overflow:hidden} .pTtmp::after, .iTtmp::before, .pJmp::before{content:attr(data-text);display:block;line-height:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .pTtmp::after, .iTtmp::before{content:attr(data-time)} .pTtmp{position:relative;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} .ntry:not(.noAd) .pJmp, .itemFt .itm .pJmp{animation:indicator 2s 3s infinite} .ntry:not(.noAd):hover .pJmp, .itemFt:hover .itm .pJmp{animation:none} .pInf:not(.ps) .pTtmp{display:inline-flex;align-items:center;opacity:1} .pInf:not(.ps) .pTtmp::before{content:attr(data-text);margin-inline-end:5px;padding:2px 4px;background:var(--linkB);color:#fff;font-size:11px;border-radius:2px} .pInf:not(.ps) .pTtmp.pbl::before{background:#457f57} .pInf:not(.ps) .pTtmp::after{opacity:.8} .bX .pDr{border-top:1px solid var(--contentL);padding-top:12px} /* Blog pager */ .blogN{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:90%;font-family:var(--fontB);line-height:20px;color:#fffdfc;margin:30px 0 40px;max-width:100%} .blogN >*{display:flex;justify-content:center;align-items:center;min-width:40px;min-height:40px;padding:10px 13px;color:inherit;background:var(--linkB);border-radius:var(--linkR);/*box-shadow:rgba(100, 100, 111, 0.2) 0px 7px 29px 0px*/} .blogN button{cursor:pointer} .blogN button[disabled]{cursor:not-allowed} .blogN button:hover{opacity:.9} .blogN >* svg{width:18px;height:18px;stroke:var(--darkT);stroke-width:1.5} .blogN >[data-text]::before{content:attr(data-text)} .blogN .jsLd{margin-left:auto;margin-right:auto} .blogN .nwLnk::before, .blogN .jsLd::before{display:none} .blogN .nwLnk[data-text]::after, .blogN .jsLd[data-text]::after{content:attr(data-text);margin:0 8px} .blogN .olLnk[data-text]::before{margin:0 8px} .blogN .nPst{background:var(--contentL);color:var(--bodyCa)} .blogN .nPst.jsLd svg{fill:var(--darkTa);stroke:var(--darkTa)} .blogN .nPst svg.line{stroke:var(--darkTa)} [dir=rtl] .blogN .nwLnk svg,[dir=rtl] .blogN .olLnk svg{transform:rotate(180deg)} /* Breadcrumb */ .brdCmb{margin-bottom:5px;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} /* Widget Style */ .title{margin:0 0 25px;font-size:var(--widgetT);font-weight:var(--widgetTw);position:relative} .title::after{content:'';display:inline-block;vertical-align:middle;width:var(--widgetTa);margin-inline-start:10px;border-bottom:4px dotted var(--widgetTac);opacity:.5} .title.dt::before{position:absolute;top:0;inset-inline-end:0;content:'';width:20px;height:20px;display:inline-block;opacity:.3;background:url("data:image/svg+xml,") center / 20px no-repeat} [dir=rtl] .title::before{transform:rotate(-90deg)} /* Widget BlogSearch */ .srchF{position:relative;background:var(--contentB);border-radius:var(--srchDr);border:1px solid var(--contentL);overflow:hidden} .srchF .i{display:block;background:inherit;min-width:280px;min-height:40px;border:0;outline:0;padding:10px 40px;white-space:nowrap;text-overflow:ellipsis} .srchF .b{--svgW:18px;--svgH:18px;position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;min-width:40px;padding:0;border:0;transition:var(--trans-1);transition-property:color,opacity,visibility;cursor:pointer} .srchF .s{inset-inline-start:0} .srchF .r{--svgW:16px;--svgH:16px;inset-inline-end:0;visibility:hidden;opacity:0} .srchW:focus-within .s{color:var(--linkC)} .srchW:focus-within .i:not(:placeholder-shown) ~ .r{visibility:visible;opacity:1} @media screen and (max-width: 896px){ .headS{position:fixed;top:calc(var(--headerHc) * -1);left:0;right:0;z-index:4;transition:var(--trans-2);transition-property:top} .headS:focus-within{top:0} .srchF{background:var(--srchB);border-radius:0;border:0;height:var(--headerHc);border-bottom:1px solid var(--contentL)} .srchF .i{width:100%;height:100%;min-width:unset;min-height:unset;padding-inline:60px} .srchF .b{--svgW:18px;--svgH:18px;min-width:58px} .headS .fCls{background:rgba(0,0,0,.3);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);transition:var(--trans-2);z-index:-1} .srchW:focus-within .s{color:inherit} .headS:focus-within .fCls{visibility:visible;opacity:1;pointer-events:auto} html:has(.headS:focus-within){overflow:hidden} } /* Widget Scroll Menu */ .navS{position:relative;display:flex;align-items:center;width:100%;background-color:var(--navB);font-size:14px;border-bottom:var(--headerL) solid var(--contentL);overflow-y:hidden;overflow-x:auto} .navS ul{list-style:none;display:flex;height:100%;position:relative;white-space:nowrap} .navS li{position:relative;display:flex;padding:12px 0} .navS .l{padding: 4px 12px;color:inherit;opacity:1;border-inline-end:1px solid var(--contentL)} .navS span.l{opacity:0.8} .navS .l:not(span):hover{color:var(--linkC);opacity:1} .navS li:last-child .l{border: none} .navS .l::after{content:'';position: absolute;inset:auto 0 0 0;border-bottom:1px solid currentColor;opacity:0;pointer-events:none} .navS .l:not(span):hover::after{opacity: 1} .navS .l::before{content:attr(title)} /* Widget FeaturedPost */ .itemFt .itm{--gap:18px;--thWd:300px;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap)} .itemFt .pThmb{flex-shrink:0;width:var(--thWd);margin-bottom:0} .itemFt .iCtnt{flex-grow:1;width:calc(100% - (var(--thWd) + var(--gap)));overflow:hidden} /* Widget PopularPosts */ .itemPp{counter-reset:p-cnt} .itemPp .iCtnt{display:flex} .itemPp >*:not(:last-child){margin-bottom:25px} .itemPp .iCtnt::before{flex-shrink:0;content:'#' 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 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .iInf .pLbls{display:inline;opacity:.8} /* Widget Label */ .lbL >*{display:flex;align-items:baseline;justify-content:space-between;color:inherit;padding:8px 10px;border-radius:4px;line-height:20px;overflow:hidden} .lbL >*::before{content:attr(data-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lbL >*[data-count]::after{content:'(' attr(data-count) ')';margin-inline-start:8px;font-size:12px;opacity:.8} .lbM{display:inline-block;margin-top:20px;line-height:20px;color:var(--linkC);cursor:pointer} .lbM::before{content:attr(data-show)} .lbI:not(:checked) ~ .lbL >*:not(.s){display:none} .lbI:not(:checked) ~ .lbM::after{content:'(+' attr(data-more) ')';margin-inline-start:8px;font-size:12px;opacity:.8} .lbI:checked ~ .lbM::before{content:attr(data-hide)} .lbL >*:not(div):hover::after, .lbL >div::after{color:var(--linkC)} .wL.bg .lbL >*{background:var(--contentBs)} .wL:not(.bg) .lbL >*{border:1px solid var(--contentL)} .wL:not(.bg) .lbL >*:not(div):hover, .wL:not(.bg) .lbL >div{border-color:var(--linkB);box-shadow:0 0 0 .5px var(--linkB) inset} .wL.ls .lbL{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px} .wL:not(.ls) .lbL{display:flex;flex-wrap:wrap;gap:8px} /* Hide Scroll */ .scrlH, .tabs >div:first-of-type{--scrollH:0;--scrollV:0;--scrollT:transparent;--scrollB:transparent;--scrollBh:transparent;--scrollBa:transparent} /* Maintenance Mode */ .mtmW{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:fixed;inset:0;padding:20px;z-index:99} .mtmW::before{content:'';background:var(--contentB);position:absolute;inset:0;transform:scale(2);z-index:-1} .mtmW h2{font-size:1.4rem;margin:0} .mtmW p{margin:1em 0 0} html:has(.mtmW){overflow:hidden} /* Anchor Ad */ .ancrA{position:fixed;inset:auto 0 0 0;max-height:200px;padding:5px;box-shadow:0 0 18px 0 rgba(9,32,76,.1);display:flex;align-items:center;justify-content:center;background:var(--contentBs);z-index:19;border-top:1px solid var(--contentL);transition:var(--trans-1);transition-property:height,padding,box-shadow} .ancrX{position:absolute;top:-30px;inset-inline-end:0;width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-start-start-radius:12px;border:1px solid var(--contentL);background:inherit;cursor:pointer} .ancrA:not(.top) .ancrX{border-bottom:0;border-right:0} .ancrX svg{width:18px;height:18px} .ancrC{flex-grow:1;overflow:hidden;display:block;position:relative} .ancrI:checked ~ .ancrA{padding:0;min-height:0;box-shadow:none} .ancrI:checked ~ .ancrA .ancrC{display:none} .ancrI:checked ~ .ancrA:not(.top) .ancrX svg{transform:rotate(180deg)} .ancrA.top{inset:0 0 auto 0;border-top:0;border-bottom:1px solid var(--contentL)} .ancrA.top .ancrX{top:auto;bottom:-30px;border-end-end-radius:12px;border-end-start-radius:12px;border-start-start-radius:0;border-top:0;left:50%;transform:translateX(-50%)} .ancrI:not(:checked) ~ .ancrA.top .ancrX svg{transform:rotate(180deg)} body:has(.ancrI:not(:checked) ~ .ancrA.top){padding-top:80px} /* Responsive Ad */ @media screen and (max-width: 540px){ #LinkList86{position:relative;inset-inline:-20px;width:calc(100% + 40px)} } @media screen and (max-width: 896px){ #LinkList81, #LinkList82, #LinkList83, #LinkList85, .pAd, .mdlAd, .rAd{position:relative;inset-inline:-20px;width:calc(100% + 40px)} } @media screen and (min-width: 897px){ #LinkList81, #LinkList82, #LinkList83, #LinkList85, .pAd, .mdlAd, .rAd{margin-inline:auto;width:100%;max-width:calc(100vw - var(--scrollH) - var(--menuW) - 50px);transition:var(--trans-1);transition-property:width} .hsSb #LinkList82, .hsSb #LinkList83, .hsSb #LinkList85, .hsSb .pAd, .hsSb .mdlAd, .hsSb .rAd{max-width:calc(100vw - var(--scrollH) - var(--menuW) - var(--sideW) - 75px)} } /* Dummy Ad */ .adB{display:flex;align-items:center;justify-content:center;min-height:70px;padding:10px;background:var(--contentB);color:var(--darkTa);font-size:13px;text-align:center;border:2px dashed var(--contentL);border-radius:3px} .adB.h240, .adB.h360, .adB.h480{border-radius:5px;border-start-end-radius:15px} .adB.h240{min-height:240px} .adB.h360{min-height:360px} .adB.h480{min-height:480px} .adB::before{content:attr(data-text)} .pAdIf .adB{height:100%} /* Responsive */ @media screen and (min-width:897px){ /* mainN */ .mainN{display:flex} .mainB{flex-direction:row;gap:25px} .mainL{width:var(--menuW);flex-shrink:0;position:relative;transition:var(--trans-1);transition-property:width;z-index:1} .mainR{width:calc(100% - var(--menuW))} .mnBrs::after{content:'';position:absolute;inset-block:0;inset-inline-end:0;border-right:var(--menuL) solid var(--contentL);z-index:1} .mainR >.secIn{padding-top:30px} .mainR .secIn{padding-left:25px;padding-right:25px} .blogB{width:100%} .blogB:not(:last-child){width:calc(100% - var(--sideW) - 25px);margin-inline-end:calc(var(--sideW) + 25px)} .onPg .mainB{display:block;max-width:var(--pageW);margin-inline:auto} .onPs .blogB{max-width:var(--pageW)} .sideB{width:var(--sideW);margin:0;margin-inline-start:calc((var(--sideW) + 25px) * -1)} .blogB ~ .adsbygoogle, .blogB ~ .google-auto-placed{display:none} /* mainNav */ .mnBr{position:sticky;position:-webkit-sticky;top:var(--headerHc)} .mnBrs{height:calc(100vh - var(--headerHc));font-size:13px;position:relative} .mnBrs >*:not(.mnMob){width:100%} .mnMen{padding:20px;overflow-y:hidden;overflow-x:hidden} .mnMen:hover{overflow-y:auto} .mnMob{width:var(--menuW)} .mnH, .mobM{display:none} /* Article */ .onId.onHm .blogP{--numI:3} .onId:not(.hsSb) .blogP{--numI:4} } @media screen and (max-width:1100px){ /* Article */ .onId.onHm .blogP{--numI:2} .onId:not(.hsSb) .blogP{--numI:3} /* Widget */ .itemFt .itm{--thWd:50%} .itemFt .pSnpt{display:none} } @media screen and (max-width:896px){ /* Header */ .mainH:not(.s):not(.a){position:relative} .onSb .mainH.a{top:calc(var(--headerHc) * -1)} .headL{padding-inline-start:15px;flex-grow:1;width:50%} .headR{padding-inline-end:20px;flex-grow:0} .headIc .isSrh{display:block} .navI:not(:checked) ~ .ex .headIc .tNav .h1, .navI:checked ~ .ex .headIc .tNav .h3 {opacity:1} .navI:not(:checked) ~ .ex .headIc .tNav .h2, .navI:checked ~ .ex .headIc .tNav .h1{opacity:0} /* mainNav */ .mainL{display:flex;justify-content:flex-start;position:fixed;inset-inline-start:-100%;top:0;bottom:0;width:100%;height:100%;z-index:20;visibility:hidden;opacity:0;transition:all .3s ease-in-out} .mainL .fCls{background:rgba(0,0,0,.3);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);transition:all .3s ease-in-out} .mnBr{width:85%;max-width:480px;height:100%;border-inline-end:var(--menuL) solid var(--contentL);z-index:3;overflow:hidden;position:relative;box-shadow:0 5px 30px 0 rgba(0,0,0,.05)} .mnBrs{width:100%;height:100%} .mnMen{overflow-x:hidden;overflow-y:auto} .mnMen{padding-top:10px;padding-bottom:10px} .navI:checked ~ .mainW .mainL{visibility:visible;opacity:1;inset-inline-start:0} .navI:checked ~ .mainW .mainL .fCls{visibility:visible;opacity:1;pointer-events:auto} html:has(.navI:checked){overflow:hidden} /* Article */ .onId.onHm .blogP{--numI:3} /* Widget */ .itemFt .pSnpt{display:-webkit-box} } @media screen and (max-width:768px){ /* Article */ .onId.onHm .blogP, .onId:not(.hsSb) .blogP{--numI:2} } @media screen and (max-width:640px){ /* Variables */ :root { --headerHc: var(--headerHm); } /* Pop-up */ .fixL{align-items:flex-end;padding:0} .fixL .fixLi, .fixL .cmBri{border-radius:12px 12px 0 0;max-width:680px} .fixL .cmBri:not(.mty){border-radius:0;height:100%;max-height:100%} /* Footer */ .fotN > .fotW{--numI:2} .m1 > .fotW{--numI:1} .m3 > .fotW{--numI:3} .m3 > .fotW .title::after{content:none} } @media screen and (min-width:640px){ .secIn{max-width:var(--contentW)} } @media screen and (max-width:500px){ /* Font and Blog */ .brdCmb{font-size:13px} .pDesc{font-size:14px} .pEnt{font-size:var(--postFm)} .pTtl.itm{font-size:var(--postTm)} .pInf.ps .pDr{font-size:12px} /* Widget */ .itemFt .itm{padding-bottom:80px} .itemFt .pThmb{width:100%} .itemFt .iCtnt{width:calc(100% - 22px);margin:0 auto;position:absolute;inset:auto 0 0 0;padding:13px;background:var(--contentB);border-radius:10px;box-shadow:0 10px 20px -5px rgba(0,0,0,.1)} .itemFt .pTtl{font-size:1rem} .itemFt .pSnpt{font-size:93%} .itemFt .tfxM.B{display:none} /* Footer */ .fotA{width:100%;min-width:unset} } /* Box Style */ .bX .wL{padding:15px;background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border:1px solid var(--contentL);border-radius:5px} .bX .admAbt{padding:15px;background:var(--contentB);border:1px solid var(--contentL);box-shadow:0 10px 25px -3px rgba(0,0,0,.07);border-radius:5px} .bX .pInf.ps{background:var(--contentB);padding:15px;box-shadow:0 0 25px rgba(0,0,0,.07);border:1px solid var(--contentL);border-radius:5px} .bX.onId .blogP{--gapR:18px} .bX.onId .blogP >*{--szpd:15px;background:var(--contentB);box-shadow:0 5px 35px rgb(0 0 0 / 7%);border-radius:5px;border:1px solid var(--contentL);overflow:hidden} .bX.onId .blogP .pAdIf{padding:5px} .bX.onId .blogP .pThmb{margin-bottom:var(--szpd);border-bottom:1px solid var(--contentL);border-radius:0} .bX .itemPp{position:relative;overflow:hidden;background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border:1px solid var(--contentL);border-radius:5px} .bX .itemPp >*{padding:15px} .bX .itemPp >*:not(:last-child){margin-bottom:0;border-bottom:1px dashed var(--contentL)} .bX .itm.mostP .iThmb{margin:-15px -15px 15px;border-radius:0;border-bottom:1px solid var(--contentL)} @media screen and (min-width: 501px) { .bX .itemFt{position:relative;overflow:hidden;padding:10px;background:var(--contentB);border:1px solid var(--contentL);box-shadow:0 5px 35px rgba(0, 0, 0, .07);border-radius:8px} .bX .itemFt::after{content:'';position:absolute;top:0;inset-inline-end:0;width:40px;height:15px;background:var(--linkB);border-end-start-radius:20px;opacity:.2} } @media screen and (max-width:500px) { .bX.onId .blogP:not(.oGrd){--gapR:10px} .bX.onId .blogP:not(.oGrd) >*{--szpd:10px} .bX .itemFt .pThmb, .bX .itemFt .iCtnt{border:1px solid var(--contentL)} } /* 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 indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}} @keyframes opaCity{0%{opacity:0}100%{opacity:1}} @-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 indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}} @-webkit-keyframes opaCity{0%{opacity:0}100%{opacity:1}} /*--[ Custom CSS Global ]--*/ *//* /*--[ Global (AMP) ]--*/ /*--[ Custom CSS Global (AMP) ]--*/ *//* /*--[ Global (NO AMP) ]--*/ /* Ripple effects */ .ripple{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;user-select:none;position:relative} .ripple-container{position:absolute;inset:0;color:transparent;border-radius:inherit;opacity:.18;transform:perspective(0);overflow:hidden;pointer-events:none} .ripple-container i{position:absolute;border-radius:50%;background:rgba(0, 0, 0, 0.2);transition:opacity 700ms ease 0s, transform 700ms ease 0s} /* Toast notification */ .tNtf >*{position:fixed;inset-inline-start:0;bottom:-50px;margin:24px;margin-top:0;max-width:456px;display:inline-flex;align-items:center;z-index:99;background:var(--contentB);border:1px solid var(--contentL);font-size:14px;font-family:var(--fontB);border-radius:8px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);opacity:0;visibility:hidden;transition:var(--trans-1);animation:toast-slidein 5s ease forwards;-webkit-animation:toast-slidein 5s ease forwards} .tNtf.alt >*{background:#323232;color:rgba(255,255,255,.8);border:none;padding:15px 20px;border-radius:3px;box-shadow:0 10px 40px rgba(0,0,0,.2)} @media screen and (max-width:500px){ .tNtf >*{inset-inline-end:0;margin:16px;max-width:none} .tNtf.alt >*{margin:0;font-size:15px;border-radius:0} } @keyframes toast-slidein{0%,100%{opacity:0;visibility:hidden;bottom:-50px}10%,90%{opacity:1;visibility:visible;bottom:0}} @-webkit-keyframes toast-slidein{0%,100%{opacity:0;visibility:hidden;bottom:-50px}10%,90%{opacity:1;visibility:visible;bottom:0}} /* Widget Cookie consent */ .ckW{position:fixed;bottom:0;inset-inline:0;padding:20px;background:var(--contentB);border-top:1px solid var(--contentL);box-shadow:0 0 25px rgba(0,0,0,.07);opacity:1;visibility:visible;transition:var(--trans-3);transition-property:bottom,opacity,visibility;z-index:10} .ckW:not(.v){bottom:-20px;opacity:0;visibility:hidden} .ckH{margin-bottom:10px} .ckD{font-size:14px;line-height:1.4rem;font-family:var(--fontBa)} .ckA{margin-top:15px;display:flex;justify-content:center} .ckA >*{display:inline-flex;flex-grow:1;justify-content:center;align-items:center;padding:10px 15px;outline:0;border:0;border-radius:var(--linkR);line-height:20px;color:inherit;background:var(--contentBs);font-size:14px;font-family:var(--fontB);white-space:nowrap;overflow:hidden;cursor:pointer} .ckA >*:first-child{flex:0 0 auto;margin-inline-end:10px} .ckA >*:last-child{background:var(--linkB);color:#fffdfc} .ckA >*:hover{opacity:.8} @media screen and (min-width:500px){ .ckW{bottom:20px;inset-inline-start:20px;inset-inline-end:auto;max-width:400px;border:1px solid var(--contentL);border-radius:5px} .ckW:not(.v){bottom:0} } /* Preloader */ .pldW{display:none;direction:ltr;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:var(--bodyB);align-items:center;justify-content:center;z-index:98;visibility:visible;opacity:1;transition:all .8s ease} .pldW.e{display:flex} .pldW.h{opacity:0;visibility:hidden} :root:has(.pldW.e){overflow:hidden} /* Loader Hashtag */ .ldrHt{--c1:rgba(225, 20, 98, 0.75);--c2:rgba(111, 202, 220, 0.75);--c3:rgba(61, 184, 143, 0.75);--c4:rgba(233, 169, 32, 0.75);position:relative;display:block;width:2.8em;height:2.8em} .ldrHt:before,.ldrHt:after{content:'';position:absolute;top:50%;left:50%;display:block;width:.49em;height:.49em;border-radius:.25em;transform:translate(-50%,-50%) rotate(165deg)} .ldrHt:before{animation:loader-hash-before 2s infinite} .ldrHt:after{animation:loader-hash-after 2s infinite} @keyframes loader-hash-before{0%{width:.5em;box-shadow:1em -.5em var(--c1),-1em .5em var(--c2)}35%{width:2.5em;box-shadow:0 -.5em var(--c1),0 .5em var(--c2)}70%{width:.5em;box-shadow:-1em -.5em var(--c1),1em .5em var(--c2)}100%{box-shadow:1em -.5em var(--c1),-1em .5em var(--c2)}} @keyframes loader-hash-after{0%{height:.5em;box-shadow:.5em 1em var(--c3),-.5em -1em var(--c4)}35%{height:2.5em;box-shadow:.5em 0 var(--c3),-.5em 0 var(--c4)}70%{height:.5em;box-shadow:.5em -1em var(--c3),-.5em 1em var(--c4)}100%{box-shadow:.5em 1em var(--c3),-.5em -1em var(--c4)}} /* Loader background */ .cmDq iframe.lazyload,.cmDq iframe.lazyloading,.cmFb iframe.lazyload,.cmFb iframe.lazyloading,.cmFrm iframe.lazyload,.cmFrm iframe.lazyloading,.lazyYt iframe.loading,.videoYt iframe.lazyload,.videoYt iframe.lazyloading{background-image:url("data:image/svg+xml, ");background-position:center;background-size:40px;background-repeat:no-repeat} /* Maintenance Mode */ .mtmB{position:fixed;bottom:0;inset-inline-end:0;background:var(--linkC);color:#fffdfc;font-size:13px;padding:3px 6px;border-start-start-radius:4px;opacity:.8;z-index:99;pointer-events:none} .mtmB::before{content:attr(data-text)} .mtmT{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:1em} .mtmT >*{display:inline-flex;flex-direction:column;flex-shrink:0;align-items:center;justify-content:center;min-width:60px;min-height:60px;background:var(--contentBs);border-radius:8px;border:1px solid var(--contentL);line-height:1.25} .mtmT >*::before{content:attr(data-time);font-size:20px} .mtmT >*::after{content:attr(data-text);font-size:12px;text-transform:capitalize} .iAd .mtmW{display:none} /* Pace */ .pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none} .pace-inactive{display: none} .pace .pace-progress{position:fixed;z-index:50;top:0;right:100%;width:100%;height:2px;background:var(--linkB)} .pace .pace-progress-inner{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px var(--linkB), 0 0 5px var(--linkB);opacity:1;transform:rotate(3deg) translate(0,-4px)} /* Unfilled ads */ .uaF .adsbygoogle[data-ad-status=unfilled]{position:relative;z-index:0!important;min-height:70px!important;background:url("data:image/svg+xml,") var(--contentB) center / 24px no-repeat!important;border:2px dashed var(--contentL)!important;border-radius:3px!important;overflow:hidden} /* Full popup */ .papW{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;align-items:center;justify-content:center;padding:15px;animation:opaCity .3s} .papW::before{content:'';position:absolute;inset:-30%;background:var(--contentBs)} .papB{position:relative;display:flex;flex-direction:column;width:100%;max-width:580px;max-height:100%;background:var(--contentB);border:1px solid var(--contentL);border-radius:6px;box-shadow:0 0 10px rgba(0,0,0,.07);overflow:hidden;z-index:1} .papT{position:-webkit-sticky;position:sticky;top:0;font-size:1rem;font-weight:700;padding:16px 20px;border-bottom:1px solid var(--contentL)} .papC{max-height:250px;padding:20px;font-size:15px;line-height:1.6;overflow-x:hidden;overflow-y:auto} html:has(.papW:not([hidden]):not(.hidden)){overflow:hidden} /*--[ Custom CSS Global (NO AMP) ]--*/ *//* /*--[ Mobile ]--*/ /* Mobile Menu */ .mobM{position:-webkit-sticky;position:sticky;bottom:0;width:100%;animation:opaCity .3s 0s;z-index:3} .mobC{position:relative;padding:0 20px;background:var(--mobB);color:var(--mobC);box-shadow:0 -20px 30px 0 rgba(30,30,30,.1);font-size:12px} .mobC:not(.crv){border-top:var(--mobL) solid var(--contentL);border-start-start-radius:12px;border-start-end-radius:12px} .mobC .sv{position:absolute;top:-20px;right:0;fill:var(--mobB);height:20px;width:100%} .mobC .sv mask{mask-type:alpha} .mobC svg.line{opacity:.8} .mobC ul{height:55px;display:flex;align-items:center;justify-content:center;list-style:none;margin:0;padding:0} .mobC.crv ul{height:45px;align-items:start} .mobC li{display:flex;justify-content:center;flex:1 0 20%} .mobC li >*{display:inline-flex;align-items:center;justify-content:center;min-width:35px;height:35px;border-radius:20px;padding:0 8px;transition:var(--trans-1);color:inherit;cursor:pointer} .mobC li svg{width:20px;height:20px;margin:0 3px;flex-shrink:0} .mobC li >*:hover{background:var(--mobHv)} .mobC li >*::after{content:attr(data-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:0;margin:0;transition:inherit;opacity:.7} .mobC li >*:hover::after{max-width:70px;margin:0 3px} .mobC .nmH{opacity:.7} .MN-2 .mobC li >*, .MN-3 .mobC li >*{flex-direction:column;position:relative} .MN-2 .mobC li >*:hover, .MN-3 .mobC li >*:hover{background:transparent} /* Mobile Menu (Style 2) */ .MN-2 .mobC{font-size:10px} .MN-2 .mobC li >*::after{max-width:none;margin:0} /* Mobile Menu (Style 3) */ .MN-3 .mobC li >*::after{content:'';width:4px;height:4px;border-radius:50%;position:absolute;bottom:-2px;opatity:0} .MN-3 .mobC li >*:hover::after{background:var(--linkB);opacity:.8} .MN-3 .mobC li >*:hover svg.line{opacity:.8} .MN-3 .mobC li >*:hover svg.line *{stroke:var(--linkB);fill:var(--linkB)} *//* /*--[ Mobile (AMP) ]--*/ *//* /*--[ Mobile (NO AMP) ]--*/ *//* /*--[ Desktop ]--*/ *//* /*--[ Desktop (AMP) ]--*/ *//* /*--[ Desktop (NO AMP) ]--*/ *//* /*--[ MultipleItems ]--*/ /* Responsive */ @media screen and (max-width:500px){ /* Article */ .onId .blogP.oGrd{--numI:1} .onId .blogP:not(.oGrd){--numI:2;--gapC:10px} .onId .blogP:not(.oGrd) div.ntry{grid-column:1/-1} .onId .blogP:not(.oGrd) .pTag{padding-bottom:5px} .onId .blogP:not(.oGrd) .ntry .pSml{font-size:12px} .onId .blogP:not(.oGrd) .ntry .tfxM{--gap:4px;--itmPd:4px;--itmIc:14px;padding:4px;font-size:11px} .onId .blogP:not(.oGrd) .ntry .tfxC .bM:hover{padding:var(--itmPd) var(--itmPh)} .onId .blogP:not(.oGrd) .ntry .tfxC .bM::before{display:none} .onId .blogP:not(.oGrd) .ntry .pTtl{font-size:.9rem;font-weight:600} .onId .blogP:not(.oGrd) .ntry:not(.pTag) .pSnpt, .onId .blogP:not(.oGrd) .ntry .pInf:not(.nSpr) .pJmp{display:none} } *//* /*--[ MultipleItems (AMP) ]--*/ *//* /*--[ MultipleItems (NO AMP) ]--*/ *//* /*--[ LabelSearch ]--*/ /* Labels description */ .ldW{position:relative;overflow:hidden;background:var(--transB)} .ldW .secIn{padding-top:35px;padding-bottom:35px} .ldC{position:absolute;inset:0;width:100%;height:100%} img.ldC, .ldC img{max-width:unset;object-fit:cover;object-position:center;filter:brightness(0.98) blur(20px);transform:scale(1.3)} .ldI{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:700px;margin:0 auto;text-align:center;z-index:1} .ldW.c .ldI{background:var(--contentB);padding:30px 20px;border-radius:8px;box-shadow:4px 4px 20px rgba(0,0,0,0.07)} .ldH{font-size:1.4rem;word-break:break-all} .ldP{--n:'0';--p:'post';--svgW:18px;--svgH:18px;display:inline-flex;align-items:center;gap:6px;padding:4px 6px;background:var(--contentB);border-radius:50px;border:2px solid var(--contentL);opacity:.95} .ldP[data-num-posts]:not([data-num-posts='']){--n:attr(data-num-posts)} .ldP[data-num-posts]:not([data-num-posts='']):not([data-num-posts='1']){--p:'posts'} .ldP::after{content:var(--n) ' ' var(--p)} .ldD{font-size:15px;word-break:break-word} @media screen and (min-width:1100px) { .ldW .secIn{padding-top:45px;padding-bottom:45px} } *//* /*--[ LabelSearch (AMP) ]--*/ *//* /*--[ LabelSearch (NO AMP) ]--*/ *//* /*--[ Homepage ]--*/ /* Widget Carousel */ .sldW .section, .sldW .widget{margin-top:0} .sldW{--padding:20px;position:relative;padding-top:calc(100% / (var(--sliderR)));margin-bottom:40px;border-radius:5px;background:var(--transB);overflow:hidden} .sldA{--v:hidden;--o:0;--s:1.2;--l:-15px;--b:-5px;display:block;position:absolute;top:0;left:0;width:100%;height:100%;visibility:var(--v);opacity:var(--o);transition:all .5s ease-in-out;transition-property:visibility,opacity} .sldA::after{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background-image:linear-gradient(to bottom,transparent,#000);opacity:.5} .sldI{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;object-position:center;transform:translate(-50%,-50%) scale(var(--s));transition:all .5s ease-in-out,filter .2s ease} .sldI.lazyload,.sldI.lazyloading{filter:brightness(0.98) blur(10px)} .sldT{position:absolute;inset-inline-start:var(--l);bottom:var(--b);width:100%;padding:0 var(--padding) calc(var(--padding) + 5px);color:var(--white);opacity:var(--o);z-index:1;transition:inset .5s ease,opacity .5s ease} .sldT::before{content:attr(data-title);display:block;font-size:16px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .sldT::after{content:attr(data-caption);width:100%;font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;opacity:.9;overflow:hidden} .sldL{position:absolute;top:var(--padding);inset-inline-end:var(--padding);z-index:2} .sldL::after{content:'';display:inline-block;width:25px;height:25px;background:url("data:image/svg+xml,") var(--lContentB) center / 15px no-repeat;border-radius:30px;border:1px solid var(--lContentL)} .sldB{position:absolute;top:0;height:100%;width:50%;opacity:0;transition:opacity .2s ease;z-index:1} .sldB:hover{opacity:1} .sldP{inset-inline-start:0} .sldN{inset-inline-end:0} .sldB >*{--d:none;display:var(--d);position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer} .sldB >*::before{content:'';position:absolute;top:50%;transform:translate(0,-50%);width:30px;height:30px;background:url("data:image/svg+xml,") var(--lContentB) center / 16px no-repeat;border-radius:30px;border:1px solid var(--lContentL);opacity:.8} .sldP >*::before{inset-inline-start:var(--padding)} .sldN >*::before{inset-inline-end:var(--padding);background-image:url("data:image/svg+xml,")} .sldD{position:absolute;left:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:6px var(--padding);z-index:1} .sldD >*{--o:.6;--w:5px;width:var(--w);height:5px;background:var(--lContentB);border-radius:20px;opacity:var(--o);transition:var(--trans-1);cursor:pointer} [dir=rtl] .sldB >*::before{transform:translate(0,-50%) rotate(180deg)} .sldW >[id$="01"]:checked ~ * >[data-i$="01"], .sldW >[id$="02"]:checked ~ * >[data-i$="02"], .sldW >[id$="03"]:checked ~ * >[data-i$="03"], .sldW >[id$="04"]:checked ~ * >[data-i$="04"], .sldW >[id$="05"]:checked ~ * >[data-i$="05"], .sldW >[id$="06"]:checked ~ * >[data-i$="06"], .sldW >[id$="07"]:checked ~ * >[data-i$="07"], .sldW >[id$="08"]:checked ~ * >[data-i$="08"], .sldW >[id$="09"]:checked ~ * >[data-i$="09"], .sldW >[id$="10"]:checked ~ * >[data-i$="10"]{--v:visible;--o:1;--d:block;--s:1;--l:0;--b:0;--w:10px} @media screen and (max-width:640px){ .sldW{--padding:10px} .sldT::before{font-size:14px} } /* Widget Profile */ .wPrf{display:flex;position:absolute;top:calc(100% + (var(--headerHc) - 100%) / 2);inset-inline-end:0;background:var(--contentB);border-radius:10px;border-start-end-radius:5px;width:240px;max-height:240px;border:1px solid var(--contentL);visibility:hidden;opacity:0;overflow:hidden;transform:scale(.8);transform-origin:top right;transition:var(--trans-2);z-index:4} .wPrf.tm .im{width:39px;height:39px;flex-shrink:0} .wPrf.sl .im{width:60px;height:60px;border-radius:26px;margin:0 auto} .wPrf.sl .prfC{text-align:center} .prfL{display:flex;align-items:center;position:relative;width:calc(100% + 16px);left:-8px;right:-8px;border-radius:8px;transition:var(--trans-1)} .prfL:not(:first-child){margin-top:16px} .prfL::after{content:attr(data-text);margin:0 2px} .prfL >*{margin:0 8px;flex-shrink:0} a.prfL:hover{background:var(--transB)} .prfH .c{display:none;cursor:pointer} .prfH .c::before{content:attr(aria-label)} .sInf{margin-bottom:0} .sInf .sDt .l{display:inline-flex;align-items:center;gap:4px} .sInf .sDt .l::after{width:15px;height:15px;margin:0} .sInf .sTxt{margin:5px auto 0;max-width:320px;font-size:93%;opacity:.9;line-height:1.5em} .sInf .sTxt a{text-decoration:underline} .sInf .lc{display:flex;justify-content:center;margin:10px 0 0;opacity:.8;font-size:90%} .sInf .lc svg{width:16px;height:16px} .sInf .lc::after{content:attr(data-text);margin:0 4px} .prfI:checked ~ .wPrf{visibility:visible;opacity:1;transform:scale(1)} .prfI:checked ~ .fCls{visibility:visible;opacity:1;pointer-events:auto;z-index:3} .bX .wPrf{box-shadow: 0 10px 25px -3px rgba(0,0,0,.07)} [dir=rtl] .wPrf{transform-origin:top left} *//* /*--[ Homepage (AMP) ]--*/ *//* /*--[ Homepage (NO AMP) ]--*/ /* Categorized posts */ .aCat:not(:first-child){margin-top:40px} .aCat .blogT{min-height:28px} .aCat .blogT a{position:relative;padding:6px 12px;background:var(--linkB);color:var(--white);font-size:90%;border-radius:var(--linkR);opacity:1} .aCat .blogT a::before{content:'';position:absolute;inset:0;display:block;background:inherit;opacity:0;transition:var(--trans-1);border-radius:calc(var(--linkR) + 8px);pointer-events:none} .aCat .blogT a:hover::before{inset:-8px;opacity:.2} .aCat .blogT a::after{content:attr(aria-label);position:relative;z-index:1} .aCat .n{background:var(--contentB);padding:40px 15px;text-align:center;border:2px dashed var(--contentL);border-radius:5px} .aCat.loaded .blogP,.aCat.loaded .blogT a{animation:opaCity .5s} *//* /*--[ SingleItem ]--*/ /* Fullpage */ .mainB:has(.blogP.fullP), .bD:not(.hsSb) .mainB{display:block;margin-inline:auto} .mainB:has(.blogP.fullP) .sideB{display:none} @media screen and (min-width: 897px){ .mainB:has(.blogP.fullP), .bD:not(.hsSb) .mainB{max-width:var(--pageW)} .blogB:has(.blogP.fullP), .bD:not(.hsSb) .blogB{width:100%;margin-inline-end:unset} .mainB:has(.blogP.fullP) .sideB{width:100%;margin-inline-start:unset;margin:50px auto 0} } /* Article Style */ /* Heading */ .pS h1, .pS h2, .pS h3, .pS h4, .pS h5, .pS h6{margin:1.5em 0 18px;scroll-margin-top:calc(var(--headerHc) + 20px);font-family:var(--fontBa);font-weight:700;line-height:1.5em} .pS h1[data-before]::before, .pS h2[data-before]::before, .pS h3[data-before]::before, .pS h4[data-before]::before, .pS h5[data-before]::before, .pS h6[data-before]::before{content:attr(data-before)} .pS h1[data-after]::after, .pS h2[data-after]::after, .pS h3[data-after]::after, .pS h4[data-after]::after, .pS h5[data-after]::after, .pS h6[data-after]::after{content:attr(data-after)} /* Paragraph */ .pS p{margin:1.7em 0} .pIndent{text-indent:2.5rem} .pIndent >*{text-indent:0} .dropCap{float:left;margin-top:4px;margin-inline-end:8px;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} [dir=rtl] .dropCap{float:right} /* Image and Ad */ .pS img{display:inline-block;border-radius:5px;height:auto} .pS img.full{display:block;margin-bottom:10px;position:relative;width:100%;max-width:none} .bX .zmImg:not(.s) img{border:1px solid var(--contentL)} .pS .widget{margin:40px 0} .ps .pAd, .ps .mdlAd{clear:both} .ps .pAd >*, .ps .mdlAd >*{margin:40px 0} /* Img caption */ .tr-caption-container td{padding:0} 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} .ps .tr-caption[data-text]::before{content:attr(data-text)} /* Article Style Responsive */ @media screen and (max-width: 640px){ .pS img.full{width:calc(100% + 40px);inset-inline:-20px;border-radius:0} } /* Author No Image */ .aFl{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;overflow:hidden} .admPs .aFl{width:34px;height:34px} .aFl::before{content:'';position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;background:var(--linkB);opacity:.8} .aFl >span{position:absolute;z-index:1;font-size:0;color:transparent;padding-top:1.5px} .admPs .aFl >span{padding-top:2px} .aFl >span:first-letter{color:#fffdfc;font-size:13px} .admPs .aFl >span:first-letter{font-size:16px} /* Share button */ .pSh{margin:30px 0;padding-bottom:18px;border-bottom:1px solid var(--contentL)} .pShc{display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:relative;font-size:13px} .pShc::before{content:attr(data-text);flex-shrink:0} .pShc >*{display:flex;align-items:center;color:inherit;padding:12px;border-radius:var(--linkR);background:var(--contentBs);cursor:pointer} .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:#000} .pShc a::after{content:attr(data-text);margin:0 3px} .pShc svg, .cpL svg{width:18px;height:18px;margin:0 3px} .shH label{cursor:pointer} .shC{display:flex;flex-direction:column;gap:20px} .shP{--thumbR:1/1;display:flex;gap:15px;align-items:center;margin:0 -20px;padding:0 20px 20px;border-bottom:1px solid var(--contentL)} .shP .pThmb{flex-shrink:0;width:70px;margin-bottom:0} .shP .pThmb.iyt:not(.nul) .thmb::after{background-size:24px} .shPt{font-size:14px;line-height:1.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .shPt::before{content:attr(data-text)} .shPl{font-size:12px;opacity:.7;margin-top:3px} .shPl::before{content:attr(data-text)} .shL{display:grid;grid-template-columns:repeat(auto-fit, minmax(60px, 1fr));grid-auto-rows:60px;grid-gap:35px 22px;padding-bottom:22px} .shL >*{position:relative} .shL >*::after{content:attr(data-text);position:absolute;left:0;right:0;bottom:-22px;font-size:90%;text-align:center;opacity:.8;white-space:nowrap} .shL a{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:60px;height:60px;color:inherit;margin:0 auto;padding:8px;border-radius:26px;background:var(--contentBs)} .shL svg{opacity:.8} .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;opacity:.8;padding:18px 8px;flex-grow:1;text-overflow:ellipsis} .cpL label{display:flex;align-items:center;align-self:stretch;flex-shrink:0;padding:0 4px;cursor:pointer} .cpLb{display:flex;align-items:center;position:relative;background:var(--contentBs);border-radius:4px 4px 0 0;border-bottom:1px solid var(--contentLa);padding:0 8px} html:has(.shIn:checked){overflow:hidden} @media screen and (max-width:500px){ .pShc::before{width:100%} .pShc .wa::after, .pShc .tw::after{display:none} } /* Comments */ .pCmnts{margin-top:30px} .pCmnts iframe{width:100%} .cmDis{text-align:center;opacity:.7} .cmMs{margin-bottom:20px} .cmFrm iframe{background:var(--lContentB);border-radius:4px} .cm:not(.cmBr) .cmBrs{position:relative;background:transparent} .cmH{border-bottom:1px solid var(--contentL)} .cm:not(.cmBr) .cmH{position:relative;padding:0;padding-bottom:16px} .cmH h3{margin:0;flex-grow:1;padding:16px 0} .cmH h3 span::after{content:'(' attr(data-range) ')';font-size:12px;font-weight:400;white-space:nowrap;opacity:.8} .cm:not(.cmBr) .cmH h3,.cm:not(.cmBr) .cmH .cl{padding:0} .cmH .s::before{content:attr(data-text);font-size:90%;opacity:.7} .cmC{display:grid;grid-template-columns:100%;gap:20px} .cm:not(.cmBr) .cmC{padding:20px 0 0;overflow-x:visible;overflow-y:visible} .cmAv .im{width:35px;height:35px;background:var(--contentB);border:1px solid var(--contentL);border-radius:50%;position:relative} .cmAv.n .im::before{content:'';width:18px;height:18px;background:url("data:image/svg+xml,") center / cover no-repeat} .cmAc button::after{content:attr(data-text);margin:0 6px} .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} .cmCh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px} .cmHr{display:flex;flex-direction:column;justify-content:center;line-height:20px;overflow:hidden} .cmHr >*, .cmHr.aut .n >*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .cmHr .d{font-size:90%;opacity:.7} .cmHr .d::before{content:attr(data-time)} .cmHr.aut .n{display:inline-flex;align-items:center} .cmHr.aut .n::after{--icon:url("data:image/svg+xml,");content:'';flex-shrink:0;width:14px;height:14px;-webkit-mask-image:var(--icon);mask-image:var(--icon);background:var(--linkC);margin-inline-start:4px} .cmDl{animation:opaCity .3s} .cmDl a{display:flex;justify-content:center;align-items:center;padding:5px;background:var(--linkB);color:#fffdfc;font-size:11px;border-radius:var(--linkR);transition:var(--trans-2)} .cmDl a::before{content:'';width:18px;height:18px;background:url("data:image/svg+xml,") center / cover no-repeat} .cmCo{line-height:1.6em;opacity:.9} .cmAc{margin-top:15px} .cmAc button{font-size:90%;color:inherit;opacity:.7;display:inline-flex;align-items:center;cursor:pointer} .cmAc button::before{--icon:url("data:image/svg+xml,");content:'';width:16px;height:16px;-webkit-mask-image:var(--icon);mask-image:var(--icon);background:var(--bodyC)} .cmAc button::after{content:attr(data-text);margin:0 6px} .cmRi:checked ~ .cmRp .thTg{margin-bottom:0} .cmRi:checked ~ .cmRp .thTg::after{content:attr(aria-label)} .cmRi:checked ~ .cmRp .thCh, .cmRi:checked ~ .cmAc{display:none} .cmAl:checked ~ .cm .cmH .s::before{content:attr(data-new)} .cmAl:checked ~ .cm .cmH .s svg{transform:rotateX(180deg)} .cmAl:checked ~ .cm .cmCn >ol{flex-direction:column-reverse} .cmAl:checked ~ .cm .cmC >:not(:first-child){order:-1} .thTg{display:inline-flex;align-items:center;margin:15px 0 18px;font-size:90%;cursor:pointer} .thTg::before{content:'';width:28px;border-bottom:1px solid var(--widgetTac);opacity:.5} .thTg::after{content:attr(data-text);margin:0 12px;opacity:.7} .cmCn ol{display:flex;flex-direction:column;gap:18px;list-style:none;margin:0;padding:0} .cmCn li{position:relative;scroll-margin-top:calc(var(--headerHc) + 20px)} .cmCn li .cmRbox{margin-top:20px} .cmCn li li .cmAv{position:absolute} .cmCn li li .cmCh{min-height:35px;margin-inline-start:45px} .cmHl >li{padding-inline-start:17.5px} .cmHl >li >.cmAv{position:absolute;top:12px;inset-inline-start:0} .cmHl >li >.cmIn{background:var(--contentB);padding-block:12px;padding-inline:28px 15px;border:1px solid var(--contentL);border-radius:5px} .cmBr .cmHl >li >.cmIn{box-shadow:0 0 30px rgba(0,0,0,.07)} .pCmnts .ldr{display:block;width:50px;height:50px;fill:var(--linkC);margin:60px auto} .pCmnts [fb-xfbml-state=rendered] + .ldr{display:none} @media screen and (max-width: 500px) { .cmH.pg h3::after{display:none} } /* Comments picker */ .cmPkr{--b:transparent;display:flex;margin-block:20px;background:var(--contentBs);border-radius:8px;padding:3px;border:1px solid var(--contentL)} .cmPkr >*{flex:1;padding:6px;background:var(--b);border-radius:5px;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;overflow:hidden;text-align:center} .cmPkr >*::before{content:attr(aria-label)} .cmPtf{--d:none} .cmPtf >*{display:var(--d)} .cmPi[id$='0']:checked ~ * >[data-i$='0'], .cmPi[id$='1']:checked ~ * >[data-i$='1'], .cmPi[id$='2']:checked ~ * >[data-i$='2']{--b:var(--contentB);--d:block} /* Comments media */ .cmCo i[rel=image]{font-size:90%;display:block;position:relative;min-height:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:1em auto} .cmCo i[rel=image]::before{content:'This feature isn\0027t available!';border:1px dashed var(--contentL);border-radius:3px;padding:10px;display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:var(--contentB)} .cmCo i[rel=pre], .cmCo i[rel=quote]{margin-top:1em;margin-bottom:1em;font-style:normal;line-height:inherit;padding:20px} .cmCo i[rel=pre]{display:block;white-space:pre;overflow:auto;background:var(--synxB);font-family:var(--fontC);font-size:13px;border-radius:3px} .cmCo i[rel=quote]{display:block;font-style:italic;font-size:inherit;padding:5px 15px} .cmCo i[rel=code]{display:inline-block;padding:2px 5px;margin:0 3px;font-size:13px;border-radius:3px;line-height:1.6em;color:var(--synxC);background:var(--synxB);font-family:var(--fontC);font-style:normal;border:1px solid var(--contentL);direction:ltr;text-align:start} .cmCo i[rel=tag]{font-style:normal;color:var(--linkC);background:var(--transB);padding:2px 5px;border-radius:3px;border-start-start-radius:10px;border-end-start-radius:10px} .cmCo i[rel=tag]::before{content:'@'} .cmCo img{margin-top:1em;margin-bottom:1em;border-radius:3px} /* Comments Pop-up */ #comment{scroll-margin-top:calc(var(--headerHc) + 20px)} .cmSh:checked ~ .cmShw, .cmShw ~ .cm:not(.cmBr){display:none} .cmSh:checked ~ .cm:not(.cmBr){display:block} .cmBtn{display:block;width:100%;padding:12px 16px;text-align:center;color:var(--white);border-radius:var(--linkR);line-height:20px;background:var(--linkB);font-size:14px;font-family:var(--fontB);white-space:nowrap;overflow:hidden;cursor:pointer} .cmBtn[data-text]::before{content:attr(data-text)} .cmBtn:hover{opacity:.8} .iCmn{position:absolute;inset:0;display:block;outline:none;border:none;margin:0 auto;padding:20px;max-width:none;background:var(--contentB);font-weight:700;text-align:center;z-index:9;cursor:pointer} .iCmn::before{content:attr(data-text)} .iCmn:hover::before{opacity:.7} html:has(.cmSh:checked){overflow:hidden} /* Comments Platforms */ .cmDq h3,.cmFb h3{margin-bottom:12px;padding-top:6px;padding-bottom:16px;min-height:46px;border-bottom:1px solid var(--contentL)} .cmIfw{position:relative;width:calc(100% + 40px);left:-20px;right:-20px;padding:20px;background:var(--lBodyB)} .cmFb .cmIfw{padding:12px} @media screen and (min-width: 896px){ .cmIfw{width:calc(100% + 50px);left:-25px;right:-25px;padding:25px;border-radius:5px} .cmFb .cmIfw{padding:17px} } /*--[ Custom CSS SingleItem ]--*/ *//* /*--[ SingleItem (Linked AMP Lite) ]--*/ /* Image */ .pS >figure:first-child{margin:0;margin-bottom:10px} /* Button read more */ .pRm{position:relative} .pRm::before{content:'';position:absolute;bottom:100%;width:100%;height:180px;background:linear-gradient(to bottom,transparent,var(--bodyB));pointer-events:none} .pRm a{display:block;width:100%;padding:12px 16px;text-align:center;color:var(--white);border-radius:var(--linkR);line-height:20px;background:var(--linkB);font-size:14px;font-family:var(--fontB);white-space:nowrap;overflow:hidden} .pRm a::before{content:attr(aria-label)} /*--[ Custom CSS SingleItem (Linked AMP Lite) ]--*/ *//* /*--[ SingleItem (No Linked AMP Lite) ]--*/ /* Article Style */ /* Scroll image */ .psImg{--gap:12px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:var(--gap);margin-block:2em} .psImg >*{position:relative;width:calc((100% / 2) - (var(--gap) / 2))} .psImg img{display:block} .scImg >*{width:calc((100% / 3) - (var(--gap) * 2/3))} .btImg label{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-size:13px;font-family:var(--fontB);border-radius:5px;color:#d9e2f0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);transition:var(--trans-1);cursor:pointer} .hdImg .shImg{width:100%;margin-block:0} .inImg:not(:checked) + .hdImg .shImg{display:none} .inImg:checked + .hdImg .btImg label{opacity:0;visibility:hidden} /* Gallery scroll image */ .glImg{margin:25px 0;overflow-y:hidden;overflow-x:scroll;position:relative;white-space:nowrap;width:100%;min-height:310px} .glImg >*{display:inline-block;margin-inline-end:5px} .glImg >*:last-child{margin-inline-end:0} .glImg img{height:310px;max-width:unset;width:auto} .glImg.h250{min-height:250px} .glImg.h200{min-height:200px} .glImg.h150{min-height:150px} .glImg.h250 img{height:250px} .glImg.h200 img{height:200px} .glImg.h150 img{height:150px} @media screen and (max-width:500px){ .glImg{min-height:250px} .glImg img{height:250px} } .pInf +.glImg{margin-bottom:0} /* Blockquote */ .cmCo i[rel="quote"]{position:relative;font-size:.97rem;opacity:.8;line-height:1.6em;margin-left:0;margin-right:0;padding:5px 20px;border-inline-start:2px solid var(--contentL)} blockquote{--szsm:20px;position:relative;margin:calc(var(--szsm) * 1.5) 0;padding:calc(var(--szsm) * .8) var(--szsm);padding-inline-start:var(--szsm);border-inline-start:4px solid var(--contentL);overflow:hidden;z-index:1} blockquote >span:last-child{opacity:.7;font-size:90%;letter-spacing:.5px;direction:ltr} blockquote >span:last-child::before{content:"— "} blockquote.s1{border-color:var(--linkC);border-start-end-radius:5px;border-end-end-radius:5px} blockquote.s1::before{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background:var(--linkC);z-index:-1;opacity:.06} blockquote.s2{--szi:35px;border:1px solid var(--contentL);overflow:visible;border-inline:0;text-indent:calc(var(--szi) * 1.2);margin:calc(var(--szsm) * 2.2) 0} blockquote.s2::after,blockquote.s2::before{content:'';background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z'/%3E%3C/svg%3E") var(--linkC) center / 18px no-repeat;border-radius:50%;width:var(--szi);height:var(--szi);position:absolute;top:calc(var(--szi) * -.5);inset-inline-start:var(--szsm)} blockquote.s2::after{top:auto;bottom:calc(var(--szi) * -.5);inset-inline-start:auto;inset-inline-end:var(--szsm);transform:rotate(180deg)} blockquote.s2 >span:last-child{display:block;text-align:center} blockquote.s2 >:not(:first-child){text-indent:initial} .pS blockquote >*{margin:calc(var(--szsm) * .7) 0} .pS blockquote >:first-child{margin-top:0} .pS blockquote >:last-child{margin-bottom:0} .bX blockquote{box-shadow:var(--bs-1);background:var(--contentB)} .bX blockquote.s2{border-inline:1px solid var(--contentL);border-radius:4px} /* External link */ .extL{display:inline-flex;align-items:center} .extL::after{content:'';width:14px;height:14px;display:inline-block;margin:0 5px;background:url("data:image/svg+xml,") center / 14px no-repeat} .extL.alt::after{background-image:url("data:image/svg+xml,")} .extL.sec::after{background-image:url("data:image/svg+xml,")} /* Button */ .button{display:inline-flex;align-items:center;gap:12px;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:var(--linkR);line-height:20px;vertical-align:middle;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:var(--contentBs);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:var(--linkR)} .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:var(--linkR);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.dl::before{background-image:url("data:image/svg+xml,")} .icon.demo::before{background-image:url("data:image/svg+xml,")} .button.ln .icon.dl::before{background-image:url("data:image/svg+xml,")} /* Note */ .note{position:relative;padding-block:16px;padding-inline:50px 20px;background:#e8f0fe;color:#272eb5;font-size:.85rem;font-family:var(--fontB);line-height:1.6em;border-radius:10px;overflow:hidden;--transB:var(--white);--synxC:var(--black)} .note::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.2);display:block;border-radius:50%;position:absolute;top:-12px;inset-inline-start:-12px;opacity:.1} .note::after{content:'\002A';position:absolute;inset-inline-start:18px;top:16px;font-size:20px;min-width:15px;text-align:center} .note.wr{background:#fbe4ea;color:#9c0715} .note.wr::after{content:'\0021'} .note code{background:var(--white);border-color:#be2e3c} /* Alert */ .alert{--clr:var(--linkC);--szsp:20px;position:relative;border-radius:8px;margin:var(--szsp) 0;padding:calc(var(--szsp) * .6) var(--szsp);font-size:calc(var(--szsp) * .75);line-height:calc(var(--szsp) * 1.3);overflow:hidden;z-index:1} .alert:not(.outline){color:var(--clr)} .alert:not(.outline)::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--clr);z-index:-1;opacity:.1} .alert.outline{border:1px solid var(--clr)} .alert.info::after,.alert.warning::after,.alert.success::after,.alert.error::after{content:"";position:absolute;height:calc(100% - var(--sptp));inset-inline-start:calc(var(--szsp) * 1.125);border-inline-start:1px solid var(--clr);top:calc(var(--szsp) * 2.4);--sptp:calc(var(--szsp) * 3.2)} .alert.info,.alert.warning,.alert.success,.alert.error{background-repeat:no-repeat;background-size:var(--szsp);background-position:calc(var(--szsp) * .7) calc(var(--szsp) * .7);padding-inline-start:calc(var(--szsp) * 2.5)} .alert.info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z' fill='%2300a7e6'/%3E%3C/svg%3E")} .alert.warning{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z' fill='%23ecb621'/%3E%3C/svg%3E")} .alert.success{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' fill='%2341ba79'/%3E%3C/svg%3E")} .alert.error{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0c53 0 96 43 96 96v3.6c0 15.7-12.7 28.4-28.4 28.4H188.4c-15.7 0-28.4-12.7-28.4-28.4V96c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4H312c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H416c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6V240c0-8.8-7.2-16-16-16s-16 7.2-16 16V479.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96.3c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z' fill='%23ff6372'/%3E%3C/svg%3E")} .alert.info{--clr:#3e69a8} .alert.warning{--clr:#8f6919} .alert.success{--clr:#127a5b} .alert.error{--clr:#be2e3c} .alert>strong:first-child,.alert>i:first-child,.alert>b:first-child{display:block;margin-bottom:8px;font-family:var(--fontC);font-weight:700;color:var(--clr)} .drK .alert.info, :root:not(.lzD) .modI:checked ~ .mainW .alert.info{--clr:#00a7e6} .drK .alert.warning, :root:not(.lzD) .modI:checked ~ .mainW .alert.warning{--clr:#ecb621} .drK .alert.success, :root:not(.lzD) .modI:checked ~ .mainW .alert.success{--clr:#41ba79} .drK .alert.error, :root:not(.lzD) .modI:checked ~ .mainW .alert.error{--clr:#ff6372} .alert>ol,.alert>ul{padding-inline-start:20px} [dir=rtl] .alert.info,[dir=rtl] .alert.warning,[dir=rtl] .alert.success,[dir=rtl] .alert.error{background-position-x:calc(100% - var(--szsp) * .7)} /* List */ .noList, .steps, .pros, .cons{list-style:none;margin:0 0 25px;padding:0} .steps{--sz:30px;counter-reset:num;line-height:1.6} .steps >li{position:relative;padding-inline-start:calc(var(--sz) * 1.5);counter-increment:num} .steps >li:not(:last-child){padding-bottom:calc(var(--sz) / 2)} .steps >:not(li):not(:last-child){margin-bottom:calc(var(--sz) / 2)} .steps >li::before{content:counter(num) '.';display:flex;align-items:center;justify-content:center;position:absolute;top:-2px;inset-inline-start:0;width:var(--sz);height:var(--sz);border:1px solid var(--linkC);border-radius:50%;color:var(--linkC);font-size:small;line-height:1;transition:0.3s} .steps >li:hover::before{background-color:var(--linkC);color:var(--white)} .steps >li::after{content:'';position:absolute;top:calc(var(--sz) + 8px);inset-inline-start:calc(var(--sz) / 2);bottom:8px;border-inline-start:1px solid var(--linkC)} .steps .zmImg:not(.s){margin-top:1.2em} .pros, .cons{margin:5px 0 15px;padding-inline-start:10px;line-height:1.3;font-size:95%} .pros li::marker{content:'\002B'} .cons li::marker{content:'\2212'} .pros li, .cons li{margin-bottom:10px;padding-inline-start:10px} /* Table */ .table{--clr:var(--linkC);--szsm:20px;--szsp:15px;--fnsz:14px;font-size:var(--fnsz);line-height:calc(var(--fnsz) * 1.5);display:block;scroll-behavior:smooth;margin:var(--szsm) 0;overflow:auto;max-height:400px} .table table{min-width:100%;border:0;white-space:nowrap;margin:0 auto} .table:not(.noborder) table{border-collapse:collapse} .table.bordered,.table.cborder{border:1px solid var(--contentL);border-radius:8px} .table.primary table thead,.table.warning table thead,.table.success table thead,.table.error table thead,.table.clr table thead{background-color:var(--clr);color:var(--white)} .table.primary{--clr:#3e69a8} .table.warning{--clr:#8f6919} .table.success{--clr:#127a5b} .table.error{--clr:#be2e3c} .table table thead th{font-weight:700;border-bottom:1px solid var(--contentL);text-align:inherit} .table table th,.table table td{padding:calc(var(--szsp) * .8) var(--szsp)} .table table th{font-weight:400} .table.vab tbody{vertical-align:baseline} .table table tbody tr:not(:first-child){border-top:1px solid var(--contentL)} .table.stripped tbody tr:nth-of-type(2n+1){background-color:var(--contentBa)} .table.hovered tbody tr:hover{background-color:var(--contentBs)} .table.mh100{max-height:100%} .table.mhvh{max-height:calc(100vh - 150px)} .table.mh200{max-height:200px} .table.mh300{max-height:300px} .table.sticky table{border-collapse:separate;border-spacing:0} .table.sticky thead{position:sticky;top:0;background:var(--bodyB)} .table.sticky:not(.noborder) table tbody tr:not(:last-child) th,.table.sticky:not(.noborder) table tbody tr:not(:last-child) td{border-bottom:1px solid var(--contentL)} .table.bordered table tr th:not(:last-child),.table.bordered table tr td:not(:last-child){border-inline-end:1px solid var(--contentL)} .table.sp5{--szsp:5px} .table.sp10{--szsp:10px} .table.sp20{--szsp:20px} .bX .table{background:var(--contentB);box-shadow:var(--bs-1)} /* 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 a{color:inherit} .pRelate a:hover{text-decoration:underline} .pRelate b{font-weight:400;margin:0;opacity:.8} .pRelate ul, .pRelate ol{margin:8px 0 0;padding:0 20px} /* Article Style Responsive */ @media screen and (max-width: 640px){ .scImg{flex-wrap:nowrap;justify-content:flex-start;padding-inline:20px;overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;position:relative;width:calc(100% + 40px);margin-inline:-20px} .scImg >*{flex:0 0 80%;scroll-snap-align:center} .note{font-size:13px} .table.full{position:relative;display:flex;width:calc(100% + 40px);inset-inline:-20px} .table.full.bordered{border-radius:0;border-inline:0} } @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} } /* ToC */ .pS details summary{list-style:none;outline:none} .pS details summary::-webkit-details-marker{display:none} details.sp{font-size:.93rem;padding:0;margin:30px 0;border:1px solid #989b9f;border-left:0;border-right:0;line-height:1.7em} details.sp summary{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:20px 15px} details.sp summary::after{content:var(--m-showAll);font-size:12px;line-height:1.2rem;max-width:50%;opacity:.7;cursor:pointer} details.sp summary[data-show]::after{content:attr(data-show)} details.sp[open] summary::after{content:var(--m-hideAll)} details.sp[open] summary[data-hide]::after{content:attr(data-hide)} details.sp >:not(summary){padding:0 15px 15px;margin:0} details.sp >:not(summary):empty{padding:0} details.sp >:not(summary) p{margin:16px 0} details.sp >:not(summary) >:first-child{margin-top:0} details.sp >:not(summary) >:last-child{margin-bottom:0} details.toc ol a, details.arp ol a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:inherit} details.toc ol a:hover, details.arp ol a:hover{text-decoration:underline} 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{margin-bottom:5px} details.toc ol li li:first-child{margin-top:5px} details.toc ol li{display:flex;flex-wrap:wrap;justify-content:flex-end} details.toc ol li::before{flex:0 0 23px;content:counters(toc-count,'.')'. ';counter-increment:toc-count} details.toc ol li a{flex:1 0 calc(100% - 23px)} details.toc ol li li::before{flex:0 0 28px;content:counters(toc-count,'.')} details.toc ol li li a{flex:1 0 calc(100% - 28px)} details.toc ol li li li::before{flex:0 0 45px} details.toc ol li li li a{flex:1 0 calc(100% - 45px)} details.toc .aToc >ol{} details.toc .aToc >ol >li >ol{flex:0 0 calc(100% - 23px)} details.toc .aToc >ol >li >ol ol{flex:0 0 calc(100% - 45px)} details.toc .aToc >ol >li >ol ol ol{flex:0 0 calc(100% - 35px)} details.toc.s1 ol{list-style:disc;padding:0 20px} details.toc.s1 ol li::before{display:none}details.toc.s1 li{display:list-item} details.arp ol{list-style:none;padding:0;margin:1rem 0 0} details.arp ol >li{padding:10px 15px 10px;line-height:1.3em;font-size:16px} details.arp ol >li:first-child{border-top:2px dashed var(--linkC);padding-top:25px} details.arp ol >li:not(:last-child){border-bottom:2px dashed var(--contentL)} details.arp .aRel.loading{animation:opaCity .5s} details.arp .aRel:not(.loaded) ol >li::before{content:'';background:var(--transB);height:1.3em;border-radius:5px;display:block} details.toc .aToc.loaded{animation:opaCity .5s} details.toc .aToc .n, details.arp .aRel .n{font-style:italic;font-size:90%;line-height:normal;border:1px dashed #989b9f;border-radius:3px;margin:1.3em 0 0;padding:15px;opacity:.7} .bX details.sp{background:var(--contentB);box-shadow:0 5px 35px rgb(0 0 0 / .07);border:1px solid var(--contentL);border-radius:5px} .bX details.sp summary::after{padding:6px 10px;background:var(--linkB);color:var(--white);border-radius:2px;opacity:1} .bX details.sp[open] summary::after{opacity:.7} /* Accordion */ .showH{margin:1.7em 0;line-height:1.7em;border:1px solid var(--contentL);border-radius:5px;overflow:hidden;font-size:93%} .showH details.ac{margin:0;border:0;border-radius:0} .showH details.ac:not(:last-child){border-bottom:1px solid var(--contentL)} details.ac{--szsp:25px;position:relative;padding:0;margin:var(--szsp) 0;background:var(--contentB);border:1px solid var(--contentL);border-radius:5px;overflow:hidden} details.ac summary{font-weight:700;cursor:pointer;display:flex;align-items:baseline;position:relative;padding:calc(var(--szsp) * .45) calc(var(--szsp) * .6);z-index:1} details.ac summary::before{content:'\203A';flex:0 0 var(--szsp);display:flex;align-items:center;justify-content:center;padding:0 10px;font-weight:400;font-size:150%;color:inherit;position:relative;inset-inline-start:-5px} details.ac[open] summary::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--linkC);opacity:.1;z-index:-1} details.ac[open] summary{color:var(--linkC);border-bottom:1px solid var(--contentL)} details.ac:not(.alt)[open] summary::before{transform:rotate(90deg);inset-inline-start:-5px;top:2px} details.ac.alt summary::before{content:'\002B';padding:0 2px} details.ac.alt[open] summary::before{content:'\2212'} details.ac >:not(summary){padding:calc(var(--szsp) * .8) var(--szsp);margin:0;opacity:.9} details.ac >:not(summary) p{margin:calc(var(--szsp) * .8) 0} details.ac >:not(summary) >:first-child{margin-top:0} details.ac >:not(summary) >:last-child{margin-bottom:0} .bX details.ac{box-shadow:var(--bs-1)} .bX .showH{box-shadow:var(--bs-1)} .bX .showH details.ac{box-shadow:none} /* Fullpage Youtube */ .videoYt{--ratio:16 / 9;position:relative;padding-bottom:calc(100% / (var(--ratio)));margin:30px 0;background:var(--synxB);overflow:hidden;border-radius:5px} .videoYt iframe{position:absolute;top:0;left:0;width:100%;height:100%} /* Tabs */ .tabs >div:first-of-type{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} .tabs.stick >div:first-of-type{position:-webkit-sticky;position:sticky;top:var(--headerHc);background:var(--bodyB);transition:inset .3s ease-in-out;z-index:3} .tabs >div:first-of-type >*{padding:12px 15px;border-bottom:1px solid transparent;transition:var(--trans-1);opacity:.6;white-space:nowrap;scroll-snap-align:start;cursor:pointer} .tabs >div:first-of-type >*::before{content:attr(data-text)} .tabs >:not(div:first-of-type){display:none} .tabs >:not(div:first-of-type) >* p:first-child{margin-top:0} @media screen and (max-width: 896px){ .mainH:not(.s):not(.a) ~ .mainN .tabs.stick >div:first-of-type,.onSb .mainH.a ~ .mainN .tabs.stick >div:first-of-type{top:0} } /* Tabs active label */ .tabs >input[id$="-0"]:checked ~ div:first-of-type >[for$="-0"], .tabs >input[id$="-1"]:checked ~ div:first-of-type >[for$="-1"], .tabs >input[id$="-2"]:checked ~ div:first-of-type >[for$="-2"], .tabs >input[id$="-3"]:checked ~ div:first-of-type >[for$="-3"], .tabs >input[id$="-4"]:checked ~ div:first-of-type >[for$="-4"], .tabs >input[id$="-5"]:checked ~ div:first-of-type >[for$="-5"], .tabs >input[id$="-6"]:checked ~ div:first-of-type >[for$="-6"], .tabs >input[id$="-7"]:checked ~ div:first-of-type >[for$="-7"], .tabs >input[id$="-8"]:checked ~ div:first-of-type >[for$="-8"], .tabs >input[id$="-9"]:checked ~ div:first-of-type >[for$="-9"], .tabs >input[id$="-10"]:checked ~ div:first-of-type >[for$="-10"]{border-color:var(--linkB);opacity:1} /* Tabs active content */ .tabs >input[id$="-0"]:checked ~ [class*="-0"], .tabs >input[id$="-1"]:checked ~ [class*="-1"], .tabs >input[id$="-2"]:checked ~ [class*="-2"], .tabs >input[id$="-3"]:checked ~ [class*="-3"], .tabs >input[id$="-4"]:checked ~ [class*="-4"], .tabs >input[id$="-5"]:checked ~ [class*="-5"], .tabs >input[id$="-6"]:checked ~ [class*="-6"], .tabs >input[id$="-7"]:checked ~ [class*="-7"], .tabs >input[id$="-8"]:checked ~ [class*="-8"], .tabs >input[id$="-9"]:checked ~ [class*="-9"], .tabs >input[id$="-10"]:checked ~ [class*="-10"]{display:block} /* Split */ .ps .blogN{font-size:13px;justify-content:center;position:relative} /* Syntax */ pre {background:var(--synxB);color:var(--synxC);direction:ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:var(--fontC)} pre >code, .cmCo i[rel=pre]{display:block;position:relative;font-family:var(--fontC);font-size:13px;line-height:1.6em;border-radius:3px;background:var(--synxB);color:var(--synxC);padding: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;text-align:start} pre >code {margin:0;color:inherit;background:inherit} pre::before, .cmCo i[rel=pre]::before{content:'';display:flex;justify-content:flex-end;position:-webkit-sticky;position:sticky;top:0;right:0;left:0;width:100%;font-size:12px;padding:0 12px;line-height:40px;background:inherit;color:inherit;border-bottom:1px solid var(--contentL);z-index:2} .cmCo i[rel=pre]::before{position:-webkit-sticky;position:sticky;inset:-20px -20px auto;margin:-20px -20px 20px;width:calc(100% + 40px)} pre[data-result-language]::before, .cmCo i[rel=pre][data-result-language]::before{content:attr(data-result-language)} pre[data-comment]::before{content:attr(data-comment)} pre::after, .cmCo i[rel=pre]::after{--w:10px;--g:6px;--t:15px;--p:12px;--e:2px;--m:calc(var(--w) + var(--g));--r:-1;content:'';position:absolute;top:0;inset-inline-start:0;font-size:12px;line-height:40px;color:inherit;width:var(--w);height:var(--w);margin-inline-start:calc((var(--w) * 3) + (var(--g) * 3) + var(--p));border-radius:99px;box-shadow:calc(var(--m) * 3 * var(--r)) var(--t) 0 var(--synxDot1),calc(var(--m) * 2 * var(--r)) var(--t) 0 var(--synxDot2),calc(var(--m) * 1 * var(--r)) var(--t) 0 var(--synxDot3);overflow:visible;z-index:2} pre[data-source]::after{content:attr(data-source)} :not(pre) >code{display:inline-block;padding:2px 5px;margin:0 3px;font-size:13px;border-radius:3px;line-height:1.6em;color:var(--synxC);background:var(--synxB);font-family:var(--fontC);font-style:normal;border:1px solid var(--contentL);direction:ltr;text-align:start} [dir=rtl] pre::before,[dir=rtl] .cmCo i[rel=pre]::before,[dir=rtl] pre::after,[dir=rtl] .cmCo i[rel=pre]::after{direction:rtl} [dir=rtl] pre::after,[dir=rtl] .cmCo i[rel=pre]::after{--r:1} /* Multi Syntax */ .pre{margin:1.7em auto;background:var(--synxB);border-radius:5px} .pre pre{margin:0;background:inherit;border-radius:none} .pre >div:first-of-type{font-size:13px;border-color:rgba(0, 0, 0, .05);margin:0} .pre >div:first-of-type >*{padding:13px 20px} /* Syntax mark */ code{counter-reset:mark-num} code mark{color:inherit} code mark, code .block{--c:var(--linkC)} code .gray{--c:var(--synxGray)} code .red{--c:var(--synxRed)} code .orange{--c:var(--synxOrange)} code .blue{--c:var(--synxBlue)} code .green{--c:var(--synxGreen)} code .gold{--c:var(--synxGold)} code .purple{--c:var(--synxPurple)} code .gray:not(mark), code .gray:not(mark) *, code .red:not(mark), code .red:not(mark) *, code .orange:not(mark), code .orange:not(mark) *, code .blue:not(mark), code .blue:not(mark) *, code .green:not(mark), code .green:not(mark) *, code .gold:not(mark), code .gold:not(mark) *, code .purple:not(mark), code .purple:not(mark) *{color:var(--c)} code .block{background-color:var(--c)} code .block,code .block *{color:#fff} code mark:not(.block){background-color:transparent;border-bottom:3px dashed var(--c);animation:blink-mark-border 1.5s infinite} code mark[data-before]::before,code mark[data-after]::after{display:inline-flex;align-items:center;justify-content:center;min-width:16.5px;height:16.5px;padding:0 4px;border:1px solid var(--c);border-radius:9px;font-size:9px;color:var(--c);font-weight:700;line-height:1.6em;vertical-align:text-bottom} code mark[data-before]::before{content:attr(data-before);margin-right:3px} code mark[data-after]::after{content:attr(data-after);margin-left:3px} code mark[data-before].block{border-top-left-radius:99px;border-bottom-left-radius:99px} code mark[data-after].block{border-top-right-radius:99px;border-bottom-right-radius:99px} code mark[data-before].block::before,code mark[data-after].block::after{background:var(--synxB)} code mark[data-before='$']::before, code mark[data-after='$']::after{content:counter(mark-num);counter-increment:mark-num} @keyframes blink-mark-border{0%{border-color:transparent}50%{border-color:var(--c)}100%{border-color:transparent}} /* Keyboard input */ kbd{position:relative;top:-1px;display:inline-block;margin:0 3px;padding:2px 5px;min-width:2em;background:var(--synxB);color:var(--synxC);font-size:13px;font-family:var(--fontC);line-height:1.6em;text-align:center;border-radius:0.25rem;border:1px solid var(--contentL);box-shadow:0 2px 0 1px var(--contentL);cursor:default;direction:ltr} kbd:hover{box-shadow:0 1px 0 0.5px var(--contentL);top:1px} /* Product view */ .pPad{padding:10px 0} .pPric{font-size:20px;color:var(--linkC);padding-top:20px} .pPric::before, .pInfo small{content:attr(data-text);font-size:small;opacity:.8;display:block;line-height:1.5em;color:var(--bodyC)} .pInfo{font-size:14px;line-height:1.6em} .pInfo:not(.o){position:relative;width:calc(100% + 20px);left:-10px;right:-10px;display:flex} .pInfo:not(.o) >*{width:50%;padding:0 10px} .pMart{margin:10px 0 12px;display:flex;flex-wrap:wrap;line-height:1.6em;position:relative;width:calc(100% + 8px);left:-4px;right:-4px} .pMart >*{margin:0 4px} .pMart small{width:calc(100% - 8px);margin-bottom:10px} .pMart a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--contentL);border-radius:12px;margin-bottom:8px} .pMart img{width:20px;display:block} *//* /*--[ SingleItem (AMP) ]--*/ /*--[ Custom CSS SingleItem (AMP) ]--*/ *//* /*--[ SingleItem (NO AMP) ]--*/ /* Highlight colors */ :root { --hl-keyword: #015493; --hl-built_in: #b75301; --hl-type: var(--hl-built_in); --hl-literal: var(--hl-built_in); --hl-number: var(--hl-built_in); --hl-operator: #3f4bb5; --hl-punctuation: inherit; --hl-property: inherit; --hl-regexp: var(--hl-link); --hl-string: var(--hl-link); --hl-char: inherit; --hl-char-escape: inherit; --hl-subst: inherit; --hl-symbol: var(--hl-link); --hl-class: inherit; --hl-function: #a30bd7; --hl-variable: var(--hl-link); --hl-variable-language: inherit; --hl-variable-constant: inherit; --hl-title: var(--hl-built_in); --hl-title-class: inherit; --hl-title-class-inherited: inherit; --hl-title-function: inherit; --hl-title-function-invoke: inherit; --hl-params: #aa1411; --hl-comment: #656e77; --hl-doctag: var(--hl-meta); --hl-meta: #015692; --hl-meta-prompt: inherit; --hl-meta-keyword: var(--hl-meta); --hl-meta-string: var(--hl-link); --hl-section: var(--hl-meta); --hl-tag: inherit; --hl-name: var(--hl-built_in); --hl-attr: var(--hl-meta); --hl-attribute: #803378; --hl-bullet: var(--hl-code); --hl-code: #535a60; --hl-emphasis: inherit; --hl-strong: inherit; --hl-formula: inherit; --hl-link: #54790d; --hl-quote: var(--hl-built_in); --hl-selector-tag: #167406; --hl-selector-id: var(--hl-built_in); --hl-selector-class: var(--hl-meta); --hl-selector-attr: var(--hl-link); --hl-selector-pseudo: var(--hl-keyword); --hl-template-tag: var(--hl-built_in); --hl-template-variable: var(--hl-link); --hl-addition: #2f6f44; --hl-deletion: #c02d2e; } :root.drK { --hl-keyword: #c678dd; --hl-title: #d8bf7b; --hl-params: #e06c73; --hl-string: #98c379; --hl-operator: #56b6c2; --hl-comment: #7f848e; --hl-type: #d8bf7b; --hl-variable: #e06c73; --hl-meta: #e06c73; --hl-name: #e06c73; --hl-attr: #d19a5d; --hl-doctag: #c678dd; --hl-built_in: #d8bf7b; --hl-symbol: #e06c73; --hl-title-class: #d8bf7b; --hl-title-function: #41a2ef; --hl-subst: #c678dd; --hl-regexp: #c678dd; --hl-selector-tag: #e06c73; --hl-selector-attr: #d19a5d; --hl-attribute: #c678dd; } .hl-keyword{color:var(--hl-keyword)} .hl-built_in{color:var(--hl-built_in)} .hl-type{color:var(--hl-type)} .hl-literal{color:var(--hl-literal)} .hl-number{color:var(--hl-number)} .hl-operator{color:var(--hl-operator)} .hl-punctuation{color:var(--hl-punctuation)} .hl-property{color:var(--hl-property)} .hl-regexp{color:var(--hl-regexp)} .hl-string{color:var(--hl-string)} .hl-char{color:var(--hl-char)} .hl-char.hl-escape {color:var(--hl-char-escape)} .hl-subst{color:var(--hl-subst)} .hl-symbol{color:var(--hl-symbol)} .hl-class{color:var(--hl-class)} .hl-function{color:var(--hl-function)} .hl-variable {color:var(--hl-variable)} .hl-variable.language{color:var(--hl-variable-language)} .hl-variable.constant{color:var(--hl-variable-constant)} .hl-title{color:var(--hl-title)} .hl-title.class_{color:var(--hl-title-class)} .hl-title.class_.inherited_{color:var(--hl-title-class-inherited)} .hl-title.function_{color:var(--hl-title-function)} .hl-title.function_.invoke_{color:var(--hl-title-function-invoke)} .hl-params{color:var(--hl-params)} .hl-comment{color:var(--hl-comment)} .hl-doctag {color:var(--hl-doctag)} .hl-meta{color:var(--hl-meta)} .hl-meta.prompt{color:var(--hl-meta-prompt)} .hl-meta .keyword{color:var(--hl-meta-keyword)} .hl-meta .string{color:var(--hl-meta-string)} .hl-section{color:var(--hl-section)} .hl-tag{color:var(--hl-tag)} .hl-name{color:var(--hl-name)} .hl-attr{color:var(--hl-attr)} .hl-attribute{color:var(--hl-attribute)} .hl-bullet{color:var(--hl-bullet)} .hl-code{color:var(--hl-code)} .hl-emphasis{color:var(--hl-emphasis);font-style:italic} .hl-strong{color:var(--hl-strong);font-weight:500} .hl-formula{color:var(--hl-formula)} .hl-link {color:var(--hl-link)} .hl-quote{color:var(--hl-quote)} .hl-selector-tag{color:var(--hl-selector-tag)} .hl-selector-id{color:var(--hl-selector-id)} .hl-selector-class{color:var(--hl-selector-class)} .hl-selector-attr{color:var(--hl-selector-attr)} .hl-selector-pseudo{color:var(--hl-selector-pseudo)} .hl-template-tag{color:var(--hl-template-tag)} .hl-template-variable{color:var(--hl-template-variable)} .hl-addition{color:var(--hl-addition)} .hl-deletion{color:var(--hl-deletion)} /* Syntax lines number */ pre .num{display:block;position:absolute;top:0;left:0;height:100%;overflow:hidden;counter-reset:line;border-right:1px solid var(--contentL);background-color:var(--synxB);z-index:1} pre .num +code{padding-left:48px;padding-right:15px} pre .num >*{position:relative;display:block;width:33px;text-align:center;color:#656e77;overflow:hidden;counter-increment:line;font-size:12px;font-style:normal;line-height:1;padding:4.408px 0} pre .num >*:first-child{margin-top:60px} pre .num >*::before{content:counter(line)} pre .num >*.m::after{content:'';position:absolute;top:0;inset-inline-end:0;height:100%;border-left:2px solid var(--linkC)} /* Syntax copy */ pre .cp{position:absolute;top:55px;right:10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--contentL);width:30px;height:30px;background:inherit;font-family:var(--fontB);border-radius:4px;cursor:pointer;visibility:hidden;opacity:0;transition:var(--trans-2)} pre:hover .cp{visibility:visible;opacity:.8} pre .cp:hover{opacity:1} pre .cp::after{content:attr(data-copy);position:absolute;line-height:15px;font-size:14px;top:100%;right:0;background:inherit;border:inherit;padding:4px 6px;border-radius:2px;opacity:0;visibility:hidden;transition:var(--trans-1);pointer-events:none} pre .cp.a::after{top:unset;right:100%} pre .cp.d::after{content:attr(data-copied)} pre .cp.d .d1, pre .cp:not(.d) .d2{display:none} pre .cp:hover::after{top:calc(100% + 4px);visibility:visible;opacity:1} pre .cp.a:hover::after{top:unset;right:calc(100% + 4px)} pre .cp svg{width:16px;height:16px;opacity:0.8} pre .cp.d svg{color:var(--linkC);opacity:1} /* Lazy Youtube */ .lazyYt{--ratio:16 / 9;background:var(--synxB);position:relative;overflow:hidden;padding-top:calc(100% / (var(--ratio)));margin:30px 0;border-radius:5px;cursor:pointer} .lazyYt img{width:100%;top:50%;left:50%;transform:translate(-50%,-50%);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 .a{stroke:rgba(255,255,255,.75);stroke-dasharray:240;stroke-dashoffset:480;transition:all .6s ease-in-out;transform:translateY(0)} .lazyYt .play .b{stroke:rgba(255,255,255,.85);stroke-dasharray:650;stroke-dashoffset:650;transition:all .4s ease-in-out;opacity:.3} .lazyYt:hover .play .a, .lazyYt:hover .play .b{stroke-dashoffset:0;opacity:.7;stroke:var(--linkC)} .lazyYt .play:hover .a{animation:nudge .6s ease-in-out;-webkit-animation:nudge .6s ease-in-out} /* Blogger image */ .pS a[imageanchor='1']{display:inline-block} @media screen and (max-width:896px){ .pS a[imageanchor='1'][style*='float: left;'],.pS a[imageanchor='1'][style*='float: right;']{float:none!important;clear:none!important} .pS a[imageanchor='1'] img{display:block;height:auto;margin:0 auto} /*.pS >.separator:first-child a[imageanchor='1']:first-child{margin-top:1.7em}*/ .pS a[imageanchor]{display:block} .pS a[imageanchor='1']{margin-left:0!important;margin-right:0!important} .pS a[imageanchor='1'] + a[imageanchor='1']{margin-top:1.7em} } /* Lightbox image */ .zmImg.s{position:fixed;inset: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} .zmImg.s[data-text]::before{background:var(--black);border-radius:7px;color:var(--white);content:attr(data-text);font-size:13px;left:20px;line-height:20px;max-width:calc(100% - 100px);padding:8px 15px;position:absolute;bottom:20px;z-index:1;white-space:break-spaces} .zmImg:not(.s)>img:not(.n){cursor:pointer} .galWrp .zmImg.s img{max-height:92%} .zmImg:not(.s){position:relative} .zmImg:not(.s)::before{content:'';position:absolute;top:7px;right:7px;width:28px;height:28px;background:url("data:image/svg+xml,") var(--white) center / 14px no-repeat;display:flex;border-radius:50%;z-index:1;opacity:0;transition:opacity ease .5s;cursor:pointer;box-shadow:0 0 10px -5px var(--black)} .zmImg:not(.s):hover::before{opacity:.8} html:has(.zmImg.s){overflow:hidden} /* Comments Tab */ .cmC .tabs >div:first-of-type{margin-bottom:20px} /* Comments Parser */ .cmPar{position:relative;background:var(--contentB);font-size:85%;margin:20px 0;padding:15px 15px 9px;border:1px solid var(--contentL);border-radius:5px;box-shadow:0 5px 20px 0 rgb(0 0 0 / .1)} .cmPar::before {content:'';width:16px;height:16px;background:inherit;position:absolute;bottom:-8.4px;inset-inline-start:34px;transform:rotate(45deg);border:1px solid var(--contentL);border-inline-start:0;border-top:0;border-end-end-radius:3px} .cmPar >*{position:relative} .cmPar textarea{display:block;width:100%;height:100px;min-height:60px;max-height:400px;background:var(--synxB);font-family:var(--fontC);margin:0 0 10px;padding:10px;resize:vertical;border:1px solid var(--contentL);border-radius:4px} .cmPar textarea:focus{border-color:var(--contentLa)} .cmPar .btn{border:none;border-radius:2px;background-color:var(--synxGray);color:var(--white);letter-spacing:.05em;line-height:1.5;margin:0;margin-bottom:6px;margin-inline-end:6px;outline:0;padding:3px 6px;cursor:pointer} .cmPar .btn::before{content:attr(aria-label)} .cmPar .btn[disabled]{opacity:.6;text-decoration:line-through;cursor:not-allowed} .cmPar .cp{background-color:var(--linkC)} .cmPar .cl{background-color:var(--synxRed)} .cmPar .btn:active, .cmPar .btn:focus, .cmPar .btn:hover{opacity:.8} .cmPar .nc{display:none} .cmPar .nc[data-message]{position:absolute;top:10px;inset-inline-end:10px;display:block;background:var(--synxGreen);border-radius:3px;color:var(--white);padding:5px} .cmPar .nc[data-message]::before{content:attr(data-message)} /* Greetings */ .pGV{display:flex;justify-content:space-between;gap:10px;position:relative;font-size:13px;margin:6px 0 20px} .pGV >*{display:flex;align-items:center;justify-content:center;padding:8px 10px;background:var(--contentB);border:1px solid var(--contentL);border-radius:var(--greetR)} .pGV >:last-child:not(:first-child){margin-inline-start:auto} .pGV .pGrt::after{content:attr(data-text)} .pGV .pVws{--v:'0'} .pGV .pVws[data-views]{--v:attr(data-views)} .pGV .pVws::after{content:var(--v) ' views'} .pGV svg{flex-shrink:0;width:15px;height:15px;margin-inline-end:6px} .bX .pGV >*{box-shadow:0 0 12px rgba(0,0,0,0.07)} /* Contact Form */ .ciF{--iB:#f3f3f4;--iBh:#ececec;--iBf:#ececec;--iL:rgba(0,0,0,.25);--iLh:rgba(0,0,0,.42);--iLf:var(--linkC);--iT:rgba(8,16,43,.6);--iTf:rgba(8,16,43,.8);position:relative;margin:20px 0;font-family:var(--fontB);font-size:14px} .ciF input,.ciF select,.ciF textarea{display:block;width:100%;outline:0;border:0;border-bottom:1px solid var(--iL);border-radius:4px 4px 0 0;background:var(--iB);padding:25px 16px 8px 16px;line-height:1.6em;transition:var(--trans-1)} .ciF select{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:1px;text-overflow:'';cursor:pointer} .ciF textarea{min-height:60px;height:100px;max-height:500px;resize:vertical} .ciF input:hover,.ciF select:hover,.ciF textarea:hover{border-color:var(--iLh);background:var(--iBh)} .ciF input:not([readonly]):focus,.ciF select:not([readonly]):focus,.ciF textarea:not([readonly]):focus,.ciF input:not(:placeholder-shown),.ciF select:not(:placeholder-shown),.ciF textarea:not(:placeholder-shown){border-color:var(--iLf);background:var(--iBf)} .ciF label{display:block;position:absolute;left:0;right:0;top:0;background:var(--iB);color:var(--iT);line-height:1.6em;padding:15px 16px 0;border-radius:4px 4px 0 0;transition:var(--trans-1);pointer-events:none} .ciF input[required] ~ label::after,.ciF select[required] ~ label::after,.ciF textarea[required] ~ label::after{content:'*';color:#cb5151;margin-inline-start:4px} .ciF input:placeholder-shown,.ciF label,.ciF textarea:placeholder-shown{-webkit-user-select:none;-ms-user-select:none;user-select:none} .ciF input:hover ~ label,.ciF select:hover ~ label,.ciF textarea:hover ~ label{background:var(--iBh)} .ciF input:not([readonly]):focus ~ label,.ciF select:not([readonly]):focus ~ label,.ciF textarea:not([readonly]):focus ~ label,.ciF input:not(:placeholder-shown):not(:focus) ~ label,.ciF select:not(:placeholder-shown):not(:focus) ~ label,.ciF textarea:not(:placeholder-shown):not(:focus) ~ label,.ciF input[readonly]:not(:placeholder-shown) ~ label,.ciF select[readonly]:not(:placeholder-shown) ~ label,.ciF textarea[readonly]:not(:placeholder-shown) ~ label{padding-top:5px;background:var(--iBf);color:var(--iTf);font-size:90%} .ciF textarea:focus,.ciF textarea:not(:placeholder-shown){height:200px} .ciF[data-message]:not([data-message=''])::after{content:attr(data-message);display:block;font-size:90%;padding:5px 16px 0;opacity:.8;line-height:normal} .ciB{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;outline:0;border:0;border-radius:var(--linkR);color:#fffdfc;background:var(--linkB);font-family:var(--fontB);font-size:14px;vertical-align:middle;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer} .ciB:hover{opacity:.8} .lzD.drK .ciF,:root:not(.lzD) .modI:checked ~ .mainW .ciF{--iB:var(--darkBs);--iBh:var(--iB);--iBf:var(--iB);--iL:rgba(255,255,255,.15);--iLh:var(--iL);--iT:rgba(255,255,255,.4);--iTf:rgba(255,255,255,.5)} /* Input field */ .inF{--iB:var(--bodyB);--iC:inherit;--iL:var(--contentLa);--iLa:var(--linkC);--iLe:#d93025;--iLi:#3e954e;--iR:5px;--tH:100px;--tHa:200px;--tHm:500px;position:relative;font-size:14px;margin:20px 0} .inF input,.inF select,.inF textarea{display:block;width:100%;height:50px;outline:0;font-size:14px;padding:16px 12px;text-align:start;border-radius:var(--iR);background:var(--iB);color:var(--iC);border:1px solid var(--iL);transition:border .2s ease,box-shadow .2s ease} .inF select{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:1px;text-overflow:'';cursor:pointer} .inF textarea{vertical-align:top;resize:vertical;min-height:60px;max-height:var(--tHm);height:var(--tH);transition:border .2s ease,box-shadow .2s ease,height .2s ease;margin:0} .inF textarea:focus,.inF textarea:not(:placeholder-shown):not(:focus){height:var(--tHa)} .inF input[type=date]::-webkit-date-and-time-value,.inF input[type=datetime-local]::-webkit-date-and-time-value{margin-top:0;text-align:start;width:100%} .inF input[type=date]::after,.inF input[type=datetime-local]::after{content:'';position:absolute;top:18px;inset-inline-end:3px;width:12px;height:16px;background:inherit} .inF input:not([readonly]):focus,.inF select:not([readonly]):focus,.inF textarea:not([readonly]):focus{border-color:var(--iLa);box-shadow:inset 0 0 0 .5px var(--iLa)} .inF input:placeholder-shown,.inF label,.inF textarea:placeholder-shown{-webkit-user-select:none;-ms-user-select:none;user-select:none} .inF input:not(:placeholder-shown),.inF select:not(:placeholder-shown),.inF textarea:not(:placeholder-shown),.inF input[type=date],.inF input[type=datetime-local]{border-color:var(--iLa)} .inF label{position:absolute;top:17px;inset-inline-start:10px;padding:0 4px;background-color:var(--iB);color:var(--iC);line-height:1.25;max-width:calc(100% - 18px);opacity:.8;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:inset .15s cubic-bezier(.4,0,.2,1),opacity .15s cubic-bezier(.4,0,.2,1),font-size .15s ease,color .2s ease;cursor:text;pointer-events:none} .inF input[required] ~ label::after,.inF select[required] ~ label::after,.inF textarea[required] ~ label::after{content:'*';color:#cb5151;margin-inline-start:4px} .inF input:not([readonly]):focus ~ label,.inF select:not([readonly]):focus ~ label,.inF textarea:not([readonly]):focus ~ label,.inF input:not(:placeholder-shown):not(:focus) ~ label,.inF select:not(:placeholder-shown):not(:focus) ~ label,.inF textarea:not(:placeholder-shown):not(:focus) ~ label,.inF input[readonly]:not(:placeholder-shown) ~ label,.inF select[readonly]:not(:placeholder-shown) ~ label,.inF textarea[readonly]:not(:placeholder-shown) ~ label{opacity:1;top:-6px;inset-inline-start:8px;font-size:11px;color:var(--iLa)} .inF[data-error]:not([data-error='']){--iL: var(--iLe);--iLa:var(--iLe);animation:shake-input-error .35s ease} .inF[data-info]:not([data-info='']){--iL: var(--iLi);--iLa: var(--iLi)} .inF[data-error]:not([data-error=''])::after,.inF[data-info]:not([data-info=''])::after,.inF[data-message]:not([data-message=''])::after{content:attr(data-message);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;font-size:13px;line-height:1.25;margin-top:8px;opacity:.8;overflow:hidden} .inF[data-error]:not([data-error=''])::after{content:attr(data-error);color:var(--iLe)} .inF[data-info]:not([data-info=''])::after{content:attr(data-info);color:var(--iLi)} @keyframes shake-input-error{25%{transform:translateX(4px)}50%{transform: translateX(-4px)}75%{transform:translateX(4px)}} /* Radio field */ .inR{--rB:var(--contentBs);--rBa:var(--linkC);--rBd:#8f8f8f;--rL:#696768;--rS:18px;display:inline-flex;align-items:center;gap:12px;position:relative;margin:14px 0} .inR > input[type=checkbox],.inR > input[type=radio]{--i-bg:transparent;--i-opacity:0;--i-scale:1;-webkit-appearance:none;-moz-appearance:none;display:inline-block;position:relative;outline:0;width:var(--rS);height:var(--rS);flex:0 0 var(--rS);border-radius:50%;margin:0;border:2px solid var(--rL);transition:background .3s,border-color .3s;cursor:pointer} .inR:not(.sw) > input[type=checkbox]{--i-rotate:20deg;border-radius:3px} .inR.sw > input[type=checkbox]{--i-bg:var(--rL);--i-box:none;--i-scale:.8;--i-transX:0px;height:22px;width:38px;flex:0 0 38px;border-radius:11px;background:var(--rB)} .inR > input[type=checkbox]::after,.inR > input[type=radio]::after{content:'';display:block;position:absolute;top:0;inset-inline-start:0;transition:inset .3s,transform .3s,opacity .2s,box-shadow .2s} .inR > input[type=radio]::after{width:100%;height:100%;border-radius:50%;background:var(--i-bg);opacity:var(--i-opacity);transform:scale(var(--i-scale))} .inR.sw > input[type=checkbox]::after{background:var(--i-bg);top:2px;inset-inline-start:calc(var(--i-transX) + 2px);width:14px;height:14px;border-radius:50%;box-shadow:var(--i-box);transform:scale(var(--i-scale))} .inR:not(.sw) > input[type=checkbox]::after{top:1.5px;inset-inline-start:5px;width:5px;height:10px;border:2px solid var(--i-bg);border-top:0;border-left:0;transform:rotate(var(--i-rotate))} .inR:not(.sw) > input[type=checkbox]:checked{--i-bg:#fff;--i-rotate:43deg;--i-opacity:1;background:var(--rBa);border-color:var(--rBa)} .inR:not(.sw) > input[type=radio]:checked{--i-scale:.7;--i-opacity:1;--i-bg:var(--rBa);border-color:var(--rBa)} .inR.sw > input[type=checkbox]:not(:disabled):hover{--i-box:0 0 0 10px rgba(0,0,0,.1)} .inR.sw > input[type=checkbox]:not(:disabled):not(:checked):active{--i-scale:1.4;--i-box:none} .inR.sw > input[type=checkbox]:not(:disabled):checked:hover{--i-box:0 0 0 6px rgba(0,0,0,.1)} .inR.sw > input[type=checkbox]:checked{--i-transX:17px;--i-scale:1;--i-bg:var(--rB);background:var(--rBa);border-color:var(--rBa)} .inR.sw > input[type=checkbox]:disabled,.inR:not(.sw) > input[type=radio]:disabled{--i-bg: var(--rBd);border-color:var(--i-bg)} .inR:not(.sw) > input[type=checkbox]:not(:disabled)::before,.inR:not(.sw) > input[type=radio]:not(:disabled)::before{content:'';position:absolute;background:var(--rBa);border-radius:50%;width:100%;height:100%;transform:scale(.7);opacity:0;transition:transform .2s ease,opacity .1s ease} .inR:not(.sw) > input[type=checkbox]:not(:disabled):hover::before,.inR:not(.sw) > input[type=radio]:not(:disabled):hover::before{transform:scale(2.4);opacity:.1} .inR > input[type=checkbox] ~ label,.inR > input[type=radio] ~ label{display:inline-block;font-size:14px;line-height:1.25;cursor:pointer} .inR > input[type=checkbox]:disabled,.inR > input[type=radio]:disabled{cursor:not-allowed;opacity:.6} /*--[ Custom CSS SingleItem (NO AMP) ]--*/ *//* /*--[ Post ]--*/ /* Post tags */ .lbHt{margin:30px 0;font-family:var(--fontBa);font-size:13px} .lbHt .hL{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .lbHt .hL>*{background:var(--contentB);padding:8px 14px;border:1px solid var(--contentL);border-radius:20px;color:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .lbHt .hL label{border:0;padding-inline:0;background:transparent;cursor:pointer} .lbHt .hL>*:not(label):hover{border-color:var(--linkC);box-shadow:0 0 0 .5px var(--linkC) inset} .lbHt .hL>*:not(label)::before{content:attr(aria-label)} .lbHt .hL label::before{content:attr(data-show)} .lbHt .hI:checked~.hL label::before{content:attr(data-hide)} .lbHt .hI:not(:checked)~.hL>*:not(.s){display:none} /* Post Author profile */ .admAbt{margin:30px 0;padding-top:18px;border-top:1px solid var(--contentL)} .admPs{display:flex} .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*/} /* Post Pagination */ .aChp{position:relative;display:flex;justify-content:space-between;margin:30px 0;background:var(--contentB);font-size:14px;border-radius:5px;border:1px solid var(--contentL);overflow:hidden} .aChp.loading{align-items:center;justify-content:center;min-height:65px;padding:15px;border:2px dashed var(--contentL)} .aChp.loading::before{content:attr(data-loading);opacity:.9} .aChp a{color:inherit;opacity:1} .aChp >*{display:flex;flex-direction:column;gap:6px;width:100%;padding:12px 18px} .aChp >:last-child:not(:first-child){border-inline-start:1px solid var(--contentL)} .aChp >*:hover{background:var(--contentBs)} .aChp >.o{align-items:start;text-align:start} .aChp >.n{align-items:end;text-align:end} .aChp .b{display:flex;align-items:center;gap:6px} .aChp .o .b::before,.aChp .n .b::after{content:'';width:16px;height:16px;background:url("data:image/svg+xml,") transparent center / 16px no-repeat} .aChp .o .b::before{margin-inline-start:-4px} .aChp .n .b::after{margin-inline-end:-4px;background-image:url("data:image/svg+xml,")} .aChp .t{font-size:13px;opacity:.9} .aChp .o .b::after,.aChp .n .b::before,.aChp .t::after{content:attr(data-text)} [dir=rtl] .aChp .o .b::before,[dir=rtl] .aChp .n .b::after{transform:rotate(180deg)} .bX .aChp{box-shadow:0 0 20px rgb(0 0 0 / .07)} @media screen and (max-width:500px){ .aChp{flex-wrap:wrap} .aChp.loading[data-older][data-newer]{min-height:130px} .aChp >:last-child:not(:first-child){border-inline-start:none;border-top:1px solid var(--contentL)} } /*--[ Custom CSS Post ]--*/ *//* /*--[ Post (AMP) ]--*/ /*--[ Custom CSS Post (AMP) ]--*/ *//* /*--[ Post (NO AMP) ]--*/ /* Related Posts */ .aRps{margin:30px 0} .aRps .n{background:var(--contentB);padding:40px 15px;text-align:center;border:2px dashed var(--contentL);border-radius:5px} .itemRp{--gapC:18px;--gapR:36px;--numI:3;display:grid;grid-template-columns:repeat(var(--numI),1fr);gap:var(--gapR) var(--gapC);animation:opaCity .5s} .itemRp >*{--szpd:0px;position:relative;overflow:hidden} .itemRp >*:not(.pTag){padding-bottom:calc(var(--szpd) + 35px)} .itemRp .pTag .pCntn{padding-bottom:var(--szpd)} .itemRp .pCntn{padding:0 var(--szpd, 0)} .itemRp .pInf{position:absolute;inset:auto var(--szpd, 0) var(--szpd, 0)} .bX .itemRp{--gapR:18px} .bX .itemRp >*{--szpd:15px;background:var(--contentB);box-shadow:0 5px 35px rgb(0 0 0 / 7%);border-radius:5px;border:1px solid var(--contentL);overflow:hidden} .bX .itemRp .pThmb{margin-bottom:var(--szpd);border-bottom:1px solid var(--contentL);border-radius:0} @media screen and (max-width: 1100px){ .itemRp{--numI:2} } @media screen and (max-width: 869px){ .itemRp{--numI:3} } @media screen and (max-width: 768px){ .itemRp{--numI:2} } @media screen and (max-width: 500px){ .itemRp{--gapC:10px} .itemRp .ntry:not(.pTag) .pSnpt, .itemRp .ntry .pInf:not(.nSpr) .pJmp{display:none} .itemRp .ntry .pTtl{font-size:.9rem;font-weight:600} .itemRp .ntry .tfxM{--gap:4px;--itmPd:4px;--itmIc:14px;padding:4px;font-size:11px} .itemRp .ntry .tfxC .bM:hover{padding:var(--itmPd) var(--itmPh)} .itemRp .ntry .tfxC .bM::before{display:none} .bX .itemRp{--gapR:10px} .bX .itemRp >*{--szpd:10px} } /*--[ Custom CSS Post (NO AMP) ]--*/ *//* /*--[ Page ]--*/ /*--[ Custom CSS Page ]--*/ *//* /*--[ Page (AMP) ]--*/ /*--[ Custom CSS Page (AMP) ]--*/ *//* /*--[ Page (NO AMP) ]--*/ /*--[ Custom CSS Page (NO AMP) ]--*/ *//* /*--[ Error ]--*/ /* Error Page */ .erroP{display:flex;align-items:center;justify-content:center;height:calc(100vh - var(--headerHc));text-align:center;padding:0} .erroC{width:calc(100% - 40px);max-width:450px;margin:0;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;opacity:.2} .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{display:inline-flex;align-items:center;padding:12px 18px;outline:0;border:0;border-radius:var(--linkR);color:#fffdfc;background:var(--linkB);font-family:var(--fontB);font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer} .erroC .button:hover{opacity:.8} @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)}} *//* /*--[ Error (AMP) ]--*/ *//* /*--[ Error (NO AMP) ]--*/ *//* /*--[ Preview ]--*/ .sldW .widget{display:block!important} *//* /*--[ Preview (AMP) ]--*/ *//* /*--[ Preview (NO AMP) ]--*/ *//* /*--[ Safelink ]--*/ .slRv{background:var(--contentBa);padding:12px;margin:40px auto;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;width:fit-content;border:1px solid var(--contentL)} .slRi{position:relative;display:flex;flex-shrink:0;width:40px;height:40px;padding:8px;opacity:.8;overflow:hidden} .slRi::after{content:'';position:absolute;inset:0;border:4px dashed currentColor;border-radius:50%;animation:sl-robot 4s infinite} .slRv.v .slRi::after{animation:sl-robot 4s infinite, sl-spinner 4s infinite} .slRi svg{width:100%;height:100%;border-radius:50%} .slRc{display:inline-flex;align-items:center;gap:10px;cursor:pointer} .slRc svg{flex-shrink:0} .slRv:not(.v) .slRc svg path:last-of-type{display:none} .slCd{--total:0s;margin:40px 0;position:relative;padding:4px;border-radius:8px;overflow:hidden} .slCd::before,.slCd::after{content:'';position:absolute;inset:0;z-index:0;background:var(--linkB);opacity:0.2} .slCd::after{inset-inline-end:unset;width:100%;opacity:0.8;animation:sl-width var(--total) linear} .slCd div{z-index:1;position:relative;padding:12px;background:var(--contentB);border-radius:4px;text-align:center} .slSd{background:var(--contentBa);padding:12px;border-radius:8px;border:1px solid var(--contentL);display:flex;align-items:center;justify-content:space-between;gap:16px;margin:40px 0;font-size:15px} .slSd button{--svgW:20px;--svgH:20px;display:flex;align-items:center;justify-content:center;padding:10px;background:var(--linkB);border-radius:var(--linkR);color:#fffdfc;cursor:pointer} .slGl{margin:40px 0;display:flex;align-items:center;justify-content:center} .slGl .button{--svgW:20px;--svgH:20px;margin:0} @keyframes sl-robot{0% {opacity:.4}50%{opacity:1}100%{opacity:.4}} @keyframes sl-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} @keyframes sl-width{0%{width:0}100%{width:100%}} */ /* body{font-family:'Kohinoor Bangla', 'Arabic', sans-serif} /* Custom CSS Story */ */