/* ============================================
   CLEAN BLOG THEME FOR WACKOWIKI
   Pure CSS, No JS, No Template Changes
   Responsive scroll-driven header
   ============================================ */




blockquote {
font-style: italic;
  color: var(--secondary);
  border-left: 4px solid #0085A1;
  padding-left: 1.5rem;
  margin: 2rem 0;
}
	}

[dir=rtl] blockquote {
	padding: 1.5rem 4rem 1.5rem 1.875rem;
}
blockquote::before {
	color: #9e9e9e;
	font-size: 3rem;
	height: 3rem;
	width: 3rem;
	text-align: center;
	line-height: normal;
	font-family: var(--ww-font-serif);
	margin-left: -3.5rem;
	margin-top: -0.6rem;
}

[dir=rtl] blockquote::before {
	margin-right: -3.5rem;

}







:root {
  --wb-primary: #0085A1;
  --wb-primary-hover: #006d85;
  --wb-text: #212529;
  --wb-secondary: #6c757d;
  --wb-light: #f8f9fa;
  --wb-white: #ffffff;
  --wb-border: #dee2e6;
  --wb-shadow: rgba(0,0,0,0.05);
  --wb-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --wb-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wb-max-width: 800px;
  --wb-header-height: 70px;
}

/* ---- Reset & Base ---- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--wb-sans);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--wb-text);
  background-color: var(--wb-white);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Scroll-Driven Header Animation ---- */
/* Modern browsers: header shrinks and solidifies on scroll */
@supports (animation-timeline: scroll()) {
  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    
    /* Initial large transparent state */
    padding: 2.5rem 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    
    /* Scroll animation */
    animation: header-solidify linear both;
    animation-timeline: scroll(root);
    animation-range: 0 150px;
  }
  
  @keyframes header-solidify {
    to {
      padding: 0.75rem 0;
      background: rgba(255, 255, 255, 0.98);
      border-bottom-color: var(--wb-border);
      box-shadow: 0 2px 10px var(--wb-shadow);
      backdrop-filter: blur(10px);
    }
  }
  
  /* Link colors transition from white to dark */
  #header a,
  #header .menu a {
    color: var(--wb-white);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: link-darken linear both;
    animation-timeline: scroll(root);
    animation-range: 0 150px;
  }
  
  @keyframes link-darken {
    to {
      color: var(--wb-text);
      text-shadow: none;
    }
  }
}

/* Fallback for browsers without scroll-timeline support */
@supports not (animation-timeline: scroll()) {
  #header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--wb-border);
    padding: 1rem 0;
    box-shadow: 0 2px 10px var(--wb-shadow);
    z-index: 1030;
  }
  
  #header a {
    color: var(--wb-text);
  }
}

/* ---- Header Navigation Styling ---- */
#header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  transition: padding 0.3s ease;
}

/* Site name/logo */
#header .site-name,
#header h1:first-child,
#header a[href="/"]:first-of-type {
  font-family: var(--wb-sans);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin: 0;
  order: -1;
}

/* Navigation links */
#header .menu,
#header nav,
#header .navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

#header a,
#header .menu a {
  font-family: var(--wb-sans);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  text-decoration: none;
  padding: 0.5rem;
  transition: color 0.3s;
  white-space: nowrap;
}

#header a:hover {
  color: var(--wb-primary) !important;
}

/* ---- Masthead (Hero Section) ---- */
/* WackoWiki adds handler classes to body or wrapper */
.handler-page #header:first-of-type,
.handler-show #header:first-of-type,
body[class*="page-"] #header:first-of-type {
  position: relative;
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%234a5568" width="1200" height="800"/><path fill="%23718096" d="M0 400L50 383.3C100 367 200 333 300 316.7C400 300 500 300 600 316.7C700 333 800 367 900 383.3C1000 400 1100 400 1150 400L1200 400L1200 800L1150 800C1100 800 1000 800 900 800C800 800 700 800 600 800C500 800 400 800 300 800C200 800 100 800 50 800L0 800Z"/></svg>') center/cover no-repeat;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8rem 1.5rem 4rem;
  margin-bottom: 3rem;
}

/* Override fixed positioning for masthead context */
.handler-page #header,
.handler-show #header {
  animation: none;
  position: relative;
}

@supports (animation-timeline: scroll()) {
  .handler-page #header,
  .handler-show #header {
    animation: masthead-shrink linear both;
    animation-timeline: scroll(root);
    animation-range: 0 300px;
  }
  
  @keyframes masthead-shrink {
    from {
      min-height: 60vh;
      padding-top: 8rem;
      background-position: center 0%;
    }
    to {
      min-height: auto;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
      background-position: center 50%;
    }
  }
}

/* Masthead content (Page Title) */
.handler-page #header h1,
.handler-show #header h1,
.handler-page .page-title,
.handler-show .page-title {
  font-family: var(--wb-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--wb-white);
  margin: 0;
  line-height: 1.1;
  max-width: 900px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Subtitle/Meta under title */
.handler-page .meta,
.handler-show .meta,
.handler-page .info,
.handler-show .info,
.handler-page .user,
.handler-show .user {
  font-family: var(--wb-serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  margin-top: 1rem;
  display: block;
}

/* ---- Main Content Layout ---- */
#page-content,
.content,
#page,
.main-content {
  max-width: var(--wb-max-width);
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* Offset content when header is fixed */
@supports (animation-timeline: scroll()) {
  body:not(.handler-page):not(.handler-show) #page-content {
    margin-top: 100px;
  }
}

/* ---- Typography ---- */
#page-content h1,
.content h1,
article h1 {
  font-family: var(--wb-serif);
  font-size: 2.25rem;
  font-weight: 700;
  /* margin: 3rem 0 1.5rem; */
  line-height: 1.2;
}

@media (max-width: 700px) {

.upload-table td,
.upload-table th {
	vertical-align: top;
	display: -webkit-box;
}

#page-content h1,
.content h1,
article h1 {
  font-family: var(--wb-serif);
  /* font-size: 1.25rem; */
  font-size: 1.8rem;
  font-weight: 700;
  /* margin: 3rem 0 1.5rem; */
  line-height: 1.2;
  hyphens: auto;
}

}


#page-content h2,
.content h2 {
  font-family: var(--wb-serif);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
}

#page-content h3,
.content h3 {
  font-family: var(--wb-sans);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
}

#page-content p,
.content p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* Links */
#page-content a,
.content a,
.wiki-link {
  color: var(--wb-text);
  text-decoration: none;
  border-bottom: 1px solid var(--wb-primary);
  transition: all 0.3s;
}

#page-content a:hover {
  color: var(--wb-primary);
  border-bottom-width: 2px;
}

/* ---- Action Pages (Search, Recent Changes) ---- */
.action-search #page-content,
.action-changes #page-content,
.action-recentchanges #page-content {
  max-width: var(--wb-max-width);
}

/* Post Preview styling for lists */
.page-list,
.changes-list,
.search-results,
.revisions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-list li,
.changes-row,
.search-item,
.revision-item {
  border-bottom: 1px solid var(--wb-border);
  padding: 2.5rem 0;
  transition: background-color 0.2s;
}

.page-list li:hover,
.changes-row:hover {
  background-color: rgba(0,0,0,0.01);
}

/* Page titles as post headings */
.page-list a:first-child,
.changes-row a:first-child,
.search-item .title a {
  font-family: var(--wb-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--wb-text);
  text-decoration: none;
  border-bottom: none;
  display: block;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.page-list a:hover,
.changes-row a:hover {
  color: var(--wb-primary);
}

/* Meta information (date, author) */
.page-list .meta,
.changes-row .time,
.changes-row .user,
.search-item .meta,
.revision-info {
  font-family: var(--wb-sans);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--wb-secondary);
  display: block;
  margin-top: 0.5rem;
}

/* ---- Edit Form ---- */
.handler-edit #page-content {
  max-width: var(--wb-max-width);
}

#edit-form,
.edit-form {
  margin-top: 2rem;
}

#edit-form textarea,
textarea[name="body"],
.edit-content {
  width: 100%;
  min-height: 500px;
  border: 1px solid var(--wb-border);
  padding: 1.5rem;
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  border-radius: 0;
  resize: vertical;
  background-color: var(--wb-light);
  color: var(--wb-text);
}

/* Buttons */
#edit-form input[type="submit"],
#edit-form button,
input[type="submit"],
.button,
.btn,
.action-button {
  font-family: var(--wb-sans);
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  padding: 1rem 2rem;
  background-color: var(--wb-primary);
  color: var(--wb-white);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
  margin: 1rem 0.5rem 0 0;
}

