/* THEME: Synergy Create Default */

/* SECTION: Main Settings --  */

/* Root Variables -- These settings control the looks of all css properties that uses them as value. */

:root {
    --content-max-width: 800px; /*ok*/
    --content-border: none;
    --content-padding: 0;
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

    --font-color: #ffffff;
    --font-size: 16px; /*ok*/
    --font-size-small: 14px; /*ok*/
	--font-size-tiny: 12px; /*ok*/
    --font-size-large: 18px; /*ok*/
    --font-family: 'Arial', sans-serif; /*ok*/

	--link-color: #e8beff;
	--link-hover-color: #a794ff;
	--link-active-color: #f3deff;
	--link-visited-color: rgb(172, 142, 189);
	--link-style: none;

	--margin: 15px;
	--margin-tiny: 3px;
	--margin-small: 10px;
	--margin-large: 20px;

	--padding: 15px;
	--padding-tiny: 3px;
	--padding-small: 10px;
	--padding-large: 20px;

    --primary-color: #d19bfd; /*ok*/
    --primary-variant-color: #bf9bfd;
    --secondary-color: #a794ff; /*ok*/
    --secondary-variant-color: #878ed5;

    --body-background-color: #140023; /*ok*/
    --background-color: #161616; /*ok*/
    --input-background-color: #000000; /*ok*/
    --surface-color: #23232399;
    --surface-highlight-color: #3f3f3f99;
    --border-color: #333333; 

    --on-primary-color: #000000; /*ok*/
    --on-secondary-color: #000000; /*ok*/
    --on-background-color: #ffffff; /*ok*/
    --on-surface-color: #ffffff;
    --on-error-color: #ffffff;
    --on-warning-color: #ffffff; 
    --on-success-color: #ffffff; 

    --error-color: #ff9f9f; 
    --success-color: #b8ffc1; 
    --warning-color: #fff5b2; 
    --highlight-color: #b6cdff;

    --error-background-color: #330505f7; /*ok*/
    --success-background-color: #0f1a00f7; /*ok*/
    --warning-background-color: #362b00; /*ok*/
    --highlight-background-color: #2b003a; /*ok*/
    
    --emphasis-color: #8b26dc;
    --disabled-color: #ffffff38; /*ok*/

    --palette-red: #bf0028; /*ok*/
    --palette-green: green; /*ok*/
    --palette-blue: #4366d7; /*ok*/
    --palette-yellow: #ffcc00; /*ok*/
    --palette-orange: #ff6600; /*ok*/
    --palette-purple: #8b26dc; /*ok*/
    --palette-cyan: #00a8cc; /*ok*/
    --palette-pink: #ff66cc; /*ok*/
    --palette-teal: #00cc99; /*ok*/
    --palette-indigo: #304ffe; /*ok*/
    --palette-brown: #795548; /*ok*/
}

/* Layout reset -- This resets all margins and paddings, to remove any browser defaults. */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Pseudo-elements before -- Ensure that all pseudo-elements also use border-box for box-sizing. */

*::before {
	box-sizing: border-box;
}

/* Pseudo-elements after -- Ensure that all pseudo-elements also use border-box for box-sizing. */
*::after {
	box-sizing: border-box;
}

/* Body -- The main html body element. This determines how your pages display. */

body {
    background-color: var(--body-background-color);
	color: var(--on-background-color);
    font-size: var(--font-size);
    font-family: var(--font-family);
}

.site {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    border: var(--content-border);
    padding: var(--content-padding);
    box-sizing: border-box;
    word-wrap: break-word;
    position: relative;
	box-shadow: var(--box-shadow);
}


.wiki-content {
    padding: var(--padding);
    background-color: var(--surface-color);
    color: var(--on-surface-color);
	box-shadow: var(--box-shadow);
}


.folder-pages {
	margin: 25px;
	border: 1px solid var(--border-color);
	padding: 0 10px;
	background-color: var(--surface-color);
	box-shadow: var(--box-shadow);
}


.logo {
	height: 32px;
	float: left;
}

.footer {
	color: var(--on-background-color);
	text-align: center;
	margin-top: 10px;
	padding: 10px;
}

h1 {
	text-align: center;
	color: var(--primary-color);
	margin: 10px 0 25px 0;
}

