/*

********************************************************************************

Hueber.de CSS 2015

Stylesheets für Hueber.de

Version: 	3.1
Datum: 		XX.XX.2022

Erfordert: -

Hinweise:  -

Historie:	

3.1 (XX.XX.2022)	- Listen aktualisiert

3.01 (01.07.2022)	- UI-Button verbessert
					- Abstände bei Elementen im Grid verbessert
					- Hotspot-Buch überarbeitet
					- Contentdrawer überarbeitet
					- .flexbox-Klasse entfernt

3.0 (06.05.2022)	- Variablenstruktur überarbeitet

2.9 (09.06.2021)	- Abstände von Elementen überarbeitet
					- CSS-Variablen
					- Veraltete Regeln mit Browser-Präfixen entfernt
					- Verhalten der .emptynavicolumn-Klasse korrigiert,
					  wenn doch eine Navigation vorhanden ist

2.86 (10.09.2019) - Grid-Anzeige statt Flexbox für Anzeigegitter 
					(.flexbox CSS-Name bleibt zunächst bestehen)
				  - Veraltete Stile entfernt
				  - Webinar-Hervorhebung
				  - Breadcrumb überarbeitet
				  - Externe Site Links in Navigation optimiert

2.85 (18.07.2019) - Hueber WebUI Symbols Font und Symbole hinzugefügt

2.81 (08.03.2019) - Alte Body-Formatierungen in Legacy-Bereich überführt

2.8 (06.02.2019)  - Abstände von Headlines und Absätzen angepasst
				  - Code-Optimierungen für z.B. Formular-Eingabefelder
				  - Benachrichtigungszentrale hinzugefügt

2.7 (30.11.2018)  - Reihenfolge der Body-Elemente mittels Flex-Order umsortieren
				  - Dropdown-Stilvorlagen

2.6 (15.10.2018)  - Body-Formatierungen richten sich zukünftig nach den
					Einstellungen des übergeordneten Elements (z.B. .cols-lnl)

2.51 (27.09.2018) - Dashboards können bis zu 1280px breit sein

2.5 (05.09.2018)  - Erweiterung der Flexbox-Anzeige auf Bodys mit Listeneinträgen
					(Grid-Ansicht)
				  - Mobile Optimierungen

2.0 (26.03.2018)  - Zusammenlegung der verschiedenen Seiten-Templates und
					Optimierung der Header-Ausgabe mit Mobilnavigation

1.8 (23.09.2016)  - Div. Optimierungen und Hueber Forward Sans vorbereitet

1.7 (04.07.2016)  - Hotspot-Buch Version 2.5

1.6 (01.03.2016)  - Breadcrumb und Footer zu Flex geändert

1.3 (10.11.2015)  - Zielgruppen- und Startseiten-CSS in zg.css ausgelagert

1.2 (27.10.2015)  - Stile für Suche vorbereitet
				  - diverse Korrekturen

1.1 (07.05.2015)  - rem für body, #content und .kategorie eingeführt
					(em Fallback für Nicht-CSS3-Browser)
				  - Headline-Stile vollständig überarbeitet und redundante
					Angaben entfernt

1.02 (04.05.2015) - Body-Abstände auf normale Artikel-Abstände
					reduziert

1.01 (31.03.2015) - div. zusätzliche Stile

1.0 (23.03.2015)  - Abstände von h1-h4-Elementen vereinheitlicht
				  - h1-h4, p, ul, ol, table dunklere Textfarbe

0.3 (19.12.2014)  - LWS-spezifische Stile in lws.css ausgelagert

0.2 (05.12.2014)  - Service-Navigation vereinfacht

0.1 (14.11.2014)  - Alpha-Version

********************************************************************************

*/

