/* dark mode (c) Reysler 17.01.2025 - 24.01.2025 */

:root {
--bg1: #282d38;
--bg2: #1d2129;
--bg3: transparent;
--pun: #353d4b;
--title: #282e38;
--white-light: rgba(255, 255, 255, .15);
--white-1: rgba(255, 255, 255, .1);
--white-2: rgba(255, 255, 255, .2);
--white-4: rgba(255, 255, 255, .4);
--white-7: rgba(255, 255, 255, .7);
--white-8: rgba(255, 255, 255, .8);
--black-light: rgba(0, 0, 0, .15);
--black-1: rgba(0, 0, 0, .1);
--black-2: rgba(0, 0, 0, .2);
--black-4: rgba(0, 0, 0, .4);
--black-5: rgba(0, 0, 0, .5);
--black-6: rgba(0, 0, 0, .6);
}
 
html {
  background: var(--bg1);
}
body {
  background: linear-gradient(to top, var(--bg1) 2%, var(--bg2) 88%);
  color: var(--white-7);
}
 
body *::-webkit-scrollbar {
  -webkit-appearance: none;
}
body *::-webkit-scrollbar:vertical {
  width: 8px;
}
body *::-webkit-scrollbar:horizontal {
  height: 8px;
}
body *::-webkit-scrollbar-thumb {
  background-color: rgba(200, 200, 200, .5);
  border-radius: 10px;
}
body *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(150, 200, 250, .5);
}
body *::-webkit-scrollbar-thumb:active {
  background-color: rgba(80, 170, 250, .5);
}
body *::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .03);
}
body *::-webkit-scrollbar-corner {
  background-color: transparent;
}
 
::placeholder {
  color: var(--white-7);
  font-size: 90%;
}
select {
  cursor: pointer;
}
 
#pun,
#viewprofile h2 span,
.punbb legend span,
.punbb-admin #pun-admain legend span {
  background: var(--pun);
}
 
#setmods dd,
#viewprofile li div,
#viewprofile li strong,
.punbb #pun-main .info-box .legend,
.punbb .info-box,
.punbb .main .container,
.punbb .post h3,
.punbb .post-body,
.punbb .post-links,
.punbb .section .container,
.punbb td.tc2,
.punbb td.tc3,
.punbb-admin #pun-admain .adcontainer {
  background-color: var(--bg3);
  color: var(--white-7);
}
 
.punbb .main tr>td:last-child,
.punbb .post .container,
.punbb td.tcl,
.punbb td.tcr {
  background-color: var(--bg3);
}
 
#pun-debug h2,
#pun-stats h2,
.punbb .main h2,
.punbb-admin #pun-admain h2,
.punbb:not(#pun-redirect):not(#pun-viewforum):not(#pun-searchtopics) .main h1 {

  color: #ccd9f0;
  border-bottom: 2px solid #a8c5e0;
}
 
#pun-index .main h2,
#pun-searchtopics .main h1,
#pun-viewforum .main h1 {
  background: var(--bg3);
  color: #ccd9f0;
}
 
#pun-main h3 >a{ 

padding: 0px 7px 3px !important;
border-radius: 10px !important; 
 background: #282d38;   
    
}
 
#poll-special h1 {
  background: #405c7a;
}
 
#pun-title {
  background: var(--title);
  border-color: var(--title) !important;
}
 
#pun-title h1>span {
  color: #fff;
  text-shadow: -1px -1px 1px var(--black-6);
}
 
.punbb .modmenu .container {
  background-color: transparent;
  color: #ccc;
}
 
.punbb .modmenu .container select {
  margin: -5px 0 0 -22px;
  transform: scale(.95);
}
 
#viewprofile h2 span,
.punbb legend span,
.punbb-admin #pun-admain legend span {
  color: #9bb6d0;
  font-weight: 700;
}
 
#profilenav h2 span {
  background-color: transparent;
  color: #80a2c3;
}
 
#setmods dl,
.punbb .post h3 {
  background-color: var(--black-2);
  color: var(--white-6);
}
 
.punbb .post h3 span {
  background-color: transparent !important;
  color: var(--white-7);
}
 
.punbb .post h3 a {
  opacity: .9;
}
 
.punbb .post-body,
.punbb .post-links,
.punbb .post-links ul {
  background-color: transparent !important;
}
 
.punbb .post .post-rating .container,
.punbb .post-vote .container {
  background-color: rgba(0, 15, 50, .3) !important;
}
 
