h1 {
    background: #d3d3d3;
    border-radius: 10px;
    color: #fff;
    margin: 0 0 20px;
    padding: 10px;
    text-shadow: 1px 1px 2px #000;
}
h2 { margin: 0; }


.col_left, .col_right {
  width: 50%;
  display: inline-block;
}
.col_right {
  padding-left: 5%;
}

.panel {
    background-color: transparent;
    box-shadow: none;
  }
  
  .btn-group,
  .list-group,
  .list-group-item {
    width: 100%;
  }
  
  .btn-group {
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
    background: #eee;
  }
  
  .btn-group .btn {
    display: block;
    float: left;
    padding: 10px 15px;
    margin: 0 !important;
    border-right: 1px solid #ddd;
  }
  
  .btn-group .btn:last-child {
    border-width: 0px;
  }
  
  .is-checked {
    font-weight: 600;
  }
  
  .list-group {
    border-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
  }
  
  .list-group-item {
    padding: 0;
    margin: 0;
    display: inline-block;
    border-bottom: 1px solid #bbb;
  }
  
  .list-group-item span {
    display: block;
    float: left;
    padding: 10px 5px;
    box-sizing: border-box;
  }
  
  .list-group-item span:last-child {
    border-right-width: 0;
  }


.btn-default {
    background: #4F4F4F !important;
    border: medium none;
    border-radius: 0;
    color: #fff !important;
    text-shadow: none;
	transition: all 0.5s ease 0s;
}

#header { background: #8BC177 url('../img/logo.png') no-repeat 5px 5px; height: 130px; box-shadow: 0 5px 5px -5px #000; margin-bottom: 20px;}
#logout { position: absolute; right: 5%; top: 10px; }

.button { padding: 10px 25px; border-radius: 5px; }
.button.prev { margin-right: 15px !important; }
.button.next { background: #2F8500; }

#main { width: 100%; margin: 0 auto; display: table; }

#menu {
    background: #939393;
    float: left;
    height: 100%;
    margin: -20px 5% 0 0;
    width: 100%;
	padding: 30px 0;
}
#menu button { width: 100%; text-align: left !important; }
#menu button:hover { background: #2D2D2D !important; }

#submenue { display: none; }
#submenue button { font-size: 12px; text-indent: 5px;}

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

.noBG { background: none; border: none; } 
#content button:hover { color: #265A88; }

#savingHinweis, #abortHinweis {
    background: #008000;
    border: 2px solid #fff;
    border-radius: 20px;
    box-shadow: 5px 5px 10px -5px #000;
    color: #fff;
    left: 35%;
    padding: 10px;
    position: fixed;
    top: 30%;
    width: 30%;
    z-index: 1000;
	display: none; 
}
#abortHinweis { background: #990000; }
#saveEntry {
    position: fixed;
    top: 50%;
    right: 0;
  }

/* Telefon-Buttons */
.telBtn { display: inline-block !important;}
#telefonBereich { background: #efefef; border-radius: 10px; margin-bottom: 30px; padding: 20px; text-align: center; overflow: hidden; position: relative;  min-height: 150px;}
.telefon { height: 80px; cursor: pointer; position: relative; z-index: 1000; }
td.telefon, th.telefon { height: auto;}
.callButtons { text-align: center; opacity: 0;
    /* position: absolute; */
    bottom: -100%;
    margin: 0 auto;
    width: 100%; }
.telBesetzt, .nichtErreichbar, .falschePerson, .falscheNummer, .andererGrund, .telKeinInteresse, .telWiederVorlage {
    border: medium none;
    cursor: pointer;
    height: 90px;
    text-indent: 500px;
    width: 80px;
    display: block;
    background-size: 80% !important;
    background-color: unset;
}
.telBesetzt { 
        background-image:url('../img/telefon_besetzt.png');
        background-repeat:no-repeat;
        padding-left:0;
     }
.nichtErreichbar { background: url("../img/nicht_erreichbar.png"); background-repeat:no-repeat; padding-left:0; }
.falschePerson { background-image: url("../img/falsche_Person.png"); background-repeat:no-repeat; padding-left:0; }
.falscheNummer { background-image: url("../img/falsche_nummer.png"); background-repeat:no-repeat; padding-left:0; }
.andererGrund { background-image: url("../img/anderer_grund.png"); background-repeat:no-repeat; padding-left:0; }
.telKeinInteresse { background-image: url("../img/kein_interesse.png"); background-repeat:no-repeat; padding-left:0; }
.telWiederVorlage { background-image: url("../img/wiedervorlage.png"); background-repeat:no-repeat; padding-left:0; }