:root
{
	--global-input-border-color: var(--mediumlight-line-color);
	--global-input-hover-border-color: var(--medium-line-color);

	--global-disabled-input-border-color: var(--extralight-line-color);

	--global-uibutton-color: #444;
	--global-uibutton-bg-color: rgba(255, 255, 255, .8);
	--global-uibutton-border-color: rgba(0, 0, 0, .35);
	--global-uibutton-boxshadow: none;

	--global-uibutton-selected-color: white;
	--global-uibutton-selected-bg-color: #e11138;
	--global-uibutton-selected-hover-bg-color: #e11138;
	--global-uibutton-selected-boxshadow: none;

	--global-uibutton-hover-color: #222;
	--global-uibutton-hover-bg-color: rgb(255, 255, 255, .9);
	--global-uibutton-hover-bordercolor: rgba(0, 0, 0, .6);
	--global-uibutton-hover-boxshadow: none;

	--global-uibutton-active-bordercolor: rgba(150, 150, 150, .85);
	--global-uibutton-active-boxshadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.35);

	--input-border-color: var(--global-input-border-color);
	--input-hover-border-color: var(--global-input-hover-border-color);

	--disabled-input-border-color: var(--global-disabled-input-border-color);

	--uibutton-color: var(--global-uibutton-color);
	--uibutton-bg-color: var(--global-uibutton-bg-color);
	--uibutton-border-color: var(--global-uibutton-border-color);
	--uibutton-boxshadow: var(--global-uibutton-boxshadow);

	--uibutton-selected-color: var(--global-uibutton-selected-color);
	--uibutton-selected-bg-color: var(--global-uibutton-selected-bg-color);
	--uibutton-selected-hover-bg-color: var(--global-uibutton-selected-hover-bg-color);
	--uibutton-selected-boxshadow: var(--global-uibutton-selected-boxshadow);

	--uibutton-hover-color: var(--global-uibutton-hover-color);
	--uibutton-hover-bg-color: var(--global-uibutton-hover-bg-color);
	--uibutton-hover-bordercolor: var(--global-uibutton-hover-bordercolor);
	--uibutton-hover-boxshadow: var(--global-uibutton-hover-boxshadow);

	--uibutton-active-bordercolor: var(--global-uibutton-active-bordercolor);
	--uibutton-active-boxshadow: var(--global-uibutton-active-boxshadow);
}

/* Formularfelder */

input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="email"], 
input[type="month"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="url"], 
input[type="week"],
select,
textarea
{
	border: var(--input-border);
	font-family: var(--body-font);
	font-size: .9rem;
	text-align: left;
}

input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="email"], 
input[type="month"], 
input[type="number"], 
input[type="password"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="url"], 
input[type="week"],
textarea
{
	border-radius: var(--small-border-radius);
	padding: .1rem .5rem;
}

input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="email"], 
input[type="month"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="url"], 
input[type="week"],
select,
select[size="0"], 
select[size="1"]
{
	height: 2.2em;
}

input[type="search"] 
{
	border-radius: var(--round-button-border-radius);
	padding: .2rem .6rem;
}

input[type="search"] ~ button[name="submitbt"]
{
	background: transparent;
	border: 0;
	height: 24px;
	margin: 6px 6px 6px 2px;
	min-width: auto;
	padding: 0;
	width: 24px;
}

input[type="checkbox"] + label,
input[type="radio"] + label
{
	padding-left: .3em;
}

select 
{
	border-radius: var(--small-border-radius);
	padding: .1rem 1.1rem .1rem .2rem;
}

select, select[size="0"], select[size="1"]
{
	-moz-appearance: none;
	-webkit-appearance: none;
	background-image: url(/assets/images/openselectbt.svg);
	background-position: right center;
	background-repeat: no-repeat;
	padding: 0 1.4em 0 .6em;
}

select::-ms-expand 
{
	display: none;
}

/* Buttons */

.uibutton
{
	align-items: center;
	background: var(--uibutton-bg-color);
	border: 1px solid var(--uibutton-border-color);
	border-radius: var(--squarish-button-border-radius);
	box-shadow: var(--uibutton-boxshadow);
	color: var(--uibutton-color);
	display: inline-flex;
	flex-flow: row wrap;
	font: normal 1em/1.1 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
	gap: .2em .3em;
	justify-content: center;
	margin-top: .5em;
	min-height: 1.7em;
	min-width: 1.7em;
	padding: .2em .4em;
	text-decoration: none;
	text-shadow: none;
}