.punbb .code-box {
  background-color: var(--bg2);
  color: var(--white-8);
}
 
.punbb .quote-box,
.punbb .quote-box .quote-box {
  color: rgba(255, 255, 255, .8);
  background-color: rgba(100, 150, 200, .2) !important;
}
.punbb .quote-box a {
  color: #a3c0d3 !important;
  text-decoration: underline;
}
 

#pun-navlinks .container {
  color: #c1c1c1;
}
 
#form-buttons td:hover {
  background-color: var(--bg2);
}
 
#pun-redirect {
  background: var(--pun);
}
 
#table-area td {
  background-color: #3c445d;
  border-color: #627099 !important;
}
#table-area td.selected {
  background-color: #8590b1;
  border-color: #3c445d !important;
}
 
#pun-title,
.post h3,
.punbb .container,
.punbb .post-body {
  border-color: #333;
}
 
.punbb:not(#pun-index):not(#pun-redirect) .main div:not(.post):not(.category):not(.forum) > .container {
  border-bottom: 1px solid var(--white-1);
}
 
#pun-debug h2,
#pun-stats h2,
.punbb .main h1,
.punbb .main h2,
.punbb-admin #pun-admain h2 {
  border-color: #a8c5e0;
}
 
#profilenav ul,
#viewprofile ul,
.post-links,
.post-links ul,
.punbb .post .post-body,
.punbb .post h3 span,
.punbb td,
.usertable table {
  border-color: var(--black-2);
}
 
#pun-viewtopic.punbb .topic .post:last-child {
  border-bottom-color: var(--black-light);
}
 
.punbb .post .post-rating .container,
.punbb .post-vote .container {
  border-color: transparent !important;
}
 
.punbb th {
  border-bottom-color: #a4b1be !important;
  background-color: var(--bg1);
}
 
.punbb:not(#pun-index):not(#pun-viewforum):not(#pun-searchtopics) th {
  background: var(--black-light) !important;
  border-color: transparent !important;
}
 
.punbb:not(#pun-index):not(#pun-viewforum):not(#pun-searchtopics) tr th:first-child {
  border-left: 1px solid transparent !important;
}
 
.punbb:not(#pun-index):not(#pun-viewforum):not(#pun-searchtopics) tr th:last-child {
  border-right: 1px solid transparent !important;
}
 
#pun-userlist th {
  background: #333 !important;
}
 
#pun-announcement h2 span,
#pun-help .formal .info-box h3.legend span,
#pun-ulinks li,
.punbb .code-box {
  border-color: var(--white-1);
}
 
li#onlinelist {
  border-color: rgba(0, 0, 0, .14);
}
 
#pun-announcement h2,
#pun-help .formal .info-box h3.legend,
li#onlinelist div {
  border-color: var(--white-light);
}
#pun-ulinks a,
#pun-navlinks li a {
  color: var(--white-8);
}
#pun-ulinks .container{
  background-color: var(--bg1);
 }
 

#pun-ulinks a:hover {
  background: var(--black-light);
}
 
.punbb .divider {
  border-color: var(--white-light) var(--black-light) var(--black-light);
}
 
.punbb .formal fieldset .post-box,
.punbb .info-box {
    background-color: #3c445d;
  border: 1px solid transparent !important;
  }
.punbb .post-box{
 background-color: #2D3037;
 color: var(--white-8) !important;
}
li.pa-online {
  border-left-color: #337ca6;
}
 
.adcontainer {
  border: 1px solid #555 !important;
}
 
#pun-announcement h2 > span {
  color: #ccd9f0;
  border-bottom: 2px solid #a8c5e0;
}
 
#pun-announcement .container {
  border-bottom-color: var(--white-light) !important;
}
 
.punbb a,
.punbb a:link,
.punbb a:visited,
.punbb-admin #pun-admain a,
.punbb-admin #pun-admain a:link,
.punbb-admin #punbb-admain a:visited {
  color: #80a2c3;
}
 
.punbb li.isactive a,
.punbb li.isactive a:link,
.punbb li.isactive a:visited {
  color: #ccc;
}
 
.punbb .closedatafield:before {
  filter: brightness(1.6);
}
 
.punbb .stickytext:before {
  filter: brightness(1) contrast(.5);
}
 
#pun-navlinks li a {
  text-shadow: 0 -1px 0 #1d2129;
}
 
#pun-navlinks li a:hover,
#navextra1:hover > a,
#pun-navlinks ul ul,
#navextra1:hover > a,
#pun-navlinks ul ul li:hover {
  background-color: rgba(33, 150, 243, .15) !important;
}
 
