/* Standard-HTML */

/* colors:
 * yellow: #ffd400
 * blue:   #007acf
 */

*,
img {
  border: 0px none;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, sans-serif;
  position: static;
}

td.numerical {
  text-align: right;
}

#headers {
  background-color: #000;
  width: auto;
  padding-top: 10px;
  padding-left: 16px;
  padding-right: 16px;
}

#bodyWrapper {
  width: 100%;
  display: table;
}

body {
  z-index: 50;
  padding: 0;
  color:#FFD400;
  background-color: #ffd400;
  background-image: url(../images/background.png);
  background-position: left;
  background-repeat: repeat-y;
  font-size: 12px;
}

body.help {
  background-color: #ffd400;
  color: #000000;
  padding: 15px;
  background-image: none;
}

h1, h2 {
  color: #007ACF;
  font-weight: bold;
}

body.help h1, h2 {
  font-size: 16px;
}

body.help p {
  margin: 10px 0px;
}

h3 {
  font-weight: normal;
}

h3.disclaimer{
  font-weight: normal;
  color: #007ACF;
}

br { clear:left; }

p.content{
    line-height: 1.5em;
    margin-top: 1em;
}

a:link    { text-decoration : underline; color:#000; }
a:visited { text-decoration : underline; color:#000; }
a:hover   { text-decoration : underline; color:#000; }
a:active  { text-decoration : underline; color:#000; }

dl.facts{
    margin-bottom: 25px;
}

dl.facts dt{
    font-weight: bold;
    padding-top: 8px;
}
dl.facts dt span{
    font-size:15px;
    margin-right:15px;
}

dl.facts dd {
    margin-left:28px;
}

/* allgemeine Klassen */
.intro {
    font-weight: normal;
    line-height: 1.5em;
    margin: 20px 0;
}

.intro em {
    text-decoration: underline;
    font-style: normal;
}

.listheader{ font-weight: bold; }
.brand { text-transform: uppercase; }
h2 .brand { text-transform: uppercase; color: #007ACF; font-weight: bold;}

/* allgemeiner Seitenaufbau */

#logoutbox {
  float: left;
  line-height: 25px;
  padding-right: 10px;
}

#btn-logout {
  background-image: url(../images/btn-logout.gif);
  width: 144px;
  height: 25px;
  text-transform: uppercase;
  line-height: 25px;
  padding-left: 10px;
  float: left;
  margin-right: 10px;
}

#btn-logout a:visited,
#btn-logout a:active,
#btn-logout a:hover,
#btn-logout a:focus,
#btn-logout a:link
{
  text-decoration: none;
  font-weight: bold;
}

#languages {
  float: right;
  line-height: 25px;
}

#languages img {
  border: 1px solid #FFD700;
}

#headnavi {
  line-height: 25px;
}

#headnavi a {
  text-decoration: underline;
  color:#FFD400;
}

#alarmmeldung {
  float: right;
  margin-right: 5px;
  margin-top: 3px;
  color:#FFFFFF;
  padding:5px;
  font-size:12px;
  background-color:#b71101;
  border: 2px #FAFAFA solid;
}

#alarmmeldung a {
  color:#FFFFFF;
  font-size:16px;
  text-decoration:none;
}

#barrier{
  clear: both;
  height: 58px;
  background:url('../images/barrier-standard.gif');
  width: auto;
}

/* Content */
#contentArea {
    display: table-cell;
    width: calc(100% - 250px);
    min-height: 700px;
    height: auto !important;
    padding: 20px 20px 20px 0px;
    background: #FFD400;
    color: #000;
    margin-top: -2px;
}

@media print {
  #contentArea {
    padding: 0 0 0 0;
  }
}

/* Content-Hauptbereich*/
#main { margin-left: 18px; width:490px; }
@media print {
  #main {
    margin-left: 0px;
  }
}
#main.extended {width: 680px !important; }
#main.xxl {width: auto !important; }
#main h1,
#cboxLoadedContent h1 { font-size: 24px; }
#main h2,
#cboxLoadedContent h2{ font-size: 16px; margin-top:16px;}
#main h3,
#cboxLoadedContent h3{ font-size: 12px; margin-top:12px;}

/* Fussbereich */
#footer {
    position: static;
    z-index: 90;
    height: 90px;
    margin-left:202px;
    background: #FFD700 url(../images/fuss-bg.gif) repeat-x top;
    color: #000;
    font-size: 10px;
    clear: both;
}

#footer p {
  background-color:#FFD700;
  padding:10px 0px 18px 66px;
}

table {
  border-collapse: collapse;
}

table.zebra tbody tr:nth-child(even) td {
  background-color: #ffffff;
}

table.zebra tbody tr:nth-child(odd) td {
  background-color: #E1F2FF;
}

table.zebra tbody tr.highlight:nth-child(1) td {
  background-color: #ffff88;
}

table.zebra-tbody tbody:nth-child(even) td {
  background-color: #ffffff;
}

table.zebra-tbody tbody:nth-child(odd) td {
  background-color: #E1F2FF;
}

table.sticky-head {
  position: relative;
  border-collapse: collapse;
  /* Fix background covering borders in buggy Firefox/Windows. */
  -moz-transform: scale(.999);
}

table.sticky-head thead {
  position: sticky;
  top: 0;
}

table.sticky-head tr th {
  /* Fix background covering borders in buggy Firefox. */
  background-clip: padding-box;
}

table.sticky-head.sticky-head-offset-1 thead {
  top: 41px;
}

table.sticky-head.sticky-head-offset-1 thead tr:nth-child(2) th {
  top: 80px;
}

table.button-rows td {
  height: 22px;
}

