:root {
/*	--main-bg-color: #dadada;
	--top-nav-bg-color: #dadada;*/
	--main-bg-color: #6d7280;
	--top-nav-bg-color: #ffffff;
	--top-nav-text-color: #fff;
	--cat-nav-bg-color: #ffffff;
	--light-blue: #2d3033;
	--default-blue: #000000;
	--default-dark: #2d3033;
	--hovercolor: #5b7fff; 
	--button: var(--default-dark);
	--button-hover: #000;
	--panel-bg: rgba(8, 20, 49, 0.72);
	--panel-border: rgba(123, 164, 255, 0.28);
	--panel-highlight: rgba(106, 144, 255, 0.35);
}

body {
	--page-accent: #6f8cff;
}


.clickcount{
	position:absolute;
	left:0;
	top:0;
}
.button{
	background: var(--button);
}
.button:focus, .button:hover{
	background: var(--button-hover);
}
/* Make body 100% of width and height >>> */
html{
	width: 100%;
    height: 100%;
    display: table;
}
body{
    width: 100%;
    display: table-cell;
	
}
/* <<< Make body 100% of width and height */
html{
	background: #ffffff;
	padding: 0;
	margin: 0;
	max-width:100%!important;
	overflow-x: hidden;
}
.register-errors, .login-errors{
	color:red;
}
body{
	width:100%;
	max-width:100%!important;
	overflow-x: hidden;
	padding-top:70px;
	cursor: pointer;
}
/*
body, header, .main-top{
	padding: 0;
	margin: 0;
	width:100%;
	position: relative;
	display: block;
	float:left;
}*/
header {
	position:fixed;
	top:0;
	z-index:3;
	width:100%;
	border-bottom: 1px solid #cacaca;
}
ul, li, li *{
/*	list-style-type: none;*/
	color:var(--default-dark);
}
* {
	cursor: default;
	color:var(--default-dark);
	font-size: 14px;
	font-family: monospace !important;
}
h1{
	font-size: 24px;	
	font-weight: 600;
}
h2{
	font-size: 19px;		
	font-weight: 600;
	margin-top: 30px;
}
i {
	color: #fff;
}
.main-top{
	padding-bottom: 8px;
	background: var(--top-nav-bg-color);
	color: var(--top-nav-text-color);
}/*
.main-top *{
	color: var(--top-nav-text-color);
}
h1{
	color: var(--default-blue);
}*/
.top-bar, .top-bar ul{
	background: var(--top-nav-bg-color);
}
#main-menu, #main-menu *{
	background: var(--cat-nav-bg-color);
}
ul.withliststyles{
	margin-left:20px;
}
.logout{
	height: 50px;
}
#main-menu{
	border-top: 1px solid #fff;
}
.navigationitem.active{
	text-decoration:underline;
}
.message-container{
	padding: 10px;
	position:fixed;
	bottom: 0px;
	right:0px;
	height: 300px;
	width:400px;
	overflow:hidden;
	background: #222;
	color: #cc0;
}
.loginarea input, .loginarea .button, input.link{
	width:100%;
	margin-bottom:10px;
	display:block;
}
.title-bar-title{
	color: var(--top-nav-text-color);
}
.newcategory{
	width: 65%;
    display: block;
    float: left;
    margin-right: 5%;
}
.addcategory{
	width: 14%;
}
.category-navigation a{
	color: #fff;
}
.menu li:not(:first-child):not(:last-child) a{
    margin-top: 17px !important;
    margin-left: 9px !important;
}



@media screen and (min-width: 641px){
.category-navigation{
	display:block;
}
.category-navigation > li{
	display:inline;
	float:left;
}
.title-bar{
	display:none;
}

}



@media screen and (max-width: 640px){
.newcustomer{
	margin-top:60px;
}
.existinglink.editactive{
	padding-bottom: 35px;
}
.iconelement{
	width:50%;
}
}



