/* Fonts */
@font-face {
	font-family: faz-base;
	src: url('/assets/fonts/SuisseIntl-Regular-WebXL.woff');
	font-weight: regular;
}

@font-face {
	font-family: faz-base;
	src: url('/assets/fonts/SuisseIntl-Bold-WebS.woff');
	font-weight: bold;
}

@font-face {
	font-family: faz-serif;
	src: url('/assets/fonts/SangBleuKingdom-Regular-WebS.woff');
	font-weight: regular;
}

/* Farben */
:root {
--primary: #110a35;
--primary-darker: #110a35;
--primary-superdark: #e8edee;
--primary-lighter: #e8edee;
--primary-lighter-font: #e8edee;
--primary-highlight: #d8dbe1;
--warning: #934f4f;
--highlight: #cedfee;
--grey: #e8edee;

--font-body: 'faz-base', sans-serif;
--font-highlight: 'faz-serif', serif;
}

h1 {font-size: 1.7em;}
@media only screen and (max-width: 960px) {h1 {font-size:1.3em;}}

hr {border:0;}

.form-container, .box {background-color: var(--grey); border-top-color:var(--grey)}
.box {border-radius: 0;}

/*.box {background-color:var(--grey);}*/
.box.highlight {background-color:white;}



.image-off, .app-logo-li:hover .image-on, .login-icon:hover .image-on {display: none}
.image-on, .app-logo-li:hover .image-off, .login-icon:hover .image-off {display: inline-block}
.app-logo-li {margin-right:.5em;}

main a:link, main a:visited {color: var(--primary);}


.float-button {border-radius:0;}
button, .button, .form-container, ul.pager li a, .auth-layout, .category-list,
.main-nav ul li ul li:last-of-type {border-radius:0;}
.main-nav ul li ul li:last-of-type:hover, .main-nav ul li ul li:last-of-type a:hover {border-radius:0;}
.main-nav ul li ul li {border-bottom-color: #aaa}

.main-nav ul li:hover {background-color:white;}
.main-nav ul li:hover > a {color: var(--primary);}
.main-nav a:hover, .main-nav a:focus, .main-nav a:visited  {background-color:white;}

.main-nav a.active {background-color:white; color: var(--primary);}

textarea, .io-textarea {border-radius: 0; line-height:145%; padding:0.5em;}

.generated-image {background-color: var(--grey)}
.generated-image, .generated-image img {border-radius:0;}

.auth-layout {margin-bottom:1em; background-color: var(--grey)}

.user-input button.light {float:right; position:relative; top:10px}


/* Radiobutton Update */
.form-container.advanced-model {border-top-width:0.2em;}

.ui-header-2-col {display:grid; grid-template-columns: 3fr 1fr;}


.promptSelectArea {width:100%; display:block;}
.radiobox {background-color: white; border: 1px solid var(--primary); color:#333}
.radiobox:hover {color:black}
.radiobox:has(input:checked) {background-color:var(--primary); color:white;}
.radiobox input {display:none;}
.radiobox label {padding:0.2em 1em; width:100%; height:100%; display:block; cursor:pointer; box-sizing: border-box;
white-space: nowrap;}

.promptSelector {display:flex; gap:.5em; max-width:90%; flex-wrap: wrap; margin-bottom:1em; /*border-bottom: 0.2em solid var(--primary);*/}
.promptSelectBox {display:none}

/* .ui-header .options {border-top: 1px solid var(--primary); padding-top:0.5em;} */

.divider-bar {background-color:white; width: calc(100% + 4em); height:0.5em; position:relative; left:-2em; margin-bottom:1em; margin-top:0.2em}

form button, .button {background-color:var(--primary);}
form button.light, .button.light {background-color:white; border: 1px solid var(--primary);}
.button.light {box-sizing: border-box;}
form button.light:hover, .button.light:hover {background-color:white;}

input,textarea, select {border: 1px solid var(--primary);}

.gallery-container {border-radius:0; background-color:var(--grey); }

.copy-button-faz {cursor:pointer; position: absolute; right:0em; top:-1em; font-size: 0.7em; padding:0.4em 0.4em 0 0.4em; border: 1px solid var(--primary);
text-align:center; background-color:white;}
.copy-button-faz img {width:14px; position:relative; top:2px;}
.copy-button-faz span {display:none; position:relative; bottom:1px; left:1px; padding-left:0.2em;}
.copy-button-faz:hover {border-color: var(--primary);}
.copy-button-faz:hover span {display:inline-block;}
.copy-button-faz:active {background-color:#ccc}

.importarea	{position: absolute; left:8em; top:-1em; display:flex; gap:1em; align-items:flex-start;}

.float-button {font-size: 0.7em; top:-.7em; cursor: pointer; background-color:white; padding:0.2em 0.5em 0 0.5em; border: 1px solid var(--primary); background-color:white;}

.file-button img.cloud {width:16px;}
.file-button span {top:1px;}
.file-button span:first-of-type {display:inline-block; padding-left:0.2em;}
.file-button:hover span:first-of-type {display:none;}

.speech-button img {top:3px; width:18px;}
.speech-button span {bottom:1px;}

.gpt-output .speech-button {right: 2.5em;}
.user-input .speech-button {right: 8.4em;}

.float-button:hover {border-color: var(--primary);}
.float-button:active {background-color:#ccc}



.options input {width: 500px;}


.input-payload {top: 2.5em; right:1.7em; text-shadow: 2px 2px 2px rgba(0,0,0,1);}
.input-payload img {border-radius: 0;}
.input-payload:hover::after {font-size:.8em; font-weight:bold; top: 0px; right:10px; }

.promptlist a.noline {text-decoration: underline;}

table.fancy tr:nth-child(2n) {background-color:var(--grey)}
table.fancy tr td {border-bottom: 0}

table.fancy tr:hover {background-color:#f2e2d6}
table.fancy.history tr:hover {background-color:transparent;}
table.fancy.history pre:hover {background-color: var(--grey)}

.history pre {font-family: 'faz-serif'; padding:0.5em;}
table tr.system {background-color:transparent;}
table tr:last-of-type td {border-bottom:0;}

table.promptlist td:first-of-type {white-space: nowrap;}


/* Table Sort */
table.js-sortable th {cursor:pointer;}
table.js-sortable th.dir-u {background-image: none !important}
table.js-sortable th.dir-d {background-image: none !important}
table.fancy.js-sortable th:hover {background-color: #342a66}
table.fancy tr:hover {background-color: var(--grey);}

table.js-sortable th span {pointer-events: none}
table.js-sortable th span:after {content: '⭥'; position:relative;left:4px; pointer-events: none}
table.js-sortable th.dir-u span:after {content: '⭡'}
table.js-sortable th.dir-d span:after {content: '⭣'}