tr.odd td{
  background-color: #E1F2FF;
}

tr.highlight td {
  background-color: #ffff88;
}

table.zebra tbody tr.disabled td {
  background-image: repeating-linear-gradient(
    -45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 10px, #eeeeee 10px, #cccccc 20px
  );
}

tr td.highlight {
  background-color: #ffff88;
}

td.disabled {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 10px, #eeeeee 10px, #cccccc 20px);
}

tr.error {
  background-color: red;
  color: white;
}
tr.warn {
  background-color: yellow;
}
tr.ok {
  background-color: lightgreen;
}

.text-danger {
  color: #f00;
}

.text-danger.text-blink {
  animation: blink 1s linear infinite;
  text-shadow: 3px 3px 3px rgba(255, 0, 0, .8);
}

.text-warning {
  color: #da0;
}

.text-success {
  color: #080;
}


th {
  border: 1px solid white;
}

th.narrow {
  padding-left: 2px;
  padding-right: 2px;
}

table.scroll-body thead {
  display: table;
  width: calc(100% - 16px);
  table-layout: fixed;
}

table.scroll-body tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

table.scroll-body tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/*
 * Sometimes, tables are just needed to arrange the elements on the page
 * without any layouth frills. Use this to reset the stuff above.
 */
table.blank {
  background-color: transparent;
  border-bottom: none;
}

@media print {
  tr {
    border-bottom: 1px solid black;
  }
  table.zebra-tbody tbody {
    border-bottom: 3px solid black;
  }
}

.sitemapliste{
  margin-left: 15px;
  margin-bottom: 30px;
}
.sitemapliste li{
  list-style-type: none;
  margin-bottom: 10px;
}

.sitemapliste dd{
  margin: 0 0 10px 20px;
  font-style: italic;
}
.sitemapheader{
  font-weight: bold;
  font-size: 14px;
  margin-top: 20px;
  margin-left: -15px;
}

.locked{
  color: #F00;
  font-weight:bold;
}

.red {
  color: #F00;
}

.light {
  color: #888888;
}

.right {
  text-align: right;
}

.center {
  text-align:center;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: left;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear {
  clear: both;
}

.inline {
  display: inline;
}

/* common styles */

/*
 * 3 columns for the wide page layout. there are 10 pixels left for the
 * space between them.
 */
.widthExtended3rd {
  width: 220px !important;
}

.rightMargin {
  margin-right:10px;
}

/* slider */

.slider {
  margin-top: 15px;
  margin-bottom: 15px;
  border-bottom: 2px solid black;
}

.sliderHead a {
  display: block;
  float: right;
  width: 16px;
  height: 16px;
  background: url('../images/slider_button_down.png') no-repeat left;
  text-decoration: none !important;
}

.sliderHead {
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: none;
  padding-left: 5px;
  background-image: linear-gradient(0deg, #ffd400, #ffffff);
}

.sliderHead h4 {
  line-height: 16px;
}

.sliderBody {
  border-left: 1px solid black;
  border-right: 2px solid black;
  padding: 5px;
  display: none;
}

.deviceSelector {
  width: 330px;
}

/* fix: select has a standard width of 100 defined in formular.css. */
.deviceSelector .formCol select,
.deviceSelector .formCol input
{
  width: 120px;
}

.deviceSelector .formColWide select,
.deviceSelector .formColWide input {
  width: 200px;
}

.autocompleteInput {
  background-image: url(../images/bg_dropdown.gif);
  background-repeat: no-repeat;
  background-position: right center;
}

#mapSiteNavigationWrapper .ui-menu .ui-menu-item a,
.deviceSelector .ui-menu .ui-menu-item a {
  display: inline;
}

/* override attachedToolbar button */
#mapSiteNavigateButton {
  height: 22px;
  line-height: 1;
}

#mapSiteLabel {
  margin-top: 8px;
  vertical-align: top; */
}

/* loadingIndicator */

.loadingIndicator {
  color: black;
  z-index: 7000;
}

/* columns in forms */

.formCol {
  float: left;
  width: 120px;
  overflow: hidden;
}

.formColButton {
  float: left;
  width: 120px;
  overflow: hidden;
  margin-top: 15px;
}

.formCol label {
  width: 120px;
  display: block;
  text-align: left;
}

.formColWide {
  float: left;
  width: 200px;
  overflow: hidden;
}

.formColWide label {
  width: 200px;
  display: block;
  text-align: left;
}

.formCol.button {
  margin-top: 13px;
}

input.crampedDate {
  width: 85px;
}

#pageContextHelpButton {
  float: right;
  width: auto;
  text-align: center;
}

/*
 * This fixes the calendar being the whole screen wide because of table
 * set to width: 100% in guest.css and screen.css (which should not be the
 * case).
 */
.calendar table {
  width: auto;
}

div.calendar {
  z-index: 1000
}

/* Ausblenden des DIV Container zur Ausgabe des Debugs */
#sm2-container {
  display:block;
}

#soundmanager-debug-toggle {
  display:block;
}

.graphPlaceholder {
  width: 680px;
  height: 300px;
}

.tabList {
  list-style-type: none;
  border-bottom: 1px solid black;
}

.tabList li {
  display: inline-block;
  background-color: #ffe566;
}

.tabList a {
  text-decoration: none !important;
}

.tabList li.active {
  background-color: #000000;
}

.tabList li a:hover {
  color: #ff0000;
}

.tabList li.active a {
  color: #ffd400;
}
/* Old formular.css starts here. */
/* Styleangaben fuer Formularelemente */

/* allgemeine Klassen */

.mandatory { font-weight:bold; } /* Pflichtfeldeingaben */

