/*
  foodsoft: Order system for Food-Coops
  Copyright (C) 2024  Tilman Vogel <tilman.vogel@web.de>

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

/*
 *
 *   general defaults:
 *
 */

html, body {
  height: 100%;
  margin: 0px;
}

body {
  color:#000000;
  background:#ffffff;
  padding:0ex;
  margin:0ex;
  font-size:11pt;
  font-family:verdana,arial,sans-serif;
}

div.layout {
  width: 100%;
  overflow: auto;
  border-bottom-style: solid;
  border-width: thin;
  display: block;
}

div.layout_master {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

img {
  border-style:none;
}


div#payload {
  padding:1ex;
}

.ro {
  background:#ffeedd;
}

.smallskip, tr.smallskip td, tr.smallskip th, table.smallskip tr td, table.smallskip tr th {
  padding-top:0.5em;
}
.medskip {
  padding-top:1em;
}
.bigskip {
  padding-top:2em;
}
.quad {
  padding-left:1ex;
}
.qquad {
  padding-left:2ex;
}


h1, h2, h3, h4 {
  color:#000000;
  margin: 0pt 0pt 1em 0pt;
}

h1 {
 font-size:16pt;
 padding: 5px;
}
h2 {
 font-size:14pt;
 padding: 3px;
}
h3 {
 font-size:12pt;
 padding: 2px;
}
h4 {
 font-size:11pt;
 padding: 1px;
}

input:hover, input:focus, textarea:hover, select:hover {
  background-color:#f0f0ff;
}

kbd {
  font-family:arial,sans-serif;
  font-weight:bold;
  color:#000000;
}

/* reasonable defaults for all tables: */
table, table * td, table * th {
  border-collapse:collapse !important;
  empty-cells:show !important;
  border-style:none;
  margin:0pt;
  border-spacing:0px;
  border-width:0pt;
  text-align:left;
  vertical-align:top;
  font-size:11pt;
}

table.layout tr td, table table.layout tr td, table table table.layout tr td {
  /* <rant author='timo' mood='desperate' date='20081013.074606'>
   *    Yes I now that some people frown upon using <table> for layout.
   *
   *    The problem is, even <table> is a very inferior tool for someone used to
   *    enjoy the power of \halign, and all substitutes suggested to me so far
   *    are even worse (like, manually stacking little <div>-boxes, most of them
   *    with absolute and literal(!) size specifications - ugh!
   *    (a macro processor, like in TeX or even in good old K&R C, would help a
   *    lot here - but they forgot even that essential thing in that kludge
   *    called HTML. Probably they wanted to take over the "last language without
   *    a preprocessing facility" award from BASIC).
   *    (Timo, who still can't get how aboute one decade after the introduction
   *    of an excellent typesetting/markup language combo (TeX/LaTeX) something as
   *    crippled as HTML/CSS could be seriously suggested, and even win the
   *    competition)
   *
   *    (and yes, these rules for table.layout and table.list are ugly hacks.
   *     better suggestions welcome.)
   * </rant>
  */
  border-style:none;
}

/*
 * table.list: standardtabelle fuer bestellscheine, kontoanzeigen, ...
*/

table.list tr td, table table.list tr td, table table table.list tr td, table.list tr th, table table.list tr th, table table table.list tr th {
  border:dotted 1px #404040;
  padding: 0.4ex 1ex 0.4ex 1ex;
}
table.list tr th, table table.list tr th, table table table.list tr th {
  text-align:center;
}

div.price_history{
    overflow: auto;
    max-height: 30ex;
}

td {
  border-style:none;
  color:#000000;
  background-color:#ffffff;
}
th, .th {
  font-weight:bold;
  background-color:#dddddd;
}

table.debug tr th, table.debug tr td {
  border:1px dotted black;
}

table.tight {
    width:100% !important;
}
table.tight tr th, table.tight tr td, td.tight, th.tight, div.tight {
  padding:0pt !important;
  margin:0pt !important;
}

ul {
  padding:0px 1ex 0px 1em;
  margin:0px;
}
ul.plain {
  list-style-type:none;
}

li {
  margin-top:5px;
  margin-bottom:5px;
}

/*
 *
 * general properties
 *
 */