#edit-form input[type="submit"]:hover,
.button:hover {
  background-color: var(--wb-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ---- WackoWiki Specific Classes ---- */
.class-admin,
.class-moderator,
.admin,
.moderator {
  background-color: var(--wb-primary);
  color: var(--wb-white);
  font-family: var(--wb-sans);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  display: inline-block;
  border-radius: 2px;
}

/* X11 Highlights - softened */
.mark-xblue { 
  background-color: #e3f2fd; 
  color: #0d47a1; 
  padding: 0.125rem 0.25rem; 
}
.mark-xgreen { 
  background-color: #e8f5e9; 
  color: #1b5e20; 
  padding: 0.125rem 0.25rem; 
}
.mark-xred { 
  background-color: #ffebee; 
  color: #b71c1c; 
  padding: 0.125rem 0.25rem; 
}

/* Code blocks */
.code,
pre,
.code-block,
.source-code {
  background-color: var(--wb-light);
  border: 1px solid var(--wb-border);
  border-left: 4px solid var(--wb-primary);
  padding: 1.5rem;
  overflow-x: auto;
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 1.5rem 0;
}

/* ---- Footer ---- */
/*  #footer, */
/*  .footer, */
/*  .copyright, */
/*  #copyright { */
/*   border-top: 1px solid var(--wb-border); */
/*   margin-top: 5rem; */
/*   padding: 1rem 1.5rem; */
/*   text-align: center; */
  /* background-color: var(--wb-light); */
  /* font-family: var(--wb-sans); */
  /* font-size: 0.875rem; */
/*   color: var(--wb-secondary); 
} */


#footer a,
.footer a {
  color: var(--wb-text);
  text-decoration: none;
  margin: 0 0.5rem;
  border-bottom: none;
  /* font-weight: 600; */
}

#footer a:hover {
  color: var(--wb-primary);
}

/* ---- Responsive Design ---- */
@media (max-width: 768px) {
  :root {
    --wb-max-width: 100%;
  }
  
  /* Stack navigation on mobile */
  #header {
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  #header .menu,
  #header nav {
    justify-content: center;
    width: 100%;
    gap: 0.25rem;
  }
  
  #header a {
    font-size: 0.7rem;
    padding: 0.4rem;
  }
  
  /* Smaller masthead on mobile */
  .handler-page #header,
  .handler-show #header {
    min-height: 40vh;
    padding: 6rem 1rem 3rem;
  }
  
  .handler-page #header h1,
  .handler-show #header h1 {
    font-size: 1.75rem;
  }
  
  .handler-page .meta,
  .handler-show .meta {
    font-size: 1rem;
  }
  
  /* Content padding */
  #page-content,
  .content {
    padding: 0 1.25rem 2rem;
  }
  
  /* Post previews smaller text */
  .page-list a:first-child,
  .changes-row a:first-child {
    font-size: 1.25rem;
  }
  
  /* Form buttons full width on mobile */
  #edit-form input[type="submit"],
  .button {
    width: 100%;
    margin: 0.5rem 0;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  #header {
    position: static;
    background: white !important;
    color: black !important;
    padding: 1rem 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #ccc;
  }
  
  #header a {
    color: black !important;
    text-shadow: none !important;
  }
  
  .class-admin {
    border: 1px solid #999;
    background: none !important;
    color: black !important;
  }
}
/* basic -------------------------------------------------- */
:root {
	/* --ww-bg-primary: #fcfcfc; */
	/* --ww-bg-secondary: #fff; */
	/* --ww-a-active: #ff0000; */
	--ww-a-hover: #0085a1;
	/* --ww-a-normal: #039; */
	/* --ww-a-target-bg: #fee; */
	/* --ww-a-visited: #900; */
	/* --ww-acl-public: #008000; */
	/* --ww-acl-registered: #039; */
	/* --ww-acl-custom: #ff8a00; */
	/* --ww-acl-private: #ff0000; */
	/* --ww-hover-primary: #cfc; */
	/* --ww-hover-secondary: #e7f9ff; */
	/* --ww-buttonface: rgb(233, 233, 237); */
	/* --ww-buttonhighlight: rgb(255, 255, 255); */
	/* --ww-buttonshadow: rgb(160, 160, 160); */
	/* --ww-buttontext: rgb(0, 0, 0); */
	/* --ww-font-color: #000; */
	/* --ww-font-size: 0.875rem; */
	/* --ww-font-serif: "Times New Roman", Times, serif; */
	/* --ww-font-sans-serif: Verdana, Arial, Helvetica, sans-serif; */
	/* --ww-font-monospace: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; */
}


p,
td,
th,
li,
select,
textarea {
	font-family: var(--ww-font-sans-serif);
	font-size: var(--ww-font-size);
	line-height: 1.3em;
}

/* language specifics */
ol:lang(fa) li {
	list-style-type: persian;
}
ol:lang(hi) li {
	list-style-type: devanagari;
}

/* cellspacing */

table {
	border-collapse: collapse;
	border-spacing: 0;
table-layout: fixed;
}
/* cellpadding */
th,
td {
	padding: 0;
}

label {
	cursor: pointer;
}

/* Textareas */
select,
textarea,
input:not([type]),
input[type="text"],
input[type="password"],
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
	background-color: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
	border: 1px solid #ccc;
	display: inline-block;
	font-size: var(--ww-font-size);
	height: auto;

    padding: 10px 10px 10px 5px;
    margin-bottom: 11px;
    max-width: 100%; 
}

input[type=text]:hover,
input[type=search]:hover,
input[type=email]:hover,
input[type=password]:hover,
textarea:hover {
	border: 1px solid #93cee9;
}

input[type=search]:focus,
{
	border: 1px solid #3daee9;
    width: 670px;
}

textarea:focus, 
input[type=email]:focus,
input[type=text]:focus,
input[type=password]:focus {
	border: 1px solid #3daee9;
}

input[type=checkbox],
input[type=radio] {
	margin-right: 10px;
	margin-left: 8px;
}

input.captcha {
	width: 273px;
}

/* hides dummy field for bots and autocomplete */
input.verify { display: none; }

/* flexible input and textarea fields */
.cols-100 {
	width: 98%;
	max-width: 800px;
}
.cols-80 {
	width: 98%;
	max-width: 700px;
}
.cols-50 {
	width: 98%;
	max-width: 500px;
}
.cols-20 {
	width: 98%;
	max-width: 200px;
}

fieldset {
	padding: 10px;
}

body {
	font-family: var(--ww-font-sans-serif);
	font-size: var(--ww-font-size);
	line-height: 1.3;
	color: var(--ww-font-color);
	background-color: var(--ww-bg-primary);
	margin: 0;
padding-left: 0.8rem;
}

img,
svg,
video {
	border-width: 0;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

audio {
	min-width: 100%;
	max-width: 100%;
}

kbd {
	background-color: #f7f7f7;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
	color: #333;
	display: inline-block;
	font-family: var(--ww-font-sans-serif);
	font-size: 11px;
	line-height: 1.4;
	margin: 0 0.1em;
	padding: 0.1em 0.6em;
	text-shadow: 0 1px 0 #fff;
	white-space: nowrap;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Hyperlinks */
a {
	color: var(--ww-a-normal);
	text-decoration: none;
	/* white-space: nowrap; */
}

a:link {
	/* color: var(--ww-a-normal); */
	text-decoration: underline;
}

a:visited {
	color: var(--ww-a-visited);
}

a:hover {
	color: var(--ww-a-hover);
	text-decoration: underline;
}

a:active {
	color: var(--ww-a-active);
}

a:target {
	background-color: var(--ww-a-target-bg);
}

.heading {
	clear: both;
}
.heading > a.self-link::before {
	content: "§";
	visibility: hidden;
}
.heading:hover > a.self-link::before {
	content: "§";
	visibility: visible;
	text-decoration: none;
}

header h1 > a.edit-section,
.heading > a.edit-section {
	visibility: hidden;
}
header h1:hover > a.edit-section,
.heading:hover > a.edit-section {
	visibility: visible;
	text-decoration: none;
}

a.self-link {
	height: 2em;
	float: left;
	/* line-height: 1; */
	margin-left: -15px;
	padding-right: 4px;
}
[dir="rtl"] a.self-link {
	float: right;
	margin-right: -15px;
	padding-left: 4px;
}
a.self-link:hover {
	text-decoration: none;
}
.heading > a.self-link {
	font-size: 83%;
}

/* a.self-link::before {
	content: "¶"; 
} */

a.edit-section {
	float: right;
	font-size: small;
}
[dir="rtl"] a.edit-section {
	float: left;
}

.clearfix::after,
#mainwrapper::after {
	content: "";
	display: table;
	clear: both;
}

form input.submitinput {
	color: var(--ww-font-color);
}

#header-site,
#header-site h1,
#header-site a,
#header-site a:visited {
	font-size: 1.4rem;
	font-weight: normal;
	color: #444;
	text-decoration: none;
}