#pun-pagelinks a:active,
#pun-pagelinks a:focus {
  background-color: #444;
  color: #fff;
}
 
.punbb p.container.crumbs a:hover {
  background-color: rgba(74, 96, 112, .25);
  border: 1px solid #4a6070;
}
 
.punbb #pun-about .container{
background: var(--bg1);
}
.punbb #pun-crumbs2 .container{
background: var(--bg1);
  color: var(--white-7);
}

#pun-stats.section .statscon .container {
background: #353d4b;
}

 
.button,
input[type=submit],
.button[disabled],
input[type=submit][disabled] {
  border-color: #4a695e !important;
  background-color: #136d4c !important;
  background-image: none;
  color: var(--white-8) !important;
}
 
.button:active,
.button:hover,
input[type=submit]:active,
input[type=submit]:hover {
  border-color: #4a695e !important;
  color: var(--white-8) !important;
}
 
.button:hover,
input[type=submit]:hover {
  background-image: linear-gradient(to bottom, var(--white-1) 0, rgba(0, 0, 0, .05) 100%);
}
 
.button:active,
input[type=submit]:active {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, .08) 100%);
  box-shadow: inset var(--black-4) 0 1px 3px;
}
  
.button:focus,
input[type=submit]:focus {
  outline: 1px solid #6a9686;
}
  
.button[disabled],
input[type=submit][disabled],
.button[disabled]:hover,
input[type=submit][disabled]:hover,
.button[disabled]:active,
input[type=submit][disabled]:active,
.button[disabled]:focus,
input[type=submit][disabled]:focus {
  background-color: #0b422e !important;
  box-shadow: none;
  color: #777 !important;
}
 
.punbb input[type="submit"].submit {
  font-weight: 700 !important;
  transform: scale(1.2);
}
.punbb input[type="submit"].submit + input {
  margin: 0 1em;
}
 
.punbb div[id$="-area"] {
  background-color: var(--bg2) !important;
}
.punbb div[id$="-area"],
.punbb #post div[id$="-area"] {
  border-color: var(--white-light) !important;
}
 
.punbb fieldset {
  border-color: var(--white-2);
}
 
.punbb input[type=password],
.punbb input[type=text],
.punbb input[type=search],
.punbb select {
  padding: .5em .6em;
}
 
.punbb input[type=password],
.punbb input[type=text],
.punbb input[type=search],
.punbb select,
.punbb textarea,
#wysi-reply {
  border: 1px solid #252a34 !important;
  background: #252a34;
  color: #ccc;
  outline: none;
}
 
.punbb input[type=password]:hover,
.punbb input[type=text]:hover,
.punbb input[type=search]:hover,
.punbb textarea:hover,
select:hover,
.punbb input[type=password]:focus,
.punbb input[type=search]:focus,
.punbb input[type=text]:focus,
.punbb textarea:focus,
.punbb select:focus,
#wysi-reply:has([data-wysi-highlight]) {
  border-color: rgba(255, 255, 255, .25) !important;
}
 
#profilenav ul {
  border-bottom-color: #3f5c73;
}
 
#profile-right li:not(:last-child) {
  border-bottom-color: #444;
}
 
#pun-redirect .info a {
  font-size: 11px !important;
  color: #3a6c8d;
}
 
.punbb .closedatafield + a,
.punbb .closedatafield + strong > a {
  color: #aaa !important;
}
 
 #pun-ulinks {
  background: #20252d;
}
 
.category th,
#pun-viewforum .main th,
#pun-searchtopics .main th {
  color: #a4b1be;
}
#pun-main .forum tr > td {
  border-left: none;
}
#pun-main tr > td {
  border-image-slice: 0 0 1;
  border-image-source: linear-gradient(var(--white-light), var(--white-light));
  border-left: none;
}
#pun-main tr > td:first-child {
  border-image-slice: 0 0 1;
  border-image-source: linear-gradient(to right, transparent, var(--white-light));
}
#pun-main tr > td:last-child {
    border-image-slice: 0 0 1;
    border-image-source: linear-gradient(to left, transparent, var(--white-light));
}
a[style="font-weight:700;color:maroon"] {
  color: #FF9800 !important;
}
 
.punbb .post h3 {
  border-color: transparent !important;
}
 
.topic a.sharelink {
  filter: grayscale(.5) brightness(2);
}
 