.uibutton.global
{
	box-shadow: var(--global-uibutton-boxshadow);
	color: var(--global-uibutton-color);
}

.uibutton:not(.global),
button:not(.global),
input[type="submit"]:not(.global)
{
	box-shadow: var(--uibutton-boxshadow);
	color: var(--uibutton-color);
}

.uibutton:not([disabled])
{
	cursor: pointer;
}

.uibutton:hover
{
	text-decoration: none;
}

.uibutton.invisible
{
	min-width: initial;
}

.uibutton:not(.invisible)[disabled]
{
	opacity: .4;
	pointer-events: none;
}

.uibutton:not(.invisible):hover:not([disabled])
{
	background-color: var(--uibutton-hover-bg-color);
	border-color: var(--uibutton-hover-bordercolor);
	box-shadow: var(--uibutton-hover-boxshadow);
	color: var(--uibutton-hover-color);
}

.uibutton:not(.invisible):active:not([disabled])
{
	-webkit-backdrop-filter: brightness(85%);
	backdrop-filter: brightness(85%);
	border-color: var(--uibutton-active-bordercolor);
	box-shadow: var(--uibutton-active-boxshadow);
}

.uibutton,
.uibutton > *
{
	transition: transform .1s ease-in-out;
	transform: scale(1);
}

.uibutton:active:not([disabled]),
.uibutton:active:not([disabled]) > *
{
	transform: scale(.95);
}

.uibutton.invisible,
.uibutton.invisible:not(.selected):hover
{
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.uibutton.large
{
	padding: .4em .8em;
}

.uibutton > .wui
{
	font-size: 1.65em;
}

.uibutton > span + .wui
{
	order: 1;
}

.uibutton > span
{
	text-align: center;
}

.uibutton > span
{
	padding: .525em 1.1em .525em 0;
}

.uibutton > .wui
{
	display: inline-block;
	padding: .1em 0;
}

.uibutton > .wui:not(:only-child)
{
	padding-left: .3em;
}

.uibutton > span:only-child
{
	padding-left: 1.1em;
}

.uibutton > span:not(:only-child)
{
	order: 2;
}

@media (max-width: 767px)
{
	.uibutton.large
	{
		font-size: 1.2em;
	}

	.uibutton.large > .wui
	{
		font-size: 1.65em;
	}
}

@media (min-width: 768px)
{
	.uibutton.large
	{
		font-size: 1.3em;
	}

	.uibutton.large > .wui
	{
		font-size: 1.85em;
	}
}

.uibutton.global:not(.invisible),
button.global:not(.invisible),
input[type="submit"].global:not(.invisible)
{
	background: var(--global-uibutton-bg-color);
	border: 1px solid var(--global-uibutton-border-color);
}

.uibutton:not(.global):not(.invisible),
button:not(.global):not(.invisible),
input[type="submit"]:not(.global):not(.invisible)
{
	background: var(--uibutton-bg-color);
	border: 1px solid var(--uibutton-border-color);
}

.uibutton.invisible,
button.invisible,
input[type="submit"].invisible
{
	background: transparent;
	border: 1px solid transparent;
}

.uibutton:not(.invisible)[disabled],
button:not(.invisible)[disabled],
input[type="submit"]:not(.invisible)[disabled]
{
	opacity: .4;
	pointer-events: none;
}

.uibutton:not(.invisible):hover:not([disabled]),
button:not(.invisible):hover:not([disabled]),
input[type="submit"]:not(.invisible):hover:not([disabled])
{
	background: var(--uibutton-hover-bg-color);
	border-color: var(--uibutton-hover-bordercolor);
	box-shadow: none;
	color: inherit;
	text-decoration: none;
}

.uibutton:not(.invisible):active:not([disabled]),
button:not(.invisible):active:not([disabled]),
input[type="submit"]:not(.invisible):active:not([disabled])
{
	-webkit-backdrop-filter: brightness(85%);
	backdrop-filter: brightness(85%);
	border-color: var(--input-hover-border-color);
	box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.35);
}