#header-files h1,
#header-comments h1 {
	font-size: var(--ww-font-size);
	line-height: 1.3;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

.print {
	font-family: var(--ww-font-sans-serif);
	font-size: 0.75rem;
}

/** message boxes ************************************************************/
.msg {
	position: relative;
	margin: .6rem 0;
	padding: .625rem 2.5rem;
	overflow: auto;
}
.msg::before {
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	top: 0;
	width: 2.5rem;
}
.msg::after {
	position: absolute;
	height: 1rem;
	width: 1rem;
	margin-top: 0;
	top: .6rem;
	left: .6rem;
}
[dir=rtl] .msg::after {
	right: .6rem;
}

.error {
	background: #f8d4cc;
	color: #c33;
	font-weight: bold;
}
.error::after {
	content: url('./../icon/light/cross.svg') " ";
}

.comment-info {
	color: gray;
	border: 1px solid #d5d9e6;
}
.msg.comment-info::after {
	content: url('./../icon/light/comment.svg') " ";
}

.disabled {
	background: #ededed;
	border: 1px solid #cdcdcd;
	font-style: italic;
}
.msg.disabled::after {
	content: url('./../icon/light/info.svg') " ";
}

.revision-info {
	background: #f4fbff;
	border: 1px solid #d5d9e6;
	color: #c33;
	font-weight: bold;
}
.msg.revision-info::after {
	content: url('./../icon/light/revisions.svg') " ";
}

.revision-info button {
	float: left;
	margin-right: 5px;
}

.note {
	background: #f4fbff;
	border: 1px solid #d5d9e6;
	color: #c33;
	font-weight: bold;
}
.msg.note::after {
	content: url('./../icon/light/info.svg') " ";
}

.notice {
	background-color: #ffffef;
	border: 1px dotted #dda;
}
.msg.notice::after {
	content: url('./../icon/light/info.svg') " ";
}

.section-info {
	border: 1px solid #cdcdcd;
	color: gray;
}
.msg.section-info::after {
	content: url('./../icon/light/section.svg') " ";
}

.success {
	background: #e9ffd9;
	color: #008000;
	font-weight: bold;
}
.msg.success::after {
	content: url('./../icon/light/tick.svg') " ";
}

.warning {
	color: #d33;
	background: #fcfcfc;
	border: 1px dotted #d893a1;
	font-weight: bold;
}
.msg.warning::after {
	content: url('./../icon/light/warning.svg') " ";
}

.hint {
	color: #000;
	border: 1px solid #fe6;
	background: #ffd;
}
.msg.hint::after {
	content: url('./../icon/light/important.svg') " ";
}

.rev-overflow {
	overflow: visible;
}

/* Debugging information */
#debug {
	padding: 0 20px 20px;
	float: left;
}
[dir=rtl] #debug {
	float: right;
}
.debug,
#debug li,
#debug pre {
	font-size: 0.6875rem;
	color: #888;
}

.sqllog {
	position: relative;
	/* display: inline-block; */
}

.sqllog .backtrace {
	visibility: hidden;
	width: 30%;
	background-color: #131313;
	color: #fff;
	border-radius: 6px;
	padding: 7px;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: 30px;
	left: 100px;
}

.sqllog:hover {
	border: 1px solid #93cee9;
}

.sqllog:hover .backtrace {
	visibility: visible;
}

pre.help {
	border: 1px solid lightgray;
	border-radius: 3px;
	padding: 10px;
}

header {
	padding: 0;
	width: 96%;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


article header {
	width: 100%;
	display: inline-block;
}

#header-main {
	clear: both;
	overflow: hidden;
	float: left;
	background: var(--ww-bg-secondary);
	width: 100%;
	padding-bottom: 5px;
}

.menu-main {
	float: left;
	background: var(--ww-bg-secondary);
	width: 100%;
	padding-top: 5px;
}

.breadcrumb {
	/* background-color: #fcfcfc; */
	/* border-top: 1px dotted #b2b0b0; */
border-bottom: 1px solid #e9ecef;
	color: #333;
	font-size: 0.75em;
	/* font-weight: normal; */
	/* padding: 1.1em 20px; */
padding: 10px 10px 10px 2px;
	/* margin: 0 0 0 -20px; */
	float: left;
	width: 100%;
	border-top: 1px solid rgb(233, 236, 239);
}


/* top button */
@media (max-width: 768px) {
	.totop-button {
		right: 20px;
		border-width: 0;
		border-style: solid;
		border-radius: 100%;
		border-color: rgba(255, 255, 255, 1.0);
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		/* right: -100px; */
		bottom: 50px;
		width: 40px;
		height: 40px;
		z-index: 1;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
		color: rgba(255, 255, 255, 1.0);
		background-color: transparent;
		transition: all 0.4s ease;
		cursor: pointer;
	}
	/* △ */
	.chevron-up:before {
		content: "^";
	}
	a.chevron-up,
	a.chevron-up:hover,
	a.chevron-up:visited {
		color: rgb(51, 51, 51);
		text-decoration: none;
		margin-top: 5px;
		font-style: normal;
		line-height: 1;
		font-weight: 900;
		font-size: large;
		width: 100%;
		text-align: center;
	}
}

/** Styles for the main content in the page. *********************************/
	/* Default settings */
	
#mainwrapper {
	/* width: 980px; */
	margin: 0 auto 1rem;
}

@media (min-width: 700px) {
	#mainwrapper {
		width: 980px;
	}
}

#mainwrapper > header,
main {
	background-color: var(--ww-bg-secondary);
	/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); */
	padding: 9px 20px 0;
	float: left;
	width: 96%;
	clear: both;
}

article,
#section-content,
#page-show,
#page-edit {
	float: left;
	width: 100%;
}

#section-content,
#page-show,
#page-edit,
#page {
	background-color: var(--ww-bg-secondary);
	min-height: 200px;
}

#section-content,
#page {
	padding: 5px 0 20px;
    margin-bottom: 27px;
}

#page-edit {
	border-bottom: none;
	padding: 5px 0 20px;
}

#page-edit form textarea {
	height: 400px;
	min-height: 5em;
}

#edit_page {
	clear: left;
}

.textarea-page,
.textarea-comment,
.input-title,
.input-summary {
	width: 100%;
}

.source-handler {
	min-height: 200px;
}

footer {
	float: left;
	width: 96%;
}

.footer {
	/* background-color: #f0f4f5; */
	padding: 10px 19px;
	/* border-top: none; */
/* border-top: 1px dotted #ccc; */
border-top: 1px solid #e9ecef;
	/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); */
	margin: 0;
	float: left;
	height: auto;
	overflow: hidden;
	clear: both;
	width: 100%;
margin-top: 25px
}

.article-header-meta {
	float: right;
	color: #808080; 
	line-height: 1.24; 
	white-space: nowrap;
}

.article-header-meta a {
	opacity: 0;
	pointer-events: none;
}
header:hover > span.article-header-meta a {
	opacity: 1;
	pointer-events: auto;
}

.page-meta {
	margin: 0 auto;
	overflow: hidden;
font-size: 12px;
}

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

/*
.page-meta li {
	border-left: 1px dotted #ccc;
	float: left;
	line-height: 1.2em;
	margin: 0 .5em 0 -.5em;
	padding: 0 .5em;
	white-space: nowrap;
}
*/ 

.page-meta li {
	border-left: 1px dotted #ccc;
	float: left;
	line-height: 1.2em;
	margin: 0 0.5em 0 0px;
	padding: 0 .5em;
	white-space: nowrap;
}


[dir="rtl"] .page-meta li {
	border: dotted #ccc;
	border-width: 0 1px 0 0;
	float: right;
	margin: 0 -.5em 0 .5em;
}
.page-meta ul li form {
	display: inline;
}

.page-properties {
	font-size: 0.6875rem;
	color: #aaa;
	text-align: right;
	float: right;
	width: 30%;
}

.section-level {
	color: #aaa;
}

[dir="rtl"] .page-properties {
	text-align: left;
	float: left;
}
.page-properties a {
	color: #aaa;
	font-size: 0.6875rem;
}