.main-top .menu>li{
	float:left;
}
.main-top .menu>li:last-child{
	float:right;
}
.main-top .menu>li:first-child{
	float:left;
}
.iconbutton{
	float:left;
	padding:12px;
	margin-right:5px;
}
.existinglink{
	position: relative;
	padding-top:20px;
	border-top:2px solid #fff;
}
.existinglink.editactive{
	background: #eee;
}
.existinglink .columns{
	overflow:hidden;
}
.existinglink small{
	display:none;
}
.existinglink.editactive small{
	display:block;
	color: #777;
}
.existinglink.editactive .functions{
	position: absolute;
	bottom: 0;
	right: 0;
}
a.link{
	white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    float: left;
    display: block;
}
button.button.addcategory{
	width: 40px;
}
.logo{
	width:35px;
	height:35px;
}
.main-top .menu>li>a{
	padding: 0;
}
.close-top-right{
	position: absolute;
	top: 10px;
	right: 10px;
	background: #ffffff; 
	border: 1px solid var(--default-dark);
	color: var(--default-dark);
}
.close-top-right:hover{
	color: var(--hovercolor);
	background: #ffffff;
}
.modal{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:scroll;
	background:#fff;
	display:block;
}
.link-footer{
	width:100%;
	float:left;
	margin-top:20px;
	color: var(--default-dark);
	text-decoration:underline;
}
footer{
	background: #ffffff;
	padding-bottom: 60px;
}
.linklistmainpage a{
	text-decoration:underline;
	margin-top: 15px;
/*	display:block;*/
	margin-bottom: 15px;
}
.linklistmainpage .column{
	height:160px;
}
.linklist{margin-top:80px;}
main {
    width: 100%;
    background: #ffffff;
    padding: 24px;
}
body { background: #ffffff; }

.row.tools-grid{
	max-width: 1040px;
	margin: 0 auto;
	padding: 8px 0 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

.tools-hero{
	cursor: default !important;
	margin-bottom: 14px !important;
	padding: 22px 24px !important;
	background: linear-gradient(140deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08));
	border: 1px solid rgba(220, 232, 255, 0.38) !important;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(7, 20, 53, 0.24);
}

.tools-hero h1{
	margin: 8px 0 6px;
	font-size: 28px;
	line-height: 1.25;
	color: #f8fbff;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

.tools-hero p{
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #e6efff;
	max-width: 800px;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

.tools-hero__badge{
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #10224d;
	background: linear-gradient(90deg, #dff0ff, #d8ddff);
}

.tools-grid .tool-card{
	cursor: pointer;
	margin-bottom: 18px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgba(205, 224, 255, 0.45);
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.13) 36%, rgba(16, 42, 98, 0.62) 100%),
		linear-gradient(180deg, rgba(90, 126, 208, 0.42) 0%, rgba(27, 52, 109, 0.58) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.34),
		0 10px 22px rgba(3, 10, 30, 0.32);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
	border-left: 4px solid color-mix(in srgb, var(--tool-accent, #89acff) 85%, #ffffff 15%);
	position: relative;
	overflow: hidden;
}

.tools-grid .tool-card > * {
	position: relative;
	z-index: 1;
}

.tools-grid .tool-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(130deg, color-mix(in srgb, var(--tool-accent, #89acff) 68%, transparent), transparent 58%);
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 0;
}

.tools-grid .tool-card.medium-6.columns{
	width: 46%;
	margin-left: 2%;
	margin-right: 2%;
}

.tools-grid .tool-card:hover{
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--tool-accent, #89acff) 74%, #dbe9ff 26%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		0 12px 26px color-mix(in srgb, var(--tool-accent, #89acff) 26%, rgba(3, 10, 30, 0.74) 74%);
}

.tools-grid .tool-card:hover::after{
	opacity: 1;
}

.tools-grid-title h1{
	display: none;
}

.tools-grid h2{
	color: #f4f8ff;
	margin-top: 2px;
	margin-bottom: 6px;
	font-size: 24px;
	line-height: 1.25;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	display: flex;
	align-items: center;
	gap: 10px;
}

.tools-grid h2::before{ content: none !important; }


.tools-grid .tool-card h2::before{ content: none !important; }

.tools-grid .tool-card:not([class*="color-"]){
	--tool-accent: var(--accent-home, #89acff);
}


.tools-grid .tool-card--ip{ --tool-accent: var(--accent-ip, #56b5ff); }
.tools-grid .tool-card--compare{ --tool-accent: var(--accent-compare, #8f7eff); }
.tools-grid .tool-card--unserialize{ --tool-accent: var(--accent-unserialize, #2bb5a8); }
.tools-grid .tool-card--json{ --tool-accent: var(--accent-json, #42b883); }
.tools-grid .tool-card--url{ --tool-accent: var(--accent-url, #3c9eff); }
.tools-grid .tool-card--base64{ --tool-accent: var(--accent-b64-decode, #7aa2ff); }
.tools-grid .tool-card--timestamp{ --tool-accent: var(--accent-timestamp, #f0a34b); }
.tools-grid .tool-card--md5{ --tool-accent: var(--accent-md5, #d981ff); }
.tools-grid .tool-card--reverse{ --tool-accent: var(--accent-reverse, #ff8f7a); }
.tools-grid .tool-card--linklister{ --tool-accent: var(--accent-linklister, #47c3d2); }
.tools-grid .tool-card--domain{ --tool-accent: var(--accent-domain, #4ea7ff); }
.tools-grid .tool-card--timer{ --tool-accent: var(--accent-timer, #ff9f4a); }
.tools-grid .tool-card--time{ --tool-accent: var(--accent-time, #ffd166); }
.tools-grid .tool-card--qr{ --tool-accent: var(--accent-qr, #53c0a6); }
.tools-grid .tool-card--render{ --tool-accent: var(--accent-render, #78a6ff); }
.tools-grid .tool-card--chat{ --tool-accent: var(--accent-chat, #ba8bff); }

.tools-grid .tool-card h2::before{ content: none !important; }
.tools-grid .tool-card--ip h2::before{ content: none !important; }
.tools-grid .tool-card--compare h2::before{ content: none !important; }
.tools-grid .tool-card--unserialize h2::before{ content: none !important; }
.tools-grid .tool-card--json h2::before{ content: none !important; }
.tools-grid .tool-card--url h2::before{ content: none !important; }
.tools-grid .tool-card--base64 h2::before{ content: none !important; }
.tools-grid .tool-card--timestamp h2::before{ content: none !important; }
.tools-grid .tool-card--md5 h2::before{ content: none !important; }
.tools-grid .tool-card--reverse h2::before{ content: none !important; }
.tools-grid .tool-card--linklister h2::before{ content: none !important; }
.tools-grid .tool-card--domain h2::before{ content: none !important; }
.tools-grid .tool-card--timer h2::before{ content: none !important; }
.tools-grid .tool-card--time h2::before{ content: none !important; }
.tools-grid .tool-card--qr h2::before{ content: none !important; }
.tools-grid .tool-card--render h2::before{ content: none !important; }
.tools-grid .tool-card--chat h2::before{ content: none !important; }


.tools-grid span{
	color: #dbe5ff;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
	line-height: 1.5;
	display: block;
}

.tools-grid a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	color: #f4f7ff;
	text-decoration-color: rgba(191, 210, 255, 0.72);
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
	font-weight: 600;
}

.tools-grid a:hover{
	color: #ffffff;
	text-decoration-color: var(--tool-accent, #89acff);
}

.chae-toggle{
	margin: 10px auto 30px;
	height: 52px;
	font-size: 42px;
	width: min(980px, 100%);
	display: block;
	text-align: center;
	line-height: 52px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 18px;
	color: #dce7ff;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px rgba(8, 16, 40, 0.5);
}

.chae-toggle:hover,
.chae-toggle:focus{
	background: rgba(20, 42, 92, 0.88);
	border-color: var(--panel-highlight);
}

@media screen and (max-width: 640px){
	main {
		padding: 16px;
	}
	.row.tools-grid{
		padding: 4px 0;
		border-radius: 0;
	}
	.tools-grid .tool-card.medium-6.columns{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.tools-grid .tool-card{
		padding: 10px 12px;
		margin-bottom: 12px;
	}
	.tools-grid h2{
		font-size: 24px;
	}
}
footer{
    float: left;
    width: 100%;
}
.modal{
	overflow-y:scroll;
	margin-top:70px;
	padding:20px;
	overflow-x:hidden;
}
a{
	color: var(--default-dark);
	text-decoration: underline;
	cursor: pointer;
}
a *{
	cursor: pointer;
}
a:focus {
	color: var(--default-dark);
	cursor: pointer;
}
a:hover {
	color: var(--hovercolor);
	cursor: pointer;
}
/* --- Light theme refresh ------------------------------------------------- */
:root {
	--surface-1: #ffffff;
	--surface-2: #f7f9fc;
	--border-color: #e2e8f0;
	--top-nav-bg-color: #ffffff;
	--top-nav-text-color: #0f172a;
	--default-dark: #1f2a44;
	--default-blue: #3d71ff;
	--hovercolor: #5bb3ff;
	--button: linear-gradient(135deg, #3d71ff, #6b5cff);
	--button-hover: linear-gradient(135deg, #5a85ff, #7d6dff);
	--ui-radius: 6px;
	--ui-text: #1f2a44;
	--ui-muted: #64748b;
	--ui-hover-bg: #f1f5f9;
	--ui-border: #e2e8f0;
}

* {
	font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	letter-spacing: 0.01em;
}

html,
body {
	background: #ffffff;
	color: var(--ui-text);
}

body {
	cursor: auto;
}

header { border-bottom: 1px solid #e2e8f0; }

.main-top,
.top-bar,
.top-bar ul {
	background: var(--top-nav-bg-color);
}

.main-top .menu > li > a {
	padding: 0.15rem 0.45rem;
	border-radius: 10px;
	color: var(--ui-text);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.main-top .menu > li > a:hover {
	background: rgba(15, 23, 42, 0.06);
	color: #0f172a;
}

.logo {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

main {
	background: #ffffff;
	padding: 26px 24px;
}

main > .row {
	max-width: 1180px;  /* matches --ae-maxw used by .ae-nav-inner so header & content align */
	margin: 0 auto;
	background: #ffffff;
	border: 0;
	border-radius: 0;
	padding: 24px 28px 30px;  /* matches .ae-nav-inner horizontal padding */
	box-shadow: none;
}

.button {
	background: var(--button);
	border-radius: 8px;
	border: 0;
	color: #ffffff;
	font-weight: 600;
}

.button:focus,
.button:hover {
	background: var(--button-hover);
	color: #ffffff;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
textarea,
select {
	background: #ffffff;
	border: 1px solid var(--ui-border);
	border-radius: 6px;
	color: var(--ui-text);
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"])::placeholder,
textarea::placeholder {
	color: var(--ui-muted);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):hover,
textarea:hover,
select:hover {
	border-color: #94a3b8;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus,
textarea:focus,
select:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--default-blue);
	box-shadow: 0 0 0 3px rgba(61, 113, 255, 0.18);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):-webkit-autofill,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):-webkit-autofill:hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ui-text);
	box-shadow: inset 0 0 0 1000px #ffffff;
	transition: background-color 9999s ease-in-out 0s;
}

.iconelement {
	margin-bottom: 18px;
}

.iconelement a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 10px;
	min-height: 72px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--ui-text);
	background: #ffffff;
	border: 1px solid var(--ui-border);
	box-shadow: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.iconelement a:hover {
	transform: translateY(-2px);
	border-color: #94a3b8;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.clickcount {
	left: 8px;
	top: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(61, 113, 255, 0.12);
	border: 1px solid rgba(61, 113, 255, 0.28);
	color: var(--default-blue);
}

#sigalinks {
	margin-top: 26px;
	padding: 22px;
	border-radius: 8px;
	background: #f7f9fc;
	border: 1px solid var(--ui-border);
}

#sigalinks h2,
#sigalinks a,
#sigalinks .arrow,
#sigalinks .source-link,
#sigalinks .target-link {
	color: var(--ui-text) !important;
}

#sigalinks div {
	margin-bottom: 6px;
}

a {
	color: var(--default-blue);
}

a:hover {
	color: #2752c4;
}

footer {
	background: transparent;
}

footer .row {
	max-width: 1180px;
}

.link-footer {
	color: var(--ui-text);
}

.modal {
	margin-top: 0;
	padding-top: 95px;
	background: rgba(15, 23, 42, 0.55);
	z-index: 12000;
}

.modal > .row,
.modal > div {
	position: relative;
	z-index: 1;
	background: #ffffff;
	color: var(--ui-text);
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 16px 48px rgba(2, 8, 20, 0.18);
}

.modal h1, .modal h2, .modal h3, .modal h4,
.modal p, .modal li, .modal label, .modal span {
	color: var(--ui-text);
}

@media screen and (max-width: 640px) {
	main {
		padding: 16px 10px;
	}

	main > .row {
		border-radius: 0;
		padding: 16px 10px 18px;
	}

	.iconelement a {
		min-height: 66px;
		padding: 12px 8px;
	}
}

@media screen and (max-width: 640px) {
	.tools-hero { padding: 16px !important; }
	.tools-hero h1 { font-size: 22px; }
	.tools-hero p { font-size: 14px; }
}

/* --- Body text colors (light) --- */
h1, h2, h3, h4, h5, h6,
label, strong, span, p, li, div {
	color: var(--ui-text);
}

small,
.muted,
.subtle,
.meta,
.hint,
.help,
.placeholder-text,
.description,
caption {
	color: var(--ui-muted);
}

hr {
	border-color: var(--ui-border);
}

button,
.button,
input,
textarea,
select,
pre,
code,
.pill,
.badge,
.label,
.tag {
	border-radius: var(--ui-radius);
}

.tools-grid .tool-card,
.card,
.section,
.panel,
.formpanel,
.loginarea,
.tablebox {
	transition: background-color .18s ease, border-color .18s ease, transform .16s ease;
}

@media (max-width: 900px) {
	main > .row,
	.row,
	.tools-grid .tool-card,
	.card,
	.section,
	.panel,
	.formpanel,
	.loginarea {
		border-radius: 0;
	}
}