/* HTML Formularelemente */

form br {
  clear: both;
  line-height: 2.5em;
}

fieldset {
  border-top: 1px dotted #000;
  padding: 10px 0;
}

#actions{
  display: block;
  width: 100%;
  padding: 10px 0;
}

/* Speichern Submitbutton */
div#saver{
  float:right;
  text-align:right;
  margin-right:10px;
}

div#saver a{
  color: #0079CE;
}



/* Steuerelemente */
input.extended {
    width: 294px;
}
input.extendedEmail {
    width: 340px;
}


input.standard {
    width: 230px;
}

input.shortened {
    width: 55px;
}


input.error {
  border: 1px solid #F00;
  background-color: #FFD7D7;
}

textarea {
  width: 296px;
  border: 1px inset black;
  margin-bottom: 12px;
  padding: 3px;
}

textarea.extendedEmail {
  width: 340px;
  /*border: 1px inset black;*/
  border: none;
  margin-bottom: 12px;
  padding: 3px;
  font-size: 8pt;
}


select {
  width: 100px;
  background-color: white;
}

select.sortBy {
  width: 400px;
}

select.extended{
  width:300px;
}


table select {
    width: auto;
}

/* Formularbuttons */
button.formAction,
input.formAction,
a.formAction,
a:visited.formAction,
a:active.formAction {
  display:         block;
  height:          20px;
  float:           left;
  margin-left:     4px;
  background-image: linear-gradient(0deg, #ffd400, #ffffff);
  font-weight:     bold;
  font-size:       14px;
  font-family:     Verdana, Arial, sans-serif;
  text-decoration: none;
  padding:         3px 15px 2px 15px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
  cursor: pointer;
}

button.formAction,
input.formAction {
  height: 35px;
}
a:hover.formAction { background: #FFF; text-decoration:  none;}


/* Formularbuttons */
a.formActionRight,
a:visited.formActionRight,
a:active.formActionRight {
  display:         block;
  height:          20px;
  float:           right;
  margin-left:     4px;
  background:      url('../images/button-hintergrund.gif') repeat-x;
  font-weight:     bold;
  font-size:       14px;
  font-family:     Verdana, Arial, sans-serif;
  text-decoration: none;
  padding:         3px 15px 2px 15px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
}

a:hover.formActionRight { background: #FFF; text-decoration:  none;}

a.formActionPdf,
a:visited.formActionPdf,
a:active.formActionPdf {
  display:         block;
  width:           58px;
  height:          30px;
  float:           right;
  margin-left:     4px;
  background:      url('../images/pdf_icon.gif') no-repeat;
  font:            bold 8px Arial;
  text-decoration: none;
  padding:         2px 5px 2px 25px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
}

a:hover.formActionPdf {
background: url('../images/pdf_icon.gif') no-repeat;
text-decoration:  none;
}

a.formActionPdfGrau,
a:visited.formActionPdfGrau,
a:active.formActionPdfGrau {
  display:         block;
  width:           58px;
  height:          30px;
  float:           right;
  margin-left:     4px;
  background:      url('../images/pdf_icon_grau.gif') no-repeat;
  font:            bold 8px Arial;
  text-decoration: none;
  padding:         2px 5px 2px 25px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
}

a:hover.formActionPdfGrau {
background: url('../images/pdf_icon_grau.gif') no-repeat;
text-decoration:  none;
}

a.formActionPdfWo,
a:visited.formActionPdfWo,
a:active.formActionPdfWo {
  display:         block;
  width:           30px;
  height:          30px;
  float:           right;
  margin-left:     4px;
  background:      url('../images/pdf_icon.gif') no-repeat;
  font:            bold 8px Arial;
  text-decoration: none;
  padding:         2px 15px 2px 35px;
  border: none;
}

a:hover.formActionPdfWo {
background: url('../images/pdf_icon.gif') no-repeat;
text-decoration:  none;
}

/* ENDE Formularbuttons */


/* Gruppierungen von Formularelementen */
div.checkboxgroup {
    float: left;
    width: 310px;
}

div.checkboxgroup label {
  text-align: left;
}

.formfields input,
.formfields select{
  border:1px solid #000;
  float: left;
  margin-right: 3px;
  padding: 2px;
}

.formfields .formFieldGroup {
  float: left;
  width: auto;
}

.formfields .formFieldGroup input,
.formfields .formFieldGroup select {
  float: none;
}

.formfields input[type="text"] + img[alt="Date"] {
  padding-bottom: 14px;
}

.formfields input.numerical{
  width: 25px;
}

.checkboxgroup input {
  border: 0 none;
  margin-right: 3px;
  float:left;
}
.checkboxgroup label {
  padding-top: 2px;
}

label{
  float: left;
  width: 160px;
  text-align: right;
  padding-top: 2px;
  margin: 0 12px 0 0;
}
label.search{
  font-size:10px;
  width: 90px;
  text-align:left;
}

/*
 * FIXME this is really ugly. Once upon a time, s.o. thought it might be useful
 * to define elements' layouts without any context. So we have to implement
 * a hack to roll back in case.
 */
.stripGlobal label {
  float: none;
  width: auto;
  text-align: left;
  padding-top: 0px;
  margin: 0px 0px 0px 0px;
}

a.image-button,
button.toolbarButton {
  border: solid black;
  border-width: 1px 2px 2px 1px;
  background-color: #ffd400;
  background-image: linear-gradient(0deg, #ffd400, #ffffff);
  min-width: 28px;
  padding: 3px;
  text-align: center;
  display: inline-block;
  font-size: 26px;
  vertical-align: top;
}

label.buttonStyleCheckbox.pressed,
button.toolbarButton.pressed {
  border-width: 2px 1px 1px 2px;
  position: relative;
  top: 1px;
  margin-top: -1px;
  background-color: #ffd400;
  background-image: linear-gradient(0deg, #ffffff, #ffd400);
}

button.toolbarButton.select1 {
  color: lightgreen;
}

button.toolbarButton.select-1 {
  color: red;
}

div.resettableFilterGroup {
  display: inline-block;
  vertical-align: top;
}

div.resettableFilterGroup div {
  display: inline-block;
  /* remove whitespace between buttons */
  font-size: 0px;
}

div.resettableFilterGroup button {
  display: inline-block;
  font-size: 26px;
}

div.resettableFilterGroup button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

div.resettableFilterGroup button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.rbAlternatives input {
  display: none;
}

.rbAlternatives img {
  margin: 0px;
  border: solid black;
  border-width: 1px 2px 2px 1px;
  padding: 3px;
  background-color: #ffd400;
  background-image: linear-gradient(0deg, #ffd400, #ffffff);
}

.rbAlternatives img.pressed {
  border-width: 2px 1px 1px 2px;
  background-color: #ffd400;
  background-image: linear-gradient(0deg, #ffffff, #ffd400);
}

.rbAlternatives label:first-child img {
  border-radius: 4px 0px 0px 4px;
}

.rbAlternatives label:last-child img {
  border-radius: 0px 4px 4px 0px;
}

label.buttonStyleCheckbox {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: black;
  background-color: #ffd400;
  background-image: linear-gradient(0deg, #ffd400, #ffffff);
  padding: 3px;
  line-height: 26px;
  display: inline-block;
  vertical-align: top;
}

label.buttonStyleCheckbox img {
  display: inline-block;
}

label.buttonStyleCheckbox input {
  display: none;
}

.sorter__neutral::after {
  content: '\2b0d';
}
.sorter__neutral:hover::after {
  content: '\25bc';
}
.sorter__ascending::after {
  content: '\25bc';
}
.sorter__ascending:hover::after {
  content: '\25b2';
}
.sorter__descending::after {
  content: '\25b2';
}
.sorter__descending:hover::after {
  content: '\25bc';
}

/* this is probably only needed for checkboxgroup and defined there too. */
label.inverse{
  text-align: left;
}

label.inverseBig{
  text-align: left;
}

#main label.inverse{
  width: 250px;
}

#main label.inverseBig{
  width: 350px;
}



.saveChanges {
  display:         block;
  height:          30px;
  float:           left;
  margin-left:     4px;
  background:      url('../images/button-hintergrund.gif') repeat-x;
  font-weight:     bold;
  font-size:       14px;
  font-family:     Verdana Arial sans-serif;
  text-decoration: none;
  padding:         3px 15px 2px 15px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
 /* cursor: hand;*/
}

.saveChangesRight {
  display:         block;
  height:          30px;
  float:           right;
  margin-left:     4px;
  background:      url('../images/button-hintergrund.gif') repeat-x;
  font-weight:     bold;
  font-size:       14px;
  font-family:     Verdana Arial sans-serif;
  text-decoration: none;
  padding:         3px 15px 2px 15px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
 /* cursor: hand;*/
}

/* Validierungsfehler in Formularen */
div.form_error,
p.form_error
{
  color: #F00;
}

/* Kontaktformular im Demomodus */
dl.maildemo *{
    margin-bottom: 10px;
}
dl.maildemo dt {
    width: 200px;
    float:left;
    color: #FFF;
    background-color:#000;
}

.linkAlignLeft {
	text-align: left;
	float: left;
}

.linkAlignRight {
	text-align: right;
	float: right;
}

.floatRightTop {
	float: right;
	vertical-align:top;
}
.floatLeftTop {
	float: left;
	vertical-align:top;	
}
.bold {
	font-weight: bold;
}

input.submit,
button.submit {
  height:          30px;
  background:      url('../images/button-hintergrund.gif') repeat-x;
  font-weight:     bold;
  font-size:       14px;
  font-family:     Verdana, Arial, sans-serif;
  padding:         3px 15px 2px 15px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
  overflow:visible;
  width:auto;
  cursor: pointer;
}

input.submit_thin,
button.submit_thin {
  height:          20px;
  background-image: linear-gradient(0deg, #ffd400, #ffffff);
  font-size:       10px;
  font-weight:	   bold;
  font-family:     Verdana, Arial, sans-serif;
  padding:         2px 10px 2px 10px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
  overflow:visible;
  width:auto;
  cursor: pointer;
  margin-top:12px;
}

button.flatButton,
input.flatButton
{
  border: solid black;
  border-width: 1px 2px 2px 1px;
  background-image: linear-gradient(0deg, #ffd400, #ffe566);
  cursor: pointer;
  height: 22px;
  padding: 0px .5ex
}

button.tiny {
  font-size: 10px;
  padding: 2px;
  line-height: 10px;
  height: auto;
}

ul.ui-autocomplete button.flatButton {
  width: 100%;
}

.slider_betriebsdaten a, input.auswahl {
  height:          24px;
  background:      url('../images/button-hintergrund.gif') repeat-x;
  font-weight:     bold;
  font-size:       12px;
  font-family:     Verdana, Arial, sans-serif;
  padding:         2px 15px 2px 15px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
  overflow:visible;
  width:auto;
  cursor: pointer;
}

.slider_betriebsdaten option {
  width:146px;
}

.slider_betriebsdaten input.auswahl {
  height:          22px;
  background:      url('../images/button-hintergrund.gif') repeat-x;
  font-weight:     bold;
  font-size:       12px;
  font-family:     Verdana, Arial, sans-serif;
  padding:         2px 15px 2px 15px;
  border-top:      1px solid #000;
  border-right:    2px solid #000;
  border-bottom:   2px solid #000;
  border-left:     1px solid #000;
  overflow:visible;
  width:auto;
  cursor: pointer;	
}

/* Old frontend.css starts here. */
/* Navigationsmenu */
#navigation{
  display: table-cell;
  z-index: 80;
  width:250px;
  vertical-align: top;
}

@media print {
  #navigation {
    display: none;
  }
}

#navigation ul {
  padding-top: 1px;
  background-image: url(../images/navi-trennlinie.gif);
  background-position: top left;
  background-repeat: no-repeat;
  list-style:none;
  margin-bottom: 15px;
}

#navigation ul * {
  display:block;
}

/* Navi-Anker allgemein */
#navigation a {
  color:#FFD700;
  text-decoration: none;
  background-image: url('../images/nav0.gif');
  background-repeat: no-repeat;
  background-position: 0px -40px;
  padding-left:16px;
  height:   40px;
  width:   235px;
}

#navigation a:hover {
  color: #fff;
}

#navigation a{
  font-weight:bold;
}

#navigation a.active {
  color: #000;
  background-image: url('../images/nav0.gif');
  background-repeat: no-repeat;
  background-position: 0px -80px;
  text-decoration: none;
}