#paginator {
  background-color: var(--bg2) !important; !important;
  border: 1px solid var(--white-2) !important;
  box-shadow: 0 5px 5px var(--black-5) !important;
  text-shadow: none !important;
}
#paginator a {
  border-radius: 50%;
}
#paginator a:hover {
  background-color: var(--pun) !important; !important; !important; !important;
}
 
#pun-searchtopics.punbb .tcl a {
  color: #a3bbd3 !important;
}
#pun-searchtopics.punbb .stickytext + a, .punbb .stickytext + a, .punbb .stickytext + strong > a, .punbb .stickytext + .closedatafield + a, .punbb .stickytext + .closedatafield + strong > a {
  color: #d3a3a3 !important;
}
 
.quote-box .quote-after.q-resize-1, #messages .post .quote-box.answer-box blockquote:not(.blockquote-toggle)::after {
  /*background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .25) 70%, var(--black-4) 100%) !important;*/
  background: linear-gradient(to bottom, transparent 0%, #3e4f64 80%, #3e4f64 100%) !important;
}
#pun-messages .main #messages tr:hover {
  background-color: rgba(255, 255, 255, .03);
}
hr {
  border-color: var(--black-2) var(--black-2) var(--white-1);
}
 
.usersname a,
#onlinelist a,
li.pa-author>a {
  filter: brightness(1.2) contrast(1.2);
}
 
#pun-rules .main .html-box > p,
#pun-regrules .main .html-box > p,
#pun-register .main .info-box {
  background: #5e4a69;
  border: 1px solid #816690;
}
#pun-rules ul,
#pun-regrules ul {
  border-bottom: 0 !important;
}
.infofield,
#pun-rules ul ol,
#pun-regrules ul ol {
  line-height: 1.5;
}
#pun-rules font[color=grey],
#pun-regrules font[color=grey] {
  color: #e0645a;
}
#pun-rules span[style="color:red"],
#pun-regrules span[style="color:red"] {
  color: #8bc34a !important;
}
 
#pun-regrules .main p.formsubmit {
  background: transparent;
  border-color: transparent;
  text-align: center !important;
  padding: 0 !important;
}
 
#pun-regrules .main .formsubmit input {
  transform: scale(1.25);
  padding: .45em .85em;
}
 
#pun-regrules .main .formsubmit input+input {
  margin-left: 2em;
}
 
#pun-rules .main .html-box div > p,
#pun-regrules .main .html-box div > p,
#pun-rules .main .html-box span > a,
#pun-regrules .main .html-box span > a {
  background: rgba(32, 37, 45) !important;
  border-color: var(--black-4);
  font-size: 90%;
  line-height: 1.75;
}
 
#pun-rules .main .html-box span > a,
#pun-regrules .main .html-box span > a {
  padding: .8em 1em;
  border-radius: 5px 5px 0 0;
  font-size: 105%;
}
 
.publication {
  color: #9ac8ef !important;
  text-shadow: none !important;
}
 
.slider_wrap {
  box-shadow: 0px 7px 10px 0px rgba(150, 150, 150, 0.75) !important;
}
 
.slider_wrap figcaption {
  background: rgba(20, 20, 20, .9) !important;
}
 
.post-author .pa-online,
.post-author:not(.online) .pa-author .acchide {
  background: #90b35d !important;
}
 
.pun-modal .modal-inner {
  background: var(--pun);
}
 
[id^="tooltipsy"] {
  max-width: 90vw;
}
 
.tooltipsy {
  background-color: var(--title) !important;
}
 
.punbb .post-sig dt {
  border-top-color: var(--white-light);
}
#profile-signature {
	position: relative;
}
#profile-signature ul {
  border-color: rgba(255, 255, 255, .25);
  padding-top: 1em !important;
}
#profile-signature ul::before {
	background: var(--pun);
	position: absolute;
	top: 1.1em;
	font-size: 90%;
	color: rgba(255, 255, 255, .6);
}
html[lang="ru"] #profile-signature ul::before {
	content: "Подпись участника";
}
html[lang="en"] #profile-signature ul::before {
	content: "User signature";
}
#pun-searchform .main input[type=search] {
  background-color: rgba(0, 0, 0, .3);
}
 
.input-button[disabled] {
  opacity: .5 !important;
}
 
#pun-edit a:not([disabled]) {
  color: #607d8b;
}
 
form li#navblock-2 a:hover,
a[href*="/pun/viewtopic"]:not([disabled]) {
  background-color: rgba(39, 50, 63, .3);
}
 
#pun-pagelinks a:focus,
#pun-pagelinks a:active {
  background-color: rgba(55, 150, 197, .9);
}
 