/** File and comment-related *************************************************/
	/* Headers (always visible) */
#header-files,
#header-comments {
	/* background-color: #f0f4f5; */
	/* padding: 4px 20px; */
	padding: 4px 0px;
	/* margin: 0 -20px; */
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #eee;
	/* float: left; */
	width: 100%;
}

.files,
.comment,
.category {
	background-color: var(--ww-bg-secondary);
	padding-top: 5px;
	/* margin: 0 -20px; */
	/* border-bottom: 1px solid #eee; */ /* disable for category, last .. */
	/* float: left; */
	width: 100%;
	padding-bottom: 10px;
}

.comment:target {
	border: 2px solid #ff6600;
	padding: 10px 18px;
}

.comment:hover {
	/* background-color: var(--ww-hover-secondary); */
background-color: #fcfcfc;

}

/* comments and files actions (only visible on hover) */
.comment-tools,
.file-tools,
.page-tools {
	visibility: hidden;
}

.newsarticle:hover .page-tools,
.comment:hover .comment-tools,
.file tr:hover .file-tools {
	visibility: visible;
}

.page-tools img,
.comment-tools img {
	float: right;
	padding: 2px;
}
[dir=rtl] .page-tools img,
[dir=rtl] .comment-tools img {
	float: left;
}

li.comment {
	overflow: hidden;
}
ol#comments {
	list-style: none outside none;
	margin: 10px 0 0;
	padding: 0;
}

/* reset nested list syle */
ol#comments ul {
	list-style: disc;
}
ol#comments ul ul {
	list-style: circle;
}
ol#comments ul ul ul {
	list-style: square;
}

/* Comment author and date */
.comment-meta {
	color: #aaa;
	padding: 10px;
	float: right;
}
[dir=rtl] .comment-meta {
	float: left;
}
.comment-meta li {
	border: medium none;
	margin: 0;
	padding: 0;
	/* width: 320px; */
	list-style-type: none;
}

.comment-text,
.comment-tool {
	float: left;
}
[dir=rtl] .comment-text,
[dir=rtl] .comment-tool {
	float: right;
}

.comment-text p {
	width: 800px;
}

.comment-text footer {
	width: 100%;
}

.comment-title h2 {
	font-size: var(--ww-font-size);
	line-height: 22px;
	font-weight: bold;
	margin: 0 0 10px 0;
	border: none;
	clear: left;
}

.comment-preview {
	width: 800px;
}

/* Change summary */
.editnote {
	color: #555;
}

.review {
	font-weight: bold;
}
/*
.filesform,
.commentform {
	padding-left: 20px;
	margin: -1px;
	background-color: #fcfcfc;
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 20px;
	border: 1px solid #fcfcfc;
} */
.filesform,
.commentform {
	padding-top: 20px;
	padding-bottom: 20px;
	/* margin: 20px; */
	background-color: #fcfcfc;
	/* float: left; */
	width: 100%;
	/* padding-top: 10px; */
	/* padding-bottom: 20px; */
	/* border: 1px solid #fcfcfc; */
}

.commentform form {
	width: 100%;
padding: 19px;
}

.commentform form textarea {
	width: 100%;
	height: auto;
	padding: 0;
}


#credits {
	font-size: 0.6875rem;
	/* color: #aaa; */
	/* text-align: right; */
        /* padding: 25px 32px 0; */

padding: 24px 20px 0;
	float: left;
	/* width: 100%; */
	/* display: contents; */
}


[dir=rtl] #credits {
	text-align: left;
	padding: 5px 0 0 20px;
	float: right;
}

#credits a {
	color: #aaa;
}

#credits a:active {
	color: var(--ww-a-active);
}
#credits ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#credits li {
	font-size: 0.6875rem;
	margin-right: 20px;
	float: left;
}

/* Included pages: SYNTAX {{include page="xyz"}} */
.include-page {
	background-color: #fcfcfc;
	padding: 8px;
}

.include-meta {
	text-align: right;
	font-size: 0.6875rem;
}

/* Outgoing hyperlinks: SYNTAX ((https://slashdot.org nerds)) */
.outerlink {
	color: #990000;
}

.missingpage {
	border-bottom: 1px dashed orange;
}

/* search box */
.search input {
	width: 200px;
	padding-right: 25px;
	background-color: transparent;
}
[dir="rtl"] .search input {
	padding: 0 2px 0 25px;
}
.search button {
	height: 30px;
	padding: 1px 6px 4px;
	border-width: 0;
	background-color: transparent;
	margin-left: -30px;
}
[dir=rtl] .search button {
	margin: 0 -30px 0 0;
}
.search button img {
	padding-bottom: 3px;
}

/* replaces inline CSS */
.t-center {
	text-align: center;
}
.t-right {
	text-align: right;
}
.t-left {
	text-align: left;
}

.a-top {
	vertical-align: top;
}

.a-middle {
	vertical-align: middle;
}

a.btn-link {
	text-decoration: none;
}

.nowrap {
	white-space: nowrap;
}

/* files action */

.file {
	width: 100%;
}

.tbl-fixed {
	table-layout: fixed;
}

.file tr:hover {
	background: var(--ww-hover-primary);
}

.file th {
	color: #444;
	font-weight: normal;
	text-align: left;
	width: 130px;
}

.file td,
.file th {
	padding: 2px 5px;
	vertical-align: top;
display: inline-flex;
flex-direction: row;

}
/*
.file td.dt-,
.file td.file- {
	white-space: nowrap;
	color: #000;
	vertical-align: top;
display: flex;
} */

a, a:link .file-link {
	hyphens:auto;
	text-decoration:none;
	word-break: break-all;
}


.file td.dt-,
.file td.file- a:file-link {
	white-space: nowrap;
	color: #000;
	vertical-align: top;
display: flex;
	hyphens:auto;
}

td.file- {
	/* width: 50%; */
}

.file td.dt- {
	padding-right: 0;
}

.file td.tool- {
	padding-right: 0;
	white-space: nowrap;
	/* width: 9%; */
float:right;
}

.file td.size- {
	padding-right: 0;
	text-align: right;
}

.file td.desc- {
	font-size: 80%;
	color: #444;
}

.file td.dt- .dt2-,
.file td .file-tools a,
.file td.size- .size2- {
	font: 11px Tahoma;
	color: #666;
	padding: 5px;
	white-space: nowrap;
}

/* filemeta handler */

.filemeta {
	width: 100%;
}

.filemeta tr:hover {
	background: var(--ww-hover-primary);
}

.filemeta th {
	color: #444;
	font-weight: normal;
	text-align: left;
	width: 130px;
}
[dir=rtl] .filemeta th {
	text-align: right;
}

.filemeta td,
.filemeta th {
	padding: 2px 5px;
	vertical-align: top;
}

.filemeta li {
	list-style-type: none;
	padding-bottom: 5px;
	overflow-wrap: break-word;
}

.filemeta p {
	margin: 0;
}

.filemeta summary {
	color: #444;
}

.file-info {
	overflow-wrap: break-word;
}

.show-image a img {
	border: 4px solid white;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
	margin: 10px 0;
}

.show-image a img:hover {
	box-shadow: 0 0 10px 0 #93cee9;
}

.show-image a img:active {
	box-shadow: 0 0 10px 0 #3daee9;
}

/* caption */
.caption {
	color: #1d1d1d;
	font-size: 0.75rem;
}

.caption-license {
	color: #888;
}

.preview {
	margin: .8em 2px 20px;
	padding: 10px;
	border: red 2px solid;
	display: table;
	width: 98%;
	float: left;
}

p.preview {
	color: red;
	font-weight: bold;
	margin: -1.5em 0 10px;
	padding: 0;
	border: 0;
}

.preview p span {
	background: var(--ww-bg-secondary);
	padding: 0 3px;
	margin-left: -3px;
}

.preview h1 {
	clear: both;
}

.layout-box {
	margin: .8em 2px 2px;
	padding: 10px;
	border: #ccc 1px dotted;
	border-radius: .1rem;
	background-color: #fcfcfc;
}

.layout-box > p {
	background: transparent;
	margin: -1.5em 0 10px;
	padding: 0;
	border: 0;
}

.layout-box > p span {
	background: var(--ww-bg-secondary);
	padding: 0 1px;
}

/* auto-generated footnotes */
.layout-box dd {
	margin: -20px 0 0 50px;
	padding: 0;
	line-height: 25px;
}
[dir="rtl"] .layout-box dd {
	margin: -20px 50px 0 0;
}