#navigation a:hover.active {
  color: #fff;
}

#navigation a:hover.active {
  color: #000;
  background-image: url('../images/nav0.gif');
  background-repeat: no-repeat;
  background-position: 0px -80px;
}

#navigation li a span {
  text-transform:uppercase;
  padding:12px 0 0 6px;
  font-size: 12px;
}

#navigation ul li ul {
  padding-top: 0px;
  background-image: none;
  margin-bottom: 0px;
}

#navigation li ul li a {
  font-weight:normal;
}

#navigation li ul li a span {
  text-transform:none;
  padding: 0px;
  padding-top:12px;
}

#navigation li a span.multiline {
  padding-top:6px;
}

#navigation li ul li a {
  color: #000;
  height:40px;
  width:190px;
  padding-left: 45px;
  text-decoration:none;
}

#navigation li ul li a:visited {
  text-decoration : none;
}

#navigation li ul li a.inactive {
  color: #000;
  font-weight: normal;
  background-image: url('../images/level2nav.gif');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

#navigation li ul li a:hover.inactive {
  font-weight: bold;
  background-image: url('../images/level2nav.gif');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

#navigation li ul li a.active {
  background-image: url('../images/level2nav.gif');
  background-repeat: no-repeat;
  background-position: 0px -40px;
  font-weight: bold;
}
#navigation li ul li a:hover.active {
  background-image: url('../images/level2nav.gif');
  background-repeat: no-repeat;
  background-position: 0px -40px;
}


