/*
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
* Rechtscentrum : 65828b 
 */

body
{
    font-family:arial, "lucida console", sans-serif;
    line-height: 1.5em;
    padding:0px;
    margin:0 0 0 0;
    background-color: #eeeeee;

/* -webkit-background-size: 70%;
 -moz-background-size: 70%;
 -o-background-size: 70%;
 background-size: 70%;*/
}

* {
  box-sizing: border-box;
}

html { 

}

a
{
    color:#65828b;
}

b
{
    font-weight:bolder;
}

p
{
    text-align:left !important;
}

.main
{

}

small
{
    font-size:0.8em;
    color:gray;
}

table tr td
{
    background-color: #dddddd;
    padding: 2px 10px;
}

table tr:nth-of-type(odd) td {background-color: #eeeeee;} 

th
{
    padding:0.5em;
    font-weight: bold;
}

td
{
    padding:0.5em;
}

h1
{
    font-size:1.5em;
    font-weight: bold;
    text-align:center;
    margin-bottom:1em;
}

h4
{
    font-weight: bold;
    margin-bottom:1em;
}

.results
{
    padding:0em 2em 0 2em;
}

.header {
  padding: 20px;
  text-align: center;
}

.button
{
    height:2em;
    background-color:#cccccc;
    text-decoration: none;
    color:black;
    font-weight: bold;
    padding:6px 8px 6px 8px;
    border-radius:5px;
    box-shadow:3px 3px 3px  #666688;
    cursor:pointer; 
    border:1px solid darkgray;
} 

.icon
{
    height:2em;
    padding-left:1em;
    cursor:pointer;
}

.vicon
{
    width:3em;
    padding-left:1em;
    cursor:pointer;
    margin-top:0.5em;
}

.logo
{
    width:20%;
}

.border
{
    box-sizing:box;
    border: solid lightgray 1px;
    padding: 10px;
    margin: 10px;
/*    float: left;*/
}

 .area
{
    background-color: white;
    padding:1em;
    border-radius:5px;
}
     
.shadow
{
    box-shadow:10px 10px 20px #aaaaaa;
}
    
.legend
{
    font-weight:bolder;
    display:block;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 10em;
  border:1px solid #dddddd;
}

/* Middle column */
.column.middle {
 
  width: 70%;
  border:1px solid #dddddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.clear
{
clear: both;    
}

.mainlogo
{
    width: 50%;
    top:0px;
    z-index: -1;
    position:relative;
}

.flexContainer
{
    display: -webkit-flex;
    display: flex;
/*    flex-direction: row;
*/    flex-wrap: wrap;
    justify-content:space-between;
}

label
{
    font-size:0.7em;
    margin:0.1em;
}

.redborder
{
    border:solid red 2px;
    padding:1em;
    background-color:#eeeeee;
}

.breadcrumb
{
    margin-left:20px;
    margin-right:20px;
    
    border:1px solid #cccccc;
    padding:10px;
}

.con_main
{
    width:100%;
}

.box_right
{
    width:300px;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}    

.tooltip {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.4s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.aktiv 
{
    background-color:green;
    padding:3px;
    color:white;
    font-weight: bold;
}

.inaktiv
{
    background-color:red;
    padding:3px;
    color:white;
    font-weight: bold;
}