.uibutton,
.uibutton > *,
button,
button > *,
input[type="submit"],
input[type="submit"] > *
{
	transition: transform .1s ease-in-out;
	transform: scale(1);
}

.uibutton:active:not([disabled]),
.uibutton:active:not([disabled]) > *,
button:active:not([disabled]),
button:active:not([disabled]) > *,
input[type="submit"]:active:not([disabled]),
input[type="submit"]:active:not([disabled]) > *
{
	transform: scale(.95);
}

.uibutton.invisible:active:not([disabled]),
button.invisible:active:not([disabled]),
input[type="submit"].invisible:active:not([disabled])
{
	border-color: transparent;
	box-shadow: none;
}

.uibutton > img,
button > img,
button.submitbt > img,
input[type="submit"].submitbt > img
{
	height: 23px;
	max-width: none;
	padding: 0;
	width: 23px;
}

.uibutton.additem,
.uibutton.additem:hover
{
	background-color: rgb(29, 131, 12);
	border-color: rgb(29, 131, 12);
}

/* Formulare */

div.formintro > div + div,
div.formintro + form,
div.formintro + ul
{
	margin-top: var(--p-margin-top) !important;
}

.form
{
	line-height: var(--p-line-height);
	position: relative;
}

.form ul
{
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding: 0 !important;
	position: relative;
}

.form li
{
	width: 100%;
}

.form li.top,
.form li.vertical,
.form li:not(.separator):not(.buttonbar):not(.buttonbar2):not(.line):not(.floatingcontent),
.form li.grid > .content,
.form li.grid > .group
{
	display: grid;
}

.form li.top,
.form li.vertical
{
	grid-template-rows: auto;
}

@media (max-width: 419px)
{
	.form li.grid > .content,
	.form li.grid > .group
	{
		grid-template-columns: 100%;
	}
}

@media (min-width: 420px) and (max-width: 567px)
{
	.form li.grid > .content,
	.form li.grid > .group
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 420px) and (max-width: 767px)
{
	.form li.grid > .content
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 568px)
{
	.form li.grid > .content,
	.form li.grid > .group
	{
		grid-template-columns: repeat(3, 1fr);
	}

	.form li
	{
		grid-template-columns: minmax(150px, 25%) auto;
	}

	.form li.top,
	.form li.vertical,
	.form li.separator,
	.form li.buttonbar,
	.form li.buttonbar2,
	.form li.line,
	.form li.floatingcontent
	{
		grid-template-columns: 100%;
	}

	.form ul.orderlist > li,
	.form li.orderitem
	{
		grid-template-columns: minmax(3em, 15%) auto;
	}

	.form li > ul
	{
		grid-column: 1/-1;
	}
}

