/**************************** COMMON ************************/


/* latin-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw3aXpsog.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	font-family: Montserrat, Segoe UI, Arial;
}

select, input  {
	font-size: 1rem;
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  	backdrop-filter: blur(4px);          /* Optional: Blurs the page content */
}

.tg-mmarker {
	color: red;
	font-weight: 500;
	font-size: 1em;
}


button.tg-uneditable {
	background-color: #ddd !important;
}

label.tg-uneditable {
	color: #ddd !important;
}

.tg-panel {
	border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border: solid 1px;
}

input:focus, select:focus, button:focus, a:focus {
	border-color: rgba(82,168,236,0.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
	outline: 0;
}

:root {
    --orange: #FF8040;
}

.tg-grad-btn {
	/*display: inline-flex;*/
  	padding: 0.625rem 2rem;
  	/*font-family: system-ui, sans-serif;*/
  	font-size: 0.95rem;
  	font-weight: 600;
  	letter-spacing: 0.025em;
  	color: #2d3748;
  
  	/* Styling & Multi-stop Gradient */
  	border: 1px solid #a0aec0 !important;
  	border-radius: 9999px !important; /* Pill shape */
  	cursor: pointer;
  	background: #cecef9;
  	/*background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 40%, #edf2f7 70%, #e2e8f0 100%);*/
  	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  	transition: filter 0.2s ease, transform 0.1s ease;
}

/* Uses brightness filter for efficient hover transition */
.tg-grad-btn:hover {
	filter: brightness(1.05);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.tg-grad-btn:active {
	filter: brightness(0.95);
	transform: scale(0.98);
}

/**************************** LIGHT ************************/

:root.light .tg-good {
	color: green;
}

:root.light .tg-bad {
	color: red;
}

:root.light .tg-bool[tg-value='true']:after {
	color: green;
}

:root.light .tg-bool[tg-value='false']:after {
	color: red;
}

:root.light .tg-bool-rev[tg-value='true']:after {
	color: red;
}

:root.light .tg-bool-rev[tg-value='false']:after {
	color: green;
}

:root.light {
	background: #d3c7c7;
	color: black;
}

:root.light.magpie {
	background: #c7c9d3;
	color: black;
}

:root.light.tiger {
	background: #c7d3ca;
	color: black;
}

:root.light body > header:first-child {
	background: linear-gradient(#f8f8f8, #e0e0e0);
}

:root.light .tg-link-btn a {
	color: var(--orange);
}

:root.light .tg-active-btn {
	color: white;
	background: var(--orange);
	font-weight: 500;
	border: 1px solid #ddd;
	border-radius: 3px;
}

:root.light .tg-active-btn[disabled] {
	background: #bbb;
}

:root.light h1 {
    color: var(--orange);
}

:root.light h2, :root.light .tg-bg-txt {
	color: maroon;
}

:root.light h3 {
	color: var(--orange);
}

:root.light {
	--color-breadcrumb: maroon;
    --background-breadcrumb: transparent;
    --color-breadcrumb-selected: maroon;
    --background-breadcrumb-selected:linen;
    --color-breadcrumb-focus: maroon;;
    /*--background-breadcrumb-focus: lightgoldenrodyellow;*/
    --background-breadcrumb-focus: #c5dbf2;
	--border-breadcrumb: #FF8040;
	--popup-breadcrumb: #f8f8f8;
}

:root.light .tg-panel {
	background-color: #e8e8e8;
    border-color: #ddd;
}

:root.light .tg-panel-header {
	color: maroon;
	background: linear-gradient(lightyellow, #ebe7bd);
	border-width: 1px 0px 0px 0px;
	border-style: dashed;
	border-color: #ddd24e;
}

:root.light .tg-table-header {
	color: maroon;
}

/*
:root.light tg-banner a[aria-current='page'] {
    background-color: lightyellow;
}
*/	

:root.light .tg-formitem > label {
	color: navy;
	font-weight: 600;
}

:root.light form {
	background-color: #faf7f0;
	border: solid 1px #ddd;
}

:root.light dialog {
	background-color: cornsilk;
	border: solid 1px black;
	border-radius: 8px;
	box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.3);
}	

:root.light dialog h2 {
	background: linear-gradient(#f9c37e,#f3ad5a);
}

:root.light .tg-show-validation .tg-formitem:has(input:invalid,select:invalid) {
	background-color: #fcf0ef;
	border: 1px solid red;
	border-radius: 8px;
}

:root.light [role='tab'] {
	background: #f8f8f8;
}

:root.light [role='tab'][aria-selected='true'] {
	background: moccasin;
}

:root.light div.tg-push-button {
	background-color: #e1c7a6;
	color: maroon;
	border: 1px solid #ddd;
	border-radius: 3px;
}

:root.light div.tg-push-button > a {
	color: inherit;
}

:root.light .tg-cookie-manager {
	color: maroon;
	background-color: #f3cfbe;
}

:root.light .tg-cookie-panel button {
	background-color: #f3f3BC;
}

:root.light .tg-product-campaign {
	color: magenta;
}	

:root.light .tg-product-card {
	background: #dbdada;
}	

/**************************** DARK ************************/

:root.dark .tg-good {
	color: #46e346;
}

:root.dark .tg-bad {
	color: #a71c1c;
}

:root.dark .tg-bool[tg-value='true']:after {
	color: #46e346;
	font-weight: 500;
}

:root.dark .tg-bool[tg-value='false']:after {
	color: #a71c1c;
	font-weight: 600;
}

:root.dark .tg-bool-rev[tg-value='true']:after {
	color: #a71c1c;
	font-weight: 600;
}

:root.dark .tg-bool-rev[tg-value='false']:after {
	color: #46e346;
	font-weight: 500;
}


:root.dark {
	background: #312626;
	color: beige;
}	

:root.dark.magpie {
	background: #262731;
}

:root.dark.tiger {
	background: #263128;
}

:root.dark body > header:first-child {
	background: linear-gradient(#373535, black);
}	

:root.dark .tg-active-btn {
	color: #85b8eb;
	background: #333;
	font-weight: 500;
	border: 0px;
	border-radius: 3px;
}		

:root.dark .tg-active-btn[disabled] {
	background: #666;
	color: #333;
}

:root.dark h1 {
	color: var(--orange);
}		

:root.dark h2, :root.dark .tg-bg-txt {
	color: goldenrod;
}		

:root.dark h3 {
	color: black;
}		

:root.dark {
	--color-breadcrumb: lightgoldenrodyellow;
    --background-breadcrumb: transparent;
	/*
    --color-breadcrumb-selected: maroon;
    --background-breadcrumb-selected:linen;
	*/
    --color-breadcrumb-focus: lightgoldenrodyellow;;
    --background-breadcrumb-focus: #6086ad;
	--border-breadcrumb: #FF8040;
	--popup-breadcrumb: #4a4545;
}		

:root.dark .tg-panel {
	background-color: gray;
	border-color: #90954e;
}		

:root.dark .tg-panel h2 {
	color: midnightblue;
}		

:root.dark .tg-panel-header {
	color: #efef00;
	background: linear-gradient(grey,#575151);
}		

:root.dark .tg-table-header {
	color: midnightblue;
}		

:root.dark tg-banner ul {
    color: #e3e380;
}	

/*
:root.dark tg-banner a[aria-current='page'] {
    background-color: #404040;
}
*/	

:root.dark tg-banner li:hover, :root.light .tg-menu li:focus {
	background-color: gray;
}	

:root.dark .tg-formitem > label {
	color: midnightblue;
	font-weight: 600;
}	

:root.dark form {
	background-color: #9f9d99;
	border: solid 1px #ddd;
}	

:root.dark dialog {
	background-color: #b59d91;
	border: solid 1px #7d5151;
	border-radius: 8px;	
	box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.3);
}	

:root.dark dialog h2 {
	background: linear-gradient(#a26419,#825136);
}

:root.dark .tg-show-validation .tg-formitem:has(input:invalid,select:invalid) {
	background-color: #fcf0ef;
	border: 1px solid red;
	border-radius: 8px;
}	

:root.dark [role='tab'] {
	background: #f8f8f8;
}	

:root.dark [role='tab'][aria-selected='true'] {
	background: moccasin;
}	

:root.dark div.tg-push-button {
	background-color: #c5a06f;
	color: white;
	border: 1px solid #ddd;
	border-radius: 3px;
}	

:root.dark div.tg-push-button > a {
	color: inherit;
}	

:root.dark .tg-cookie-manager {
	color: maroon;
	background-color: #fba77d;
}	

:root.dark .tg-cookie-panel button {
	background-color: #f3f3BC;
}	

:root.dark .tg-product-campaign {
	color: yellow;
}	

:root.dark .tg-product-card {
	background: #767676;
}