*.heading:target,
.layout-box dd:target,
.footnote *:target,
p:target,
a:target {
	background-color: var(--ww-a-target-bg);
}

#footnotes dd:hover,
#footnotes dt:hover + dd {
	background-color: var(--ww-hover-secondary);
}

/** Wikiedit-related (JavaScript) ********************************************/
	/* WikiEdit Toolbar -------------------------------------- */

#buttons_1 {
	clear: none;
	float: left;
	padding: 0;
}
[dir=rtl] #buttons_1 {
	float: right;
}

#buttons_1 li {
	float: left;
	padding-right: 0.2em;
	white-space: nowrap;
	list-style: none outside none;
}
[dir=rtl] #buttons_1 li {
	float: right;
}

.toolbar li {
	background: var(--ww-buttonface);
}

.toolbar .btn-,
.toolbar .btn-hover,
.toolbar .btn-active,
.toolbar .btn-pressed {
	background: var(--ww-buttonface);
	color: var(--ww-buttontext);
	border: 1px solid var(--ww-buttonface);
	padding: 1px;
	margin: 0;
	cursor: pointer;
}

.toolbar .btn-hover {
	border-color: var(--ww-buttonhighlight) var(--ww-buttonshadow) var(--ww-buttonshadow) var(--ww-buttonhighlight);
}

.toolbar .btn-active,
.toolbar .btn-pressed {
	border-color: var(--ww-buttonshadow) var(--ww-buttonhighlight) var(--ww-buttonhighlight) var(--ww-buttonshadow);
}

.toolbar .btn-pressed {
	background: var(--ww-buttonhighlight);
}

.toolbar .btn-separator {
	border-left: 1px solid var(--ww-buttonshadow);
	border-right: 1px solid var(--ww-buttonhighlight);
	height: 20px;
	margin: 3px;
	padding: 0;
	width: 0;
}

.toolbar img, 
.toolbar a img, 
.toolbar span img {
	border: medium none;
	height: 22px;
	width: 22px;
}
.toolbar li img {
	background-size: 22px 22px;
}
.toolbar li.we-h1 img {
	background: url('../../../image/wikiedit/light/h1.svg') no-repeat;
}
.toolbar li.we-h2 img {
	background: url('../../../image/wikiedit/light/h2.svg') no-repeat;
}
.toolbar li.we-h3 img {
	background: url('../../../image/wikiedit/light/h3.svg') no-repeat;
}
.toolbar li.we-h4 img {
	background: url('../../../image/wikiedit/light/h4.svg') no-repeat;
}
.toolbar li.we-h5 img {
	background: url('../../../image/wikiedit/light/h5.svg') no-repeat;
}
.toolbar li.we-h6 img {
	background: url('../../../image/wikiedit/light/h6.svg') no-repeat;
}
.toolbar li.we-bold img {
	background: url('../../../image/wikiedit/light/bold.svg') no-repeat;
}
.toolbar li.we-italic img {
	background: url('../../../image/wikiedit/light/italic.svg') no-repeat;
}
.toolbar li.we-underline img {
	background: url('../../../image/wikiedit/light/underline.svg') no-repeat;
}
.toolbar li.we-strike img {
	background: url('../../../image/wikiedit/light/strike.svg') no-repeat;
}
.toolbar li.we-small img {
	background: url('../../../image/wikiedit/light/small.svg') no-repeat;
}
.toolbar li.we-superscript img {
	background: url('../../../image/wikiedit/light/superscript.svg') no-repeat;
}
.toolbar li.we-subscript img {
	background: url('../../../image/wikiedit/light/subscript.svg') no-repeat;
}
.toolbar li.we-ul img {
	background: url('../../../image/wikiedit/light/ul.svg') no-repeat;
}
.toolbar li.we-ol img {
	background: url('../../../image/wikiedit/light/ol.svg') no-repeat;
}
.toolbar li.we-center img {
	background: url('../../../image/wikiedit/light/center.svg') no-repeat;
}
.toolbar li.we-justify img {
	background: url('../../../image/wikiedit/light/justify.svg') no-repeat;
}
.toolbar li.we-right img {
	background: url('../../../image/wikiedit/light/right.svg') no-repeat;
}
.toolbar li.we-outdent img {
	background: url('../../../image/wikiedit/light/outdent.svg') no-repeat;
}
.toolbar li.we-indent img {
	background: url('../../../image/wikiedit/light/indent.svg') no-repeat;
}
.toolbar li.we-hr img {
	background: url('../../../image/wikiedit/light/hr.svg') no-repeat;
}
.toolbar li.we-signature img {
	background: url('../../../image/wikiedit/light/signature.svg') no-repeat;
}
.toolbar li.we-quote img {
	background: url('../../../image/wikiedit/light/quote.svg') no-repeat;
}
.toolbar li.we-source img {
	background: url('../../../image/wikiedit/light/source.svg') no-repeat;
}
.toolbar li.we-code img {
	background: url('../../../image/wikiedit/light/code.svg') no-repeat;
}
.toolbar li.we-action img {
	background: url('../../../image/wikiedit/light/action.svg') no-repeat;
}
.toolbar li.we-footnote img {
	background: url('../../../image/wikiedit/light/footnote.svg') no-repeat;
}
.toolbar li.we-createlink img {
	background: url('../../../image/wikiedit/light/link.svg') no-repeat;
}
.toolbar li.we-createtable img {
	background: url('../../../image/wikiedit/light/table.svg') no-repeat;
}
.toolbar li.we-textred img {
	background: url('../../../image/wikiedit/light/textcolor.svg') no-repeat;
}
.toolbar li.we-highlight img {
	background: url('../../../image/wikiedit/light/highlight.svg') no-repeat;
}
.toolbar li.we-about img {
	background: url('../../../image/wikiedit/light/about.svg') no-repeat;
}
.toolbar li.we-help img {
	background: url('../../../image/wikiedit/light/help.svg') no-repeat;
}
	/* WikiEdit Autocomplete --------------------------------- */
.autocomplete-inplace {
	background: var(--ww-buttonface);
	border: 1px solid var(--ww-buttonshadow);
	padding: 2px;
	font: 12px var(--ww-font-sans-serif);
}

.autocomplete-inplace div {
	padding: 2px 5px;
	cursor: pointer;
}

.autocomplete-inplace div.ac-over- {
	color: #fff;
	background: #1e9905;
}

.cssform {
	/* background: #1e9905; */
max-width=100%
}
	

/* CSS form formatter */
.cssform p {
	/* width: 320px; */
	clear: left;
	margin: 0;
	padding: 14px 5px 8px 5px;
	/*width of left column containing the label elements*/
	height: 1%;
}
[dir=rtl] .cssform p {
	clear: right;
	/* padding: 5px 155px 8px 0; */
}

.cssform label {
	/* float: left; */
	/* margin-left: -155px; */ /*width of left column*/
	/* width: 150px; */
	/*width of labels. Should be smaller than left column (155px) to create some right margin*/
}
[dir=rtl] .cssform label {
	float: right;
	margin-left: unset;
	/* margin-right: -155px; */
}

.cssform input[type="text"] {
	 width: 180px; 
}

.cssform textarea {
	width: 570px;
	height: 50px;
}

.form-tbl {
	width: 100%;
}

.form-tbl td,
.form-tbl th {
	padding: 3px;
	margin: 0;
}

.form-tbl td {
	text-align: left;
	vertical-align: top;
}
[dir=rtl] .form-tbl td {
	text-align: right;
}

.form-tbl td label {
	color: #666;
}

.form-tbl th {
	color: #444;
	font-weight: bold;
	text-align: right;
	vertical-align: top;
	padding-right: 20px;
}

.form-options {
	background-color: #ededed; 
	border: 1px solid #cdcdcd; 
	padding: 10px;
}

.btn-right {
	float: right;
}

.permissions col:nth-child(1) {
	width: 10%;
}
.permissions col:nth-child(2) {
	width: 70%;
}

.account col:nth-child(1),
.properties col:nth-child(1) {
	width: 30%;
}
.account col:nth-child(2),
.properties col:nth-child(2) {
	width: 70%;
}

/* Actions --------------------------------------------------*/
.smaller {
	font-size: 0.8em;
}

/* calendar action */
.calendar { margin: 10px;}
.calendar:hover { background-color: var(--ww-hover-secondary);}
.calendar-month {}
.calendar th {padding: 5px;}
.calendar td {padding: 5px; text-align: right;}
.calendar-hl {color: red; font-weight: bold;}

/* feed action */
.feed {
	overflow: auto;
}

.feed-note {
	font-size: 0.6875rem;
	color: #777;
}