.right {
  text-align:right !important;
}
.floatright {
  float:right;
}
.left {
  text-align:left !important;
}
.floatleft {
  float:left;
}
.center {
  text-align:center !important;
}
.top {
  vertical-align:top !important;
}
.bottom {
  vertical-align:bottom !important;
}
.vcenter {
  vertical-align:middle !important;
}
.bold {
  font-weight:bold !important;
}
.italic {
  font-style:italic !important;
}
.oneline {
  white-space:nowrap;
}
.small {
  font-size:smaller;
}
.smalll {
  font-size:smaller !important;
}
.large {
  font-size:larger;
}
.hfill, td.hfill input[type='text'] {
  width:100%;
}

/* fuer farbige zellen im bestellformular: */

.outdated {
  background-color:#ffffaa !important;
}
.highlight {
  font-weight:bold;
  background-color:#d0ffc0 !important;
}
.crit {
  font-weight:bold;
  background-color:#fff0c0 !important;
}

/* fuer farbigen text: */
.black {
  color:#000000;
}
.green {
  color:#00ff00;
}
.yellow {
  color:#ffc800;
}
.red {
  color:#ff0000;
}

.nodisplay {
  display:none;
}

.unselectable, div.touch_button {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/*
 *
 * page header
 *
*/

div#header, div#header table, div#header table tr td {
  color:#ffffff;
  font-weight: bold;
  font-size: 12pt;
  padding:0pt;
  margin:0pt;
}
div#header.head, div#header.head table, div#header.head table tr td {
  background-color:#e01010;
}
div#header.headro, div#header.headro table, div#header.headro table tr td {
  background:url(readonly.gif);
  background-repeat:repeat;
}

span.logo, span.logoinvers, a.logo, a.logo:visited, a.logo:link {
 height:56px;
 line-height:54px;
 letter-spacing:-1px;
 font-size:24pt;
 margin:0pt;
 padding:0pt;
 text-decoration: none;
}
span.logo, span.logo a {
  color:#ffffff;
  background-color:#e01010;
}
span.logoinvers, span.logoinvers a {
  color:#e01010;
  background-color:#ffffff;
}
span.logo a:hover {
  text-decoration:underline;
}

/* das menu mit hover funktion  */

div#header ul#menu {
  background:#e01010;
  display:inline;
  margin:0pt;
  padding:2px 5px 0px 5px; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
  line-height:3ex;  /* etwas zeilenabstand erzwingen */
}

ul#menu li {
  color:white;
  font-size:11pt;
  display:inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
  border-left: 1px dotted white;
  font-weight: bold;
  white-space:nowrap;
  margin:0pt;  /* bei inline-elementen sowieso wirkungslos */
  padding:0pt;
}

ul#menu li a, ul#menu li span {
  padding: 2px 8px 0px 8px;
  color: white;
  text-decoration: none;
}
ul#menu li span.inactive {
  background:#e01010;
  color:#cccccc;
}
ul#menu li a:hover {
  background: white;
  color: #e01010;
}
ul#menu li a.wikilink {
  margin-left:2em;
}


/*
 *
 *   payload bay: table styles
 *
 *
*/



/* tabellenzeilen und -spalten mit sonderbedeutung */

/* zellen mit zahlen: rechtsbuendig, nicht umbrechen: */

.number, .number input {
  white-space:nowrap !important;
  text-align:right !important;
}

.mult, .mult input {
  white-space:nowrap !important;
  text-align:right !important;
  margin-right:0ex !important;
  padding-right:0.8ex !important;
}

td.mult {
  border-right-style:none !important;
}

.unit {
  white-space:nowrap !important;
  text-align:left !important;
  border-left-style:none !important;
  margin-left:0pt !important;
  padding-left:0pt !important;
}

td.wide, th.wide {
  padding-left:1em;
  padding-right:1em;
}


/* fuer auswahllisten (grosse knoepfe) und aehnliches */

table.menu, table.menu tr th {
  border:1px dotted gray;
}
table.menu tr td, table.menu tr th {
  padding:0.5ex;
}


/* kleine untertabellen und listen in tabellenzellen: */

table.inner tr td {
  padding:1px 0.5ex 1px 0.5ex;
}
ul.inner {
  padding:0pt 0pt 0pt 1.5em;
  margin:0pt;
  list-style-type:square;
}
ul.inner li {
  margin: 0.5ex 0ex 0.5ex 0ex;
}


tr.legende td {
  color:#666666;
}

table tr.summe td, table tr.summe th, table.list tr.summe td {
  font-weight:bold;
  border-top:2px solid #666666;
  border-bottom:2px solid #666666;
}

td.solidright, th.solidright {
  border-right:1px solid !important;
}
td.solidleft, th.solidleft {
  border-left:1px solid !important;
}
td.noleft, th.noleft {
  border-left:none !important;
}
td.noright, th.noright {
  border-right:none !important;
}
td.notop, th.notop {
  border-top:none !important;
}
td.nobottom, th.nobottom {
  border-bottom:none !important;
}