ul.punbb-dropdown ul {
  background-color: #444;
}
 
fieldset {
  background: DarkSlateGrey !important;
}
 
.punbb .post.new-ajax {
    border-width: 1px;
    background-color: rgba(15, 15, 150, .1);
    animation: fadebg 3s 3s ease-out forwards;
}
 
#pun-pagelinks {
  color: var(--white-8);
}
.punbb #move_posts_form h1, #pun .punbb .main .pun-modal h1, #pun .punbb .main .pun-modal h2, .punbb .main #MyBookmarks h2, .punbb .main #MyBookmarks h1, .editBookmark h1 {
    background: var(--title) !important;
}
#keyboard-span input {
    background-color: rgba(255, 255, 255, .03);
    border-color: var(--white-1);
    color: var(--white-8);
}
#profilenav li.isactive {
    background-color: var(--white-1);
    border-color: var(--black-1);
}
.post-content table td {
    border-color: var(--white-2) !important;
}
.user-agent [class^="ua-icon-"]:before {
    filter: grayscale(.3);
    opacity: .2;
}
.user-agent [class^="ua-icon-"]:hover {
    filter: brightness(1.5);
}
.post:hover .user-agent [class^="ua-icon-"]:before {
    opacity: .8;
}
.post-links li a {
    border: 1px solid transparent;
    user-select: none;
}
.post-links li a:hover {
    color: #80a2c3 !important;
    background-color: rgba(74, 96, 112, .25);
    border-color: #4a6070;
}
 
.punbb #navextra1:hover > a, .punbb #pun-navlinks ul ul {
    background-color: #273d54 !important;
    border: 1px solid var(--white-2);
    box-shadow: none !important;
}
.punbb #pun-navlinks ul ul li, #pun-navlinks ul ul li:hover {
    margin: 0;
    border-radius: 0;
}
.punbb #navextra1:hover > a, #pun-navlinks ul ul li:hover {
    background-color: #375677 !important;
}
#pun-navlinks ul ul li:hover {
    border-radius: 0 !important;
}
.punbb #pun-navlinks ul ul {
    top: 29px;
}
.punbb #navextra1 a {
    border: 1px solid transparent;
}
.punbb #pun-navlinks ul li {
    height: auto;
}
 
.punbb #MyBookmarks {
    background: var(--pun);
}
.punbb .main #MyBookmarks h2,
.punbb .main #MyBookmarks h1,
.punbb .editBookmark h1 {
	color: var(--white-7) !important;
}
.punbb #MyBookmarks li.BookmarkL {
    border-bottom-color: var(--white-2) !important;
}
.punbb #MyBookmarks span.scrl {
    background-color: var(--bg2);
    color: var(--white-7);
    user-select: none;
}
.punbb .editBookmark h1 {
    background-color: var(--title);
}
.punbb .editBookmark .container {
    background-color: var(--pun);
}
 
#isk {
    border-color: transparent;
    background: rgba(0, 0, 0, .3);
}

.post-content kbd {
    background: var(--bg2) !important;
    border-color: transparent !important;
}
 
/* ================== TOUCHMEDIA ================== */
@media screen and (max-width: 540px) {
  #pun .punbb #pun-main td {
	border-bottom-color: var(--white-1) !important;
  }
  #pun-ulinks, #pun-navlinks .container li a {
    filter: brightness(0.8);
  }
  .punbb #pun-navlinks {
    top: -38px !important;
    background-color: var(--bg2);
    border-bottom: 1px solid var(--bg2) !important;
  }
  #pun .punbb#pun-userlist td:nth-child(2) {
    border-image-slice: 0 0 1 !important;
    border-image-source: linear-gradient(to left, transparent, var(--white-light)) !important;
  }
  #pun .punbb #pun-main td:first-child {
    border-image-slice: 0 0 1 !important;
    border-image-source: linear-gradient(to right, transparent, var(--white-light)) !important;
  }
  #pun .punbb #pun-main td {
    border-image-slice: 0 0 1 !important;
    border-image-source: linear-gradient(var(--white-light), var(--white-light)) !important;
  }
  #pun .punbb #pun-main td:last-child {
    border-image-slice: 0 0 1 !important;
    border-image-source: linear-gradient(to left, transparent, var(--white-light)) !important;
  }
  #pun .punbb tr.isticky div.icon, tr.inewisticky div.icon {
    filter: brightness(3) contrast(3);
    opacity: .6;
  }
  .punbb .category .container, .punbb .forum .container {
    border-top-color: #a8c5e0 !important;
      }
  #pun-index .modlist {
    padding-top: .5em;
    opacity: .9;
    font-size: 95%;
  }
  .punbb .intd {
    position: relative;
    margin-left: 1em;
  }
  .punbb .tclcon h3 {
    margin-bottom: .5em;
  }
  .punbb div.icon {
    position: absolute;
    left: -15px;
    height: 98%;
    margin-top: 5px;
  }
  #pun .punbb .post-author, #pun .punbb .post-author ul {
    background-color: var(--black-1) !important;
    margin-top: 1px;
  }
  #pun .punbb .post h3 span {
    background-color: transparent !important;
    border-top: none !important;
  }
  .punbb .post h3 {
    border-top-color: var(--black-1) !important;
    border-radius: 0 !important;
  }
  #paginator {
    border-color: rgba(255, 255, 255, .3) !important;
  }
  #paginator td {
    border-color: rgba(255, 255, 255, .3) !important;
  }
  #pun-register .main .info-box {
    padding: .5em 1em 0;
  }
  #pun-register input[type=text], #pun-register input[type=password], #pun-register input[type=email] {
    width: 100vw;
  }
  #pun-register form {
    line-height: 1.5
  }
  #profile-right li {
    background-color: var(--black-2) !important;
    border-left: none !important;
  }
}