h2 {
    color: var(--primary-color);
    margin: 25px 0 15px 0;
}

h3 {
    text-align: left;
    color: var(--primary-color);
    margin: 20px 0 10px 0;
}

h4 {
    text-align: left;
    color: var(--primary-color);
    margin: 15px 0 10px;
}

h5 {
    text-align: left;
    color: var(--primary-color);
    margin: 10px 0 5px 0;
}

h6 {
	color: var(--primary-color);
    margin: 5px 0 5px 0;
}

button {
    background-color: var(--primary-color);
    color: var(--on-primary-color);
    border: none;
    margin: 10px 1px;
    padding: 10px 30px;
    cursor: pointer;
    font-size: var(--font-size);
}

th {
    background-color: var(--secondary-color);
    color: var(--on-secondary-color);
    padding: 5px 10px;
    border: 1px solid var(--border-color);
	margin: 0;
}
td {
    background-color: var(--surface-color);
    color: var(--text-color);
    padding: 10px;
    border: 1px solid var(--border-color);
}

hr {
    border: 1px solid var(--primary-color);
    margin: 20px 0;
}





p {
	margin: 10px 0;
}

pre {
    background-color: var(--input-background-color);
    padding: 10px;
    overflow-x: auto;
	box-shadow: var(--box-shadow);
}

code {
    background-color: var(--input-background-color);
    padding: 2px 4px;
    border-radius: 4px;
}

ul {
    padding: 0;
	margin-left: 20px;
}

li {
    padding: 0;
    margin-left: 20px;
	margin-bottom: 5px;
	margin-top: 5px;
}

a {
	color: var(--link-color);
	text-decoration: var(--link-style);
}
a:hover {
	color: var(--link-hover-color);
}
a:active {
	color: var(--link-active-color);
}
a:visited {
	color: var(--link-visited-color);
}

blockquote {
    margin: 10px 0;
    padding: 10px;
    background-color: var(--input-background-color);
    border-left: 5px solid var(--primary-color);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-color);
  background-color: var(--input-background-color);
  cursor: pointer;
  display: inline-block;
}

input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  /* Add a checkmark or indicator for the checked state */
  position: relative;
}

input[type="checkbox"]:checked::after {
  content: '✔';
  position: absolute;
  top: 0;
  left: 2px;
  font-size: 16px;
  color: var(--on-primary-color);
}

input:disabled {
	background-color: var(--disabled-color);
	color: var(--text-color);
}




/* TOOLBAR */
.toolbar {
	
	background-color: var(--body-background-color);
	box-shadow: var(--box-shadow);
	list-style: none;
	z-index: 3000;
    display: flex;
    gap: 15px;
    align-items: center;
	overflow-x: auto;
    
}

.toolbar > ul {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0;
    padding: 0;
	flex-wrap: wrap;
}

.toolbar li {
    margin: 0;
    padding: 0;
    cursor: pointer;
	white-space: nowrap;
	
}

.toolbar li ul {
    list-style: none;
	font-size: var(--font-size-large);
	border-left: 2px solid var(--primary-color);
	position: absolute;
	background-color: var(--body-background-color);
	padding: 10px 10px 10px 10px;
	margin: 0;
	box-shadow: var(--box-shadow);
	z-index: 3000;
}

.toolbar li ul li {
    font-size: var(--font-size);
    padding: 2px;
}

.toolbar button {
    background-color: var(--body-background-color);
    color: var(--on-background-color);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: var(--font-size);
	margin: 0;
}

.toolbar-separator {
	color: var(--primary-color);
	margin-top: 10px;
}


/* DROPDOWN STYLES */

.dropdown-parent {
    position: relative;
}

.dropdown {
    box-sizing: border-box;
	background-color: var(--input-background-color);
	padding: 8px;
	border: 1px solid var(--border-color);
	border-left: 2px solid var(--primary-color);
	border-top: none;
	box-shadow: var(--box-shadow);
	color: var(--input-text-color);
	width: 100%;
	font-size: var(--font-size);
	position: absolute;
	top: -1px;
	left: 0;
	z-index: 1000;
	
}

.dropdown-button {
	width: 100%;
	cursor: pointer;
}



/* HELPERS */

.hidden {
	display: none;
}

.dragover {
	border: 2px dashed var(--primary-color);
}