/* Variables */
:root {
--primary: #1d5e55;
--primary-darker: #0f4039;
--primary-superdark: #142f2b;
--primary-lighter: #047b65;
--primary-lighter-font: #3e9d8c;
--primary-highlight: #bad7d2;
--warning: #934f4f;
--highlight: #cedfee;
--grey: #efefef;
}

/* General */
::selection {background-color: var(--primary); color:white}

html {scroll-behavior: smooth;}
body {margin:0; transition: background-color 0.5s ease;}
main {margin:2em 4em; margin-bottom:1em;}
@media only screen and (max-width: 960px) {main {margin:4%;}}

button, .button {border-radius: 0.3em;}
button:disabled {opacity:0.5; background-color:#aaa}
button:disabled {cursor:not-allowed;}
form button.light, form a.light, button.light, .button.light {background-color:white;}
.button.grey {background-color:#ddd; color:#333}
.button.grey:hover {color:white}
.button.danger:hover {background-color:#a02222; color:white}

button.stop {background-color: var(--warning); opacity:0.7}
button.stop:hover {background-color:var(--warning) !important; opacity:1}

select {cursor:pointer;}
form button[type="submit"]:hover, form button[type="submit"]:focus {background-color: var(--primary); outline:none;}
form button:hover, form button:focus, .button:hover, .button:focus {background-color: var(--primary); outline:none;}
h1 > a:hover, h2 > a:hover, h3 > a:hover {color: var(--primary);}
a:link {color: var(--primary)}
a:visited {color:inherit;}

textarea:focus, input:focus, textarea:focus, select:focus {outline: 2px solid var(--primary);}

input[type='checkbox'] {accent-color: var(--primary);}
input[type='checkbox']:focus {outline:none;}

input:disabled, input.disabled {background:#d2d2d2; color:#717171;}

details summary::marker {color:var(--primary)}
details a.button {padding: 0em 0.5em}
summary {max-width: fit-content;}

dialog {background-color: #f0f0f0; border: 1px solid #b9b9b9; border-radius:.5em;}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

h3 a small {font-weight:normal; font-size:0.6em;}
code {white-space: preserve;}


/* Misc Stuff */
.main-form {position:relative;}
.fright + h3 {margin-top:0;}
.ucfirst {text-transform: capitalize}
.mlsmall {margin-left:0.4em;}
.no-select {user-select: none;}
hr.large {margin:3em 0;}
hr.black {border-color:#000}
.button-group {display:flex; gap:0.5em;}
.mtsmall {margin-top:0.2em;}
.nowrap {white-space:nowrap;}

.primary-highlight, .secondary-highlight {display:inline-block; padding:0.1em .2em; background-color: var(--primary-highlight); border-radius:0.5em;}
.secondary-highlight {background-color: #dfdfdf}

.app-logo-li img {height: 29px; margin-top: -15px; margin-bottom: -15px; position: relative; top: -7px;}
@media only screen and (max-width: 960px) {.app-logo-li img {height: 19px; top:-11px}}

.history pre {white-space:break-spaces;}
.history {font-size: 0.8em; line-height: 120%;}
table.fancy.history td, table.fancy.history th {padding: 0 20px}
table.fancy.history pre:hover {cursor:pointer; background-color: var(--primary-highlight)}
table.fancy.history pre:focus {cursor:inherit; background-color:inherit}
table.fancy.history td:nth-child(1) {width:100px}
table.fancy.history td:nth-child(3) {width:36px}

table tr.system, table.fancy tr:nth-child(2n) {background-color:transparent;}
table.fancy.history tr:hover, table tr.system {background-color:inherit;}

.error-message {padding:0.2em 0.4em; display:inline-block; color:white; background-color:var(--warning); border-radius: 0.3em;}


/* Useful Elements */
.box pre {background: white; padding: 0.1em 0.5em; border-radius: 0.4em; white-space:normal; max-height: 88px; text-overflow: ellipsis; overflow: auto;} 
.box {background-color:#efefef; padding:1em 2em; margin-bottom:1em; border-radius:1em; 
border-top:.5em solid #ddd; border-top-left-radius:0;border-top-right-radius:0;}
.box.highlight {background-color:#ffdfbc; text-align:center;}
.box.inactive {opacity: 0.4; background-color:#bbb}
.box .box {border-top: none; padding:1em;}
@media only screen and (max-width: 768px) {.box {padding: 1em; border-radius: 0;}}


.fun-fact { float: right; max-width: 700px; font-size: 0.9em; line-height: 130%; text-align: right; position:relative; top:-12px;
background-color: #efefef; padding: .5em 1em; border-radius: .5em; font-style:oblique;}

.generating {text-align:right; opacity:0.7}
.generating:hover {opacity:1;}
.generating b {color:var(--primary);}

.loading-wrapper {position:relative;}
.mini-robot {width:20px; position:absolute; left: -1em; top: -6px;}

.force-gpt4 {text-align:right;}
.force-gpt4 p {font-size: 0.7em; opacity: 0.6; line-height:120%;}
.force-gpt4 label {cursor:pointer;}

.ui-header {display:grid; grid-template-columns: max-content max-content max-content; grid-gap: 1em; width:100%;}
.meta-options {justify-self: end; grid-column: -1; white-space: nowrap;}

.options {margin-bottom:1em; display:flex; gap:1em; justify-content:start; align-items:flex-start;}
.options select {max-width: 400px;}

.tool-select {display:flex;}
.tool-select label {width:100%;}
.tool-select select {height: 84%; flex: 1 1 auto; min-height: 0; box-sizing: border-box;}

.promptlist .inactive {background-color:#dfdfdf}

.category-list {list-style-type: none; column-count: 4; background-color: var(--grey); padding:1em; border-radius:0.5em}
.category-list li {margin:0; padding:0;}

.conversation-list a:visited {color: #595959}
.conversation-detail {max-width: 1400px; margin:2em auto;}
.settings-textarea {min-height:300px;}

dialog {width:100%; max-width:80%}

/* Chat Area */
.io-textarea { border-radius: .2em; padding: .5em; line-height: 140%; font-size: 0.9em}
.io-textarea:focus {outline: 2px solid var(--primary);}
.io-textarea:disabled {background:#d2d2d2; color:#717171;}

.io-textarea {height:  calc(100vh - 600px); min-height:150px;}

.io-output-div {background-color:white; overflow-y:auto; resize: vertical;
 border: 1px solid #ddd; box-sizing: border-box; cursor: text;}

.io-output-div.line-break {white-space:pre-line;}
.gpt-output, .user-input {position:relative;}

.io-textarea ol li, .io-textarea ul li {margin-bottom:0.4em;}
.io-textarea pre {max-height: initial;}

.user-input button {margin-top:0.5em;}
.user-input button.light {float:right; position:relative;}

.output-info {position: absolute; top: 40px; right: 10px; text-align: right; opacity: 1; font-size: 0.9em; 
background-color: #666; color: white; padding: .5em; border-radius: .4em; line-height: 1;
animation: outputInfoBreath 1.2s infinite; animation-timing-function: cubic-bezier(0.42, 0.0, 0.58, 1.0);}

@keyframes outputInfoBreath  {
	0%   { opacity: 1; }
	25%  { opacity: 0.9; }
	40%  { opacity: 1.; }
	70%  { opacity: 0.45; }
	100% { opacity: 1; }
}

.debug-wrapper {position:absolute; right:0; bottom:-2.5em;}
.debug-button {visibility:hidden;}
.debug-wrapper:hover .debug-button {visibility: visible;}

.debug textarea {height:600px;}


.float-button {cursor:pointer; position: absolute; right:0em; top:-1em; font-size: 0.7em; padding:0.4em 0.4em 0 0.4em;
text-align:center; background-color:white; border-radius:0.3em; border: 1px solid #c8c8c8}

.float-button img {width:22px; max-height:20px; position:relative; top:2px;}
.float-button span {display:none; position:relative; bottom:2px; left:1px}
.float-button span.visible {display:inline;}
.float-button input {position:relative; bottom:-1px; left:-2px;}
.float-button:hover span {display:inline-block;}
.float-button:active {background-color:#ccc}

.websearch-button {right:5.6em;}
.speech-button {right:2.8em;}
.file-button img.cloud {width:20px; top:3px}

.rag-layout .picker-ui-wrapper {display:block;}
.rag-layout .ui-header {grid-template-columns: 2fr 4fr 1fr}
.rag-layout .ui-header.has-direct-prompts .ui-header {grid-template-columns: 2fr 1fr 1fr 1fr}
.rag-layout .ui-header.has-direct-prompts .rag-settings {grid-column-end: 5}

.rag-layout .meta-options {justify-self: initial; grid-column: initial;}
.rag-layout .options {display:block}
.rag-layout .options select {max-width:100%}

.rag-layout .io-textarea {height:  calc(100vh - 700px);}

/* Model Picker */
.picker-ui-wrapper {align-items:center; display:flex; gap:0.4em; white-space: nowrap; margin-bottom:0.1em; font-size:0.8em}
.model-description {text-align:right; font-size: 0.7em; opacity: 0.6; line-height: 120%;}

/* RAG Settings */
.rag-settings {margin-top: -1em; margin-bottom: 1em;}
/*.rag-settings {background-color: #e1e1e1; padding: 0.2em .5em; border: 1px solid #cecece; border-radius: .2em;}*/
.rag-settings {grid-row: 2; grid-column-end: 4; grid-column-start: 1;}
.rag-settings input {margin-bottom:0;}
.rag-settings fieldset {margin-bottom:0;}

.rag-grid {display:grid; grid-gap:1em; grid-row-gap:0em;}
.rag-grid {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr 2fr;}
.rag-grid:nth-child(2n) {grid-template-columns: 1fr 1fr 1fr;}

@media only screen and (max-width: 1800px) {
.rag-grid {grid-template-columns: 1fr 1fr 1fr 1fr }
.rag-layout .ui-header {grid-template-columns: 2fr 2fr 1fr}
}

@media only screen and (max-width: 1100px) {
.rag-grid {grid-template-columns: 1fr 1fr }
}

@media only screen and (max-width: 768px) {
.rag-grid {grid-template-columns: 1fr 1fr}
.ui-header {display:grid; grid-template-columns: 2fr 1fr 1fr; grid-gap:0.25em;}
.ui-header .meta-options {grid-column:unset}

.ui-header > div {width:100%; margin:0;}
div.rag-settings {margin-bottom:.5em;}
.ui-header select, .options select, .ui-header label {max-width:100%; width:100%}

.ui-header .options label {display:flex}
.mobile-icon.icon-delete {width:16px;}

}


/* Image Generator */
.image-generator {display:grid; grid-gap:2em; grid-row-gap:0em; grid-template-columns: 1fr 6fr 2fr; margin-bottom:0;}
.image-generator-input {height:108px; margin-bottom:0.5em;}

.image-options {display:grid; grid-template-columns: 1fr 1fr; grid-gap:1em; grid-row-gap:0em;}

.generated-image {border-radius: 1em; box-sizing: border-box; background: #efefef; padding: 1em; margin-bottom:1em; text-align:center;}
.generated-image img {width:100%; border: 1em solid white; box-sizing: border-box; border-radius: .5em;}

.generated-image img {max-width:1792px}
.generated-image.vertical img {max-width:1024px}

.gallery-container {border-radius: 1em; box-sizing: border-box; background: #efefef; padding: 1em; margin-bottom:0em;}
.image-history img {max-width:300px}

.upload-drop-area {width:100%; }
.upload-drop-area input {border-radius:0.2em;}
.upload-drop-area input[type='file'] {display:none;}
.upload-drop-area.dragging input {background-color:var(--primary-highlight);}
.upload-drop-area.loading input {animation: pulse-black 1.5s infinite;}

@keyframes pulse-black {
	0%   { background-color: var(--primary-highlight); }
	50%  { background-color: var(--primary); }
	100% { background-color: var(--primary-highlight); }
}



@media only screen and (max-width: 768px) {
	.image-generator {grid-template-columns: 1fr}
	.image-history img {max-width:100%}
}

/* Vision Image */
.input-payload {max-width:150px; max-height:30px; position: absolute; top: -4.5em; right:3em; cursor:pointer; }
.input-payload img {max-height:110px; border-radius:0.3em; border:2px solid var(--primary);}
.input-payload:hover:after {position: absolute; content: '✕'; right: 0.4em; top: 0.2em; color: white; font-size: 0.7em;} 

/* Form Container */
.form-container {background-color:#efefef; position:relative; transition: background-color 0.5s ease; transition: border-color 0.5s ease;
padding:1em 2em; margin-bottom:1em; border-radius:1em; 
border-top:.5em solid #ddd; border-top-left-radius:0;border-top-right-radius:0;}

.box.advanced-model {transition: background-color 0.5s ease; transition: border-color 0.5s ease;}

.form-container.advanced-model, .box.advanced-model {border-top-color: var(--primary)}


/* Footer */
.main-footer {text-align:center; font-size:0.7em; display:flex; justify-content: center; margin-bottom:1em;}
.footer-nav {display: flex; gap:.5em; list-style: none; padding: 0; margin: 0;}
.footer-nav a {text-decoration: none; color: var(--primary);}
.footer-nav a:hover {color:#6d6d6d;}


/* Pager */
ul.pager {display: flex; box-sizing: border-box; gap:0.3em;
flex-wrap: wrap; flex-direction: row;
justify-content:center; align-items: center;
margin-top:1.5em; margin-bottom:1.5em;
list-style-type: none; padding:0.5em
}

ul.pager li a {color:#444; background:#efefef; padding:.3em .8em; border-radius:3px;
white-space:nowrap;text-decoration:none;
text-align:Center; box-sizing: border-box; display:block;}

ul.pager li a:hover, a.archiv:hover {background:#444; color:white;}
ul.pager li a.active {background:var(--primary); color:white;}
ul.pager li a.disabled {background:#ececec; color:#b1b1b1;}


/* Tables */
table tr.system pre {max-height: 118px; overflow-y: auto;}
table.fancy th {background-color: var(--primary);}


/* Mobile */
.show-mobile{display:none;}
@media only screen and (max-width: 768px) {.show-mobile{display:block;} .hide-mobile{display:none;}}

@media only screen and (max-width: 768px) {
	.speech-button {display:none;}
	.websearch-button {display:none;}
	.io-textarea {height:14vh; min-height: 98px; font-size:.9em;}
	.user-input {margin-bottom: 0em; padding-bottom: 0em; display: flex; flex-direction: column;}
	.del-historie {align-self:center; margin-bottom:0em; font-size:0.8em; align-self:normal; float:none;}
	.user-input .mlsmall {margin-left:0;}
	.ui-header {margin-bottom:0;}
	.send-mobile-btn {position:relative; top:5px;}
	h1 {font-size:1em; padding:0 1em; display:none;}
	.footer-nav {display:none;}
	main {margin:0em}
	.box {border-top: none;}
	details {padding:0 1em;}

	.float-button {position: relative; top:0; border:none;}
	.float-button span {display:inline}
	.float-button:hover {background-color:#ccc}
	.float-button img {max-height:14px; top: 1px;}
	.file-button img.cloud {top: 1px;}

	.file-button {position:relative; top:0 left:0; display:inline-block; margin-bottom:0.4em;}

	.main-nav {text-align:center}
	.main-nav ul {margin:0 auto;}

	.gpt-output {
	display: grid; grid-gap:0.5em; grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto; grid-template-areas: 
	"label label . ."
	"output output output output"
	"button1 button2 button3 button3"
	"stats stats stats stats";
	}

	.gpt-output label {grid-area: label; display:none;}
	.gpt-output .io-textarea {grid-area: output; min-height:150px; height: calc(100vh - 500px);}
	.gpt-output .usage-stats {grid-area: stats; text-align:center}
	.gpt-output .copy-button {grid-area: button1;}
	.gpt-output .send-button {grid-area: button2;}
	.gpt-output .del-historie {grid-area: button3;}
}


/* Form Grids */
.grid-2-col, .grid-2-wide, .grid-2-narrow, .grid-2-back-wide, .grid-3-col, .grid-3-front-wide, .grid-3-back-wide, .grid-4-col, .grid-4-back-wide, .grid-5-col, .grid-5-wide, .grid-5-back-wide, .grid-2-1, 
.grid-3-wide ,.grid-4-wide, .grid-4-2col, .grid-min {display:grid; grid-gap:1em; grid-row-gap:0em;}

.grid-2-1 {grid-template-columns: 2fr 1fr;}
.grid-2-narrow {grid-template-columns: 1.5fr 1fr;}
.grid-2-wide {grid-template-columns: 3fr 1fr;}
.grid-2-back-wide {grid-template-columns: 1fr 2fr;}
.grid-2-col {grid-template-columns: 1fr 1fr;}
.grid-3-col {grid-template-columns: 1fr 1fr 1fr;}
.grid-3-front-wide {grid-template-columns: 1.5fr 1.5fr 1fr;}
.grid-3-back-wide {grid-template-columns: 1fr 1fr 2fr;}
.grid-3-wide {grid-template-columns: 2fr 1fr 1fr;}
.grid-4-col {grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid-4-back-wide {grid-template-columns: 1fr 1fr 1fr 4fr;}
.grid-4-2col {grid-template-columns: 2fr 2fr 1fr 1fr;}
.grid-4-wide {grid-template-columns: 2fr 1fr 1fr 1fr;}
.grid-5-col {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.grid-5-wide {grid-template-columns: 2fr 1fr 1fr 1fr 1fr;}
.grid-5-back-wide {grid-template-columns: 2fr 1fr 1fr 1fr 3fr;}
.grid-min {grid-template-columns: max-content;}

.grid-flex {display:flex; justify-content: start; gap:1em;}
.grid-flex-column {display:flex; justify-content: start; gap:1em; flex-flow: column;}

@media only screen and (max-width: 1100px) {
.grid-2-col, .grid-2-narrow, .grid-2-wide, .grid-2-back-wide, .grid-3-col, .grid-3-front-wide, .grid-3-back-wide, .grid-4-col, .grid-2-1, 
.grid-3-wide ,.grid-4-wide, .grid-4-back-wide, .grid-4-2col, .grid-5-col, .grid-5-wide, .grid-5-back-wide, .grid-min {
	grid-template-columns: 1fr 1fr }
}

@media only screen and (max-width: 768px) {
.grid-2-col, .grid-2-narrow, .grid-2-wide, .grid-2-back-wide, .grid-3-col, .grid-3-front-wide, .grid-3-back-wide, .grid-4-col, .grid-2-1, 
.grid-3-wide ,.grid-4-wide, .grid-4-2col, .grid-4-back-wide, .grid-5-col, .grid-5-wide, .grid-5-back-wide, .grid-min {
	grid-template-columns: 1fr }
}

/* Icons */
.icon-delete {opacity:0.2; position:relative;top:4px; cursor:pointer; width:20px; transition: width 0.1s;}
.icon-delete:hover {opacity: 0.6;}

.icon-edit-history {opacity:0.25; position:relative;top:2px; cursor:pointer; width:20px; transition: width 0.1s;}
.icon-edit-history:hover {opacity: 0.8;}

.icon-copy {opacity:0.5; position:relative;top:4px; cursor:pointer; width:20px; transition: width 0.1s;}
.icon-copy:hover {opacity: 0.8;}


.icon-edit {opacity:0.2; position:relative;top:2px; width:23px;}
button .icon-delete {opacity: 0.4; top:2px;}

.color-mode {cursor:pointer;}
.color-mode:hover {opacity:0.7}


/* Main Navigation */
.main-nav {background-color:var(--primary); margin-bottom:2.5em; padding:0em; color:white; flex-wrap:wrap; transition: background-color 0.5s ease;}
.main-nav {display:flex; justify-content:space-between; padding-left: 1em; padding-right:1em;}
.main-nav a {padding:.5em; color:white;}
.main-nav a:hover, .main-nav a:focus {color:#1c2733; background-color:#e1e1e1;}

@media only screen and (max-width: 768px) {
	.main-nav {margin-bottom:0;}
}



/* Drop Down Navigation */
.main-nav li { position: relative;}
.main-nav ul li ul {visibility: hidden; opacity: 0; display:none; position: absolute;
z-index:99999; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.main-nav ul li ul.rightmenu {right:0;}
.main-nav ul li:hover > ul,
.main-nav ul li:focus-within > ul,
.main-nav ul li ul:hover,
.main-nav ul li ul:focus {visibility: visible; opacity: 1; display: block;
animation: menu-scroll-in 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

@keyframes menu-scroll-in {
0% {transform: scale(0); transform-origin: 0% 0%; opacity: 1;}
100% {transform: scale(1); transform-origin: 0% 0%; opacity: 1;} }

.main-nav ul li:hover {background-color:var(--primary-darker);}
.main-nav ul li ul li {width: 100%; box-sizing: border-box; border-bottom:1px dashed var(--primary-highlight); background:var(--primary-darker);}
.main-nav ul li ul li:last-of-type {border-bottom:none; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.main-nav ul li ul li a {text-indent:.5em; white-space: nowrap; padding-right:.5em; }
.main-nav ul li ul li:last-of-type:hover {background:none !important;}
.main-nav ul li ul li:last-of-type:hover, .main-nav ul li ul li:last-of-type a:hover {border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.main-nav ul li ul li a:after {content: "\0000a0";  letter-spacing: 0.5em;}
.main-nav ul li ul li.hightlight {background-color: #315984;}

@media only screen and (max-width: 1400px) {
	.main-nav {font-size:0.8em;}
	.main-nav a {padding:.25em;}
	.main-nav a:hover {padding:.25em;}
	.login-icon svg {width:10px; margin-bottom: -3px;}
}

@media only screen and (max-width: 960px) {.main-logo {display:none;} }


/* Dropdown Popup Menu */
.dropdown-menu {display:none; position:fixed; font-size:0.8em;}
.dropdown-menu.open {display:block;}

.dropdown-menu {background-color: var(--grey); padding:0.2em; border-radius:0.2em; border: 1px solid  var(--primary)}
.dropdown-menu div {padding:.2em .6em; position:relative; cursor:pointer;}
.dropdown-menu div:hover {background-color:#ffffff99;}

.dropdown-menu {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.dropdown-menu div:after {content:''; display:block; width:100%; position:absolute; left: 0; bottom:-1px; z-index:9}
.dropdown-menu div:after {border-bottom:1px dashed var(--primary)}
.dropdown-menu div:last-child {padding-bottom:0.1em}
.dropdown-menu div:last-child:after {display:none;border:none}

.dropdown-menu div.danger:hover {color:var(--warning); background-color:#ff000022;}
.dropdown-menu div.highlight:hover {color:var(--primary); background-color:#ffffff;}

/* Table Sort */
table.js-sortable th {cursor:pointer;}
table.js-sortable th.dir-u {background-image: linear-gradient(to top, #0d0d0d 0%, #242424 82%, #6dae55 82%, #a7ce80 100%) !important;}
table.js-sortable th.dir-d {background-image: linear-gradient(#0d0d0d 0%, #242424 82%, #6dae55 82%, #a7ce80 100%) !important}
table.fancy.js-sortable th:hover {background-color: #0b0b0b}
table.fancy tr:hover {background-color: var(--grey);}


/* Auth */
.auth-layout {max-width:700px; margin:0 auto; margin-top:6em; margin-bottom:3em; padding: 2em 3em 1em 3em; background: #e8e8e8; border-radius:0.5em;}
.auth-layout.user-table {max-width:90%;}
@media only screen and (max-width: 960px) {
	.auth-layout {margin-top:3em;}
	.auth-login a {white-space:nowrap;}
	.auth-login button {margin-bottom:1em;}
}


/* Searchbox */
.searchbox {position:relative; margin-bottom:0;}
.searchbox input { background-color: var(--primary-darker); color: white; width:200px; transition: width .3s;
border: none; padding: 4px 30px 2px 9px; font-size: 0.9em; box-sizing: border-box; height:1.85em;}
.searchbox input:focus {background-color:var(--primary-darker); border:1px solid var(--primary-darker); width:300px; transition: width .1s}
.searchbox button { position:absolute; right:6px; top:1px; height:100%; opacity:0.4;
background-color:transparent; background-position: center; background-size:65%; background-image: url('/styles/flundr/img/icon-search-white.svg');
background-repeat: no-repeat; transition: opacity 0.4s}
.searchbox input::placeholder {color:white;}
.searchbox button:focus, .searchbox button:hover {background-color:transparent !important}
.searchbox:focus-within button {opacity:1; transition: opacity 0.1s}
.searchbox input::selection {background-color: var(--primary-darker);}


/* Animations */
.heartbeat {animation:heartbeat 1.5s ease-in-out 2s 1 both}
@keyframes heartbeat{from{transform:scale(1);transform-origin:center center;animation-timing-function:ease-out}10%{transform:scale(.91);animation-timing-function:ease-in}17%{transform:scale(.98);animation-timing-function:ease-out}33%{transform:scale(.87);animation-timing-function:ease-in}45%{transform:scale(1);animation-timing-function:ease-out}}