div .post-rating p a {
    text-align: center;
    outline: 1px solid transparent;
    font-weight: 700;
 background: url(https://i.ibb.co/1Gx3mJ9Q/gray-heart.png) no-repeat center;
     background-size:36px auto;
     position:relative;
    z-index:200;
    width: 36px;
    height: 36px;
    text-align:center;
    font-size: 12px !important;
    display: inline-block;
    vertical-align: middle;
    line-height: 34px;
    letter-spacing: -.1px;
}
.noNull:before{content: "+";
    display: inline-block;
    margin-left: -1px;
    font-size: 9px;
    letter-spacing: 0!important;
}   
.punbb .post-rating p {
   padding: 0 !important;
 
/* ================== CHECKBOX/RADIO ================== */
input[type=checkbox], input[type=radio] {
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    min-height: auto;
    padding: 7px;
    vertical-align: middle;
    border: 1px solid var(--white-2);
    background-color: var(--black-2);
    outline: none;
}
input[type=radio]:hover, input[type=checkbox]:hover {
	border-color: var(--white-4);
}
input[type=checkbox] {
    border-radius: 3px;
}
input[type=radio] {
    border-radius: 50%;
}
input[type=radio]:checked:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: 3px;
    left: 3px;
    background: var(--white-8);
    border-radius: 50%;
}
input[type=checkbox]:focus, input[type=radio]:focus {
    border-color: var(--white-8);
}
input[type=checkbox]:checked::after {
    content: '\2714';
    font-size: 95%;
    position: absolute;
    top: -2px;
    left: 2px;
    color: #fff;
}
 

/* ================== CODEBOX ================== */
.code-box .linenums li.L1,
.code-box .linenums li.L3,
.code-box .linenums li.L5,
.code-box .linenums li.L7,
.code-box .linenums li.L9 {
    background: transparent !important;
}
.code-box .linenums .str {color: #81c784;}
.code-box .linenums .kwd {color: #7986cb;}
.code-box .linenums .com {color: #ef9a9a;}
.code-box .linenums .typ {color: #f48fb1;}
.code-box .linenums .lit {color: #80cbc4;}
.code-box .linenums .clo,
.code-box .linenums .opn,
.code-box .linenums .pun {color: #ffb74d;}
.code-box .linenums .tag {color: #81d4fa;}
.code-box .linenums .atn {color: #ce93d8;}
.code-box .linenums .atv {color: #aed581;}
.code-box .linenums .pln {color: #e0e0e0;}
 
/* ================== POSTFORMATED ================== */
.post span[style="color: red"] {color: #ff8989 !important;}
.post span[style="color: green"] {color: #81c784 !important;}
.post span[style="color: blue"] {color: #2196f3 !important;}
.post span[style="color: maroon"] {color: #f48fb1 !important;}
.post span[style="color: olive"] {color: #ffffa7 !important;}
.post span[style="color: navy"] {color: #a7a7ff !important;}
 
/* ================== ANIMATIONS ================== */
@keyframes fadebg {
  0% {
    background-color: rgba(15, 15, 150, 0.1);
  }
  100% {
    background-color: var(--pun);
  }
}