/* formatierung der bilanzaufstellung */

table.inner tr.rubrik th {
  padding:0.8ex;
}
table.inner tr.rubrik th div {
  background-color:#dddddd;
  border:1px dotted #888888;
  border-top:1px solid #888888;
  padding:0.6ex;
}

table tr.posten td, table tr.posten th {
  padding:0.8ex 1em 0.8ex 0em;
  text-align:right;
  vertical-align:middle !important;
}
table.inner tr.ersterposten td {
  padding:0.8ex 1em 0.8ex 0em;
  text-align:right;
}

tr.posten td.number, tr.ersterposten td.number {
  font-weight:bold;
}
tr.posten td.rednumber, tr.ersterposten td.rednumber, td.rednumber {
  color:#ff0000;
  font-weight:bold;
}
td.number input {
  text-align:right;
}

/* groupofrows: gruppieren von zeilen */

table.list tr.groupofrows_top td, table.list tr.groupofrows_top th {
  border-bottom-style:none;
}
table.list tr.groupofrows_middle td, table.list tr.groupofrows_middle th {
  /* folgezeilen koennen auf groesse 0 kollabieren: */
  padding-top:0pt;
  padding-bottom:0pt;
  margin-top:0pt;
  margin-bottom:0pt;
  height:0pt;
  border-top-style:none;
  border-bottom-style:none;
}
table.list tr.groupofrows_bottom td, table.list tr.groupofrows_bottom th {
  padding-top:0pt;
  margin-top:0pt;
  padding-bottom:0pt;
  margin-bottom:0pt;
  height:0pt;
  border-top-style:none;
}

table.list tbody {
  page-break-inside: avoid;
}

tr.modified td, tr.modified th, .modified {
  background-image:url(modified.gif);
  background-repeat:repeat;
}
table.list tr.active td {
  background-color:#ccffcc;
}

table.greywhite tr.odd td {
  background-color:#dddddd;
}
table.greywhite tr.even td {
  background-color:#ffffff;
}


/*
 *
 *  formulare, formulare...
 *
*/

fieldset.small_form, .small_form td {
  background-color:#ffffc0 !important;
  /* background-color:#d0f0c0; */
}

fieldset.small_form {
  margin:1ex;
  border-style:solid;
  border-color:#404040;
  border-width:1px;
  padding:1ex;
  margin:1ex;
}
.small_form table.layout td {
  padding:0.5ex;
}
.small_form table tr th {
  background-color:#f0c060;
  padding:0.3ex 0.6ex 0.2ex 0.6ex;
  border-style:none;
  border-bottom:solid 1px #404040;
}
.small_form table tr th + th {
  border-left:solid 1px #404040;
}
.small_form table tr td label a {
  padding:0pt;
}

.big_form fieldset, fieldset.big_form {
  background-color:#ffffff;
  margin:1ex;
  border-style:solid;
  border-color:#404040;
  border-width:1px;
  padding:1ex;
  margin:1em 1ex 1em 1ex;
}

fieldset legend {
  font-weight:bold;
  background-color:#ffffff;
  color:#000000;
  padding:0.2ex 1ex 0.2ex 1ex;
  border:solid 1px #404040;
}

tr.newfield td, div.newfield {
  padding-top:1ex;
}
tr.newfield th {
  margin-top:3em;
}

tr.lastline td {
  padding-bottom:1em;
}

label {
  margin-right:1em;
}

.kommentar {
  padding-top:1em;
  padding-bottom:1em;
  padding-left:4em;
  padding-right:4em;
  color:#4040a0;
  font-size:11pt;
}

span.floatingbuttons, div.floatingbuttons {
  display:none;
  z-index:999;
  position:fixed;
  top:8px;
  left:8px;
  padding:1em !important;
}

/*  warnings, alerts and oks */

.warn, .warn th, .warn td, .warn div, .warn span {
  background-color:#f0a0a0;
  color:#000000;
  font-weight:bold;
}
div.warn {
  display:block !important;
}

/* .alert, .alert th, .alert td, .alert div, .alert span  { */
.alert {
  background-color:#ffffa0;
  color:#000000;
  font-weight:bold;
}
.Alert {
  background-color:#ffffa0 !important;
  color:#000000;
  font-weight:bold !important;
}
.ok, .ok th, .ok td, .ok div, .ok span {
  background-color:#ccffcc;
  color:#000000;
}
div.alert, span.alert, div.warn, span.warn, div.ok, span.ok {
  padding-top:2px;
  padding-bottom:2px;
}