.green { background: #37a805 !important;  color: #fff;}
  .green a { color: #fff;}
.brown { background: #6c2600 !important; color: #fff;}
  	.brown a { color: #fff;}
.purple { background: #8542c3 !important;  color: #fff;}
  .purple a {  color: #fff;}
.yellow { background: #fbef10 !important;}
  .yellow a { color: #000; }
.orange { background: #ffa600 !important;}
  .orange a { color: #000; }
.blue { background: #337ab7 !important; color: #fff; }
  .blue a { color: #fff; }
.red { background: #f00 !important;  color: #fff;} 
  .red a { color: #fff;} 

  .btn.btn-default.important {
    background: red !important;
    color: #000 !important;
  }
  
  
.highlightExternal:after {
  content: ;
  content: '';
  background: #d31c13;
  height: 100%;
  position: absolute;
  width: 10px;
  right: 0;
  z-index: 10;
}
  
.doi_register {
  background: #059d39;
  border: medium none;
  color: #fff;
  font-weight: bold;
  width: 100%;
  padding: 7px;
  cursor: pointer;
}

#isotope li span { text-align: center; }

.btn > i:before {
  content: '<';
  position: absolute;
  transform: rotate(90deg);
  padding: 0 3px;
}

.fa.fa-sort-amount-asc:before {
  content: '<';
  transform: rotate(90deg);
}

.fa.fa-sort-amount-desc:before {
  content: '<';
  transform: rotate(-90deg);
}

.u_id { width: 5%; }
.firstname, .lastname { width: 10%; }
.company {  width: 15%; }
.comment, .type { width: 20%; }
.sprache { width: 5%; }
.anzahlanrufe { width: 5%; }
.letzteranrufvon { width: 15%; } 
.kategorie { width: 5%; } 
.entryId { width: 5%; }
.bereits_kunde { width: 7%; }
.email { width: 15%; word-break: break-all; }

/*
  .u_id { width: 4%; }
  .firstname, .lastname { width: 8%; }
  .company {  width: 15%; }
  .comment { width: 20%; }
  .sprache { width: 5%; }
  .anzahlanrufe { width: 8%; }
  .letzteranrufvon { width: 15%; } 
  .kategorie { width: 15%; } 
  .entryId { width: 5%; }
  .bereits_kunde { width: 7%; }
  .email { width: 15%; word-break: break-all; }
*/
#fragen .sprache { line-height: 20px; }

/* BOOTSTRAP */
.row { margin-right: 0; }

/* LOGIN */
.form-inline { margin-top: 50px; text-align: center; }

#formfields_gender {
  width: 100%;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
}

/* SPECIAL */
.showCallingSession, .section { display: none; }
.startSession {
    padding: 20px 0;
    cursor: pointer;
    font-size: 20px;
}
hr {border: 1px solid #ddd;}
.showCallingSession { text-align: left; }
.nextStep {
    background: #404f40;
    padding: 10px;
    width: 130px;
    border-radius: 5px;
    margin-top: 20px;
    color: #fff;
    cursor: pointer; 
}
.transparent { opacity: 0.2; }
/*.phone { float: left; margin-left: 5%; width: 45%;text-align: left;}*/
.phone { width: 15%;   word-break: break-all;}
.voice { float: left; margin-right: 5%; width: 45%;text-align: right;}
.no { background: #d80000; }
.mail { padding: 0; }
.mail a { color: #fff; text-decoration: none; padding: 10px; display:block; }
/* SPECIAL */



h2 {
  margin: 0 0 10px;
font-size:15px;
}


.button {
  background: #3178ce;
  border: medium none;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  width: 30%;
cursor: pointer;
margin-top: 50px;
}

table .button {
  border: 1px solid #fff;
  margin: 0;
  padding: 5px;
  width: 80%;
}


.contentBlock {
  margin-bottom: 20px;
  width: 100%;
}

.callArea {
  border-bottom: 1px solid #106f00;
  margin: 0 0 30px;
  overflow: hidden;
  padding-bottom: 10px;
}

.buttons {
  float: right;
  height: 90px;
  position: relative;
}
.callCounter {
  bottom: 0;
  position: absolute;
  text-align: center;
}


/* ---------------   START: LIGHTBOX  ---------------- */

.green {
  /* color: #00AA16; */
  font-style: italic;
}

.yellow {
  color: #FF9000;
  font-style: italic;
}

.red {
  /* color: #ff0000; */
  font-style: italic;
}

.black {
color: #000;
}

#fragen {
  background: #efefef none repeat scroll 0 0;
  border-bottom: 2px solid #000;
  display: none;
  float: left;
  margin-bottom: 10px;
  width: 100%;
position: relative;
}

#alleFragen {
  float: left;
  padding-bottom: 40px;
  width: 100%;
  text-align: left;
}

#alleFragen > div {
  float: left;
}

.white_content {
  padding: 20px;
}

#light h1 {
  border-bottom: 1px solid;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}


#alleFragen label, #alleFragen input {
  float: left;
  width: auto;
  margin-right: 5px;
}

#alleFragen .button { margin: 0; }
.gotoEntry {
  background: url("../img/goEntry.jpg") no-repeat;
  max-width: 50px;
  text-indent: 500px;
overflow: hidden;
}
textarea {
	caret-color: red;  
	width: 80%;
	height: 200px;
	border: 1px solid #cccccc;
	padding: 0.5em;
}
.kommentar { display: none; margin-bottom: 30px;}
.comment, .benefits {
    background: #FFA200;
    border-radius: 5px;
    border: medium none;
    color: #000;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
}

.table .comment {
  color: #3178ce;
  background: transparent;
  cursor: pointer;
  font-weight: normal;
}

.benefits { display: none; }

/* SPRACHEN */
.langHolder {
  text-transform: lowercase;
}

.sprache {
  color: #808080;
  font-size: 9px;
display: none;
}

.flaggen {
  position: absolute;
  right: 20px;
  top: -20px;
}
.flagge {
opacity: 0.1;
}

.flaggen > div {
  cursor: pointer;
  float: left;
  margin-right: 10px;
}

.flaggen .last { margin: 0; }


.highlight {
  color: #000;
  font-size: 15px;
  display: block;
  width: 100%;
}

#header span { font-size: 16px; }

.uhrzeit {
  color: #5b5b5b;
  font-size: 20px;
  font-weight: bold;
  left: 42%;
  position: absolute;
  top: 7%;
}

#showRueckruf { display: none; width: 10px; float:left;}


#timeCounter {
  background: none;
  border: medium none;
  color: #3178ce;
  font-size: 25px;
  position: absolute;
  right: 10px;
  width: 10%;
}
/* ---------------   ENDE:  LIGHTBOX  ---------------- */