ul.hilfe{
  list-style:none;
}

ul.hilfe * {
  margin-bottom: 10px;
}



.tagesdaten_mini tr th {
  padding: 1px;
}

.pagination {
  margin-top: 20px;
}

.pagination .pagination-left {
  float: left;
  width: 20%;
}
.pagination .pagination-center {
  float: left;
  width: 59.999999%;
  text-align: center;
}

.pagination .pagination-center form {
  display: inline;
}

.pagination .pagination-center input {
  width: 3ex;
}

.pagination .pagination-right {
  float: left;
  width: 20%;
  text-align: right;
}

a.flatButton {
  display: block;
  border: solid black;
  border-width: 1px 2px 2px 1px;
  background: url(../images/bg_flat_button.gif) repeat-x;
  background-position: top;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 19px;
}

table.formtable {
  background-color: #ffd400;
}

.tableEmbeddedForm input {
  font-size: 10px;
  padding: 1px;
  border: 1px solid black;
  width: 60px;
}

fieldset.formfields legend {
  font-weight: bold;
}

#distanceReportListMap {
  width: 500px;
  height: 400px;
}
/* probably unneeded */
#protected {
  position:absolute;
  top:19.6em;
  left:540px;
  width:11.5em;
  font-style:italic;
  text-align:center;
  padding:3px;
}

#backendHeader {
  border-bottom: 1px dotted #000;
  width: 100%;
  padding-bottom: 5px;
}

#backendHeader p{
  font-size:.9em;
  float:right;
  padding:13px 0 0 10px;
}

/* Newsboxen-Content*/
div#newsbox,
table {
  background: #FFF;
  color: #000;
  font-size: 10px;
  margin-top:15px;
  width: 100%;
  border-bottom: 1px black dotted;
}

table.noColor {
  background: #ffd400;
  font-size: 10px;
  margin:0px;
  width: auto;
  border: none;
}

#newsbox dl {
  display: block;
}

#newsbox dt,
th {
  height: 15px;
  padding: 8px 11px;
  color: #FFF;
  background: #007acf;
  font-weight: bold;
}

#newsbox dd {
  padding: 8px 10px;
  border-right: 1px black dotted;
  border-left: 1px black dotted;
}

#newsbox strong {
  display: inline;
  font-weight:bold;
}

#newsbox em {
  display: inline;
  font-weight:bold;
  font-style: normal;
}

#newsbox a {
  color: #000;
  background: #FFF;
}

#overview td{
  padding: 3px;
}

#overview th.headerSortUp {
	background-image:url(../images/asc.gif);
	background-position: 100% 5%;
	background-repeat:no-repeat;
}

#overview th.headerSortDown {
	background-image:url(../images/desc.gif);
	background-position: 0 85%;
	background-repeat:no-repeat;
}

