/* Appland Ordhjälp 1.3.0 */
.alo, .alov {
	--alo-bla: var(--al-bla, #4338ca);
	--alo-bla-mork: var(--al-bla-mork, #312a9e);
	--alo-bla-ljus: var(--al-bla-ljus, #eef0ff);
	--alo-mint: var(--al-mint, #0f9f75);
	--alo-mint-ljus: var(--al-mint-ljus, #e6f7f0);
	--alo-rod: var(--al-rod, #d9483b);
	--alo-rod-ljus: var(--al-rod-ljus, #fdeceb);
	--alo-black: var(--al-black, #14172b);
	--alo-gra: var(--al-gra, #5d6380);
	--alo-linje: var(--al-linje, #e3e6f0);
	--alo-bricka: #f6e7c1;
	--alo-bricka-kant: #d9c28a;
	background: #fff;
	border: 1px solid var(--alo-linje);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(20, 23, 43, .05), 0 8px 24px rgba(20, 23, 43, .06);
	padding: 20px;
	margin: 1.8em 0;
	color: var(--alo-black);
	font-size: 16px;
	line-height: 1.5;
}
.alo *, .alo *::before, .alo *::after, .alov *, .alov *::before, .alov *::after { box-sizing: border-box; }
.alo [hidden], .alov [hidden] { display: none !important; }

/* Flikar */
.alo__flikar {
	flex-wrap: wrap;
	display: flex;
	gap: 4px;
	background: #f3f4f9;
	padding: 4px;
	border-radius: 999px;
	margin-bottom: 18px;
}
.alo__flik {
	flex: 1;
	border: 0;
	background: transparent;
	color: var(--alo-gra);
	font: inherit;
	font-weight: 650;
	font-size: .93rem;
	padding: .6em .5em;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.2;
}
.alo__flik[aria-selected="true"] {
	background: #fff;
	color: var(--alo-bla);
	box-shadow: 0 1px 3px rgba(20, 23, 43, .12);
}

/* Fält */
.alo__etikett { display: block; font-weight: 650; font-size: .88rem; margin: 0 0 .35em; color: var(--alo-black); }
.alo__falt {
	width: 100%;
	border: 1px solid var(--alo-linje);
	border-radius: 12px;
	padding: .6em .8em;
	font: inherit;
	background: #fff;
	color: var(--alo-black);
	min-height: 44px;
}
.alo__falt:focus { outline: 2px solid var(--alo-bla); outline-offset: 1px; border-color: transparent; }
.alo__falt--stor {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .55em .8em;
}
.alo__falt--stor::placeholder { letter-spacing: .02em; font-weight: 500; font-size: 1rem; text-transform: none; color: #9aa0b8; }
.alo__hjalp { color: var(--alo-gra); font-size: .85rem; margin: .45em 0 0; }
.alo__etikett--mellan { margin-top: 14px; }

.alo__mer { margin-top: 14px; border-top: 1px solid var(--alo-linje); padding-top: 10px; }
.alo__mer summary { cursor: pointer; font-weight: 650; color: var(--alo-bla); font-size: .93rem; }
.alo__rad {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.alo__knapprad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.alo__knapp {
	border: 0;
	background: var(--alo-bla);
	color: #fff;
	font: inherit;
	font-weight: 700;
	padding: .75em 1.6em;
	border-radius: 999px;
	cursor: pointer;
	min-height: 44px;
}
.alo__knapp:hover { background: var(--alo-bla-mork); }
.alo__sortera { font-size: .88rem; color: var(--alo-gra); display: flex; align-items: center; gap: .5em; }
.alo__sortera select {
	border: 1px solid var(--alo-linje);
	border-radius: 999px;
	padding: .4em .8em;
	font: inherit;
	background: #fff;
	color: var(--alo-black);
}

/* Brickor */
.alo__brickor { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; min-height: 0; }
.alo-ord { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.alo-bricka {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--alo-bricka);
	border: 1px solid var(--alo-bricka-kant);
	border-bottom-width: 3px;
	border-radius: 7px;
	font-weight: 800;
	font-size: 1.05rem;
	color: #3b2f12;
	line-height: 1;
}
.alo-bricka sub {
	position: absolute;
	right: 3px;
	bottom: 2px;
	font-size: .58rem;
	font-weight: 700;
	line-height: 1;
}
.alo-bricka--blank { background: #fff; border-color: #c9ccd9; color: var(--alo-gra); }
.alo-ord--stor .alo-bricka { width: 42px; height: 42px; font-size: 1.25rem; }

/* Status och resultat */
.alo__status { margin: 16px 0 0; font-weight: 600; color: var(--alo-gra); font-size: .95rem; }
.alo__status:empty { display: none; }

.alo-bast {
	background: var(--alo-bla-ljus);
	border-radius: 14px;
	padding: 14px 16px;
	margin: 14px 0 6px;
}
.alo-bast__rubrik { margin: 0 0 8px; font-weight: 750; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--alo-bla-mork); }
.alo-bast__poang { margin: 8px 0 0; font-weight: 650; }

.alo-grupp { margin-top: 18px; }
.alo-grupp__rubrik {
	font-size: 1rem !important;
	margin: 0 0 8px !important;
	display: flex;
	align-items: baseline;
	gap: .6em;
	color: var(--alo-black);
}
.alo-grupp__rubrik span { color: var(--alo-gra); font-weight: 500; font-size: .85rem; }
.alo-lista {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.alo-lista li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: .3em .45em .3em .7em;
	border: 1px solid var(--alo-linje);
	border-radius: 999px;
	background: #fff;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: .9rem;
}
.alo-lista li::marker { content: none; }
.alo-lista__ord u { text-decoration: underline dotted; text-underline-offset: .2em; color: var(--alo-gra); }
.alo-lista__p {
	background: var(--alo-mint-ljus);
	color: var(--alo-mint);
	border-radius: 999px;
	font-size: .75rem;
	padding: .1em .55em;
	font-weight: 750;
	letter-spacing: 0;
}
.alo-visafler {
	margin-top: 10px;
	border: 1px solid var(--alo-linje);
	background: #fff;
	color: var(--alo-bla);
	font: inherit;
	font-weight: 650;
	font-size: .88rem;
	padding: .45em 1em;
	border-radius: 999px;
	cursor: pointer;
}

.alo-kolla { border-radius: 14px; padding: 16px; margin-top: 14px; }
.alo-kolla p { margin: 10px 0 0; font-weight: 600; }
.alo-kolla--ja { background: var(--alo-mint-ljus); }
.alo-kolla--nej { background: var(--alo-rod-ljus); }

.alo__kalla { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--alo-linje); color: var(--alo-gra); font-size: .8rem; }
.alo__kalla a { color: inherit; }

@media (max-width: 640px) {
	.alo { padding: 16px 14px; }
	.alo__rad { grid-template-columns: 1fr 1fr; }
	.alo__flikar { border-radius: 14px; }
	.alo__flik { font-size: .8rem; padding: .6em .2em; flex: 1 1 30%; }
	.alo-bricka { width: 32px; height: 32px; font-size: .95rem; }
	.alo-ord--stor .alo-bricka { width: 36px; height: 36px; font-size: 1.1rem; }
}