html {
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    text-align: center;
}
h1 {
    font-size: 1.8rem;
    color: white;
}
body {
    margin: 0;
    background-color: rgb(32, 32, 32);
}

.topnav {
    overflow: hidden;
    background-color: #0A1128;
    color: white;
}

.content {
    padding: 15px;
}
.card-grid {
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 20px;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.card {
    background-color: rgb(48, 48, 48);
    box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
    color: white;
}

button {
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

table {
	margin: 0.5em 0.5em 0.5em 0.5em;	
}

th {
  text-align: center;
}

td {
  text-align: center;
  height: 1.5em;
}

button:disabled {
    background-color: #666;
}

.euro-button {
  border: none;
  color: black;
  padding: 20px;
  text-align: center;
  text-decoration: bold;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
}

.eurobutton {
  background-color: #d9d900; /* Green */
}

.centbutton {
  background-color: #ff8000; /* Green */
}

.greenbutton {
    background-color: #22a133;
}

.redbutton {
    background-color: #d13a30;
}

.emeraldbutton {
    background-color: #1b8a94;
}

.crimsonbutton {
    background-color: #ff4c79;
}

.darkgreybutton {
    background-color: #a8a8a8;
}

.greybutton {
    background-color: #666;
}

.grey-label {
    color: #bebebe;
    font-size: 1rem;
}

.normal-text {
    font-size: 1rem;
}

.reading {
    font-size: 1.4rem;
}

.total-header {
    font-size: 1.5rem;
}

.start-header {
    font-size: 1.3rem;
}

/* Festlegung im Default-Stylesheet der Browser */
dialog:not([open]) {
  display: none;
}

/* Styling der ge�ffneten Popup-Box */
dialog[open] { 
  width: 20em; 
  background: #fffbf0; 
  border: thin solid #e7c157;
  margin: 3em auto;
/*  text-align: left; */
}

dialog::backdrop { 
  background: hsl(201 20% 20% /.5) ;
}
/*
input {
  /*text-align: block;
  position: right;*/
/*  position: relative;
  
    display: center;
    font-size: 1.0em;
    padding: .3em .8em .3em .5em;
    width: 70%;
    /*max-width: 70%; /* useful when width is set to anything other than 100% */
/*    box-sizing: border-box;
	/*   margin: 5px; */
/*	margin: 1em 0 1em 0;

    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgb(0 0 0 / .04);
    border-radius: .5em;
    -webkit-appearance: none;
    appearance: none;
}
*/

input[type="number"] {
    text-align: right;
	width: 30%; 
    font-size: 1.2em;
/* top | right | bottom | left */
    padding: .3em .8em .3em .5em;
    border: 1px solid #aaa;
    border-radius: .3em;
 /*   margin: 1em auto; */
	margin: 0.5em 0 0.5em 0.5em;
    appearance: none;
    -moz-appearance: textfield;
    -webkit-appearance: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
/*
input[type=number] {
}
*/

.versionstring {
	/*display: block;*/
    color: #666;
    text-align: right;
    font-size: 0.7em;
}

label {
	display: block;
    color: #666;
}

.tarifform {
/* top | right | bottom | left */
  margin: 0 1em 0.3em 0.2em;
  margin: 0.5em 0 0.3em 0.5em;
  position: relative;
  text-align: right;
}

.tarifform select {
  /*text-align: block;
  position: right;*/
  position: relative;
  
/*    display: none; */
    font-size: 1.0em;
    padding: .4em .5em .4em .5em;
    width: 70%;
    /*max-width: 70%; /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
	/* top | right | bottom | left */
	margin: 0.5em 0 0.3em 0.5em;

    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgb(0,0,0,0.2);
    border-radius: .3em;
    -webkit-appearance: none;
    appearance: none;
}

.tarifform select:hover {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}

/* Hide arrow icon in IE browsers */
/* select::-ms-expand {
    display: none;
}
 */
.tarifform label {
  position: absolute;
  top: 0.5em;
  left: 0;
  color: #666;
  display: block;
  margin: 0.5em 0 0.3em 0.5em;
}

.tarifform input[type="number"] {
    text-align: right;
	width: 40%; 
    font-size: 1.2em;
    box-sizing: border-box;
/* top | right | bottom | left */
    padding: .3em .5em .3em .5em;
    border: 1px solid #aaa;
    border-radius: .3em;
 /*   margin: 1em auto; */
	margin: 0.5em 0 0.3em 0.5em;
}

/*
select label {
  position: absolute;
  color: #666;
  background: #fff;
  padding: 0 .5em;
  font-size: .8em;
  top: -.6em;
  left: .5em;
}
*/