:root {
	/** https://colorffy.com/dark-theme-generator */
	/** https://0to255.com/#59AEDF */
	
    /** CSS DARK THEME PRIMARY COLORS */
	--color-primary-100:  #3f51b5;
	--color-primary-200:  #5962be;
	--color-primary-300:  #7074c6;
	--color-primary-400:  #8587ce;
	--color-primary-500:  #9a9ad7;
	--color-primary-600:  #aeaddf;
	/** CSS DARK THEME SURFACE COLORS */
	--color-surface-100:  #1e2930;
	--color-surface-200:  #333d44;
	--color-surface-300:  #4a5359;
	--color-surface-400:  #61696e;
	--color-surface-500:  #798085;
	--color-surface-600:  #93989c;
	/** CSS DARK THEME MIXED SURFACE COLORS */
	--color-surface-mixed-100:  #222d3c;
	--color-surface-mixed-200:  #37414f;
	--color-surface-mixed-300:  #4e5663;
	--color-surface-mixed-400:  #656c78;
	--color-surface-mixed-500:  #7d838d;
	--color-surface-mixed-600:  #959aa3;

	--shadow: 0px 0px 4px 1px rgba(0,0,0,0.6);

	--success: #34C648;
	--amber: #FCBB40;
	--error: #D6232E;

	--bg: #000;
	--fg: #fff;

/* /\** CSS DARK THEME PRIMARY COLORS *\/ */
/* --color-primary-100:  #59aedf; */
/* --color-primary-200:  #70b7e3; */
/* --color-primary-300:  #85c0e6; */
/* --color-primary-400:  #98c8ea; */
/* --color-primary-500:  #aad1ed; */
/* --color-primary-600:  #bbdaf1;  /\** CSS DARK THEME SURFACE COLORS *\/ */
/* --color-surface-100:  #061822; */
/* --color-surface-200:  #1f2d37; */
/* --color-surface-300:  #37434d; */
/* --color-surface-400:  #515b64; */
/* --color-surface-500:  #6b747c; */
/* --color-surface-600:  #878e94;  /\** CSS DARK THEME MIXED SURFACE COLORS *\/ */
/* --color-surface-mixed-100:  #0e2532; */
/* --color-surface-mixed-200:  #273946; */
/* --color-surface-mixed-300:  #3f4f5b; */
/* --color-surface-mixed-400:  #586670; */
/* --color-surface-mixed-500:  #727e86; */
/* --color-surface-mixed-600:  #8c969d;	 */



/*           /\** CSS DARK THEME PRIMARY COLORS *\/  */
/* --color-primary-100:  #59aedf; */
/* --color-primary-200:  #70b7e3; */
/* --color-primary-300:  #85c0e6; */
/* --color-primary-400:  #98c8ea; */
/* --color-primary-500:  #aad1ed; */
/* --color-primary-600:  #bbdaf1; */
/* /\** CSS DARK THEME SURFACE COLORS *\/  */
/* --color-surface-100:  #1c6894; */
/* --color-surface-200:  #3f78a0; */
/* --color-surface-300:  #5a87ab; */
/* --color-surface-400:  #7298b7; */
/* --color-surface-500:  #8aa8c3; */
/* --color-surface-600:  #a1b9cf; */
/* /\** CSS DARK THEME MIXED SURFACE COLORS *\/  */
/* --color-surface-mixed-100:  #236f9b; */
/* --color-surface-mixed-100:  #175477; */

/* --color-surface-mixed-200:  #447ea6; */
/* --color-surface-mixed-300:  #5e8db1; */
/* --color-surface-mixed-400:  #769dbc; */
/* --color-surface-mixed-500:  #8dacc7; */
/* --color-surface-mixed-600:  #a4bcd2;   */
          
        
}

body {
	background: var(--bg);
	color: var(--fg);
    font-family: "Plus_Jakarta_Sans", "Roboto", -apple-system, "Segoe UI", sans-serif;
    /* font-family: "DM Sans", "Roboto", -apple-system, "Segoe UI", sans-serif; */
	font-weight: 400;
	
	font-size: 92%;
}

hr {
	border: 0;
	min-height: 1px;
	height: 1px;
	background: rgba(255,255,255,.25);
	width: 100%;
	margin: 0;
}

a {
	text-decoration: none;
}

a.external {
    transition: color ease-in-out .3s;
}

a.external:hover {
	text-decoration: underline;
	color: var(--color-primary-600);
}

a.button {
	display: flex; align-items: center; justify-content: center;
	height: 24px;
	border-radius: 12px;
	padding: 0;
	border: none;
	background-color: var(--color-primary-500);
	color: var(--bg);
	font-weight: bold;
    transition: background-color ease-in-out .3s, scale ease-in-out .3s;
	cursor: default;
}