.feed-note a {
	color: #777;
}

.feed-note span {
	border-bottom: 1px dotted;
}

.feed-element-title {
	/* We're going to add some space next to the titles so we can fit the 16x16 favicon image. */
	background: transparent no-repeat 0 1px;
	padding-left: 0;
	font-size: 1rem;
}

.feed h2 {
	font-size: 0.875rem;
	border-bottom: none;
}

/* search action */
.search-meta {
	color: #808080; 
	line-height: 1.24; 
	/* white-space: nowrap; */
}

/* gallery action */
div.gallery,
table.gallery {
	width: 100%;
	text-align: center;
}

.gallery td:nth-child(n) {
	text-align: center;
}

.gallery figure {
	display: inline-table;
}

.gallery figure:hover {
	background-color: var(--ww-hover-primary);
}

.gallery figcaption {
	display: table-caption;
	caption-side: bottom;
}

/* Handlers --------------------------------------------------*/

/* languages */

.lang-link {
	float: right;
}

/* menu 

#menu-user {
	float: left;
} */

#menu-user {
	float: left;
	font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
	font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
	hyphens:auto;
}



[dir=rtl] #menu-user {
	float: right;
	text-align: right;
}

#menu-user li {
	border-left: 1px dotted #aaa;
	float: left;
	line-height: 1.2em;
	margin: 0 .5em 0 -.5em;
	padding: 0.2em 0.5em;
	/* white-space: nowrap; */
}
[dir=rtl] #menu-user li {
	border: dotted #aaa;
	border-width: 0 1px 0 0;
	float: right;
}

#menu-user li:first-child {
	border-left: 1px none;
}
[dir=rtl] #menu-user li:first-child {
	border-right: 1px none;
}
#menu-user li:first-child.active {
	margin-left: -6px;
	padding-left: 6px;
}
[dir=rtl] #menu-user li:first-child.active {
	margin-left: unset;
	margin-right: -6px;
	padding-right: 6px;
}

#menu-user li.active {
	/* font-weight: 600; */
	/* background: #439ce8 linear-gradient(to bottom, #43ace8, #4383e8) repeat-x; */
	/* border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); */
	/* color: #fff; */
	/* text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); */
	font-weight: 700;
}

#menu-user ul ul li {
	border-left: none;
	padding: 0 .5em;
}
#menu-user ul ul li.active,
#menu-user ul ul li:first-child.active {
	padding: 0;
	margin: 0;
}

#menu-user li a {
	display: inline;
	border: none;
	text-decoration: none;
	color: rgba(0,0,0,.5);
}

#menu-user li a:visited {
	color: var(--ww-a-normal);
}

#menu-user li a:hover {
	color: #212529;

	/*
	color: var(--ww-a-hover);
	text-decoration: underline;
	*/
}

#menu-user li a:active {
	color: var(--ww-a-active);
}

#search-box {
	margin: 0 auto;
	overflow: hidden;
	/* float: right; */
float:left;
	text-align: left;
	position: relative;
	/* height: 25px; */
max-width:100%;
margin-top:13px;
}

#header-site {
	margin: 0 auto;
	overflow: hidden;
	float: left;
	text-align: left;
	position: relative;
	font-size: 1.3em;
}
[dir=rtl] #header-site {
	float: right;
	text-align: left;
}

#login-box {
	font-size: 0.75rem;
	margin: 0 auto;
	overflow: hidden;
	float: right;
	text-align: left;
	position: relative;
}
[dir=rtl] #login-box {
	float: left;
	text-align: left;
}

#login-box form {
	display: inline;
}

#login-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#login-box li {
	border-left: 1px solid #aaa;
	float: left;
	line-height: 1.2em;
	margin: 0 .5em 0 -.5em;
	padding: 0 .5em;
	white-space: nowrap;
}

#login-box li a {
	display: inline;
	border: none;
	text-decoration: none;
}

#login-box li a:visited {
	color: var(--ww-a-normal);
}

#login-box li a:hover {
	color: var(--ww-a-hover);
	text-decoration: underline;
}

#login-box li a:active {
	color: var(--ww-a-active);
}

/* temp */
.topnav {
	float: right;
	font-size: 0.6875em;
	margin-top: 0.9375em;
}

.topnav ul,
.topnav li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.topnav ul {
	display: block;
}

.topnav li {
	display: inline;
	margin-right: 1.1em;
}

/*search*/
.highlight {
	background-color: #ffa;
	font-style: normal;
	font-weight: bold;
}

#search-results li:hover {
	background-color: var(--ww-hover-secondary);
}

#search-results li {
	margin: 1em 0;
}

#search-results h3 {
	font-size: 0.875rem;
	border-bottom: 0 none;
}

/* lists */
.ul-list,
.revisions {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.ul-list ul {
	list-style-type: none;
	padding-left: 20px;
}

@media (max-width: 700px) {
.ul-list ul {
	list-style-type: none;
	padding-left: 20px;
	display: inline;
	hyphens: auto;
}
}

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

.ul-letters ul {
	list-style: none outside none;
	margin: 0;
	padding: 0;
}
.ul-letters li {
	border-left: 1px dotted #aaa;
	float: left;
	line-height: 1.2em;
	margin: 0 0.5em 0 -0.5em;
	padding: 0 0.5em;
	white-space: nowrap;
}
.ul-letters li:first-child {
	border-left: 1px none;
}

.ul-letters li.active   {
	background: var(--ww-hover-primary);
}

/* settings */
.lined td,
.lined th {
	border-bottom: 1px dotted #babfc7;
}

.separator {
	border-bottom: 1px solid #cfd6d9;
	padding-bottom: 20px;
}

.tree {
	text-align: left;
	list-style: none outside none;
	margin: 0;
	padding: 0;
}

.topics tbody:hover,
.revisions li:hover,
.form-tbl tr:hover,
.hl-line li:hover,
.hl-line tr:hover,
tr.lined:hover {
	background: var(--ww-hover-primary);
}

.page-settings {
	float: left;
	width: 60%;
}
[dir="rtl"] .page-settings {
	float: right;
}
.sidebar {
	float: right;
	padding: 0 10px 10px;
}
[dir="rtl"] .sidebar {
	float: left;
}

.menu
{
	list-style: none outside none;
	float: right;
	margin: 0;
	padding: 0;
}
[dir="rtl"] .menu
{
	float: left;
}

.menu li:first-child {
	border-left: 1px none;
}
[dir="rtl"] .menu li:first-child {
	border-right: 1px none;
}

.menu li {
	border-left: 1px dotted #ccc;
	float: left;
	line-height: 1.2em;
	margin: 0 0.5em 0 -0.5em;
	padding: 0 0.5em;
	white-space: nowrap;
}
[dir="rtl"] .menu li {
	border: dotted #ccc;
	border-width: 0 1px 0 0;
	float: right;
}

.menu li.active {
	font-weight: bold;
}

/* news / blog extension ******************************************* */
.news {
	float: left;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

article.feed:hover,
article.newsarticle:hover {
	background: var(--ww-hover-secondary);
}

.news-title {
	font-size: 0.875rem;
	font-weight: bold;
	border: 0 solid red;
	border-left-width: 4px;
	margin-top: 10px;
	padding-left: 9px;
}

.news-info {
	color: #666;
	margin: 4px 0 6px;
}

.news-info span {
	border-bottom: 1px dotted;
}

.news-meta {
	border-bottom: 1px dotted #666;
	height: 30px;
	margin-top: 15px;
	width: 100%;
}

.pagination {
	float: right;
}
[dir=rtl] .pagination {
	float: left;
}

table.formation {
	background-color: #ededed;
	border: 1px solid #cdcdcd;
	border-spacing: 3px;
	border-collapse: separate;
}
table.formation th,
tr.formation th {
	background-color: #ddd;
	letter-spacing: normal;
	border: 1px solid #cdcdcd;
}

table.formation td {
	padding: 3px;
}

/* revisions */
.rev-version {
	display: inline-block;
	width: 40px;
}

.rev-size {
	display: inline-block; 
	width: 170px;
}

.diff-zero {
	background-color: #eee;
	color: #777;
	font-style: italic;
}

.diff-pos {
	background-color: #efe;
	color: #080;
}

.diff-neg {
	background-color: #fee;
	color: #c00;
	font-style: italic;
}

/* menus -----------------------------------------*/

#menu-global {
	float: right;
	margin: 4px 30px 0 0;
}

#menu-global ol {
	list-style: outside none none;
	margin: 0;
	padding: 0;
}
#menu-global li {
	display: inline-block;
	font-size: smaller;
	font-weight: bold;
	padding: 0 5px;
}
#menu-global a {
	border: medium none;
	color: #babdb6;
	display: inline;
	padding: 0;
	text-decoration: none;
}
#menu-global a:link,
#menu-global a:visited {
	color: #babdb6;
}
#menu-global a:hover {
	color: var(--ww-a-hover);
	text-decoration: underline;
}

