:root
{
	/* Base Colors */
	--plum: #71227E;
	--blue: #3E71E2;
	--red: #F10703;
	--green: #238200;
	--orange: #F27303;
	--pink: #DA01B7;
	/* Complementary Colors */
	--comp-lime: #7ED727;
	--comp-amber: #E2A93E;
	--comp-aqua: #03F1F5;
	--comp-ruby: #820023;
	--comp-cobalt: #037AF2;
	--comp-neon: #01DA24;
	/* Dynamic grayscale (flips in dark mode) */
	--d00: #ffffff;
	--d05: #fbfcfd;
	--d10: #f8f9fa;
	--d15: #f1f3f5;
	--d20: #e9ecef;
	--d25: #dadada;
	--d30: #dee2e6;
	--d35: #d0d3d8;
	--d40: #ced4da;
	--d45: #c0c4cb;
	--d50: #adb5bd;
	--d55: #9ba4ad;
	--d60: #6c757d;
	--d65: #59636b;
	--d70: #495057;
	--d75: #3a3f45;
	--d80: #343a40;
	--d85: #2b2f34;
	--d90: #212529;
	--d95: #15181b;
	--d100: #000000;

	/* Shared (never flips) */
	--s-none: none;
	--s-white: #ffffff;
	--s00: #ffffff;
	--s05: #fbfcfd;
	--s10: #f8f9fa;
	--s15: #f1f3f5;
	--s20: #e9ecef;
	--s25: #dadada;
	--s30: #dee2e6;
	--s35: #d0d3d8;
	--s40: #ced4da;
	--s45: #c0c4cb;
	--s50: #adb5bd;
	--s55: #9ba4ad;
	--s60: #6c757d;
	--s65: #59636b;
	--s70: #495057;
	--s75: #3a3f45;
	--s80: #343a40;
	--s85: #2b2f34;
	--s90: #212529;
	--s95: #15181b;
	--s100: #000000;
}
@media (prefers-color-scheme: dark)
{
	:root
	{
		/* Flipped Grayscale in Dark Mode */
		--d00: #000000;
		--d05: #15181b;
		--d10: #212529;
		--d15: #2b2f34;
		--d20: #343a40;
		--d25: #4b4b4b;
		--d30: #495057;
		--d35: #59636b;
		--d40: #6c757d;
		--d45: #7c8992;
		--d50: #adb5bd;
		--d55: #c0c4cb;
		--d60: #ced4da;
		--d65: #d0d3d8;
		--d70: #dee2e6;
		--d75: #e3e6ea;
		--d80: #e9ecef;
		--d85: #f1f3f5;
		--d90: #f8f9fa;
		--d95: #fbfcfd;
		--d100: #ffffff;
	}
}
.dark-mode {
	--d00: #ffffff;
	--d05: #fbfcfd;
	--d10: #f8f9fa;
	--d15: #f1f3f5;
	--d20: #e9ecef;
	--d25: #dadada;
	--d30: #dee2e6;
	--d35: #d0d3d8;
	--d40: #ced4da;
	--d45: #c0c4cb;
	--d50: #adb5bd;
	--d55: #9ba4ad;
	--d60: #6c757d;
	--d65: #59636b;
	--d70: #495057;
	--d75: #3a3f45;
	--d80: #343a40;
	--d85: #2b2f34;
	--d90: #212529;
	--d95: #15181b;
	--d100: #000000;
}

body,
input:focus,
textarea:focus

{
	color: var(--d60)  !important;
/*
	-webkit-font-smoothing: antialiased;
 */
	font-family: "Helvetica Neue","Love",-apple-system,BlinkMacSystemFont,"Segoe UI",roboto,helvetica,arial,sans-serif;
	font-weight: 400;
	font-size: 1rem;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: var(--d20)  !important;
	margin: 0.85rem;
}
input,
textarea,
select,
.form-control
{
  background-color:  var(--d20)  !important;
  color: var(--d60)  !important;
  caret-color: var(--d60)  !important;
}