/*
 *
 *  bedienelemente: knoepfe und links
 *
 */

a, a:visited, .href, .href:visited {
  color:#d01010;
  text-decoration: none;
}
a:hover, .href:hover {
  text-decoration: underline;
}
a + a , .link + .link {
  margin-left:1ex;
}
@media print {
  a {
    color:#000000 !important;
  }
}


.bigbutton, .bigbutton:visited {
  width:200px;
  height:20px;
  font-size:11pt;
  text-decoration:none;
  text-align:center !important;
  vertical-align:middle !important;
  margin:2px 1em 2px 1em;
  padding:0.1ex 1ex 0.1ex 1ex;
  color:#000000;
  background-color:#d0e0ff;
  border-style:solid;
  border-width:1px;
  border-color:#888888;
  white-space:nowrap;
  min-width:200px;
  display:block;
}
.button, .button:visited {
  font-size:11pt;
  font-weight:normal;
  text-decoration:none;
  text-align:center;
  vertical-align:middle;
  margin:0pt 0.8em 0pt 0.8em;
  padding:1px 0.5ex 1px 0.5ex;
  color:#000000;
  background-color:#d0e0ff;
  border-style:solid;
  border-width:1px;
  border-color:#888888;
  white-space:nowrap;
}
.button:hover, .bigbutton:hover {
  text-decoration:underline;
  background-color:#e0ffff;
}
.inactive, .inactive:hover {
  color:#888888;
  background-color:#cccccc;
  text-decoration:none;
}


.drop, .edit, .record, .browse, .people, .cash, .chart, .fant, .question, .magic {
  background-repeat:no-repeat;
  background-position:8px 0px;
  white-space:nowrap;
}

.drop, .edit, .record, .browse, .people, .cash, .chart, .question {
  padding:0px 1ex 1px 30px;
}

.fant {
  padding:0px 1ex 1px 36px;
}


.drop {
  background-image:url(../img/b_drop.png);
}

.edit {
  background-image:url(../img/b_edit.png);
}

.record {
  background-image:url(../img/card.png);
}

.browse {
  background-image:url(../img/b_browse.png);
}

.cash {
  background-image:url(../img/euro.png);
}

.people {
  background-image:url(../img/people.png);
}

.question {
  background-image:url(../img/question_small.png);
}

.chart {
  background-image:url(../img/chart.png);
}

.fant {
  background-image:url(../img/fant.gif);
}

.magic {
  padding:0px 1ex 15px 36px;
  background-image:url(../img/magic_wand.png);
}

.open {
  background-image:url(../img/open_black.gif);
  background-repeat:no-repeat;
  background-position:0px 0px;
  padding:0px 15px 0px 0px;
}
.close {
  background-image:url(../img/close_black.gif);
  background-repeat:no-repeat;
  background-position:0px 0px;
  padding:0px 15px 0px 0px;
}
.close:hover {
  background-image:url(../img/close_black_hover.gif);
}
.reload {
  background-image:url(../img/reload_black.gif);
  background-repeat:no-repeat;
  background-position:0px 0px;
  padding:0px 15px 0px 0px;
}
.print {
  background-image:url(../img/print_black.gif);
  background-repeat:no-repeat;
  background-position:0px 0px;
  padding:0px 15px 0px 0px;
}


img.button {
  background-color:#f0f0ff;
}
img.button:hover {
  background-color:#ffffd0;
}

a.wikilink, ul#menu li a.wikilink {
  padding:2px 1ex 2px 2em;
  background-color:white;
  color:#e01010;
  background-image:url(../img/gluehbirne_15x16.png);
  background-repeat:no-repeat;
  background-position:5px;
  text-decoration:none;
}
a.wikilink:hover, ul#menu li a.wikilink:hover {
  background-image:url(../img/birne_rot.png);
  text-decoration:underline;
}


span.radiooption {
  padding-right:1em;
}

input.checkbox {
  margin-left:2em;
}

/* simulierte radioknoepfe (auswahl preiseintrag!) */

.buttonup {
  color:#000000;
  background-color:#d0e0ff;
  border-style:outset;
  border-width:3px;
  border-color:#666666;
  padding:0.1ex 1ex 0.2ex 1ex;
  text-align:center;
  font-weight:normal;
}
.buttonup:hover {
  background-color:#e0ffff;
  border-color:#888888;
  background-color:#dddddd;
}
.buttondown, .buttondown:hover {
  color:#000000 !important;
  background-color:#ffcccc !important;
  border-style:inset;
  border-width:3px;
  padding:0.1ex 1ex 0.2ex 1ex;
  text-align:center;
  font-weight:bold;
  text-decoration:none;
}

