:root{
	--footerHeight: 60px;
	--headerHeight: 80px;
	--standardMargin: 25px;
	--buttonBackground: #0071b8;
	--buttonFontColor: #FFFFFF;
	--formularBorderColorNotActive: #CCCCCC;
	--formularBorderColorActive: var(--buttonBackground);
	--formularBorderNotActive: 2px solid var(--formularBorderColorNotActive);
	--formularBorderActive: 2px solid var(--formularBorderColorActive);
	--formularFontSize: 50px;
	--fontSize: 50px;
	--fontSizeSmall: 40px;
	--fontSizeButtons: 40px;
	--fontColor: #000000;
	--fontColorListEntryLowPriority: grey;
	--fontColorListEntryStandardPriority: #000000
	--fontColorListEntryHighPriority: #000000;
	--fontColorWarning: #0071b8;
	--marginBottom: 12px;
	--formularPaddingHorizontal: 12px;
	--listPaddingLeft: 60px; 
}


body {
	font-size: var(--fontSize);
	font-family:arial,sans-serif;
}

/* --------------------- Header ---------------------  */

.header{
	margin-top: 10px;
}

.headericon {
	margin-left: 0px;
	margin-right: 0px;
	height: var(--headerHeight);
	fill: red;
}


input.icon{
	border: 0;
}

input[type=radio] {
    border: 0px;
    width: 30px;
    height: 30px;
    margin-right: var(--standardMargin);
}

.headericon.left {
	margin-right: var(--standardMargin);
		fill: red;
}

.headericon.right {
	margin-left: var(--standardMargin);
}

/* --------------------- Darstellungsbereich --------------------- */

/* allgemein */

h1{
	margin-top: 50px;
	margin-bottom: 25px;
	font-size: 60px;
	color: var(--buttonBackground);
}

h2{
	margin-top: 50px;
	margin-bottom: 15px;
	font-size: var(--fontSize);
	color: var(--buttonBackground);
}

h3{
	margin-top: 50px;
	margin-bottom: 0px;
	font-size: var(--fontSize);
	color: var(--fontColor);
}

h4{
	margin-top: 50px;
	margin-bottom: 0px;
	font-size: var(--fontSize);
	color: var(--fontColor);
	font-style: italic;
}

a{
	text-decoration: none;
	color: var(--fontColor);
}



a.highlighted{
	text-decoration: none;
	color: var(--buttonBackground);
}


em{
	font-weight: bold;
}

.URL{
	font-weight: bold;
	font-family: monospace;
}

p.URL{
	text-align: center;
}

.infotext{
	font-weight: bold;
	font-size: var(--fontSizeSmall);
	margin-top: var(--standardMargin);
}
.cleardiv
{
	clear: both;
	height: 0px;
	width: 0px;
}

label.highlighted{
	color: var(--buttonBackground);
	font-weight: bold;
}

.formularFontSize{
	font-size: var(--formularFontSize);
}

.fullWidth{
	width: 100%;
}

p.warning {
	color: var(--fontColorWarning);
	font-weight: bold;	
	border-left: var(--fontColorWarning) 20px solid;
   padding-left: var(--standardMargin);
}

p.warning a{
	text-decoration: underline;
	color: var(--fontColorWarning);
}

/* Listenbereich */

.list {
	display: grid;
	grid-column-gap: var(--standardMargin);
	grid-row-gap: calc(var(--standardMargin) / 2);
	grid-template-columns: 1fr 4fr 80px;
}

.amount {
  	hyphens: auto;
}

.amount, 
.article {
	text-align: left;
}

legend{
	color: var(--buttonBackground);
}

li{
	margin-bottom: var(--marginBottom);
}

li.notInBasket{
	font-weight: bold;
}

li.low a, 
input.listEntry.notInBasket.low,
button.listEntry.notInBasket.low {
	color: var(--fontColorListEntryLowPriority);
	font-weight: normal;
}


li.standard a, 
input.listEntry.notInBasket.standard,
button.listEntry.notInBasket.standard {
	color: var(--fontColorListEntryStandardPriority);
	font-weight: normal;
}
li.urgent a, 
input.listEntry.notInBasket.urgent,
button.listEntry.notInBasket.urgent {
	color: var(--fontColorListEntryHighPriority);
	font-weight: bold;
}

.edit {
	text-color: center;

}

.listicon {
	margin: 0px 0px 0px var(--standardMargin);
	height: 58px;
}

.texticon{
	margin: 0px 10px 0px 10px;
	height: 40px;
}

.floatRight {
	float: right;
}

.sorticons{
	float:right;
}

.sorticon,
.editicon{
	margin: 0px 0px 0px 25px;
   height: var(--fontSize);
}

ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

ul.bulletlist{
	list-style-type: disc;
	padding-left: var(--listPaddingLeft);
}

ol{
	padding-left: var(--listPaddingLeft);
}

/*.content .listEntry, */
button.listEntry {
	vertical-align:bottom;
	font-size:50px;
	background-color: Transparent;
	margin:0;
	padding:0;
	border:0;
	cursor:pointer;
	white-space: normal;
	text-align: left;
	color: var(--fontColor);
	width: unset;
}

.content .listEntry.inBasket{
	text-decoration: line-through;
}




.submitButtonArea {
	padding-top: var(--standardMargin);
}

/*input.submitButton, */
button {
	background: var(--buttonBackground);
	border: 0;
	color: var(--buttonFontColor);
	width: 280px;
	padding: 10px var(--formularPaddingHorizontal);
	font-size: var(--fontSizeButtons);
}



input[name="amount"]{
	width: 196px;
}



/* Suchvorschläge ArticleName */

.bs-example{
	position: relative;
	margin: var(--standardMargin);
}

input,.typeahead,.tt-query, .tt-hint {
	border: var(--formularBorderNotActive);
	border-radius: var(--formularBorderRadius);
	font-size: var(--formularFontSize);
	outline: medium none;
	padding: var(--formularPaddingVertical) var(--formularPaddingHorizontal);	
}


select{
	border: var(--formularBorderNotActive);
	border-radius: var(--formularBorderRadius);
	font-size: var(--formularFontSize);
	outline: medium none;	
	padding: var(--formularPaddingVertical) var(--formularPaddingHorizontal);
	background-color: var(--buttonFontColor);
	-moz-appearance: none;
  	-webkit-appearance: none;
	appearance: none;
}

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

	.typeahead, .tt-query, .tt-hint {

	width: 100%;
}

.typeahead {
	background-color: #FFFFFF;
}

select:focus,.typeahead:focus,input:focus { 
	border: var(--formularBorderActive);
}

.tt-hint {
	color: var(--formularBorderColorNotActive);
}
.tt-dropdown-menu {
	background-color: var(--buttonFontColor);
	border: 1px solid var(--formularBorderColorNotActive);
	border-radius: var(--formularBorderRadius);
	box-shadow: 0 5px 10px var(--formularBorderColorNotActive);
	margin-top: 12px;
	padding: var(--formularPaddingVertical) 0;
	width: 422px;
}
.tt-suggestion {
	font-size: var(--formularFontSize);
	line-height: var(--formularFontSize);
	padding: 3px 20px;
	margin-bottom: var(--standardMargin);
}
.tt-suggestion.tt-is-under-cursor {
	background-color: var(--buttonBackground);
	color: var(--buttonFontColor);
}
.tt-suggestion p {
	margin: 0;
}



/* --------------------- Footer --------------------- */

.footer {
	clear: both;
	padding-top: 80px;;
}

.footericon {
	margin-left: 0px;
	margin-right: 0px;
	height: var(--footerHeight);
}