@media (min-width: 768px)
{
	.form li.grid > .content
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

.form.lightui li:not(.separator):not(.buttonbar)
{
	padding: .1em 0;
}

.form:not(.lightui) li:not(.separator):not(.buttonbar)
{
	padding: .3em .4em;
	background-color: #f4f4f4;
}

.form li.floatingcontent
{
	display: flex;
	flex-flow: row wrap;
	gap: .8em 1.2em;
}

.form li.floatingcontent:empty
{
	display: none;
}

.form li.floatingcontent.alignright
{
	justify-content: flex-end;
}

.form li.floatingcontent > *
{
	display: inline-block;
}

.form .separator
{
	border-top: 1px solid #999;
}

.form.lightui .separator
{
	margin-top: 1.2em;
	padding: .4em .4em 0 0;
}

.form.lightui ul.separator
{
	padding-top: .4em !important;
}

.form:not(.lightui) .separator
{
	background-color: #eee;
	padding: .4em;
}

.form li.buttonbar,
.form li.buttonbar2
{
	text-align: right;
}

.form li.buttonbar
{
	padding: .3em 0 1em 0;
}

.form ul.liste > li.file
{
	background-position: 1.7em .5em;
	padding: 1em 0 !important;
}

.form ul.liste > li.file > span:first-child
{
	text-indent: -5em;
}

.form ul.liste > li.file > span:first-child *
{
	text-indent: 0;
}

.form ul:not(.orderlist) > li:not(.follow):not(.orderitem):not(:first-child),
.form ul + ul > li:not(.follow):not(.orderitem)
{
	margin-top: 1.2em;
}

.form li.gap
{
	margin-top: 1.8em !important;
}

.form li.orderitem
{
	display: flex;
	margin-top: .2em;
}

.form li:not(.orderitem) + li.orderitem
{
	margin-top: .6em;
}

.form li fieldset
{
	border-bottom: none;
	border-left: none;
	border-right: none;
	border-top: 1px solid #aaa;
	margin: .5em 0 0 0;
	padding: .5em 0 0 0;
}

.form li > label
{
	color: #666;
	display: inline-block;
}

.form li > label.required::after,
.form li > div > label.required::after,
.form li > span:only-child > input[type="checkbox"] + label.required::after
{
	color: inherit;
	content: "\00a0*";
}

.form li.orderitem > input[type="number"] + label,
.form li.orderitem > input[type="text"] + label
{
	margin-left: .8em;
	margin-right: 0;
}

.form li > div.descr
{
	font-size: .85em;
	margin-top: .5em;
	padding-right: 1em;
}

.form li > div.licensebox
{
	background-color: white;
	border: 1px solid #ccc;
	font-size: .9em;
	height: 260px;
	line-height: 1.3;
	overflow-y: scroll;
	padding: .2em .5em;
	width: calc(100% - 1em - 2px);
}

.form li.vertical > label
{
	display: block;
	margin-bottom: .5em;
}

.form li.vertical > span[class=""],
.form li.vertical > span[class="error"],
.form li.vertical > span:not([class]),
.form li.vertical > span.group > span
{
	display: flex !important;
}

.form li:not(.vertical) span[class=""],
.form li:not(.vertical) span[class="error"],
.form li:not(.vertical) span:not([class])
{
	display: inline-flex;
}

.form li > span[class=""],
.form li > span:not([class])
{
	align-items: flex-start;
}

.form li:not(.vertical) span[class=""]:not(:only-of-type):not(:last-of-type),
.form li:not(.vertical) span:not([class]):not(:only-of-type):not(:last-of-type)
{
	margin-right: .5em;
}

.form li span[class=""] > input[type="checkbox"],
.form li span:not([class]) > input[type="checkbox"],
.form li span[class=""] > input[type="radio"],
.form li span:not([class]) > input[type="radio"]
{
	flex: 0 0 auto;
}

.form textarea[disabled], 
.form select[disabled], 
.form input[type="date"][disabled], 
.form input[type="datetime"][disabled], 
.form input[type="datetime-local"][disabled], 
.form input[type="email"][disabled], 
.form input[type="month"][disabled], 
.form input[type="number"][disabled], 
.form input[type="password"][disabled], 
.form input[type="search"][disabled], 
.form input[type="tel"][disabled], 
.form input[type="text"][disabled], 
.form input[type="time"][disabled], 
.form input[type="url"][disabled], 
.form input[type="week"][disabled]
{
	background-color: rgba(255, 255, 255, .9);
	border-color: rgba(0, 0, 0, .2);
	color: rgba(0, 0, 0, .35);
}

.form li > div:only-child,
.form li > input:only-child,
.form li > select:only-child,
.form li > span:only-child,
.form li > textarea:only-child,
.form li > div.descr
{
	grid-column: 1 / -1;
}

.form li:not(.floatingcontent) input[type="date"], 
.form li:not(.floatingcontent) input[type="datetime"], 
.form li:not(.floatingcontent) input[type="datetime-local"], 
.form li:not(.floatingcontent) input[type="email"], 
.form li:not(.floatingcontent) input[type="month"], 
.form li:not(.floatingcontent) input[type="number"], 
.form li:not(.floatingcontent) input[type="password"], 
.form li:not(.floatingcontent) input[type="search"], 
.form li:not(.floatingcontent) input[type="tel"], 
.form li:not(.floatingcontent) input[type="text"], 
.form li:not(.floatingcontent) input[type="time"], 
.form li:not(.floatingcontent) input[type="url"], 
.form li:not(.floatingcontent) input[type="week"],
.form li:not(.floatingcontent) select,
.form li:not(.floatingcontent) textarea
{
	width: 100%;
}

.form ul.orderlist li input[type="number"],
.form ul.orderlist li input[type="text"],
.form li.orderitem > input[type="number"],
.form li.orderitem > input[type="text"]
{
	margin-right: .6em;
}

.form:not(.grid) li.file input[type="checkbox"],
.form:not(.grid) li.file input[type="radio"]
{
	margin-right: 4.8em;
}

.form li.file input[type="checkbox"] + label > div.text,
.form li.file input[type="radio"] + label > div.text
{
	display: none;
}

.form li.file input[type="checkbox"]:checked + label > div.text,
.form li.file input[type="radio"]:checked + label > div.text
{
	display: block;
}

.tinymcearea
{
	margin: 0 .5em;
	width: calc(100% - 1em);
}

.formfieldh 
{
	display: none !important;
}

/* Hervorhebungen */

article.artikel.error .headarea,
article.artikel.error .headarea .head,
article.artikel.error p,
div.error,
div.important,
p.error,
.form li > label.error,
.errormsg 
{
	color: var(--error-color) !important;
}

div.error,
div.important,
div.warning
{
	border-radius: var(--medium-border-radius);
	margin-bottom: var(--p-margin-top);
	margin-top: var(--p-margin-top);
	padding: .4rem .5rem;
}

div.error,
div.important
{
	background-color: var(--error-bg-color);
	border: var(--thin-line-width) solid var(--error-color);
}

div.important
{
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}

div.warning
{
	border: var(--thin-line-width) solid var(--warning-color);
}

div.error > article:first-child,
div.error > article:first-child,
div.error > article > :first-child,
div.error > article > :first-child,
div.important > article:first-child,
div.important > article:first-child,
div.important > article > :first-child,
div.important > article > :first-child
{
	margin-top: 0 !important;
}

div.error > .artikel:not(:first-child),
div.important > .artikel:not(:first-child),
div.warning > .artikel:not(:first-child)
{
	margin-top: .5rem !important;
	padding-top: .5rem !important;
}

div.error > .artikel:not(:first-child),
div.important > .artikel:not(:first-child)
{
	border-top: var(--thin-line-width) solid var(--error-color) !important;
}

div.warning > .artikel:not(:first-child)
{
	border-top: var(--thin-line-width) solid var(--warning-color) !important;
}

.form li input.error,
.form li select.error,
.form li span.error,
.form li textarea.error,
.form ul.error
{
	outline: var(--light-line-width) solid var(--error-color);
	outline-offset: 1px;
}

/* Freischwebende Buttons (Kontakt und Seitenanfang) */

#contactformbt,
#topofpagebt
{
	background: rgba(119, 119, 119, .3);
	border-radius: var(--round-button-border-radius);
	color: white;
	cursor: pointer;
	order: 50;
	position: fixed;
	text-align: center;
	transition: opacity 1.5s ease;
	z-index: 99999;
}

#topofpagebt
{
	opacity: 0;
	pointer-events: none;
	right: 60px;
}

#contactformbt::after,
#topofpagebt::after
{
	display: inline-block;
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
	padding-top: 4px;
}

#contactformbt::after
{
	content: "T";
}

#topofpagebt::after
{
	content: "\F00E2";
}

body.topb #topofpagebt
{
	opacity: 1;
	pointer-events: auto;
	transition: opacity 1s ease;
}

@media (max-width: 767px)
{
	#contactformbt,
	#topofpagebt
	{
		height: 30px;
		line-height: 22px;
		right: 2vw;
		width: 30px;
	}

	#contactformbt
	{
		bottom: 7em;
		font-size: 16px;
	}
	
	#topofpagebt
	{
		bottom: 3.5em;
		font-size: 20px;
	}
}

@media (min-width: 768px)
{
	#contactformbt,
	#topofpagebt
	{
		bottom: 70px;
	}

	#contactformbt
	{
		right: 20px;
	}
}

@media (min-width: 768px) and (max-width: 1023px)
{
	#contactformbt,
	#topofpagebt
	{
		height: 40px;
		line-height: 32px;
		width: 40px;
	}

	#contactformbt
	{
		font-size: 20px;
	}
	
	#topofpagebt
	{
		font-size: 24px;
		right: 70px;
	}	
}

@media (min-width: 1024px)
{
	#contactformbt,
	#topofpagebt
	{
		height: 50px;
		line-height: 44px;
		width: 50px;
	}

	#contactformbt
	{
		font-size: 24px;
	}
	
	#topofpagebt
	{
		font-size: 28px;
		right: 80px;
	}	
}

/* */

.genclosebutton
{
	border-radius: var(--round-button-border-radius);
	cursor: pointer;
	font-family: var(--symbol-font);
	height: 28px;
	line-height: 28px;
	text-align: center;
	width: 28px;
}

.genclosebutton.white
{
	background-color: white;
	box-shadow: var(--boxshadow-large);
}

.genclosebutton:not(.white)
{
	border: var(--thinline);
	color: var(--text-color);
}

.genclosebutton::after
{
	content: "\F0011";
}

#layerclosebutton
{
	pointer-events: none;
	position: absolute;
}

body.drawer.modal #layerclosebutton
{
	display: none;
}

@media (max-width: 461px)
{
	body.navi #layerclosebutton
	{
		display: none;
	}
}

@media (max-width: 567px)
{
	#layerclosebutton
	{
		right: 8px;
		top: 6px;
	}
}

@media (min-width: 768px)
{
	#layerclosebutton
	{
		right: 1rem;
		top: 1rem;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	#layerclosebutton
	{
		right: 12px;
		top: 8px;
	}
}

@media (min-width: 768px)
{
	.form li:not(.top) > label:not(:only-child)
	{
		color: #666;
	}

	.form li:not(.top) > label:not(:only-child),
	.form li:not(.top) > label + span.group
	{
		padding: .35em 0;
	}

	.form li.top > label:not(:only-child),
	.form li.vertical > label:not(:only-child)
	{
		padding: 0 0 .35em 0;
	}

	.form li:not(.orderitem):not(.top):not(.vertical) > label:not(:only-child)
	{
		margin-right: .5em;
		/* width: 20%; */
	}

	.form li > div.halfhalf::after,
	.form li > div.twothirdonethird::after
	{
	  content: "";
	  clear: both;
	  display: table;
	}

	.form li > div.halfhalf > :first-child
	{
		float: left;
		width: 50%;
	}
	.form li > div.halfhalf > :last-child
	{
		float: right;
		width: 50%;
	}

	.form li > div.twothirdonethird > :first-child
	{
		float: left;
		width: 66%;
	}

	.form li > div.twothirdonethird > :last-child
	{
		float: right;
		width: 33%;
	}
}

@media (max-width: 767px) 
{
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	select,
	textarea
	{
		font-size: 1.1em;
	}
}

@media (min-width: 768px)
{
	.form .floatingcontent .formselect + .formselect::before
	{
		content: '\F0082';
		display: inline-block;
		font-family: var(--symbol-font);
		font-size: 1.3em;
		font-style: normal;
		font-weight: normal;
		height: 100%;
		line-height: 1.7;
		margin-right: .8em;
	}
}

@media (max-width: 767px) 
{
	.form li:not(.top) .formselect,
	.form li:not(.top) .formselect select
	{
		width: 100%;
	}
}