.flatbutton, .flatbutton:hover {
  border-style:none;
  outline:1px solid black;
  font-weight:bold;
  text-decoration:none;
  padding:0px 1ex 0px 1ex;
  margin:0px;
  background-color:#cccccc;
}

div.untertabelle {
  font-size:11pt;
  font-weight:bold;
  padding:1em 1ex 1ex 1ex;
}


p.li {
  padding:0em 1em 0em 2em;
  margin:0em;
}


div#Zusatz {
font-size: 0.9em;
float: right; width: 30em;
margin-left:  1em;
padding: 1em;
border-style:solid;
border-color:#FF0000;
background-color: #eee;
}

table.footer {
  margin-top:2em;
  padding:2em 1em 1ex 1em;
  border-style:solid none none none;
  border-width:1px;
  border-color:#000000;
}
table.footer tr, table.footer td {
  border-style:none;
}


#option_menu {
  padding-top:1ex;
  padding-bottom:1em;
}

div.board, div.board textarea, div.board div {
  background-color:#224422;
  color:#cccccc;
  font-size:14pt;
  font-family:Permanent Marker;
}
div.board {
  border-width:1ex;
  border-color:#a0b0a0;
  border-style:solid;
  padding:1.2ex;
  margin:1em;
  float:left;
}
div.board textarea {
  border-style:none;
}
.chalk {
  text-align:right;
  height:1em;
  vertical-align:middle;
}

.inline {
  display:inline;
}

.table {
  display: table;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
}

.changed {
  color: #c00000;
}

div#footbar {
  border-top-style: solid;
  border-width: thin;
  position:fixed;
  bottom:0px;
  left:0px;
  z-index:999;
  background-color:white;
  padding:2px;
}

.noleftmargin {
  margin-left: 0px !important;
}

.norightmargin {
  margin-right: 0px !important;
}

img.avatar {
  border: solid black 1px;
  margin: 3px;
  max-width:72px;
  max-height:96px;
}

div.scanner {
  margin: auto;
  width: 600px;
  aspect-ratio: 1/1;
}

@media only screen and (orientation: portrait) {
  div.scanner {
    max-width: 75vw;
  }
}

@media only screen and (orientation: landscape) {
  div.scanner {
    max-height: 60vh;
  }
}

div.scanner canvas, video {
  width: 100%;
  height: 100%;
}

div.scanner canvas.drawingBuffer, video.drawingBuffer {
  margin-left: -100%;
}

div.touch_button {
  font-size: xx-large;
  font-weight: bold;
  border-radius: 10px;
  color: white;
  background-color: #4040a0;
  /*padding: 15px 32px;*/
  box-sizing: border-box;
  width: 15vw;
  max-width: 2cm;
  aspect-ratio: 1/1;
  margin: 2px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  display : inline-flex;
  align-items : center;
  justify-content: center;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48;
}

div.touch_button_text {
  -webkit-user-select: none; /* Safari */
  user-select: none;
  font-size: large;
  font-weight: bold;
  border-radius: 10px;
  color: white;
  background-color: #4040a0;
  /*padding: 15px 32px;*/
  box-sizing: border-box;
  height: 15vw;
  min-width: 15vw;
  max-height: 2cm;
  margin: 2px;
  padding: 1ex;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  display : inline-flex;
  align-items : center;
  justify-content: center;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48;
}

.disabled {
  filter:opacity(50%) grayscale(100%);
  pointer-events: none;
}

div.tab {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.max10 {
  max-width: 10cm;
}

@media(hover: hover) {
  .touch_only {
    display: none !important;
  }
}

div.error_icon, div.success_icon, div.thanks_icon {
  text-align: center;
  font-size:30vh;
}

div.error_icon::after {
  content: "\1F62D";
}

div.success_icon::after {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  color: rgba(23, 102, 15, 1);
  content: "done_outline";
}

div.thanks_icon::after {
  content: "\1F44D";
}

.hcenter {
  margin-left: auto;
  margin-right: auto;
}

.hidden {
  visibility:hidden;
}

@keyframes breathing {
  from {transform: scale(0.95);}
  to   {transform: scale(1.0);}
}


.breathing {
  animation: breathing;
  animation-direction: alternate;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
}