#overviewEmail{
  width:695px;
  background-color: #ffd400;
  border: none;
}

#overviewEmail td{
  padding: 3px;
  vertical-align: top;
}

#overviewEmail th {
  cursor: pointer;
  vertical-align: top;
}

.paddBilling {
	padding: 0px 5px 0px 5px;
}

table.table-with-toolbar {
  margin-top: 0;
}

.machine-overview-select {
  text-align: center;
}

table.machine-overview tr:nth-child(even) td {
  background-color: #E1F2FF;
}

table.machine-overview tr.highlight:nth-child(even) td {
  background-color: #ffff88;
}

table.machine-overview tr td {
  padding: 5px;
}

table.machine-overview th.operation-time {
  width: 11ex;
}

p.error {
  border: 3px solid white;
  background-color: red;
  color: white;
  padding: 3px;
}

div.success,
p.success {
  border: 3px solid white;
  background-color: darkgreen;
  color: white;
  padding: 3px;
}

div.warn,
p.warn
{
  border: 3px solid black;
  background-color: yellow;
  color: black;
  padding: 3px;
}

p.info {
  border: 3px solid black;
  background-color: white;
  color: #007acf;
  padding: 3px;
}

.LCD tr td {
  font-family: Courier, "Courier New", monospace;
  font-size: 16px;
  padding: 5px 10px;
}

.status-red {
  color: #b71101;
  font-weight: bold;
}

.status-red svg {
  fill: #b71101;
}

.status-yellow {
  color: #f06800;
  font-weight: bold;
}

.status-green {
  color: green;
  font-weight: bold;
}

.status-lightgreen {
  color: #00ee00;
  font-weight: bold;
}

.status-lightgreen svg {
  fill: #00ee00;
}

#tele-connection-quality {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
}
#guestarea{
  width: 90%;
}

#guestarea dl{
  margin-top: .5em;
}

#guestarea dt{
  clear:left;
  float:left;
  margin-top: .5em;
  height: 2.5em;
  font-weight:bold;
}

#guestarea dt.key     { width: 200px; }
#guestarea dt.machine { width: 200px; }
#guestarea dt.steal   { width: 200px; }
#guestarea dt.master  { width: 200px; }

#guestarea dd{
  padding-top: .5em;
  height: 2.5em;
}

#guestarea h2{
  clear:left;
}
.save-success{
  width:100%;
  color:#ff0000;
  height:1.5em;
  padding:3px 0 0px 0px;
  text-align:center;
}

ul.ui-autocomplete {
  overflow-y: scroll !important;
  max-height: 500px !important;
}

.steps {
  margin: 20px 0;
}

.step {
  float: left;
  width: 60px;
  opacity: 0.5;
}

.stepSpacer {
  float: left;
  margin-top: 25px;
  margin-left: -1px;
  margin-right: -1px;
  background-color: #007acf;
  width: 22px;
  height: 10px;
}

.stepSpacer.low {
  opacity: 0.5;
}

.stepSpacer.up {
  background-image: linear-gradient(90deg, #007acf, #003d67);
}

.stepSpacer.down {
  background-image: linear-gradient(90deg, #003d67, rgba(0, 122, 207, 0.5));
}

.step .num {
  display: block;
  width: 40px;
  height: 40px;
  border: 10px solid #007acf;
  border-radius: 30px;
  font-size: 20px;
  line-height: 40px;
  font-weight: bold;
  color: #007acf;
  text-align: center;
  background-color: white;
}

.step.active {
  opacity: 1;
}

.step.done {
  opacity: 1;
}

.step.done .num {
  background-color: lightgreen;
}

.step.active .num {
  border: 10px solid #003d67;
  color: #003d67;
}

.step .label {
  text-align: center;
  font-size: 10px;
  margin-left: -10px;
  width: 80px;
}

.step.active .label {
  font-weight: bold;
}

.subformAutomaticRecognition {
  padding-top: 10px;
  clear: both;
}

/* map */
#mapToolbar {
  height: 70px;
  position: relative;
}

#mapTabs {
  clear: left;
  position: absolute;
  bottom: 0px;
}

.tabList li {
  float: left;
  margin-left: 10px;
  background-color: #ffe566;
  padding: 0px 10px 0px 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.tabList li.active {
  background-color: #000000;
}

.tabList li a:hover {
  color: #ffffff;
}

.tabList li.active a {
  color: #ffd400;
}

.tabList li.disabled {
  display: none;
}

.tabList a {
  text-decoration: none !important;
}

.tabList a span {
}

.tabList li.disabled a:hover,
.tabList li.active a:hover {
  text-decoration: none !important;
}

#largeMapWrapper {
  position: relative;
  width: auto;
}

#largeMapContainer {
  position: relative;
  width: auto;
}

#largeMap {
  position: relative;
  width: auto;
  height: 500px;
}

#mapTooltip {
  display: none;
  position: absolute;
  background-color: #ffd400;
  border: 1px solid black;
  padding: 5px;
  z-order: 65535;
}

#mapMeasureDistanceDistance {
  position: absolute;
  padding: 5px;
  border-width: 2px;
  border-style: solid;
  border-color: #007acf;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, .6);
  color: #007acf;
  font-size: 20px;
  font-weight: bold;
}

#trailDistance {
  background-color: white;
  width: 85px;
}

.toolbarDropdownBox {
  display: none;
  background-color: white;
  border: 2px solid black;
  padding: 5px;
  position: absolute;
  top: 23px;
  left: 0;
  z-index: 500;
}

.toolbarDropdownBoxButton {
  width: 100%
}