label { font-size: .85rem; }

input.editable-cell
{
	/* index */
	width: 100%;
	box-sizing: border-box;
}

input[type="checkbox"]
{
	/* query.css */
	position: relative;
	top: 4px;
	width: 18px;
	height: 18px;
	accent-color: green;
	/* modern browsers */
}

input[type="search"]::-webkit-search-cancel-button
{
	/* query.css */
	border-radius: 50%;
	cursor: pointer;
}

.floating-query-panel input[type="number"]
{
	/* index */
	padding: 3px 06px 3px 10px !important;
	margin-right: 6px;
}

input, .form-control
{
	color: inherit;
	border: none !important;
	border-radius: 0;
	background-color: inherit;
	height: min-content;
	text-wrap: wrap !important;
    margin: 0 !important;
    padding: 4px 0 4px 4px;
}
.input-border {
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 10px;
    outline: none;
    height: min-content;
	/* query.css */
	border-radius: 6px;
    border-color: var(--d90);
	margin-bottom: 10px;
	outline: none;
	height: min-content;
	border: 1px solid var(--d60) !important;
}

.input-border:focus { box-shadow: 0 0 4px var(--blue); }
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: inherit;
    border: 1px solid #ddd;
    padding: 2px 10px;
    font-size: 16px;
    color: inherit;
    /* background-image: url('path_to_your_custom_arrow_image.png'); */
    /* background-position: right 10px center; */
    /* background-repeat: no-repeat; */
}
.searcher
{
	opacity: .9;
	height: 2.2rem;
}

#top_bar
{
    color: var(--s20) !important;
	background-color: var(--s80);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1040;
	margin:0;
	font-size: .85rem;padding
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody
{
	/* index */
	attribute: touch;
	max-height: calc(100vh - 5rem);
}

.host_cu_clone_button
{
	color: inherit;
	font-size: .85rem;
	font-weight: 400;
	line-height: 1;
	border: 1px solid;
	border-radius: 3px;
	padding: 4px 6px 4px 6px;
	height: 23px;
	float: left;
}

.host_cu_clone_button:hover
{
	color: var(--s-white);
	font-weight: 700;
	background-color: var(--blue);
}

.fast-find-results
{
	height: calc(100vh - 130px);
	overflow-x: auto;
	overflow-y: scroll;
	border: 1px solid;
	border-radius: 4px;
}

.fast-find-border
{
	margin-right: 6px;
	border: 1px solid var(--d60) !important;
	width: 100%;
	border-radius: 4px;
	padding: 4px 4px 4px 6px;
}

.active-icon
{
	/* TODO Refactor CSS for icon handling */
	color: var(--blue);
	padding: .2rem .4rem .4rem .4rem;
	float: right;
	font-size: 20px;
}

.inactive-icon
{
	/* Inactive state color */
	color: var(--s30);
	padding: .2rem .4rem .4rem .4rem;
	float: right;
	font-size: 20px;
}
.page-content
{
	padding-top: 1.2rem;
	/* Smooth transition for the blur effect */
	transition: filter 0.3s;
}
#toggleCols { /* query.css */ position: absolute; top: 88px; right: 24px; z-index: 10; }

/*
.host_cu_clone_button_disabled
{
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 4px 6px 4px 6px;
	float: left;
}

.host_cu_clone_button_disabled:hover
{
	color: #eee;
	font-weight: 500;
	background-color: #aaa;
}
 */

table.dataTable
{
	width: 100% !important;
	table-layout: auto;
}

table.dataTable th,
table.dataTable td {
  white-space: nowrap;
}

table.dataTable.no-footer
{
	border-bottom: 1px solid;
	/* inherits currentColor */
}
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
 	padding: 2px 4px 4px 4px;
   border-bottom: none;
}
table.dataTable thead th,
table.dataTable tr td
{
	padding: 2px 4px 4px 4px;
/*
	border-top: 1px solid;
 */
	/* inherits currentColor */
}

