:root -Version-2.1.0-XDUA
[data-theme=dark] {
    --base02: #3e4451;
    --base03: #868e96;
    --base04: #868e96;
    --base05: #abb2bf;
    --base06: #b6bdca;
    --base07: #feb272;
    --base08: #6edff6;
    --base09: #feb272;
    --base0A: #ffe69c;
    --base0B: #79dfc1;
    --base0C: #79dfc1;
    --base0D: #6ea8fe;
    --base0E: #c29ffa;
    --base0F: #ea868f
}
[data-theme=dark] {
  color-scheme: dark;
  --body-color: #cbd3df;
  --body-color-rgb: 222, 226, 230;
  --body-bg: #161a21;
  --body-bg-rgb: rgb(33 39 53);
  --emphasis-color: #fff;
  --emphasis-color-rgb: 255, 255, 255;
  --secondary-color: rgba(222, 226, 230, 0.75);
  --secondary-color-rgb: 222, 226, 230;
  --secondary-bg: #1a1e29;
  --secondary-bg-rgb: 52, 58, 64;
  --tertiary-color: rgba(222, 226, 230, 0.5);
  --tertiary-color-rgb: 222, 226, 230;
  --tertiary-bg: #2b3035;
  --tertiary-bg-rgb: 43, 48, 53;
  --primary-text-emphasis: #6ea8fe;
  --secondary-text-emphasis: #a7acb1;
  --success-text-emphasis: #75b798;
  --info-text-emphasis: #6edff6;
  --warning-text-emphasis: #ffda6a;
  --danger-text-emphasis: #ea868f;
  --light-text-emphasis: #f8f9fa;
  --dark-text-emphasis: #dee2e6;
  --primary-bg-subtle: #031633;
  --secondary-bg-subtle: #161719;
  --success-bg-subtle: #051b11;
  --info-bg-subtle: #032830;
  --warning-bg-subtle: #332701;
  --danger-bg-subtle: #2c0b0e;
  --light-bg-subtle: #343a40;
  --dark-bg-subtle: #1a1d20;
  --primary-border-subtle: #084298;
  --secondary-border-subtle: #41464b;
  --success-border-subtle: #0f5132;
  --info-border-subtle: #087990;
  --warning-border-subtle: #997404;
  --danger-border-subtle: #842029;
  --light-border-subtle: #495057;
  --dark-border-subtle: #343a40;
  --heading-color: inherit;
  --link-color: #6ea8fe;
  --link-hover-color: #8bb9fe;
  --link-color-rgb: 110, 168, 254;
  --link-hover-color-rgb: 139, 185, 254;
  --code-color: #e685b5;
  --highlight-color: #dee2e6;
  --highlight-bg: #664d03;
  --border-color: #495057;
}	
:root, [data-theme=dark] {
	--fa-font: "Font Awesome 7 Free";
	--font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
} 
:root {
      --gap: 0.63rem;
      --max-width: 88%;
}

