/*@import url('gray-purple.css');
@import url('light-greens.css');
@import url('beige-darkgray.css');*/
@import url('charcoal-green.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

:root {
/*	--display-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/
	--display-font: 'Montserrat', sans-serif; 
	--display-font-size: 16px;
	--code-font: 'Fira Code', monospace;

	--box-shadow-color: rgba(0, 0, 0, 0.1);

	--warning-background-color: #FFD580;
	--error-background-color: #ffcccc;
	--error-foreground-color: red;
	--success-background-color: #ccffcc;
	--success-foreground-color: green;
	}

html { font-size: var(--display-font-size); font-family: var(--display-font); }

code { font-family: var(--code-font); font-variation-settings: "wght" 450; background-color: var(--background-color); border-left: 5px solid var(--accent-color); border-radius: 0.25rem; display: block; padding: 1.5rem 1.5rem 0.5rem 3rem; margin: 0; position: relative; }
code sl-copy-button { position: absolute; right: 0.25rem; top: 0.25rem; }
.code-title { font-weight: bold; margin: 0 0 0.25rem 0; padding: 0; font-family: var(--display-font); font-size: var(--display-font-size); }

.centeralign { text-align: center; margin: auto; }
.required-missing { background-color: var(--warning-background-color); color: var(--text-color); }
.label { font-weight: bold; text-align: right; }
.unit { margin: 0.5rem 0; padding: 0; }
div.button-bar { text-align: right; margin: 1rem 0; padding: 0; }
div.button-bar .button-bar-message { text-align: left; display: inline-block; width: auto; float: left; margin-top: 5%; font-size: 0.8rem; }
div.button-bar a.button-bar-message { text-decoration: none; }
*::part(form-control) { margin-bottom: 1rem; }
*:last-child::part(form-control) { margin-bottom: 0; }

span.replace-value { display: inline-block; background-color: var(--accent-color); }

.button { background-color: var(--button-background-color); border: 1px solid var(--background-color); color: var(--button-text-color); border-radius: 0.25rem; padding: 0.6rem; margin: 0.5rem; overflow: hidden; font-size: inherit; }
.button:hover { background-color: var(--background-color); }
a.button { text-decoration: none; }
a.button:hover { color: var(--button-text-color); }

.card-container { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0; margin: 1rem; }
.card { background-color: #fff; border-radius: 0.25rem; box-shadow: 0 4px 6px var(--box-shadow-color); flex-basis: 45%; padding: 1rem; }
.card.third { flex-basis: 30%; }
.card-header { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; color: #333; }
.card-body p { margin: 5px 0; color: #555; }
.api-key { font-family: "Courier New", Courier, monospace; background-color: #f8f9fa; padding: 5px; border: 1px solid #ddd; border-radius: 4px; word-break: break-all; display: inline-block; color: #111; }
.card .button-bar { margin-bottom: 0; }

body { margin: 2rem; color: var(--text-color); background-color: var(--page-color); }
h1 { text-align: center; }
h2 { margin: 1rem 0; font-size: 1.4rem; } 
h2.subtitle { margin: 0; font-size: 1.4rem; font-weight: normal; text-align: center; } 
/*h2.subtitle a { text-decoration: none; }*/
h3 { margin: 1rem 0 0 0; font-size: 1.6rem; } 
a { color: var(--link-color); text-decoration: underline; }
a:hover { color: var(--link-color-hover); }
section .title { margin: 0.5rem 0; font-size: 1.6rem; }
section .subtitle { margin: 0.5rem 0; font-size: 1.2rem; }
section .content { margin: 1rem 0; }
section table { margin: 0 0 2rem 0; }

table { border: 1px solid var(--border-color); /*border-radius: 0.25rem;*/ /*margin: auto;*/ border-spacing: 0; overflow: hidden; }
table thead tr { background-color: var(--background-color); }
table thead tr th { padding: 0.5rem; text-align: left; vertical-align: bottom; }
table tbody tr:nth-child(odd) { background-color: var(--background-color); }
table tbody tr td { padding: 0.5rem; }
table caption { caption-side: top; font-weight: bold; text-align: left; margin-bottom: 0.25rem; }
table tbody tr:nth-child(odd) { background-color: inherit; }

.notice-message { font-style: oblique; text-align: center; }
.error-message { text-align: center; margin: 1rem 0; padding: 0.25rem; border: 1px solid var(--error-foreground-color); background-color: var(--error-background-color); color: var(--error-foreground-color); }
.success-message { text-align: center; margin: 1rem 0; padding: 0.25rem; border: 1px solid var(--success-foreground-color); background-color: var(--success-background-color); color: var(--success-foreground-color); }

header { display: flex; flex-flow: row nowrap; justify-content: space-between; height: 4rem; margin: 1rem 0 3rem 0; }
header #page-title { flex-basis: 50%; padding: 0 0 0 6rem; margin: auto 0; font-size: 2rem; height: 100%; background-image: url('../images/SimplQ_Logo_Lime.png'); background-position: top: 0; left: 0; background-size: contain; background-repeat: no-repeat; align-content: center; /*border: 1px solid blue;*/ }
header a { text-decoration: none; color: var(--text-color); }
header a:hover { color: var(--text-color); }
#menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-color); }
header nav { position: relative; align-content: center; }
header nav menu li { display: inline-block; margin: auto 0.5rem auto 0; padding: 0; }
header nav menu li:last-child { margin-right: 0; }
header nav menu li sl-icon-button { color: var(--link-color); }


div.page-content { margin: 2rem 0; }
div.page-content div.column-container { display: flex; flex-flow: row wrap; justify-content: space-between; /*border-top: 1px solid var(--border-color);*/ }
div.page-content div.full-column { flex-basis: 100%; margin: 0 0 2rem 0; }
menu li a { display: block; text-decoration: none; margin: auto; padding: 0.5rem 0.5rem; }
menu li a:hover { background-color: var(--background-color); }

div.page-content iframe { width: 100%; height: 100rem; border: none; }

div.pricing { width: auto; height: fit-content; margin: 0 2rem 2rem 2rem; display: flex; flex-flow: row wrap; justify-content: space-between; }
div.pricing div.option-block { flex-basis: 30%; border: 1px solid var(--border-color); background-color: var(--background-color); border-radius: 0.5rem; padding: 0 0 1.5rem 0; margin: 1rem 0.5rem; overflow: hidden; position: relative; font-size: 0.85rem; }
div.pricing div.option-block .title { font-weight: bold; font-size: 1.5rem; text-align: center; border-bottom: 1px solid var(--border-color); padding: 0.25rem; background-color: var(--accent-color); }
div.pricing div.option-block div.coming-soon { display: none; position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: var(--background-color); opacity: 0.9; }
div.pricing div.option-block div.coming-soon p { width: fit-content; height: fit-content; position: absolute; left: 15%; top: 55%;  margin: 0; padding: 0; font-size: 2rem; font-weight: bold; transform: rotate(-25deg); color: var(--link-color-hover); }
div.pricing div.option-block.coming-soon div.coming-soon { display: block; }
div.option-block p { margin: 0.5rem 1rem; }
div.option-block p.price { font-size: 1.5rem; text-align: center; font-weight: bold; }
div.option-block div.action-block { margin: 1rem 0 0 0; text-align: center; }

ul.features { list-style: none inside; margin: 0; padding: 0 1rem; }
div.block-list { display: flex; flex-flow: row wrap; justify-content: space-between; gap: 1rem; margin: 0 2.5rem; }
div.block-list .block { flex-basis: 15rem; height: 10rem; border: 1px solid var(--border-color); border-radius: 0.25rem; padding: 0; margin: 1rem 0; text-align: center; position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; }
div.block-list .block .fader { height: 100%; width: 100%; position: absolute; background-color: var(--page-color); opacity: .8; z-index: 5; }
div.block-list .block .title { font-weight: bold; position: absolute; width: 100%; height: fit-content; z-index: 10; top: 0.5rem; left: 0; }
div.block-list .block .content { position: absolute; width: 90%; height: fit-content; z-index: 10; top: 2.5rem; left: 5%; }
div.block-list .block.image-processing { background-image: url('../images/Green_Aura_Profile.jpg'); background-size: 150%; }
div.block-list .block.video-processing { background-image: url('../images/Entwined_Film_Reels.jpg'); }
div.block-list .block.cache-preloading { background-image: url('../images/Financial_Trading_App_Close-Up.jpg'); background-size: 150%; }
div.block-list .block.lifo-fifo { background-image: url('../images/Synchronized_Walk.jpg'); background-size: 150%; }
div.block-list .block.availability-scheduling { background-image: url('../images/Vintage_Golden_Analog_Alarm_Clock.jpg'); background-size: 150%; }
div.block-list .block.message-statuses { background-image: url('../images/Bottle_Caps_on_Stone.jpg'); background-size: 150%; }

table.label-value { border: none; color: black; font-size: 0.85rem; margin: 0.5rem auto; width: 100%; }
table.label-value tr { background-color: inherit; }
table.label-value tbody tr:nth-child(odd) { background-color: initial; }
table.label-value tbody tr td:first-child { font-weight: bold; text-align: right; padding: 0; }

div.login-form { max-width: 30rem; margin: auto; }

table.queue-list { margin: 2rem auto; }
/*table.queue-list table { margin: 0 auto; }*/
table.queue-list > thead > tr { background-color: var(--border-color); color: white; }
table.queue-list > tbody > tr { height: 3rem; }
table.queue-list > tbody > tr:nth-child(odd) { background-color: var(--background-color); }
table.queue-list > tbody > tr td.queue-name { text-align: right; font-weight: 600; }
table.queue-list > tbody > tr td.queue-type { text-align: center; }
table.queue-list > tbody > tr td.queue-count { text-align: right; }
table.queue-list > tbody > tr td.queue-status { text-align: center; }
table.queue-list > tbody > tr td.queue-status.active { color: green; }
table.queue-list > tbody > tr td.queue-status.disabled { color: red; }
table.queue-list > tbody > tr td.queue-entries { white-space: nowrap; }

table.queue-list .queue-entry { width: 3rem; height: 100%; display: inline-block; margin: 0.25rem; padding: 0.25rem; border: 1px solid #bbb; border-radius: 0.25rem; text-align: center; background-color: #cfc; position: relative; }
table.queue-list .queue-entry.processing { background-color: #ffc; }
table.queue-list .queue-entry .timestamp { font-size: 0.6rem; }

div.entry-detail-panel { width: 20rem; height: fit-content; position: absolute; top: calc(100% + 0.25rem); left: 0; background: white; border-radius: 1rem; border: 1px solid red; }
div.entry-detail-panel.hidden { display: none; }
div.entry-detail-panel div.title { font-weight: bold; margin: 0.25rem 0; }

div.step-block { width: auto; height: fit-content; border: 1px solid var(--border-color); background-color: var(--background-color); border-radius: 0.5rem; margin: 2rem 0.5rem; padding: 0.5rem 0.5rem 0.5rem 2rem; position: relative; }
div.step-block div.step-title { font-weight: bold; text-transform: capitalize; }
div.step-block div.step-text { margin: 0.5rem 0; padding: 0; }
div.step-block div.step-text p { margin: 0.5rem 0 0 0; padding: 0; }
/*div.step-block div.step-text code { display: block; margin: 0.5rem 0 0 0; padding: 0; }*/
div.step-block div.step-number { position: absolute; top: 0; left: 0; transform: translate(-30%, -20%); padding: 0.6rem; width: 1.2rem; color: white; background-color: var(--accent-color); text-align: center; border-radius: 1.5rem; }

footer { font-size: 0.7rem; }
footer ul { list-style-type: none; text-align: center; margin-block-start: 0; margin-inline-start: 0; padding-inline-start: 0; }
footer ul li { display: inline-block; margin: 0 0.25rem 0 0.25rem; }
footer .copyright { text-align: center; font-style: oblique; }

sl-tab-group { --indicator-color: var(--accent-color); --track-color: var(--page-color); }
sl-tab::part(base):hover { color: var(--link-color-hover); }
sl-tab::part(base):[active] { color: var(--link-color); }
sl-popu::part(popup) { background-color: var(--page-color); }

article.terms-of-service ol { margin: 1rem 0 0.5rem 0; }
article.terms-of-service ol li { margin: 1.5rem 0 0 0; }
article.terms-of-service ol.second-level { margin: 0.25rem 0 0 0; list-style-type: lower-alpha; /* Options: decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, etc. */ }
article.terms-of-service ol.second-level li { margin: 0 0 0.25rem 0; }

article.privacy-policy ol { margin: 1rem 0 0.5rem 0; }
article.privacy-policy ol li { margin: 1.5rem 0 0 0; }
article.privacy-policy ol.second-level { margin: 0.25rem 0 0 0; list-style-type: lower-alpha; /* Options: decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, etc. */ }
article.privacy-policy ol.second-level li { margin: 0 0 0.25rem 0; }

div.top-buttons { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
div.use-counter { display: inline-block; background-color: var(--text-color); border-radius: 0.25rem; padding: 0.5rem; border: 1px solid var(--border-color); color: var(--background-color); text-align: center; width: 100%; }

dialog#edit-queue { position: fixed; top: 10rem; min-width: 40%; }
dialog { border: 1px solid var(--border-color); border-radius: 0.25rem; }
dialog section { margin-bottom: 1rem; }
dialog header { height: initial; }
dialog sl-input { margin-bottom: 0.5rem; }
dialog footer { text-align: right; }

@media (prefers-color-scheme: dark) {
	/*:root {
		--page-color: #04140f;
		--text-color: white;
		--button-text-color: white;
		--button-background-color: #31e0ab;
		--link-color: #c6ded7;
		--link-color-hover: #26ad84;
		--border-color: #c6ded7;
		--background-color: #04140f;
		--accent-color: #698f3f;
		--box-shadow-color: rgba(1, 1, 1, 0.1);
	}
	header #page-title { background-image: url('../images/SimplQ_Logo_White.png'); }
	table.queue-list .queue-entry { color: black; }*/
}


@media only screen and (max-width: 1200px) {
/*	div.pricing div.option-block { flex-basis: 30%; } */
}

@media only screen and (max-width: 1000px) {
	div.pricing div.option-block { flex-basis: 45%; }
}

@media (max-width: 800px) {
	header #page-title { font-size: 1.5rem; }
	#nav-menu { display: none; flex-direction: column; position: absolute; background-color: var(--page-color); top: 100%; right: 0; width: fit-content; border: 1px solid #ccc; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 10; padding: 0; margin: 0; }
	#nav-menu.shown { display: block; }
	#nav-menu li { display: block; padding: 0.5rem; }
	#menu-toggle { display: block; /* Show toggle button */ }
	.card: { flex-basis: 100%; }
}

@media only screen and (max-width: 660px) {
	div.pricing div.option-block { flex-basis: 100%; }
	div.block-list .block { flex-basis: 100%; }
	code { word-break: break-all; }
}