#page-handler {
	float: right;
	margin-top: 44px;
}
[dir=rtl] #page-handler {
	float: left;
}

#page-handler li.search {
	padding-bottom: 0;
}

#page-handler li.active {
	border: 1px solid #aaa;
	border-bottom-width: 0;
	background-color: #fcfcfc;
}

#page-handler ul ul li.active {
	border: 1px solid #aaa;
	border-right-color: #ccc;
	border-bottom: 0 #ccc;
	background-color: #fcfcfc;
	width: 100%;
	padding: 0;
	margin-left: -1px;
}

/* submenu items */
.submenu ul {
	background: var(--ww-bg-secondary);
	list-style: none;
	margin: 0;
	padding-left: 0;
}
[dir=rtl] .submenu ul {
	padding-right: 0;
}
/*
.submenu li {
	background: transparent;
	display: block;
	float: left;
	padding: 1px 6px 4px;
	position: relative;
	text-decoration: none;
	transition-duration: 0.5s;
}
*/
.submenu li {
	background: #fff;
	display: block;
	float: left;
	padding: 1px 6px 4px;
	position: relative;
	text-decoration: none;
	transition-duration: 0.5s;
}

[dir=rtl] .submenu li {
	float: right;
}

.submenu li:hover,
.submenu li:focus-within {
	cursor: pointer;
}

.submenu li:focus-within a {
	outline: none;
}

.submenu ul li ul {
	background: var(--ww-bg-secondary);
	visibility: hidden;
	opacity: 0;
	min-width: 5rem;
	position: absolute;
	transition: all 0.5s ease;
	margin-top: 0px;
	padding-top: 4px;
	left: 0;
	border: 1px solid #ccc;
	border-top-width: 0;
	display: none;
	z-index: 1000;
}

.submenu ul li:hover > ul,
.submenu ul li:focus-within > ul,
.submenu ul li ul:hover,
.submenu ul li ul:focus {
	visibility: visible;
	opacity: 1;
	display: block;
}

.submenu ul li ul li {
	clear: both;
	width: 100%;
	white-space: nowrap;
	padding: 0 20px 0 0;
}
[dir=rtl] .submenu ul li ul li {
	padding: 0 0 0 20px;
}

.submenu ul li ul li a,
.submenu ul li ul li > span {
	display: block;
	float: left;
	font-weight: normal;
	line-height: 1.4em;
	width: 100%;
	margin: 0;
	padding: 0.25em 20px 0.2em 0.5em;
}
[dir=rtl] .submenu ul li ul li a,
[dir=rtl] .submenu ul li ul li > span {
	float: right;
	padding: 0.25em 0.5em 0.2em 20px;
}

.submenu li:focus-within a {
	outline: none;
}


.dropdown-arrow {
	font-size: 85%;
	text-decoration: none;
}

.page-handler{
	list-style: none;
}

.page-handler img,
.page-handler a img,
#page-handler img,
#page-handler a img,
#page-handler span img {
	border: medium none;
	height: 16px;
	width: 16px;
}

.page-handler img {
	margin: 2px 5px 2px 0;
}
[dir=rtl] .page-handler img {
	margin: 2px 0 2px 5px;
}

li.m-new img {
	background: url('./../icon/light/page-add.svg') no-repeat;
}
li.m-categories img {
	background: url('./../icon/light/tag.svg') no-repeat;
}
li.m-attachments img {
	background: url('./../icon/light/attachment.svg') no-repeat;
}
li.m-upload img {
	background: url('./../icon/light/upload.svg') no-repeat;
}
li.m-clone img {
	background: url('./../icon/light/copy.svg') no-repeat;
}
li.m-edit img {
	background: url('./../icon/light/edit.svg') no-repeat;
}
li.m-languages img {
	background: url('./../icon/light/languages.svg') no-repeat;
}
li.m-referrers img {
	background: url('./../icon/light/link.svg') no-repeat;
}
li.m-revisions img {
	background: url('./../icon/light/revisions.svg') no-repeat;
}
li.m-remove img {
	background: url('./../icon/light/delete.svg') no-repeat;
}
li.m-purge img {
	background: url('./../icon/light/purge.svg') no-repeat;
}
li.m-rename img {
	background: url('./../icon/light/edit.svg') no-repeat;
}
li.m-properties img {
	background: url('./../icon/light/properties.svg') no-repeat;
}
li.m-permissions img {
	background: url('./../icon/light/permission.svg') no-repeat;
}
li.m-show img {
	background: url('./../icon/light/show.svg') no-repeat;
}
li.m-moderate img {
	background: url('./../icon/light/comment.svg') no-repeat;
}
li.m-print img {
	background: url('./../icon/light/print.svg') no-repeat;
}
li.m-xml img {
	background: url('./../icon/light/xml.svg') no-repeat;
}
li.m-word img {
	background: url('./../icon/light/document.svg') no-repeat;
}
li.m-source img {
	background: url('./../icon/light/text.svg') no-repeat;
}

li.m-search img {
	background: url('./../icon/light/search.svg') no-repeat;
}

.desc-rss-feed {
	float: right;
}
[dir=rtl] .desc-rss-feed {
	float: left;
}

.review1 img,
.review2 img,
.watch-off img,
.watch-on img {
	border: medium none;
	height: 16px;
	width: 16px;
}
.watch-off img {
	background: url('./../icon/light/watch-off.svg') no-repeat;
}
.watch-on img {
	background: url('./../icon/light/watch-on.svg') no-repeat;
}

.review1 img {
	background: url('./../icon/light/review1.svg') no-repeat;
}
.review2 img {
	background: url('./../icon/light/review2.svg') no-repeat;
}

.btn-sm {
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
	display: inline-block;
}
.btn-md {
	background-size: 22px 22px;
	height: 22px;
	width: 22px;
	display: inline-block;
}
.btn-reload {
	background: url('./../icon/light/reload.svg') no-repeat;
}
.btn-menu {
	background: url('./../icon/light/menu.svg') no-repeat;
}

.btn-overflow-menu {
	background: url('./../icon/light/overflow-menu.svg') no-repeat;
}
.btn-addbookmark {
	background: url('./../icon/light/bookmark.svg') no-repeat;
}
.btn-removebookmark {
	background: url('./../icon/light/bookmark-remove.svg') no-repeat;
}
.btn-delete {
	background: url('./../icon/light/delete.svg') no-repeat;
}
.btn-edit {
	background: url('./../icon/light/edit.svg') no-repeat;
}
.btn-copy {
	background: url('./../icon/light/copy.svg') no-repeat;
}
.btn-source {
	background: url('./../icon/light/text.svg') no-repeat;
}
.btn-feed {
	background: url('./../icon/light/feed.svg') no-repeat;
}
.btn-info {
	background: url('./../icon/light/dialog-info.svg') no-repeat;
}
.btn-tick {
	background: url('./../icon/light/tick.svg') no-repeat;
}
.btn-warning {
	background: url('./../icon/light/warning.svg') no-repeat;
}
.btn-add-page {
	background: url('./../icon/light/page-add.svg') no-repeat;
}
.btn-page {
	background: url('./../icon/light/show.svg') no-repeat;
}
.btn-comment {
	background: url('./../icon/light/comment.svg') no-repeat;
}
.btn-attachment {
	background: url('./../icon/light/attachment.svg') no-repeat;
}
.btn-upload {
	background: url('./../icon/light/upload.svg') no-repeat;
}
.btn-unlocked {
	background: url('./../icon/light/unlocked.svg') no-repeat;
}
.btn-locked {
	background: url('./../icon/light/locked.svg') no-repeat;
}
.btn-search {
	background: url('./../icon/light/search.svg') no-repeat;
}
.btn-tag {
	background: url('./../icon/light/tag.svg') no-repeat;
}
.btn-languages {
	background: url('./../icon/light/languages.svg') no-repeat;
}
.btn-revisions {
	background: url('./../icon/light/revisions.svg') no-repeat;
}

.viewed {
	font-weight: 600;
}

.list-count {
	text-align: right; 
	width: 30px; 
	float: left; 
	padding-right: 10px;
}
.list-dt {
	padding-right: 10px;
}

