.button
{
 display: inline-block;
 border-radius: 4px;
 background-color: #f4511e;
 border: none;
 color: #FFFFFF;
 text-align: center;
 transition: all 0.5s;
 cursor: pointer;
}

.button.logout
{
	background-color: #dc3a07;
	width: 80px;
	padding: 8px;
	font-size: 12px;
}

.button.back
{
	background-color: #999a99;
	width: 80px;
	padding: 8px;
	font-size: 12px;
}

.button.details
{
	background-color: #4CAF50;
	width: 150px;
	padding: 15px;
	font-size: 18px;
}

.button.login
{
	background-color: #4CAF50;
	width: 100px;
	padding: 5px;
	font-size: 16px;
}

.button.loesch
{
	background-color: #f4511e;
	width: 150px;
	padding: 15px;
	font-size: 18px;
}

.button.options
{
	background-color: #2b71b9;
	color: #FFFFFF;
	width: 180px;
	height: 56px;
	padding: 8px;
	font-size: 16px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button span.back:after {
  content: '«';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.tdetails
{
 display: table;
 width: 98%;
 padding: 0.5em 1.25em 0em 1.25em;
}
.trow
{
 display: table-row;
 background-color: <?= $bg_col; ?>
}
.tcell
{
 display: table-cell;
 border-top: solid 1px #b6cbdc;
 border-bottom: solid 1px #b6cbdc;
 padding: 1em;
 vertical-align:middle;
}
.tnone
{
 display: none;
}
.tshow
{
 display: table-cell;
}
.tvers
{
 display: inline-table;
}
.tversrow
{
 display: table-row;
}
.tverscell
{
 display: table-cell;
 padding: 0.25em;
}
.right
{
 text-align: right;
}

.dtable
{
 display: block;
 padding: 1.25em; 
 width: 100%;
}
.drow
{
 display: inline-block;
}
.dcell
{
 display: inline-block;
 padding: 0em 0.5em 0em 0.5em;
}

.erfolgreich
{
 background-color: #f6fff3;
 border: solid 1px #1e8100;
 padding: 1.25em;
 text-align: center;
 display: inline-block;
 width: 96%;
 margin-top: 1em;
 border-radius: 3px;
 margin-bottom: 1.25em;
}

@media screen and (max-width: 1120px)
{
 .button.options
 {
	width: 100%;
	height: 50px;
	padding: 10px;
	font-size: 14px;
 }
 
  .dtable
 {
  display: inline-table;
  padding: 0em;
	width: 98%;
 }
 .drow
 {
  display: table-row;
 }
 .dcell
 {
  display: table-cell;
	width: 50%;
	padding: 1.25em;
 }
}
@media screen and (max-width: 1050px)
{
 .tdetails
 {
	font-size: 11px;
 }
 .tnone
 {
	display: table-cell;
 }
 .tshow
 {
	display: none;
 }
 .button.details
 {
	width: 100px;
	padding: 15px;
	font-size: 14px;
 }
 .button.loesch
 {
	width: 100px;
	padding: 15px;
	font-size: 14px;
 }
 .erfolgreich
 {
  width: 90%;
 }
}
@media screen and (max-width: 800px)
{
 .tdetails
 {
  display: table;
  width: 96%;
  padding: 0.5em 1.25em 0em 1.25em;
 }
 .tcell
 {
	display: block;
	text-align: center;
	border: solid 0px;
 }
 .tnone
 {
	display: none;
 }
 .tshow
 {
	display: table-cell;
 }
 .button.details
 {
	width: 90%;
 }
 .button.loesch
 {
	width: 90%;
 }
 .right
 {
  text-align: middle;
 }
 .ttop
 {
	border-top: solid 1px #b6cbdc;
 }
 .tfoot
 {
	 border-bottom: solid 1px #b6cbdc;
 }
}