a.button.error {
	background-color: var(--error);
	color: var(--fg);
}

a.button:hover {
	scale: 1.1;
	background-color: var(--color-primary-600);
}

a.button.error:hover {
	scale: 1.1;
	background-color: var(--error);
}

.header,
.left-sidebar,
.right-sidebar,
.footer {
	box-shadow: var(--shadow);
}

.header {
	z-index: 2;
	background: var(--color-surface-mixed-200);
	background: var(--color-surface-100);
}


.main {
	z-index: 0;
}

body.f-x,
.main-content {
	z-index: 0;
	background: var(--color-surface-mixed-100);
}



.left-sidebar {
	z-index: 1;
	background: var(--color-surface-mixed-300);
}

.right-sidebar {
	z-index: 1;
	background: var(--color-surface-mixed-300);
}

.footer {
	z-index: 2;
	background: var(--color-surface-mixed-200);
	background: var(--color-surface-100);
	color: var(--color-surface-600);
}

.card {
	background: var(--color-surface-mixed-200);
	border-radius: 12px;
	padding: 16px;
	display: flex; flex-direction: column;
	gap: 8px;
}

.card .right {
	display: flex;
	justify-content: flex-end;
}

.f-x form {
	background: var(--color-surface-mixed-200);
	border-radius: 12px;
	padding: 16px 32px 16px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* box-shadow: var(--shadow); */
	border: 1px solid rgba(255,255,255,.25);
}

.icn {
	cursor: default;
	font-variation-settings: 'wght' 300;
	color: var(--color-primary-500);
    transition:
		color ease-in-out .3s,
		font-variation-settings ease-in-out .3s,
		scale ease-in-out .3s
	;
}

a:hover .icn {
	color: var(--color-primary-600);
	font-variation-settings: 'wght' 500;
	scale: 1.1;
}

a.selected .icn {
	color: var(--fg);
	font-variation-settings: 'wght' 500;
}

.header .icn {
	font-size: 32px;
	width: 32px; 
	color: var(--color-surface-600);
}

.header a .icn:hover {
	color: var(--color-primary-600);
	scale: 1.1;
}

.menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex; flex-direction: column;
	gap: 12px;
}

.menu-list:not(:last-child) {
	padding-bottom: 1em;
	border-bottom: 1px solid rgba(255,255,255,.25);
}

@media (max-width:768px) {
	.menu-list {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

.menu-list > li > a {
	display: flex;
	align-items: center;
	gap: 12px;
	/* color: #bbc; */
	color: var(--color-surface-600);
    transition: color ease-in-out .3s;
	font-weight: bold;
}

.menu-list .icn {
	color: var(--fg);
}

.menu-list > li > a:hover {
	color: var(--color-primary-600);
}

.menu-list > li.selected > a {
	color: var(--fg);
}

.menu-list > li.selected > a .icn {
	color: var(--fg);
	font-variation-settings: 'wght' 500;
}

.menu-list > li > ul {
	display: none;
	list-style: none;
}

.menu-list > li.selected > ul > li {
}

.menu-list > li.selected > ul {
	display: block;
	margin: .5em;
	color: var(--color-surface-600);
}

.menu-list > li > ul > li {
	margin-bottom: .5em;
}

.menu-list > li > ul > li.selected > a {
	color: var(--fg);
}

table.stripe {
	border-collapse: collapse;
}

.stripe tbody tr:nth-child(even) {
	background: rgba(255,255,255,.1);
}

.stripe tbody th,
.stripe tbody td {
	padding: 2px 4px 2px 4px;
}

.card {
	position: relative;
}

.card .delete,
.card .width {
	position: absolute;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 16px;
	right: 8px;
	top: 8px;
	background: rgba(0,0,0,.3);
	cursor: pointer;
	display: flex;
    transition: opacity ease-in-out .3s;
	opacity: 0;
}

.card .delete * {
	cursor: pointer;
}

.card .width {
	right: unset;
	left: 8px;
}


.card:hover .delete,
.card:hover .width {
	opacity: 1;
}

.card.wide {
	grid-column-start: span 2;
}

@media (max-width:880px) {
	.card.wide {
		grid-column-start: unset;
	}
}

.login a {
    transition: color ease-in-out .3s;
	color: var(--color-primary-300);
	text-decoration: underline;
}

.login a:hover {
	text-decoration: underline;
	color: var(--color-primary-600);
}

dl {
	border: 1px solid rgba(255, 255, 255, .5);
	padding : 16px;
	margin: 0 16px;
}

dl dt {
	font-weight: bold;
	margin: 0 0 .5em 0;
}

dl dd {
	margin: 0 0 .5em 2em;
	color: #bbb;
}