/* most* actions ------------- */
.most-col-num td:nth-child(1)
{
	text-align: right; 
	width: 30px; 
	float: left; 
	padding-right: 10px;
}
.most-col-value td:nth-child(3)
{
	text-align: right; 
	width: 50px; 
	float: left; 
	padding-left: 10px;
}

/* navigation action ------------- */
.nav-chapter {
	background-color: rgb(241, 241, 241);
	padding: 10px;
}
.nav-chapter td:nth-child(1) {
	text-align: left;
	white-space: nowrap;
}
.nav-chapter td:nth-child(2) {
	text-align: center;
	width: 100%;
}
.nav-chapter td:nth-child(3) {
	text-align: right;
	white-space: nowrap;
}

/* upload action ------------- */
.upload-table {
	border-spacing: 3px; 
	border-collapse: separate;
}

.upload-table tr:hover {
	background: var(--ww-hover-primary);
}

.upload-table th {
	color: #444;
	font-weight: normal;
	text-align: left;
	width: 130px;
}

[dir=rtl] .upload-table th{
	text-align: right;
}

.upload-table td,
.upload-table th {
	vertical-align: top;
}

.upload-table td:nth-child(1){
	text-align: right;
	padding-right: 10px;
}

/* users action ------------- */
.user-profile {
	border-spacing: 3px; 
	border-collapse: separate;
}

.user-profile th {
	color: #444;
	font-weight: bold;
	width: 100px;
	white-space: nowrap;
	vertical-align: top;
	padding-right: 20px;
	text-align: left;
}
[dir=rtl] .user-profile th {
	padding: 0 0 0 20px;
	text-align: right;
}

.user-table {
	width: 100%; 
	border-spacing: 3px; 
	border-collapse: separate;
}

.user-table td:nth-child(n+2){
	text-align: center;
}

/* moderate handler ------------- */
table.moderate {
	width: 100%;
	border-spacing: 1px; 
	border-collapse: separate;
}
table.moderate td {
	padding: 4px;
}
.moderate td:nth-child(1) {
	vertical-align: middle;
	width: 10px;
}
.moderate td:nth-child(2) {
	padding-left: 5px;
}
.moderate td:nth-child(n+3) {
	text-align: center;
}
.moderate td:nth-child(4) {
	white-space: nowrap;
}

/* forum extension ******************************************* */

table.forum,
table.topics {
	border: 0 none;
	margin: 0;
	padding: 0;
	width: 100%;
	border-spacing: 3px;
	border-collapse: separate;
}
.forum col:nth-child(1) {
	width: 60%;
}
.forum td:nth-child(1),
.forum td:nth-child(4){
	vertical-align: top;
}
.forum td:nth-child(2),
.forum td:nth-child(3),
.topics td:nth-child(n+2) {
	text-align: center;
}
table.forum th,
table.topics th {
	font-size: 0.75rem;
	text-align: center;
	white-space: nowrap;
	padding: 5px;
}

table.forum td,
table.topics td {
	padding: 5px;
}
.topics tr.topic {
	background-color: #f9f9f9;
}

.forum tbody tr:hover,
.topics tr.topic:hover {
	background-color: var(--ww-hover-secondary);
}

#newtopic:target {
	background-color: var(--ww-a-target-bg);
	display: block;
}

.search-box-right {
	float: right;
}

form.add-topic {
	display: none;
}

/* categories tag ------------- */
.tag {
	background-color: var(--ww-bg-secondary);
	border: 1px solid lightgray;
	border-radius: 3px;
	display: inline-block;
	font-size: 0.75rem;
	line-height: 1;
	margin: 2px 2px 2px 0;
	padding: 0.4em 0.5em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

/* visibility tag ------------- */
.acl-public,
a.acl-public {
	color: var(--ww-acl-public);
	border-color: var(--ww-acl-public);
}
.acl-registered,
a.acl-registered {
	color: var(--ww-acl-registered);
	border-color: var(--ww-acl-registered);
}
.acl-custom,
a.acl-custom {
	color: var(--ww-acl-custom);
	border-color: var(--ww-acl-custom);
}
.acl-private,
a.acl-private {
	color: var(--ww-acl-private);
	border-color: var(--ww-acl-private);
}

/* system message ------------- */
.sys-message {
	font-family: var(--ww-font-monospace);
	background: rgba(51, 51, 51, 0.9) none repeat scroll 0 0;
	bottom: 0;
	color: #ccc;
	left: 0;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 5000;
	padding: 20px 0 20px 20px;
}

@keyframes marquee {
	0%   { text-indent: 800px; }
	100% { text-indent: -800px; }
}
.marquee{
	animation: marquee 50s linear infinite;
	/* font-weight: 800; */
	white-space: nowrap;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: hidden;
}

.marquee:hover {
	animation-play-state: paused;
}

/* noscript ------------- */
.errorbox-js {
	border: 1px solid red;
	font-family: var(--ww-font-monospace);
	margin: 0.5em 0;
	padding: 1em 0.5em;
	text-align: center;
}


/* category handles ------------- */
.set-category {
	border: 1px solid #eee;
	max-height: 400px;
	padding: 10px 0;
	margin-bottom: 27px;
	overflow: auto;
	width: auto;
}

.set-category legend {
	color: #444;
}

.category-browser {
	width: 100%;
}

/* TODO: vertical-align: middle; for input and label */
.category-browser td {
	vertical-align: top;
}

.item-multiplier-x,
.item-multiplier-count {
	color: #767676;
}

.hide-radio input[type="radio"] {
	visibility: hidden;
	/* display: none; */
}

.hide-radio li:hover input[type="radio"], 
.hide-radio li input[type="radio"]:checked
{
	visibility: visible;
}

/* authors action ------------- */
.license-CC-BY {
	background-image:	url('../../../image/cc-by.svg');
	background-repeat:	no-repeat;
	background-position:	0;
	height:	22px;
	width:	22px;
}
.license-CC-ZERO {
	background-image:	url('../../../image/cc-zero.svg');
	background-repeat:	no-repeat;
	background-position:	0;
	height:	22px;
	width:	22px;
}
.license-PD {
	background-image:	url('../../../image/cc-pd.svg');
	background-repeat:	no-repeat;
	background-position:	0;
	height:	22px;
	width:	22px;
}
.license-CC-BY-SA {
	background-image:	url('../../../image/cc-by.svg'),
						url('../../../image/cc-sa.svg');
	background-repeat:	no-repeat,
						no-repeat;
	background-position:	0,
							22px;
	height:	22px;
	width:	44px;
}
.license-CC-BY-ND {
	background-image:	url('../../../image/cc-by.svg'),
						url('../../../image/cc-nd.svg');
	background-repeat:	no-repeat,
						no-repeat;
	background-position:	0,
							22px;
	height:	22px;
	width:	44px;
}
.license-CC-BY-NC {
	background-image:	url('../../../image/cc-by.svg'),
						url('../../../image/cc-nc.svg');
	background-repeat:	no-repeat,
						no-repeat;
	background-position:	0,
							22px;
	height:	22px;
	width:	44px;
}
.license-CC-BY-NC-SA {
	background-image:	url('../../../image/cc-by.svg'),
						url('../../../image/cc-nc.svg'),
						url('../../../image/cc-sa.svg');
	background-repeat:	no-repeat,
						no-repeat,
						no-repeat;
	background-position:	0,
							22px,
							44px;
	height:	22px;
	width:	66px;
}
.license-CC-BY-NC-ND {
	background-image:	url('../../../image/cc-by.svg'),
						url('../../../image/cc-nc.svg'),
						url('../../../image/cc-nd.svg');
	background-repeat:	no-repeat,
						no-repeat,
						no-repeat;
	background-position:	0,
							22px,
							44px;
	height:	22px;
	width:	66px;
}

span.license {
	margin-left: 5px;
}

/* diff handler ------------- */

table.diff {
	width: 100%;
}

.diffmeta-a {
	width: 50%;
}
.diffmeta-b {
	width: 50%;
}

table.diff td {
	vertical-align: top;
}

.diffdown {
	position: relative;
	margin-right: 20px;
	z-index: 100;
}

.diffdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.diffdown-content a {
	color: black;
	padding: 2px 6px;
	text-decoration: none;
	display: block;
}

.diffdown-content a:hover {background-color: var(--ww-hover-primary);}

.diffdown-content span {
	display: inline-block; 
	width: 40px;
}

.diffdown-content .active,
.diffdown-content .active:hover {
	background-color: #4383e8;
	color: white;
}

.diffdown:hover .diffdown-content {
	display: block;
}