*{ margin: 0; }
a, a:link { text-decoration: none;color: #dce2ea; }
a:link { color: #cbd3df; }
a:visited { color: #9ba2ac;}
a:hover { color: #9ba2ab; }
a:active { color: #dce2ea; }
table { width: 100%; table-layout: auto; vertical-align: middle; }
sup { font-size: 7px; }
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  margin-bottom: 0;
}
h1,.h1 { font-size: 1.8rem; }
h2,.h2 { font-size: 1.4rem; }
h3,.h3 { font-size: 1.25rem; }
h4,.h4 { font-size: 1.15rem; }
h5,.h5 { font-size: 1rem; }
h6,.h6 { font-size: 1rem; }
.top-menu {
    background-color: #131313;
    height: 30px;
    border-bottom: 1px solid #17283c;
}
html { scroll-behavior: smooth; }
.thead {
	background: rgb(23 40 60);
	border-bottom: 1px solid #000;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}
.tborder {
    width: 100%;
    border: 2px solid #141414;
    border-radius: 4px;
}
.trow1, .trow2 {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    background-color: rgb(33 39 53 / 25%);
}

.tcat {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.tcat, .tfoot {
    background-color: #0f1217;
    font-size: 11px;
    vertical-align: middle;
}

.tcat a:link,
.tcat a:visited,
.tcat a:hover,
.tcat a:active {

}
a.mycode_url {
    border: 1px solid #ffffff1a;
    padding: 4px 16px 5px 16px;
    border-radius: 3px;
    background-color: #2c384657;
}
.thead input.textbox,
.thead select {
	border: 1px solid #111;
}
.showthread_header_author {
    float: left;
    width: 180px;
    text-align: center
}

.showthread_header_message {
    padding-left: 186px
}
.popup_menu .popup_item:hover {
	background: #333;
	color: #fff;
}

.tt-suggestion.tt-is-under-cursor {
    background-color: #333;
	color: #fff;
}

.pagination a:hover {
	background-color: #333;
	color: #fff;
	border-color: #000;
}
		
.trow_sep {
    background: #263047;
    color: #c5c5c5;
    padding: .5rem;
    font-size: 12px;
    font-weight: bold;
}
.textbox, input[type="text"], input[type="password"], select, textarea, .editor_dropdown_label {
    padding: 5px 7px;
    border-radius: 2px;
    font: inherit;
    color: #b7bcc3;
    background-color: rgb(33 40 48);
    border: 1px solid rgb(255 255 255 / 15%);
}		
		

body {
    background-color: #0f1217;
    padding: 0;
    margin: 0;
    font-family: var(--font-sans-serif);
    line-height: 1.5;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    color: var(--body-color);
    text-rendering: optimizeLegibility;
}
.header {
    background-color: #0a0b0d;
    border-bottom: 2px solid #17283c;
}
.header > *, .container, .top > div {
    width: 88%;
    margin: 0 auto;
    max-width: var(--max-width)88%;
}
.logo_wrapper {
    text-align: center;
    padding: 30px 0px;
}
.logo {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    width: 96px;
    height: 94px;
    padding: 20px 0 20px;
    background-repeat: no-repeat;
    background-position: center;
}
.fa-background {
      position: relative;
      overflow: hidden;
    }
    .fa-background::before {
      content: "\f084"; 
      font-family: var(--fa-font);
      font-weight: 900;
      font-size: 160px;
      color: rgba(255,255,255,0.08); 
      position: absolute;
      top: 50%;
      left: 90%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 1;
    }
.post-details {
    margin: 0 0 20px 0;
    overflow: hidden;
    display: block;
    vertical-align: middle;
    clear: both;
    font-weight: 500;
}
.post-details dt {
    float: left;
    margin: 0;
    padding: 2px 0;
    color: #808d9a;
    clear: both;
}
.post-details dd  {
    padding: 2px 0;
    float: right;
}
.author_avatar img {
    border-radius: 4px;
}
.nav_menu {
    list-style: none;
    padding: 0;
    border: 2px solid #17283c;
    border-bottom: none;
    background-color: #131313;
    margin: 0 auto;
    position: relative;
    bottom: 0px;
	font-weight: 600;
    border-radius: 4px 4px 0px 0px;
}
.nav_menu:after {
    position: absolute;
    bottom: -2px;
    height: 2px;
    left: 0;
    content: "";
    right: 0;
    width: 100%;
    display: block;
    z-index: 2;
    background-color: #141414;
}
.nav_menu > li:first-child {
    display: none;
}
.nav_menu > li > a {
    display: block;
    padding: 10px 14px;
    text-align: center;
}
.nav_menu > li:first-child > a > i {
    margin-right: 0px;
}
.nav_menu > li > a > i {
    vertical-align: middle;
    margin-right: 6px;
    font-size: 120%;
}
.nav_menu > li:not(.float_right):not(:first-child) {
    display: inline-block;
}
.nav_menu > li > a > span {
    display: inline-block;
    vertical-align: middle;
}
.guest-link-item {
    float: right;
}
.guest-link {
    align-items: center;
    padding: 8px;
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.2s;
}
.guest-link:hover {
     color: #ffffff;
}
.container {
    padding: 10px;
    background-color: #131313;
    box-sizing: border-box;
    border-radius: 0px 0px 4px 4px;
    margin-bottom: 10px;
    border-top: none;
}
.wraper { position: relative; }
.thread-header { padding: 3rem 0 4rem; }
.panel-tools {display: flex; align-items: center; justify-content: space-between;}
.space-tb-20 { margin: 20px 0 20px; }
.breadcrumb {
    padding: 6px 4px;
    margin-bottom: 10px;
    background-color: #151b23;
}
.breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.breadcrumb li {
    float: left;
}
.breadcrumb li.first_crumb > a {
    padding-left: 15px !important;
}
.breadcrumb li a {
    text-align: center;
    text-decoration: none;
    padding: 6px 0 6px 45px;
    background: #304a72;
    position: relative;
    font-size: 11px;
    display: block;
    float: left;
}
.breadcrumb li a:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid #151b23;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 3px;
    left: 100%;
    z-index: 1;
}
.breadcrumb li.first_crumb a span:first-child {
    visibility: hidden;
    display: inline-block;
    width: 1px;
}
.breadcrumb li.first_crumb > a span:last-child {
    background-image: url(/images/logo.png);
    background-size: 100% 100%;
    width: 24px;
    top: 3px;
    z-index: 3;
    left: 10px;
    height: 24px;
    position: absolute;
    background-position: right center;
    background-repeat: no-repeat;
}
.breadcrumb li a:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid #304a72;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
}
.breadcrumb li:not(.first_crumb) a span {
    position: relative;
    left: 3px;
    z-index: 3;
}
.breadcrumb .active {
    background-color: #2a4981;
    transition: none;
    color: #fff;
}
.breadcrumb .active:after {
    border-left-color: #2a4981;
}
.content {}
.content, .footer {
    
    padding: var(--gap);
    background-color: #161a21;
 
}
.footer {
    border-top: 2px solid #304a72;
    border-radius: 0px 0px 3px 3px;
	padding: 7px 10px 7px 10px;
}
.btn-top {
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 50%;
    vertical-align: middle;
    padding: 4px;
    background-color: #212830;
    color: #7c7b7b;
}
.button,.postbit_buttons > a:link,  
.postbit_buttons > a:visited, 
.postbit_buttons > a:active, 
input[type="submit"],
input[type="button"],
.pagination a,
.pagination .pagination_current,
.sceditor-button {
  padding: 5px 12px;
  border-radius: 2px;
  color: #b9b9b9 !important;
  cursor: pointer;
  background-color: #212830;
  border: 1px solid #3d444d;

}
.button:hover,
.postbit_buttons > a:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.pagination a:hover,
.sceditor-button:hover {
  background-color: #262f3f;
}
.pagination .pagination_current {
  background-color: #262f3f;
}
.user-service {
    text-align: center;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 2px;
    padding: 4px;
    display: block;
    vertical-align: middle;
    font-weight: 300;
}
.alert {
  border-radius: 5px;
  padding: 10px 10px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  display: block;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid rgb(255 255 255 / 9%);
}
.alert i {
  flex-shrink: 0;
}

.alert-info {
  background: var( --secondary-bg);
  color: var( --secondary-color);
}
.alert-success {
  background: var(--alert-success-bg);
  color: var(--alert-success-text);
}
.alert-warning {
  background: var(--alert-warning-bg);
  color: var(--alert-warning-text);
}
.alert-error {
  background: var(--alert-error-bg);
  color: var(--alert-error-text);
}


@media (max-width: 560px) {
  .alert {
    font-size: 0.85rem;
    padding: 10px 12px;
  }
}.sharethread a:link {
	color: #0072BC;
	text-decoration: none;
}
.sharethread a:visited {
	color: #0072BC;
	text-decoration: none;
}
.sharethread a:hover,
.sharethread a:active {
	color: #333;
	text-decoration: none;
}
.sharethread {
     float:left;
     display: inline-block;
     vertical-align: middle;
     margin-left: 6px;
     margin-top: 6px;
}
.sharethreadspan {
     color: #333;
     padding-right: 10px;
     font-weight: bold;
}
.post_edit {
    padding-bottom: 1rem;
}
.right {float: right;}
.left {float: left;}
.hidden {display: none;}
.w-25 {width: 25% !important;}
.w-50 {width: 50% !important;}
.w-65 {width: 65% !important;}
.w-75 {width: 75% !important;}
.w-100 {width: 100% !important;}
.w-auto {width: auto !important;}
.mt-1 {margin-top: 1rem;}
.mt-2 {margin-top: 1.2rem;}
.mb-1 {margin-bottom : 1rem;}
.mb-2 {margin-bottom : 1.2rem;}
.mr-1 {margin-right: 1rem;}
.ml-1 {margin-left: 1rem;}
.m-1 {margin: 1rem;}
.m-m {margin: 0.25rem;}
.mr-m {margin-right: 0.25rem;}
.ml-m {margin-left: 0.25rem;}
.container-wrap {
      /* max-width: var(--max-width); */
      /* margin: 0 auto; */
      /* padding: var(--gap); */
    }

    .two-columns {
      display: flex;
      gap: var(--gap);
      align-items: stretch; 
    }

   
    .col--large {
      flex: 3 1 0; /* grow=2, shrink=1 */
      min-width: 0; 
      /* background: #fff; */
      /* border-radius: 8px; */
      /* padding: 1rem; */
      box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }

    
    .col--small {
      flex: 1 1 0; /* grow=1, shrink=1 */
      min-width: 0;
      /* background: #fff; */
      border-radius: 8px;
      /* padding: 1rem; */
      box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }

  
    @media (max-width: 768px) {
      .two-columns {
        flex-direction: column;
      }
    }
a.button.new_reply_button {
	padding: 10px 30px;
}
a.button.new_reply_button span::before {
	
}
@keyframes rainbowFlash {
       0% {  color: red;}
        16% {color: orange;}
		 33% {color: yellow;}
		 50% {color: green;}
		 66% { color: blue;}
	 	 73% { color: indigo;}
		 100% {  color: violet;}
}
.flash-rainbow {
        animation: rainbowFlash 1s infinite;
        font-weight: bold;
}