Spaces:

helmfridsson
/

systeminforande

Sleeping

github-actions[bot]

Deploy from GitHub Actions

20fc71e 3 months ago

21.6 kB

/* ===============================
   Tvinga vit bakgrund i HF Spaces
   =============================== */

html, body {
    background: #ffffff !important;
    min-height: auto !important;
    overflow-x: hidden !important;
}

/* Gradio root */
.gradio-container {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.gradio-container > .wrap {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* HF wrapper runt appen */
#root,
#app,
.app,
main {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.gradio-container > .main,
.gradio-container > .main > .wrap,
.gradio-container .contain,
.gradio-container .contain > .tabs,
.gradio-container .block,
.gradio-container .form {
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

.gradio-container:focus,
.gradio-container:focus-visible,
.gradio-container:focus-within,
.gradio-container > .wrap:focus,
.gradio-container > .wrap:focus-visible,
.gradio-container > .wrap:focus-within,
.gradio-container > .main:focus,
.gradio-container > .main:focus-visible,
.gradio-container > .main:focus-within,
.gradio-container > .main > .wrap:focus,
.gradio-container > .main > .wrap:focus-visible,
.gradio-container > .main > .wrap:focus-within,
.gradio-container .contain:focus,
.gradio-container .contain:focus-visible,
.gradio-container .contain:focus-within {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =====================================================
   BAS / RESET (kontrollerad)
   ===================================================== */


:root {
    color-scheme: light !important;
    --body-background-fill: #ffffff !important;
    --background-fill-primary: #ffffff !important;
    --body-text-color: #000000 !important;
    --block-label-background-fill: #ffffff !important;
    --background-fill-secondary: #ffffff !important;
    --panel-background-fill: #ffffff !important;
    --block-label-text-color: #000000 !important;
    --checkbox-background-color: #ffffff;
}

body {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
  color: #1e5bd7 !important;
  text-align: center;
}

.app-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 18px 0;
    padding: 0;
    background: #ffffff !important;
}

.app-header-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    background: transparent !important;
}

.app-header-row .title {
    margin: 0;
    text-align: left;
    background: transparent !important;
}

h2, h3, h4, p, span, label, li {
    color: #000000 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: none !important;
}

.gradio-container hr {
    display: none !important;
}



/* ===============================
   TA BORT GRADIO TOP BAR / BLÅ LINJE
   =============================== */

/* Gradio container header */
.gradio-container > header,
.gradio-container > footer,
.gradio-container .topbar,
.gradio-container .app-header {
    display: none !important;
}

/* Ibland ligger den som hr */
.gradio-container hr {
    display: none !important;
}

/* Ta bort Gradio-h1-linjen */
.prose h1 {
    border-bottom: none !important;
}

/* =====================================================
   FLIKAR
   ===================================================== */

.tabs,
.tabs > div,
.tabs .tab-wrapper,
.tabs .tab-nav,
.tabs .tabitem {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.tabs .tab-nav {
    display: flex !important;
}

button[role="tab"] {
    flex: 1 1 0 !important;
    justify-content: center !important;
    text-align: center !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 12px !important;
    color: #1e5bd7 !important;
    background: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

button[role="tab"][aria-selected="true"] {
    background: #eef3ff !important;
}

.tabitem {
    border: none !important;
    box-shadow: none !important;
}

.tabs:focus,
.tabs:focus-visible,
.tabs:focus-within,
.tabs > div:focus,
.tabs > div:focus-visible,
.tabs > div:focus-within,
.tabs .tab-wrapper:focus,
.tabs .tab-wrapper:focus-visible,
.tabs .tab-wrapper:focus-within,
.tabs .tabitem:focus,
.tabs .tabitem:focus-visible,
.tabs .tabitem:focus-within,
.gradio-container .form:has(.tabs),
.gradio-container div.form:has(.tabs),
.gradio-container .block:has(.tabs),
.gradio-container .wrap:has(.tabs) {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: #ffffff !important;
}

.tab-intro {
    text-align: center;
    margin: 8px 0 14px 0;
    font-size: 15px;
}

/* =====================================================
   HUVUDFRÅGOR (Buttons / Cards)
   ===================================================== */
.main-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 22px auto 28px auto !important;
}

.main-card-grid > .card {
    min-width: 0 !important;
    width: 100% !important;
}

.card-shell {
    width: 100%;
    max-width: 240px;
    height: 130px;
    margin: 0 auto;
    background: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.card-shell.selected {
    background: #eef3ff !important;
    box-shadow: inset 0 0 0 1px rgba(30, 91, 215, 0.08);
}

button.gr-button.card {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 14px !important;
}

/* Innehåll i huvudfråge-kort */
.card-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

/* Titel – fet */
.card-title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    color: #000000;
}

/* Huvudfråga – normal text */
.card-question {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.25;
    color: #000000;
}

.card {
    position: relative;
    padding: 12px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Osynlig klick-yta */
.card-overlay {
    position: absolute !important;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.card {
    position: relative;
    padding: 12px;
}

/* Osynlig klickyta ovanpå kortet */
.card-overlay {
    position: absolute !important;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 980px) {
    .main-card-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
        max-width: 620px !important;
    }
}

@media (max-width: 560px) {
    .main-card-grid {
        grid-template-columns: 1fr !important;
        max-width: 280px !important;
        gap: 18px !important;
    }
}

/* =====================================================
   FAQ
   ===================================================== */

.question-list,
.question-list *,
.question-list > div,
.question-list > div > div,
.question-list .wrap,
.question-list .wrap-inner,
.question-list .form,
.question-list .block,
.question-list .container,
.question-list fieldset,
.question-list legend,
.question-list label[data-testid="block-label"],
.question-list label,
.question-list .gr-radio {
    background: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.question-list {
    border: 2px solid #1e5bd7 !important;
    border-radius: 16px !important;
    padding: 6px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.gradio-container .form:has(.question-list),
.gradio-container div.form:has(.question-list),
.gradio-container .block:has(.question-list) {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}

.question-list > div,
.question-list > div > div,
.question-list fieldset,
.question-list .wrap,
.question-list .wrap-inner,
.question-list .block,
.question-list .container,
.question-list .form {
    box-shadow: none !important;
    border-color: transparent !important;
}

.question-list::before,
.question-list::after,
.question-list > div::before,
.question-list > div::after,
.question-list > div > div::before,
.question-list > div > div::after,
.question-list fieldset::before,
.question-list fieldset::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}

.question-list label[data-testid="block-label"],
.question-list legend {
    display: none !important;
}

.question-list:focus,
.question-list:focus-visible,
.question-list:focus-within,
.question-list > div:focus,
.question-list > div:focus-visible,
.question-list > div:focus-within,
.question-list fieldset:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.question-list .gr-radio {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.question-list .gr-radio label,
.question-list label[data-testid="radio-label"] {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    color: #000000 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

.question-list .gr-radio label::before,
.question-list .gr-radio label::after,
.question-list label[data-testid="radio-label"]::before,
.question-list label[data-testid="radio-label"]::after,
.question-list input[type="radio"] + *::before,
.question-list input[type="radio"] + span::before {
    display: none !important;
    content: none !important;
}

.question-list input[type="radio"] {
    display: none !important;
}

.question-list .gr-radio label span,
.question-list label[data-testid="radio-label"] span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #000000 !important;
}

.question-list .gr-radio label:hover,
.question-list label[data-testid="radio-label"]:hover,
.question-list input[type="radio"]:checked + span,
.question-list label[data-testid="radio-label"]:has(input[type="radio"]:checked) {
    background: #eef3ff !important;
    border-radius: 12px !important;
}

/* =====================================================
   MEDDELANDE (Textbox) – STABIL LÖSNING
   ===================================================== */

/* Yttre container */
.message-box {
    background: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 16px !important;
    padding: 12px !important;
    min-height: 170px;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.gradio-container .message-box,
.gradio-container .message-box > div,
.gradio-container .message-box > label,
.gradio-container .message-box > .wrap,
.gradio-container .message-box .wrap,
.gradio-container .message-box .block,
.gradio-container .message-box .block-label,
.gradio-container .message-box .form {
    border-color: #1e5bd7 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

.gradio-container .form:has(.message-box),
.gradio-container div.form:has(.message-box) {
    background: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.gradio-container .message-box::before,
.gradio-container .message-box::after,
.gradio-container .message-box > div::before,
.gradio-container .message-box > div::after,
.gradio-container .message-box > label::before,
.gradio-container .message-box > label::after,
.gradio-container .message-box .wrap::before,
.gradio-container .message-box .wrap::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ta bort Gradio-inre effekter */
.message-box .wrap,
.message-box.gr-box {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* YTTRE BLOCK – döda Gradio-ram + mörka hörn */
.block.message-box {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

/* Label-container som Gradio använder för extra ram */
.message-box label.show_textbox_border {
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    border-radius: 16px !important;
}

/* Själva textarea – ALL text ritas här */
.message-box textarea {
    width: 100% !important;
    min-height: 120px !important;
    overflow-y: auto !important;

    background-color: #ffffff !important;
    color: #000000 !important;

    border: none !important;
    outline: none !important;
    resize: none;

    font-size: 15px;
    line-height: 1.4;

    -webkit-text-fill-color: #000000 !important;
}

.message-box .scroll-hide,
.message-box .hide-container {
    overflow: visible !important;
}

/* Placeholder */
.message-box textarea::placeholder {
    color: #6b6b6b !important;
    opacity: 1 !important;
}

/* ===============================
   TA BORT YTTRE GRADIO-RAM PÅ TEXTBOX
   =============================== */

/* Label-containern runt textbox */
label.show_textbox_border,
label.container.show_textbox_border {
    border: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 16px !important;
}

/* Säkerhetsnät – om Gradio ändrar klassnamn */
.block:has(.message-box) > label {
    border: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.gradio-container .message-box textarea,
.gradio-container .message-box textarea:focus,
.gradio-container .message-box textarea:focus-visible,
.gradio-container .message-box textarea:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.message-box + .row,
.message-box ~ .row {
    margin-top: -6px !important;
}

.message-box ~ .row .send-btn,
.message-box ~ .row button.gr-button.send-btn {
    margin-top: 0 !important;
}

/* ===============================
   TA BORT FOCUS-RUTA I TEXTAREA
   =============================== */

/* Browser focus */
.message-box textarea:focus,
.message-box textarea:focus-visible,
.message-box textarea:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Gradio / Svelte focus-layer */
.message-box textarea::after,
.message-box textarea::before {
    display: none !important;
}

/* Om Gradio lägger focus på wrapper */
.message-box .wrap:focus,
.message-box .wrap:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: #1e5bd7 !important; /* behåll din blå ram */
}

/* Safari / Chromium specialfall */
.message-box textarea {
    -webkit-tap-highlight-color: #ffffff !important;
}

/* =====================================================
   SVAR
   ===================================================== */


.answer-box .wrap,
.answer-box.gr-box {
    color: #1e5bd7 !important;
    background: #ffffff !important;
    border: none !important;
}
.answer-box {
    border: 2px solid #1e5bd7 !important;
    border-radius: 10px !important;
    min-height: 260px;
    padding: 14px;
}


.answer-box * {
    color: #000000 !important;
    background: #ffffff !important;
    border: none !important;
    /*border: 2px solid #000000 !important;
    border-radius: 10px !important;*/
}

.answer-box h1,
.answer-box h2,
.answer-box h3,
.answer-box h4 {
    margin-top: 0 !important;
}

.answer-box .faq-example-label {
    margin: 0.35rem 0 0.6rem !important;
    font-size: 1.08rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

.answer-box .faq-example-label strong {
    font-weight: 700 !important;
}

.answer-note {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: #000000 !important;
}

.answer-note,
.answer-note * {
    background: #ffffff !important;
    color: #000000 !important;
}

/* ===============================
   SKICKA & RENSA – ABSOLUT LJUST
   =============================== */

.gradio-container button.gr-button.send-btn,
.gradio-container button.gr-button.send-btn.primary,
.gradio-container button.gr-button.send-btn.secondary,
.gradio-container .send-btn,
.gradio-container .send-btn button {
    background-color: #1e5bd7 !important;
    color: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 10px !important;

    box-shadow: none !important;
    font-weight: 600;

    --button-primary-background-fill: #1e5bd7 !important;
    --button-primary-background-fill-hover: #1748aa !important;
    --button-primary-text-color: #ffffff !important;
}

.gradio-container button.gr-button.send-btn:hover {
    background-color: #1748aa !important;
    border-color: #1748aa !important;
}

.gradio-container .send-btn *,
.gradio-container button.send-btn * {
    color: #ffffff !important;
}

/* ===============================
   CHECKBOX – TA BORT SVART BAKGRUND
   =============================== */

/* Wrapper runt checkbox */
.gradio-container .gr-checkbox,
.gradio-container .gr-checkbox *,
.gradio-container .form:has(.gr-checkbox) {
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

/* Själva checkboxen */
.gradio-container .gr-checkbox input[type="checkbox"] {
    accent-color: #000000;
}

/* Texten */
.gradio-container .gr-checkbox label {
    color: #000000 !important;
    font-weight: 500;
}

  /* ===============================
   TA BORT SVARTA HÖRN I MEDDELANDE
   =============================== */

label.show_textbox_border::before,
label.show_textbox_border::after {
    display: none !important;
    content: none !important;
}

label.show_textbox_border {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===============================
   TVINGA LJUSA KNAPPAR (ÄVEN SECONDARY)
   =============================== */

.gradio-container button.gr-button.secondary,
.gradio-container button.gr-button.primary {
    background-color: #1e5bd7 !important;
    color: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.gradio-container button.gr-button.secondary:hover,
.gradio-container button.gr-button.primary:hover {
    background-color: #1748aa !important;
    border-color: #1748aa !important;
}  

/* ===============================
   DÖLJ GRADIO-FOOTER I EMBED
   =============================== */

footer,
.gradio-container footer,
.gradio-container .footer,
.gradio-container a[href*="gradio.app"],
.gradio-container a[href*="api"],
.gradio-container button[aria-label*="Settings"],
.gradio-container button[title*="Settings"] {
    display: none !important;
}

.gradio-container .built-with,
.gradio-container .prose footer,
.gradio-container [class*="footer-links"] {
    display: none !important;
}

  /* ===============================
   TA BORT SVART PLATTA BAKOM CHECKBOX
   =============================== */

.gradio-container .form:has(.gr-checkbox) {
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

label.checkbox-container * input[type="checkbox"] {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  /* You might also want to ensure the border style and width are consistent */
  border-style: solid;
  border-width: 2px;
}

/* ===============================
   CHECKBOX – FUNGERANDE SVART BOCK
   =============================== */
/*
.gradio-container input[type="checkbox"] {
    accent-color: #000000 !important;
    background-color: #ffffff !important;
}
*/
.form .block{
    background: #ffffff !important;
}

/* ===============================
   CHECKBOX – KORREKT STYLING
   =============================== */

.gradio-container .gr-checkbox {
    --checkbox-background-color: #ffffff;
    --checkbox-border-color: #000000;
}

	/* ===============================
	Tvinga vit bakgrund i HF Spaces
	=============================== */

	html, body {
	background: #ffffff !important;
	min-height: auto !important;
	overflow-x: hidden !important;
	}

	/* Gradio root */
	.gradio-container {
	background: #ffffff !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	}

	.gradio-container > .wrap {
	background: #ffffff !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	}

	/* HF wrapper runt appen */
	#root,
	#app,
	.app,
	main {
	background: #ffffff !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	}

	.gradio-container > .main,
	.gradio-container > .main > .wrap,
	.gradio-container .contain,
	.gradio-container .contain > .tabs,
	.gradio-container .block,
	.gradio-container .form {
	background: #ffffff !important;
	box-shadow: none !important;
	outline: none !important;
	}

	.gradio-container:focus,
	.gradio-container:focus-visible,
	.gradio-container:focus-within,
	.gradio-container > .wrap:focus,
	.gradio-container > .wrap:focus-visible,
	.gradio-container > .wrap:focus-within,
	.gradio-container > .main:focus,
	.gradio-container > .main:focus-visible,
	.gradio-container > .main:focus-within,
	.gradio-container > .main > .wrap:focus,
	.gradio-container > .main > .wrap:focus-visible,
	.gradio-container > .main > .wrap:focus-within,
	.gradio-container .contain:focus,
	.gradio-container .contain:focus-visible,
	.gradio-container .contain:focus-within {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	}

	/* =====================================================
	BAS / RESET (kontrollerad)
	===================================================== */


	:root {
	color-scheme: light !important;
	--body-background-fill: #ffffff !important;
	--background-fill-primary: #ffffff !important;
	--body-text-color: #000000 !important;
	--block-label-background-fill: #ffffff !important;
	--background-fill-secondary: #ffffff !important;
	--panel-background-fill: #ffffff !important;
	--block-label-text-color: #000000 !important;
	--checkbox-background-color: #ffffff;
	}

	body {
	background: #ffffff !important;
	color: #000000 !important;
	font-family: Arial, Helvetica, sans-serif;
	}

	h1 {
	color: #1e5bd7 !important;
	text-align: center;
	}

	.app-header-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 12px 0 18px 0;
	padding: 0;
	background: #ffffff !important;
	}

	.app-header-logo {
	width: 72px;
	height: 72px;
	object-fit: contain;
	display: block;
	background: transparent !important;
	}

	.app-header-row .title {
	margin: 0;
	text-align: left;
	background: transparent !important;
	}

	h2, h3, h4, p, span, label, li {
	color: #000000 !important;
	background-color: #ffffff !important;
	background: #ffffff !important;
	border: none !important;
	}

	.gradio-container hr {
	display: none !important;
	}



	/* ===============================
	TA BORT GRADIO TOP BAR / BLÅ LINJE
	=============================== */

	/* Gradio container header */
	.gradio-container > header,
	.gradio-container > footer,
	.gradio-container .topbar,
	.gradio-container .app-header {
	display: none !important;
	}

	/* Ibland ligger den som hr */
	.gradio-container hr {
	display: none !important;
	}

	/* Ta bort Gradio-h1-linjen */
	.prose h1 {
	border-bottom: none !important;
	}

	/* =====================================================
	FLIKAR
	===================================================== */

	.tabs,
	.tabs > div,
	.tabs .tab-wrapper,
	.tabs .tab-nav,
	.tabs .tabitem {
	background: #ffffff !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	}

	.tabs .tab-nav {
	display: flex !important;
	}

	button[role="tab"] {
	flex: 1 1 0 !important;
	justify-content: center !important;
	text-align: center !important;
	border: 2px solid #1e5bd7 !important;
	border-radius: 12px !important;
	color: #1e5bd7 !important;
	background: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	}

	button[role="tab"][aria-selected="true"] {
	background: #eef3ff !important;
	}

	.tabitem {
	border: none !important;
	box-shadow: none !important;
	}

	.tabs:focus,
	.tabs:focus-visible,
	.tabs:focus-within,
	.tabs > div:focus,
	.tabs > div:focus-visible,
	.tabs > div:focus-within,
	.tabs .tab-wrapper:focus,
	.tabs .tab-wrapper:focus-visible,
	.tabs .tab-wrapper:focus-within,
	.tabs .tabitem:focus,
	.tabs .tabitem:focus-visible,
	.tabs .tabitem:focus-within,
	.gradio-container .form:has(.tabs),
	.gradio-container div.form:has(.tabs),
	.gradio-container .block:has(.tabs),
	.gradio-container .wrap:has(.tabs) {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	background: #ffffff !important;
	}

	.tab-intro {
	text-align: center;
	margin: 8px 0 14px 0;
	font-size: 15px;
	}

	/* =====================================================
	HUVUDFRÅGOR (Buttons / Cards)
	===================================================== */
	.main-card-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
	gap: 28px !important;
	align-items: stretch !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 22px auto 28px auto !important;
	}

	.main-card-grid > .card {
	min-width: 0 !important;
	width: 100% !important;
	}

	.card-shell {
	width: 100%;
	max-width: 240px;
	height: 130px;
	margin: 0 auto;
	background: #ffffff !important;
	border: 2px solid #1e5bd7 !important;
	border-radius: 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px;
	box-sizing: border-box !important;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
	}

	.card-shell.selected {
	background: #eef3ff !important;
	box-shadow: inset 0 0 0 1px rgba(30, 91, 215, 0.08);
	}

	button.gr-button.card {
	background-color: #ffffff !important;
	color: #000000 !important;
	border: none !important;
	border-radius: 14px !important;
	}

	/* Innehåll i huvudfråge-kort */
	.card-content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
	}

	/* Titel – fet */
	.card-title {
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	color: #000000;
	}

	/* Huvudfråga – normal text */
	.card-question {
	font-weight: 400;
	font-size: 12px;
	line-height: 1.25;
	color: #000000;
	}

	.card {
	position: relative;
	padding: 12px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	}

	/* Osynlig klick-yta */
	.card-overlay {
	position: absolute !important;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	}

	.card {
	position: relative;
	padding: 12px;
	}

	/* Osynlig klickyta ovanpå kortet */
	.card-overlay {
	position: absolute !important;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	}

	@media (max-width: 980px) {
	.main-card-grid {
	grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
	max-width: 620px !important;
	}
	}

	@media (max-width: 560px) {
	.main-card-grid {
	grid-template-columns: 1fr !important;
	max-width: 280px !important;
	gap: 18px !important;
	}
	}

	/* =====================================================
	FAQ
	===================================================== */

	.question-list,
	.question-list *,
	.question-list > div,
	.question-list > div > div,
	.question-list .wrap,
	.question-list .wrap-inner,
	.question-list .form,
	.question-list .block,
	.question-list .container,
	.question-list fieldset,
	.question-list legend,
	.question-list label[data-testid="block-label"],
	.question-list label,
	.question-list .gr-radio {
	background: #ffffff !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	}

	.question-list {
	border: 2px solid #1e5bd7 !important;
	border-radius: 16px !important;
	padding: 6px !important;
	min-height: 0 !important;
	height: auto !important;
	overflow: visible !important;
	box-sizing: border-box !important;
	}

	.gradio-container .form:has(.question-list),
	.gradio-container div.form:has(.question-list),
	.gradio-container .block:has(.question-list) {
	background: #ffffff !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	}

	.question-list > div,
	.question-list > div > div,
	.question-list fieldset,
	.question-list .wrap,
	.question-list .wrap-inner,
	.question-list .block,
	.question-list .container,
	.question-list .form {
	box-shadow: none !important;
	border-color: transparent !important;
	}

	.question-list::before,
	.question-list::after,
	.question-list > div::before,
	.question-list > div::after,
	.question-list > div > div::before,
	.question-list > div > div::after,
	.question-list fieldset::before,
	.question-list fieldset::after {
	display: none !important;
	content: none !important;
	border: none !important;
	box-shadow: none !important;
	}

	.question-list label[data-testid="block-label"],
	.question-list legend {
	display: none !important;
	}

	.question-list:focus,
	.question-list:focus-visible,
	.question-list:focus-within,
	.question-list > div:focus,
	.question-list > div:focus-visible,
	.question-list > div:focus-within,
	.question-list fieldset:focus-within {
	outline: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
	}

	.question-list .gr-radio {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	}

	.question-list .gr-radio label,
	.question-list label[data-testid="radio-label"] {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	border-radius: 12px !important;
	color: #000000 !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	}

	.question-list .gr-radio label::before,
	.question-list .gr-radio label::after,
	.question-list label[data-testid="radio-label"]::before,
	.question-list label[data-testid="radio-label"]::after,
	.question-list input[type="radio"] + *::before,
	.question-list input[type="radio"] + span::before {
	display: none !important;
	content: none !important;
	}

	.question-list input[type="radio"] {
	display: none !important;
	}

	.question-list .gr-radio label span,
	.question-list label[data-testid="radio-label"] span {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	white-space: normal !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: #000000 !important;
	}

	.question-list .gr-radio label:hover,
	.question-list label[data-testid="radio-label"]:hover,
	.question-list input[type="radio"]:checked + span,
	.question-list label[data-testid="radio-label"]:has(input[type="radio"]:checked) {
	background: #eef3ff !important;
	border-radius: 12px !important;
	}

	/* =====================================================
	MEDDELANDE (Textbox) – STABIL LÖSNING
	===================================================== */

	/* Yttre container */
	.message-box {
	background: #ffffff !important;
	border: 2px solid #1e5bd7 !important;
	border-radius: 16px !important;
	padding: 12px !important;
	min-height: 170px;
	box-shadow: none !important;
	box-sizing: border-box !important;
	}

	.gradio-container .message-box,
	.gradio-container .message-box > div,
	.gradio-container .message-box > label,
	.gradio-container .message-box > .wrap,
	.gradio-container .message-box .wrap,
	.gradio-container .message-box .block,
	.gradio-container .message-box .block-label,
	.gradio-container .message-box .form {
	border-color: #1e5bd7 !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	background: #ffffff !important;
	}

	.gradio-container .form:has(.message-box),
	.gradio-container div.form:has(.message-box) {
	background: #ffffff !important;
	border: 2px solid #1e5bd7 !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	padding: 0 !important;
	}

	.gradio-container .message-box::before,
	.gradio-container .message-box::after,
	.gradio-container .message-box > div::before,
	.gradio-container .message-box > div::after,
	.gradio-container .message-box > label::before,
	.gradio-container .message-box > label::after,
	.gradio-container .message-box .wrap::before,
	.gradio-container .message-box .wrap::after {
	display: none !important;
	content: none !important;
	border: none !important;
	box-shadow: none !important;
	}

	/* Ta bort Gradio-inre effekter */
	.message-box .wrap,
	.message-box.gr-box {
	background: #ffffff !important;
	border: none !important;
	box-shadow: none !important;
	}

	/* YTTRE BLOCK – döda Gradio-ram + mörka hörn */
	.block.message-box {
	background: #ffffff !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 16px !important;
	}

	/* Label-container som Gradio använder för extra ram */
	.message-box label.show_textbox_border {
	border: none !important;
	box-shadow: none !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	}

	/* Själva textarea – ALL text ritas här */
	.message-box textarea {
	width: 100% !important;
	min-height: 120px !important;
	overflow-y: auto !important;

	background-color: #ffffff !important;
	color: #000000 !important;

	border: none !important;
	outline: none !important;
	resize: none;

	font-size: 15px;
	line-height: 1.4;

	-webkit-text-fill-color: #000000 !important;
	}

	.message-box .scroll-hide,
	.message-box .hide-container {
	overflow: visible !important;
	}

	/* Placeholder */
	.message-box textarea::placeholder {
	color: #6b6b6b !important;
	opacity: 1 !important;
	}

	/* ===============================
	TA BORT YTTRE GRADIO-RAM PÅ TEXTBOX
	=============================== */

	/* Label-containern runt textbox */
	label.show_textbox_border,
	label.container.show_textbox_border {
	border: none !important;
	background: #ffffff !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 16px !important;
	}

	/* Säkerhetsnät – om Gradio ändrar klassnamn */
	.block:has(.message-box) > label {
	border: none !important;
	background: #ffffff !important;
	box-shadow: none !important;
	border-radius: 16px !important;
	}

	.gradio-container .message-box textarea,
	.gradio-container .message-box textarea:focus,
	.gradio-container .message-box textarea:focus-visible,
	.gradio-container .message-box textarea:active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	}

	.message-box + .row,
	.message-box ~ .row {
	margin-top: -6px !important;
	}

	.message-box ~ .row .send-btn,
	.message-box ~ .row button.gr-button.send-btn {
	margin-top: 0 !important;
	}

	/* ===============================
	TA BORT FOCUS-RUTA I TEXTAREA
	=============================== */

	/* Browser focus */
	.message-box textarea:focus,
	.message-box textarea:focus-visible,
	.message-box textarea:active {
	outline: none !important;
	box-shadow: none !important;
	}

	/* Gradio / Svelte focus-layer */
	.message-box textarea::after,
	.message-box textarea::before {
	display: none !important;
	}

	/* Om Gradio lägger focus på wrapper */
	.message-box .wrap:focus,
	.message-box .wrap:focus-within {
	outline: none !important;
	box-shadow: none !important;
	border-color: #1e5bd7 !important; /* behåll din blå ram */
	}

	/* Safari / Chromium specialfall */
	.message-box textarea {
	-webkit-tap-highlight-color: #ffffff !important;
	}

	/* =====================================================
	SVAR
	===================================================== */


	.answer-box .wrap,
	.answer-box.gr-box {
	color: #1e5bd7 !important;
	background: #ffffff !important;
	border: none !important;
	}
	.answer-box {
	border: 2px solid #1e5bd7 !important;
	border-radius: 10px !important;
	min-height: 260px;
	padding: 14px;
	}


	.answer-box * {
	color: #000000 !important;
	background: #ffffff !important;
	border: none !important;
	/*border: 2px solid #000000 !important;
	border-radius: 10px !important;*/
	}

	.answer-box h1,
	.answer-box h2,
	.answer-box h3,
	.answer-box h4 {
	margin-top: 0 !important;
	}

	.answer-box .faq-example-label {
	margin: 0.35rem 0 0.6rem !important;
	font-size: 1.08rem !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	}

	.answer-box .faq-example-label strong {
	font-weight: 700 !important;
	}

	.answer-note {
	margin-top: 8px !important;
	font-size: 13px !important;
	color: #000000 !important;
	}

	.answer-note,
	.answer-note * {
	background: #ffffff !important;
	color: #000000 !important;
	}

	/* ===============================
	SKICKA & RENSA – ABSOLUT LJUST
	=============================== */

	.gradio-container button.gr-button.send-btn,
	.gradio-container button.gr-button.send-btn.primary,
	.gradio-container button.gr-button.send-btn.secondary,
	.gradio-container .send-btn,
	.gradio-container .send-btn button {
	background-color: #1e5bd7 !important;
	color: #ffffff !important;
	border: 2px solid #1e5bd7 !important;
	border-radius: 10px !important;

	box-shadow: none !important;
	font-weight: 600;

	--button-primary-background-fill: #1e5bd7 !important;
	--button-primary-background-fill-hover: #1748aa !important;
	--button-primary-text-color: #ffffff !important;
	}

	.gradio-container button.gr-button.send-btn:hover {
	background-color: #1748aa !important;
	border-color: #1748aa !important;
	}

	.gradio-container .send-btn *,
	.gradio-container button.send-btn * {
	color: #ffffff !important;
	}

	/* ===============================
	CHECKBOX – TA BORT SVART BAKGRUND
	=============================== */

	/* Wrapper runt checkbox */
	.gradio-container .gr-checkbox,
	.gradio-container .gr-checkbox *,
	.gradio-container .form:has(.gr-checkbox) {
	background: #ffffff !important;
	box-shadow: none !important;
	border: none !important;
	}

	/* Själva checkboxen */
	.gradio-container .gr-checkbox input[type="checkbox"] {
	accent-color: #000000;
	}

	/* Texten */
	.gradio-container .gr-checkbox label {
	color: #000000 !important;
	font-weight: 500;
	}

	/* ===============================
	TA BORT SVARTA HÖRN I MEDDELANDE
	=============================== */

	label.show_textbox_border::before,
	label.show_textbox_border::after {
	display: none !important;
	content: none !important;
	}

	label.show_textbox_border {
	background: #ffffff !important;
	border: none !important;
	box-shadow: none !important;
	}

	/* ===============================
	TVINGA LJUSA KNAPPAR (ÄVEN SECONDARY)
	=============================== */

	.gradio-container button.gr-button.secondary,
	.gradio-container button.gr-button.primary {
	background-color: #1e5bd7 !important;
	color: #ffffff !important;
	border: 2px solid #1e5bd7 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	}

	.gradio-container button.gr-button.secondary:hover,
	.gradio-container button.gr-button.primary:hover {
	background-color: #1748aa !important;
	border-color: #1748aa !important;
	}

	/* ===============================
	DÖLJ GRADIO-FOOTER I EMBED
	=============================== */

	footer,
	.gradio-container footer,
	.gradio-container .footer,
	.gradio-container a[href*="gradio.app"],
	.gradio-container a[href*="api"],
	.gradio-container button[aria-label*="Settings"],
	.gradio-container button[title*="Settings"] {
	display: none !important;
	}

	.gradio-container .built-with,
	.gradio-container .prose footer,
	.gradio-container [class*="footer-links"] {
	display: none !important;
	}

	/* ===============================
	TA BORT SVART PLATTA BAKOM CHECKBOX
	=============================== */

	.gradio-container .form:has(.gr-checkbox) {
	background: #ffffff !important;
	box-shadow: none !important;
	border: none !important;
	}

	label.checkbox-container * input[type="checkbox"] {
	background-color: #ffffff !important;
	border-color: #000000 !important;
	/* You might also want to ensure the border style and width are consistent */
	border-style: solid;
	border-width: 2px;
	}

	/* ===============================
	CHECKBOX – FUNGERANDE SVART BOCK
	=============================== */
	/*
	.gradio-container input[type="checkbox"] {
	accent-color: #000000 !important;
	background-color: #ffffff !important;
	}
	*/
	.form .block{
	background: #ffffff !important;
	}

	/* ===============================
	CHECKBOX – KORREKT STYLING
	=============================== */

	.gradio-container .gr-checkbox {
	--checkbox-background-color: #ffffff;
	--checkbox-border-color: #000000;
	}