.attachedToolbar {
  background-color: #dddddd;
  padding: 3px;
  height: 35px;
  overflow: hidden;
}

.attachedToolbar__separator {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
  height: 35px;
  border-left: 4px solid black;
}

.stickyTop {
  position: sticky;
  top: 0px;
}

.attachedToolbar button {
  height: 35px;
  line-height: 26px;
}

.deviceFilterBar button img {
  display: inline-block;
  vertical-align: baseline;
}

.mapTimeSelector {
  background-color: white;
  width: 65px;
}

#positionToolbar,
#pursuitToolbar,
#trailToolbar {
  display: none;
}

#positionToolbar {
  border-left: 4px solid black;
}

#pursuitSecondsLeft {
  width: 3em;
}

#pursuitEnabled {
  display: none;
}

#mapConnectionsStatusButton {
  float: right;
  margin-right: 10px;
  margin-top: 18px;
  padding-left: 2px;
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  background-image: linear-gradient(0deg, #ffd400, #ffffff);
}

#mapConnectionsStatusLabel {
  padding-right: 16px;
  line-height: 16px;
  background: url('../images/slider_button_down.png') no-repeat right top;
  text-decoration: none;
}

#mapConnectionsStatus {
  display: none;
  font-size: 10px;
  color: white;
  border: 1px solid black;
  border-right: 2px solid black;
  background-color: #ffd400;
  z-index: 6000;
  position: absolute;
  width: 380px;
}

#mapConnectionsStatus table {
  border-collapse: collapse;
  background-color: #ffd400;
  padding: 0px;
  margin: 0px;
  width: 380px;
}

#mapConnectionsStatus td {
  border-bottom: 1px solid black;
  padding: 1px;
}

#mapAllWrapper #connectForm {
  float: left;
  width: auto;
  padding-top: 7px;
}

#mapAllWrapper #connectDeviceList {
  display: none;
}

#mapAllWrapper #connectButton {
  margin-left: 10px;
}

#mapConnectionsStatus {
}

#mapNoData {
  display: none;
  position:absolute;
  background-color: #ffd400;
  border: 1px solid black;
  padding: 5px;
  z-order: 65534;
  top: 230px;
  width: 400px;
  left: 90px;
}

#mapComment {
  display: none;
  position: absolute;
  background-color: #ffd400;
  border: 1px solid black;
  padding: 5px;
  z-order: 65534;
  bottom: 5px;
  left: 5px;
}

.mapHandlingHint {
  display: none;
  position: absolute;
  background-color: #ffd400;
  border: 1px solid black;
  padding: 5px;
  z-order: 65534;
  bottom: 16px;
  width: auto;
  right: 56px;
}

div.mapLicensePlate {
  border: 3px solid black;
  border-radius: 3px;
  background-color: white;
  font-size: 11px;
  font-family: sans-serif;
  text-align: center;
  height: 13px;
  line-height: 13px;
  width: auto;
  position: absolute;
  padding: 0px 3px;
}

div.mapLicensePlate.mapStalled {
  color: red;
}

div.mapKeyUser {
  position: absolute;
  padding-top: 19px;
  background-position: center top;
  background-repeat: no-repeat;
}

div.mapKeyUser div {
  min-width: 19px;
  background-color: white;
  font-size: 11px;
  font-family: sans-serif;
  text-align: center;
  padding: 0px 3px;
}

div.mapKeyUser-unavailable {
  background-image: url(../images/key_user_unavailable.png);
}

div.mapKeyUser-on {
  background-image: url(../images/key_user_on.png);
}

div.mapKeyUser-off {
  background-image: url(../images/key_user_off.png);
}

div.mapKeyUser-outdated {
  background-image: url(../images/key_user_outdated.png);
}

#main #mapAllWrapper {
  background-color: #ffd400;
}

#main.extended #mapAllWrapper {
  width: 680px;
}

#main.xxl #mapAllWrapper {
  width: auto;
}

#main.extended #largeMapWrapper {
  height: 519px;
}

#mapLegend {
  float: none
  margin-top: 10px;
  width: 100%;
}

.mapLegendPart {
  float: left;
  width: 200px;
  border: none;
  margin: 0px;
  padding: 0px;
}


#mapLegendFade {
  width: 250px;
}

.dialogWindow {
  padding: 10px;
  background-color: #ffd400;
  border: 1px solid black;
  color: black;
}

#mapSiteDialog {
  position: absolute;
  border-radius: 10px;
}

#mapBuildingPlanBox ol {
  list-style-position: inside;
}

body.suppressScrollbars {
  overflow: hidden !important;
}

tr.tagesdaten_row td {
  height: 20px;
}

#betriebsdatenSettingsBox {
  line-height: 180%;
}
#betriebsdatenSettingsBox label, input, select {
  float: none;
}

#tourReportTables {
  width: 200px;
  float: left;
}

#tourReportMapContainer {
  margin-left: 10px;
  margin-top: 15px;
  width: 450px;
  height: 450px;
  float: left;
  position: relative;
}

#tourReportMap {
  width: 450px;
  height: 450px;
  position: relative;
}

/* tank display */

div.tank {
  height: 250px;
  position:relative;
  width: 120px;
  float: left;
  margin-right: 10px;
}

div.tank div {
  position: absolute;
  width: 120px;
}

div.tank .casingTop {
  height: 50px;
  top: 0;
  border-radius: 60px / 25px;
  opacity: .5;
  background-color: #888888;
}

