/* 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 Wrapper -- This is a div element that sets the boundaries of your site and how elements within are placed. */

.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;
}

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


.message-container {
    position: fixed;
    top: 25px;
    right: calc(10px + env(safe-area-inset-right));
    z-index: 5000;
}
.ui-message-success {
    background-color: var(--success-background-color);
    color: var(--on-success-color);
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
}

.ui-message-fail {
    background-color: var(--warning-background-color);
    color: var(--on-warning-color);
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
}

.ui-message-error {
    background-color: var(--error-background-color);
    color: var(--on-error-color);
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
}

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;
}



/* RESET BROWSER DEFAULTS */
textarea {
    -webkit-appearance: none;
    appearance: none;
}

select {
    -webkit-appearance: none;
    appearance: none;
}

option {
    -webkit-appearance: none;
    appearance: none;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 6px;
    border: 3px solid var(--background-color);
}

button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
	border-left: var(--primary-color) 2px solid;
}

input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; /* Removes native OS styling */
  height: calc(var(--font-size) + 13px);
  border: white solid 1px;
  margin: 2px 0px;
  cursor: pointer;
  background: none;
  padding: 0;
  overflow: hidden; /* Ensures the inner color stays inside the circle */
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0; /* Removes inner default padding */
}

input[type="color"]::-webkit-color-swatch {
  border: none;
 
}

input[type="color"]::-moz-color-swatch {
  border: none;
}

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 {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--border-color);
	background-color: var(--input-background-color);
	color: var(--text-color);
	font-size: var(--font-size);
}

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

textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--border-color);
	background-color: var(--input-background-color);
	color: var(--text-color);
	font-size: var(--font-size);
}

select {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--border-color);
	background-color: var(--input-background-color);
	color: var(--text-color);
	font-size: var(--font-size);
}

/* GENERALISED STYLES */

p {
	margin: 10px 0;
}

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

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);
	box-shadow: var(--box-shadow);
}

/* TEXT */
.centered {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-small {
	font-size: var(--font-size-small);
}

.text-tiny {
	font-size: var(--font-size-tiny);
}

.text-large {
	font-size: var(--font-size-large);
}

.text-muted {
	opacity: 0.6;
}

.text-wrap {
	white-space: normal;
	word-wrap: break-word;
}


.tag {
	cursor: pointer;
	background-color: var(--secondary-color);
	color: var(--on-secondary-color);
	text-decoration: none;
	padding: 2px 5px;
	white-space: nowrap;
}

.tag-selected {
	cursor: pointer;
	background-color: var(--primary-color);
	color: var(--on-primary-color);
	text-decoration: none;
	padding: 2px 5px;
	white-space: nowrap;
}

/* DIV STYLES */
.block {
	display: block;
}
.boxed {
	padding: 20px;
	margin: 50px;
	background-color: var(--surface-background-color);
}

.border {
	border: 1px solid var(--border-color);
}

.border-success {
	border: 2px solid var(--success-color);
	/* transition effect */
	transition: border 0.2s ease;
}

.border-fail {
	border: 2px solid var(--error-color);
	transition: border 0.2s ease;
}

.border-alert {
	border: 2px solid var(--error-color);
	transition: border 0.2s ease;
}

.border-warning {
	border: 2px solid var(--warning-color);
	transition: border 0.2s ease;
}

.border-info {
	border: 2px solid var(--info-color);
	transition: border 0.2s ease;
}

.margin-bottom {
	margin-bottom: var(--margin);
}

.margin-bottom-small {
	margin-bottom: var(--margin-small);
}


.margin-top {
	margin-top: var(--margin);
}

.margin-top-small {
	margin-top: var(--margin-small);
}

.margin-left {
	margin-left: var(--margin);
}

.margin-right {
	margin-right: var(--margin);
}

.margin-sides {
	margin-left: var(--margin);
	margin-right: var(--margin);
}

.margin-vertical {
	margin-top: var(--margin);
	margin-bottom: var(--margin);
}

.margin {
	margin: var(--margin);
}

.margin-tiny {
	margin: var(--margin-tiny);
}

.margin-small {
	margin: var(--margin-small);
}

.margin-large {
	margin: var(--margin-large);
}

/* FLEX LAYOUTS */

.flex-row-center, .flex-row-centered {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}

.flex-row-start, flex-row-left {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.flex-row-end, .flex-row-right{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-gap {
	gap: 10px;
}

.flex-gap-small {
	gap: 3px;
}

.flex-gap-large {
	gap: 20px;
}



.flex-align-center {
	align-items: center;
}

.flex-align-top {
	align-items: top;
}

.flex-align-bottom {
	align-items: bottom;
}

.flex-justify-center {
	justify-content: center;
}
.flex-justify-start {
	justify-content: flex-start;
}
.flex-justify-end {
	justify-content: flex-end;
}

.flex-item-1 {
	flex: 1;
}

.flex-item-2 {
	flex: 2;
}

.flex-label {
	margin-left: 20px;
	width: 100%;
	flex: 1;
}


/* BUTTONS */

.button-large {
	padding: 5px 10px;
	font-size: var(--font-size-large);
}

.button-small {
	padding: 5px 10px;
	font-size: var(--font-size-small);
}

.button-tiny {
	padding: 2px 5px;
	font-size: var(--font-size-tiny);
}

.button-alert {
	background-color: var(--error-background-color);
	color: var(--on-error-color);
}

.button-success {
	background-color: var(--success-background-color);
	color: var(--on-success-color);
}

.button-warning {
	background-color: var(--warning-background-color);
	color: var(--on-warning-color);
}

.button-highlight {
	background-color: var(--highlight-background-color);
	color: var(--on-primary-color);
}

/* MAIN  */
.site-wrapper {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* TOOLBAR */
.toolbar {
	
	background-color: var(--body-background-color);
	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;
}

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

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




.width {
	width: 100%;
}

.width-75 {
	width: 75%;
}

.width-50 {
	width: 50%;
}

.width-33 {
	width: 33%;
}

.width-25 {
	width: 25%;
}


/* 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);
}


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