/* Light Theme (Default) */
body {
    background-color: #ffffff;
    color: #000000;
}
a {
    color: #0000ee; /* Default link color */
}
a:visited {
    color: #551a8b; /* Default visited link color */
}

/* Dark Theme */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}
body.dark-mode a {
    color: #76a9ff; /* Light blue links */
}
body.dark-mode a:visited {
    color: #bb86fc; /* Light purple for visited links */
}
body.dark-mode .copy-me, body.dark-mode .reset-me, body.dark-mode .lock-me {
    border: 1px solid #626a73;
    color:#ddd;
    background-color: #0a0e14;
}

body.dark-mode code {
    border: 1px solid #626a73;
    background-color: #0a0e14;
}

body.dark-mode span.notes {
    background-color: #73735c;
}

body.dark-mode .CodeMirror {
      border: 1px solid #626a73;
}

.CodeMirror {
      border: 1px solid #ddd;
}

#toc-menu{
	width:200px;
	position: fixed;
	top:15px;
	list-style: none;
	padding:5px;
}
#toc-menu li{
	margin-bottom:5px;
	position: relative;
}
.toc-submenu {
    list-style-type: circle;
    padding-left: 15px;
    margin-top: 5px;
}

.expandable .arrow {
    cursor: pointer;
    font-size: 0.8em;
    margin-right: 5px;
    font-weight: bold;
    display: inline-block;
    width: 1em;
}

.expandable .arrow::after {
    content: "▶"; /* Default collapsed icon */
}

.expandable .arrow:not(.collapsed)::after {
    content: "▼"; /* Expanded icon */
}

.innerwrapper{
	margin-left:220px;
}
.footer{
	width: 70%;
	margin: 0 auto;
	font-size:0.8em;
}
code{
	max-height:400px;
	overflow: auto;
	display: block;
	width:90%;
	margin:0 auto;
	background-color: #F3F3F3;
}
span.notes {
    background-color: #FFF9E0;
}
table{border:1px solid #000;border-width: 1px 1px 0px 1px;}
.tbl-title{
	text-align: center;
}
td{
	min-width:150px;
	border-bottom:1px solid #000;
	font-family: monospace;
	padding:3px;
}
td.tbl-jcink{
	border-right:1px solid #000;
}
td.tbl-mybb{
	border-right:1px solid #000;
}
.editor-container {
    margin: 20px 0;
}
span.btn-me {
    width: 100%;
    display: flex;
}
.copy-me, .reset-me, .lock-me {
    display: block;
    margin: 0px;
    border: 1px solid #ddd;
    border-top:0px;
    cursor: pointer;
    text-align: center;
    width:34%;
    background-color:#f7f7f7; 
}
.copy-me{
  border-right:none;
}
.lock-me {
   border-left:none;
}
.copy-me:hover, .lock-me:hover, .reset-me:hover {
    background-color: #ccc;
}