div.tank .casing {
  top: 0;
  height: 225px;
  background-color: #aaaaaa;
  border-radius: 60px 60px 0 0 / 25px 25px 0 0;
  background-image: linear-gradient(to right, #aaaaaa 0%,  #eeeeee 100%);
}

div.tank .middle {
  background-color: #007acf;
  background-image: linear-gradient(to right, #80bce7 0%,  #007acf 100%);
}

div.tank.fuelAlert .middle {
  background-color: #880000;
  background-image: linear-gradient(to right, #880000 0%,  #ff8888 100%);
}

div.tank .top {
    height: 50px;
    background-color: #007acf;
    border-radius: 60px / 25px;
}

div.tank.fuelAlert .top {
    background-color: #880000;
}

div.tank .bottom {
  height: 50px;
  background-color: #007acf;
  -moz-border-radius: 60px / 25px;
  -webkit-border-radius: 60px / 25px;
  border-radius: 60px / 25px;
  top: 200px;
  background-image: linear-gradient(to right, #80bce7 0%,  #007acf 100%);
}

div.tank.fuelAlert .bottom {
  background-color: #880000;
  background-image: linear-gradient(to right, #880000 0%,  #ff8888 100%);
}

/* Colorbox Core Style */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:999999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxContent {
  border-radius: 5px;
  padding: 15px;
  color: #000000;
}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background-color:black;}
#colorbox{outline:0;}
#cboxTopLeft{display: none;}
#cboxTopRight{display: none;}
#cboxBottomLeft{display: none;}
#cboxBottomRight{display: none;}
#cboxMiddleLeft{display: none;}
#cboxMiddleRight{display: none;}
#cboxTopCenter{display: none;}
#cboxBottomCenter{display: none;}
#cboxContent{background:#ffd400; overflow:hidden;}
.cboxIframe{background:#ffd400;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxClose {
  position: absolute;
  right: 0px;
  top: 0px;
  border: 1px solid black;
  border-radius: 5px;
  width: 15px;
  height: 15px;
  line-height: 10px;
  text-align: center;
  font-size: 10px;
  background-image: linear-gradient(to top, #ffd400 0%, #ffe566 100%);
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active {outline:0;}

#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

.d-none {
  display: none;
}

@media print {
  .d-none-print {
    display: none !important;
  }
}

.d-inline-block {
  display: inline-block;
}

@media screen and (min-width:1400px) {
  .xxl-d-inline-block {
    display: inline-block;
  }
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.ws-nowrap {
  white-space: nowrap;
}

.align-top {
  vertical-align: top;
}

.w-auto {
  width: auto;
}

.formfields .float-none,
.float-none
{
  float: none;
}

a:link.text-decoration-none,
.text-decoration-none {
  text-decoration: none;
}

.ml-4 {
  margin-left: 1rem
}

.mt-2 {
  margin-top: .5rem
}

.mb-2 {
  margin-bottom: .5rem
}

.pb-2 {
  padding-bottom: .5rem;
}

.h-200 {
  height: 200px;
}

.indent {
  padding-left: 2em;
}

.raised {
  z-index: 1000;
}

.hr {
  border-top: 1px dotted #000;
}

.border {
  border: 1px solid black;
}

/* Hide certain parts of the application from the user */
.languages-de_DE_AQUA,
.geraeteparameter-a-o-r-de_DE_AQUA,
.geraeteparameter-g-s-de_DE_AQUA,
.geraeteparameter-te-de_DE_AQUA,
.filter-overtime-de_DE_AQUA,
.filter-ats-de_DE_AQUA,
.filter-alarm-de_DE_AQUA,
.maschinenuebersicht-ats-de_DE_AQUA,
.maschinenuebersicht-batchAction-de_DE_AQUA,
.maschinenuebersicht-l-a-de_DE_AQUA,
.maschinenuebersicht-o-h-de_DE_AQUA,
.maschinenuebersicht-v-de_DE_AQUA,
.user-send-ats-receipt-de_DE_AQUA
{
  display: none;
}

.editableTag {
  margin-right: 1em;
  line-height: 40px;
  white-space: nowrap;
}

.editableTagWord {
  border: 1px solid #007acf;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: none;
  background-color: #ffffff;
  padding: 5px;
}

.editableTagRemove, .editableTagDone {
  border: 1px solid #007acf;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left: none;
  color: #ffffff;
  padding: 5px;
  cursor: pointer;
}

.editableTagRemove {
  background-color: #007acf;
}

.editableTagDone {
  background-color: #00cc00;
}

.editableTagWord input {
  border: none;
  float: none;
}

/* To place this next to an input, wrap them into a .formFieldGroup. */
.roundButton {
  border-radius: 10px;
  padding: 5px;
  color: white;
  font-weight: bold;
  background-color: #007acf;
  margin-right: 1em;
  line-height: 40px;
  cursor: pointer;
}

.lh-40 {
  line-height: 40px;
}

.pr-3 {
  padding-right: 1rem;
}

.w-2em {
  width: 2em;
}

a.icon-button {
  text-decoration: none;
  cursor: pointer;
}


.vehicleFleetWorkload__icon {
  font-size: 14px;
  text-align: center;
  padding: 1px;
}

.machine-image {
  width: 250px;
  height: 250px;
  object-fit: scale-down;
}

.machine-image--small {
  width: 150px;
  height: 150px;
  object-fit: scale-down;
}

#banner--custom,
#banner--default
{
  display: none;
}

div.form-row {
  box-sizing: border-box;
}

div.form-row input {
  box-sizing: border-box;
  padding: 3px;
  border: 1px solid black;
  border-radius: 3px;
  margin: 0;
}

div.form-row label {
  box-sizing: border-box;
  font-weight: bold;
  line-height: 20px;
  padding: 0;
  margin: 0;
}

@keyframes blink {
  50% { opacity: 0; }
}