table.dataTable tr { padding: 2px 4px 4px 4px; }

/* Hide spinners in WebKit browsers (Chrome, Safari, Edge) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dtfc-fixed-left {
 	z-index: 3;
   left: 0px;
    background-color: var(--d20);
    border-right: 3px solid var(--d20);
}
/*
table.dataTable thead tr > .dtfc-fixed-left,
table.dataTable thead tr > .dtfc-fixed-right,
table.dataTable tfoot tr > .dtfc-fixed-left,
table.dataTable tfoot tr > .dtfc-fixed-right
{
	top: 0;
	bottom: 0;
	z-index: 3;
}
 */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before
{
	right: .01em;
	top: -6px;
	font-size: 32px;
	content: "\02C6" !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after
{
	right: 0.01em;
	top: +2px;
	font-size: 32px;
	content: "\02C7" !important;
}

.nobr {
  white-space: nowrap;
}

.news-card
{
	/* index */
	display: flex;
	gap: .6rem;
	border-bottom: 1px solid #888;
	padding: .2rem 0 .9rem;
	ug box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.news-card img
{
	/* index */
	width: 120px;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
	margin-top: 4px;
}

.news-content
{
	/* index */
	line-height: 115%;
	flex: 1;
}

.news-meta
{
	/* index */
	font-size: 0.85rem;
	font-style: italic;
}

.news-snippet
{
	/* index */
	line-height: 115%;
	margin: 0.3rem 0;
}

.news-title
{
	/* index */
	font-size: 1rem;
	font-weight: bold;
	line-height: 115%;
	text-decoration: none;
	color: inherit;
}

.news-title:hover
{
	/* index */
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted blue;
}

.jvectormap-container
{
	height: 100%;
	width: 100%;
}

.ui-left-square-button,
.ui-left-button,
.ui-center-button,
.ui-right-button
{
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding-left: 6px;
	height: 23px;
	float: left;
}

.ui-90 { width: 90px; }
.ui-120 { width: 120px; }
.ui-110 { width: 110px; }

.ui-left-square-button
{
	border-right: none;
	border-radius: 4px 0 0 4px;
	width: 25px;
	height: 23px;
}

.ui-square-button
{
	width: 25px;
	height: 23px;
}

.ui-left-button
{
	border-right: none;
	border-radius: 4px 0 0 4px;
}

.ui-center-button
{
	border-right: none;
	border-radius: 0;
}

.ui-right-button { border-radius: 0 4px 4px 0; }
.map-button-group .host_cu_clone_button { text-align: center; }
.map-button-group { height: 30px; }

.modal-content {
    background-color: var(--d20);
    color: inherit;
}
.modal-footer  {
	justify-content: center;
}

.close {
    color: inherit;
}

.close:hover {
    color: inherit;
    text-decoration: none;
}
/*
px	rem
9px	0.5625rem
10px	0.625rem
11px	0.6875rem
12px	0.85rem
13px	0.8125rem
14px	0.875rem
15px	0.9375rem
16px	1rem
17px	1.0625rem
18px	1.125rem
19px	1.1875rem
20px	1.25rem
*/


/* Font Face Setup */

@font-face {
	font-family: 'Love';
	src: url('Love-Light.woff2') format('woff2'),
		 url('Love-Light.woff') format('woff'),
		 url('Love-Light.otf') format('opentype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Love';
	src: url('Love-Regular.woff2') format('woff2'),
		 url('Love-Regular.woff') format('woff'),
		 url('Love-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Love';
	src: url('Love-Bold.woff2') format('woff2'),
		 url('Love-Bold.woff') format('woff'),
		 url('Love-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.light-text { font-weight: 300; }
.normal-text { font-weight: 400; }
.bold-text { font-weight: 700; }