/* Außen-container / Flexbox */
.flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: center; align-content:center;align-items:center; border:0px solid blue; padding-top:3%; width:97%; max-width:1600px;}

.flex-item_single { order:1; -webkit-flex: 0 1 auto; flex: 0 1 auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: stretch; min-height:auto; border:0px solid yellow; padding-left:50px;width:97% }

/* Innen-container */
.flex-item1 { order:1; -webkit-flex: 0 1 auto; flex: 0 1 auto; flex-grow: 0; flex-shrink: 1; flex-basis: auto; align-self: stretch; min-width:70%; min-height:auto; padding-left:50px; padding-right:50px; border:0px solid red; }

.flex-item2 { order:2; -webkit-flex: 0 1 auto; flex: 0 2 auto; flex-grow: 0; flex-shrink: 2; flex-basis: auto; align-self: stretch; min-width:25%; min-height:auto; padding-left:20px; border:0px solid green; }


/*
body {
	
	background-image: url(../dateien/wasser-heller.jpg) ;  ******  für wellen   **
	background-size:100% auto;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
*/




.schatten 
{
    -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.38); 
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.38);
}



.button_toggle_active
{
    background-color:Lime;
}

.button_toggle_passive
{
    background-color:gray;
}


#textinhalt  img
{
       padding:6px;
       background-color:White;
        border: 1px solid black;
    -webkit-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    -moz-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);

}

#div_neue_emails_checken 
{
    
    position:fixed;
    left:30%;
    top:100px;
    height:auto;
    width:auto;
    padding:30px;
    background-color:white;
    border:1px solid black;
    z-index:9999999999999999999999999999999999;
    
    -webkit-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    -moz-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
}


.div_info_neueingabe {
        z-index: 99;
        left: 10%;
        top: 52px;  /************************ dies ist der Abstand vom Admin-Fenster zur Legende ********************/
        position: absolute;
        height: auto;
        
        width: 70%;
        background-color: #F0EDD4;
        padding: 20px;
        border: 1px solid #000000;
        float: left;
        border-top: 20px solid #B5B2B1;
}



.css_div_info  {
        z-index: 100;
        left: 10px;
        top: 52px;  /************************ dies ist der Abstand vom Admin-Fenster zur Legende ********************/
        position: absolute;
        width: 70%;
        background-color: #F0EDD4;
        padding: 20px;
        border: 1px solid #000000;
        float: left;
        border-top: 20px solid #B5B2B1;
}



.iframe {
    position: absolute;
    top:120px;
    left:10px;
    width: 95%;
    height: 75%;
    margin: 10px 0px 0px 50px;
}



.liste_neue_infos  { margin:4px 0px 0px 0px; padding-top:-5px; border-bottom: 1px dotted #800000;list-style-type: circle;color:#800000;}




.symbol_chat_klein {
    margin: 5px 0px 5px 20px; 
    float:left;
    height:25px;
   -webkit-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    -moz-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
} 




.navbar-fixed-top a
{
    color:#80929D; 
}

.navbar-header 
{
    width:100%;
    margin-top:5px;
}

h1 
{
    font-size:25pt;
    font-weight:normal;
   
        /* text-shadow: 1px 2px ^1px rgba(89, 104, 115, 1);  
    color: #647682;*/
    color: #800000;
       
    font-stretch:extra-expanded;
}


h2, h3, h4 
{
    color: #800000;
    border-bottom:0px solid #800000;
    text-decoration:none;
}







.symbol_chat {
    margin: -5px 0px 5px 30px; 
    float:left;
    height:30px;
   -webkit-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    -moz-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
} 



.symbol_chat_klein {
    margin: 5px 0px 5px 20px; 
    float:left;
    height:25px;
   -webkit-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    -moz-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
    box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
} 


#myNavbar {
    margin:-5px 0px 0px 0px;
    width:100%;
    border-top:1px solid black;
    border-bottom:1px solid black;

 -webkit-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
-moz-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);

}


#div_people 
{
    max-height:200px; overflow:auto;
}

.dunkelnavbarklein
{
    background-color:Gray;
}



.div_admin_navi_css 
{
   
}


.css_fenster_um_inhalt /**** z.B.. Mitteilungen/ Anmeldung, etc.  */
{
    
   border:1px solid black; 
   text-align:left;
   position:fixed;
   background-color:#89b31c; 
   padding: 5px 2px 2px 2px;
-webkit-box-shadow: 10px 10px 10px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 10px -7px rgba(0,0,0,0.75);
box-shadow: 10px 10px 10px -7px rgba(0,0,0,0.75);
}

.css_fenster_inhalt /**** z.B.. Mitteilungen/ Anmeldung, etc.  */
{
   border:1px solid #d9d9d9; 
   text-align:left;
   background-color:White; 
   margin: 1% 1% 1% 1%;
   height:98%;
   width:98%;
   padding:7px;
}



hr 
{
    -webkit-box-shadow: 0px -3px 11px -1px rgba(66,65,66,1);
-moz-box-shadow: 0px -3px 11px -1px rgba(66,65,66,1);
box-shadow: 0px -3px 11px -1px rgba(66,65,66,1);

}

footer 
{
   
 /* background-color: #DB5903;   */
 background-color: #89b31c;
border-top:1px solid black;
 
-webkit-box-shadow: 0px -3px 11px -1px rgba(66,65,66,1);
-moz-box-shadow: 0px -3px 11px -1px rgba(66,65,66,1);
box-shadow: 0px -3px 11px -1px rgba(66,65,66,1);
  
}

footer input {

  border: 1px solid black;
  color:gray;
  border-radius: 0px;
 
}

.eigenes_input {
    padding:1px;
    margin:1px 3px 0px 3px;
    border:1px solid gray;
    height:25px;
    font-size:17px;
    color:Black;
    font-weight:normal;
           -webkit-box-shadow: 0px 10px 6px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 10px 6px -6px rgba(0,0,0,0.75);
        box-shadow: 0px 10px 6px -6px rgba(0,0,0,0.75);
}




#footer {
    z-index:9999999999999999;
    
}
/*   */

 .dropdown-menu {
    width:200px;
}



 
.dropdown-menu > li.kopie > a {
    padding-left:5px;
}
 
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
   top:0;left:100%;
   margin-top:-6px;margin-left:-1px;
   -webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;
 }
  
.dropdown-submenu > a:after {
  border-color: transparent transparent transparent #333;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
  display: block;
  float: right;  
  height: 0;     
  margin-right: -10px;
  margin-top: 5px;
  width: 0;
}
 
.dropdown-submenu:hover>a:after {
    border-left-color:#555;
 }

.dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {
  text-decoration: underline;
}  
  
@media (max-width: 767px) 
{
    
    
      #div_um_div_people 
      {
          visibility:hidden;
      }
        .div_info_neueingabe 
        {
            
                z-index: 999999999999999999999999;
                left: 5%;
                top: 0px;  /************************ dies ist der Abstand vom Admin-Fenster zur Legende ********************/
                margin: -120px 0px 0px 30px;
                width: 100%;
                border-top:30px solid gray;
        }    
    
    
              ul.nav li:hover > ul.dropdown-menu {
                        display: block;
                      }
                      
                      
                    h1  {
                            font-size:13pt;
                            font-weight:normal;
                            color:#800000;
                        }
                        
   .css_fenster_um_inhalt  
   {
      position:fixed;
      left:50px;
   }
   
   
                      
                                              
  .flex-container   /*** damit die rechte Spalte unter die linke wandert...*/
     {  -webkit-flex-wrap: wrap;flex-wrap:  wrap;
      }
                
            
                
    #logo_dgzrs  {
    width:50px;
    height:50px;
    }

  .navbar-nav  {
     display: inline;
  }
  .navbar-default .navbar-brand {
    display: inline;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
  }
  .navbar-default .navbar-nav .dropdown-menu > li > a {
    color: red;
    background-color: #ccc;
    border-radius: 4px;
    margin-top: 2px;   
  }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
     color: #333;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
     background-color: #ccc;
   }

   .navbar-nav .open .dropdown-menu {
     border-bottom: 1px solid white; 
     border-radius: 0;
   }
  .dropdown-menu {
      padding-left: 10px;
  }
  .dropdown-menu .dropdown-menu {
      padding-left: 20px;
   }
   .dropdown-menu .dropdown-menu .dropdown-menu {
      padding-left: 30px;
   }
   li.dropdown.open {
    border: 0px solid red;
   }

}
 
@media (min-width: 768px) 
{
    
    
    
    .flex-container   /*** damit die rechte Spalte wieder neben die linke wandert...*/
     {  -webkit-flex-wrap: nowrap;flex-wrap:  nowrap;
      }
               
    
    
  ul.nav li:hover > ul.dropdown-menu {
    display: block;
  }
  #navbar {
    text-align: center;
  }
  
  .flex-item1 
  {
      margin-top:70px;
  }
                        h1 
                        {
                        font-size:17pt;
                        font-weight:normal;
                        color:#800000;
                         color: green;
    }
  .flex-item2 
  {
      margin-top:70px;
  }
                        h1 
                        {
                        font-size:17pt;
                        font-weight:normal;
                        color:#800000;
                        }                        
                        
.symbol_chat {
                            margin: -5px 0px 5px 15px; 
                            float:left;
                            height:20px;
                           -webkit-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
                            -moz-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
                            box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
                        } 
}  




@media (min-width: 1030px) 
{
    
       
  
    
                            h1 
                            {
                                font-size:19pt;
                                font-weight:normal;
                                color: #800000;
                            }
                        
                        .symbol_chat {
                            margin: -5px 0px 5px 15px; 
                            float:left;
                            height:25px;
                           -webkit-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
                            -moz-box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
                            box-shadow: 0px 7px 11px -5px rgba(66,65,66,1);
                        } 
                                         
                        
}



@media (min-width: 1130px) {
  
 
                    h1 
                        {
                        font-size:23pt;
                        font-weight:normal;
                        color:#800000;
                        }  
                     
                    .flex-item1 
                  {
                      margin-top:0px;
                  }
                                       
                  .flex-item2 
                  {
                      margin-top:0px;
                  }
                      
}  




/************  für kleines Menue (Button) ***************/
 .navbar-toggle  {
   background-color: gray;
  }

/************************************************/


       
#titel {
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size:20pt;
}


#div_suchergebnis 
{
    position:absolute;
    top:90px;left:10%;
    background-color:white;padding:30px;
    border:1px solid #5C99D7;width:70%;
    z-index:99999999999999999999999999999;
     -webkit-box-shadow: 10px 10px 6px -2px rgba(0,0,0,0.39);
-moz-box-shadow: 10px 10px 6px -2px rgba(0,0,0,0.39);
box-shadow: 10px 10px 6px -2px rgba(0,0,0,0.39);
}






#div_shadow 
{
    width:100%;
     height:82%;
     top:77px;
     left:1px;
    position:absolute;
    background-color:gray;
    opacity: 0.7;
    z-index:999999999999999;
}



#myNavbar {

    background-color:#FAFAFA;
    padding-left:100px;
}



.breadcrumb 
{
    visibility:hidden;
    padding-left:0%;
    margin-top:-35px;
    background-color:gray;
   
    width:auto;
    height:30px;
    position:fixed;
    left:100px;
    border:1px solid white;
}







body 
{
    font-family: 'Open Sans', sans-serif;
}


/************  Tabellen Flex-Box********************* http://codepen.io/vasansr/pen/jWazPM   ****/
.table-row {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: no-wrap;
  -webkit-flex-wrap: no-wrap;
  width: 150%;
  padding-left: 15px;
  padding-right: 15px;
  border-top:0px solid black;
  border-bottom:1px solid gray;
}
.wrapper {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-grow: 0;
  -webkit-flex-grow: 0;
  padding:0px;float:left; width:50%;
}
.text-4,
.text-2,
.text {
  flex-grow: 1;
  -webkit-flex-grow: 1;
}
.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 0px;
}
.text {
  width: 50%;
  border:0px solid green;
}

.text input {
  border:1px solid #a6a6a6;
  float:left;
  margin-top:0px;
  margin-bottom:20px;
  margin-left:10px;
 
}



.num {
  width: 80px;
  text-align: right;
}
/*
 * Media queries: optimize for different screen widths.
 */
@media all and (max-width: 1230px) 
{
      
      
      
        .div_info_neueingabe {
                z-index: 99;
                left: 5%;
                top: 111px;  /************************ dies ist der Abstand vom Admin-Fenster zur Legende ********************/
                width: 70%;
        }

    
  .text-2,
  .num-2 {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .text-2 div,
  .num-2 div {
    flex-grow: 0;
    -webkit-flex-grow: 0;
    width: 100%;
  }
  .text-2 {
    width: 180px;
  }
  .num-2 {
    width: 80px;
  }
}
@media all and (max-width: 580px) {
  .text-4,
  .num-4 {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .text-4 div,
  .num-4 div {
    flex-grow: 0;
    -webkit-flex-grow: 0;
    width: 100%;
  }
  .text-4 {
    width: 180px;
  }
  .num-4 {
    width: 80px;
  }
}
@media all and (max-width: 320px) {
  .table-row {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .table-row div {
    flex-grow: 0;
    -webkit-flex-grow: 0;
    width: 100%;
  }
  .num {
    text-align: left;
  }
}
/*
 * General good-look styles, not mandatory.
 */

.table-row {
  border-bottom: 0px solid #e0e0e0;
  border-collapse: collapse;
  padding-top: 5px;
}
.table-row.header {
  background-color: #FFEEDB;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 8px;

}



/* Some borders to show the behaviour. Uncomment to see it in action 

.text-2, .num-2 {
  border: 0px solid green;
  padding: 2px;
  margin: 2px;
}

.text-4, .num-4 {
  border: 0px solid red;
  margin: 2px;
}
*/


/*************************  von HTML-Haquptseite  ********************/


 .slidecontainer## {
  width: 200px;
  float:right !important;
}

.slider {
 
  width: 200px;
  height: 25px;
  background: #edebe8;
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border:1px dotted gray;
  
}

.slider:hover {
  opacity: 1;
  cursor:pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  
  cursor: pointer;
  
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #bd2308;
  cursor: pointer;
  z-index:9999999999999999 !important;
}
 




.tree_aktiv
{
    color:#bd2308 !important;
    font-weight:bolder;
}


 
 
.eigenes_layout_tabelle {

    background-color:white;
    border:1px;
    
    padding:0px !important;
    margin:0px !important;
    border-bottom:1px solid #d9d9db !important;
    font-size:13px;
   
   
}



.eigenes_layout_tabelle tr
{
    border:0px  !important;
 
}

.eigenes_layout_tabelle tr:hover, .eigenes_layout_tabelle tr:nth-child(even):hover  {
    cursor: pointer;
    cursor: hand;
    background-color:#ebeced;
}


.eigenes_layout_tabelle tr:nth-child(even) 
{
    background: #f2f2f2;
}



.eigenes_layout_tabelle th {
   
    border-top:1px solid gray !important;
    border-bottom:1px solid black !important;

	font-weight: bold;
	text-align: left;
	 background-color:#ffffff !important;
	 height:25px;
	 color:#3b4794;
	 font-size:16px;
	 border-bottom:1px solid gray;
	 padding:10px 10px 20px 10px ;

}

.eigenes_layout_tabelle tr td {

	font-weight: normal;
	text-align: left;
	 height:35px !important;
	 color:black;
	 font-size:14px;
	 padding:2px 5px 2px 5px;
	
	

}



.eigenes_layout_tabelle thead tr {
 
   background-color:Red;
}

/* Anzeige Anzahl der Datensätze, etc. */
.dataTables_info {
	width: 120px;
	float: left;/**/
	font-family: Arial;
	font-size: 11px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 10px;
	border:0px solid green;
	
}

/* Auswahl Anzahl der Datensätze ***************************************/
.dataTables_length {
	width: 150px;
	float: left;
	font-family: Arial;
	font-size: 11px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 30px;/**/
	margin-left: 30px;/**/
	border:0px solid lime;
}

/* suchfeld ***************************************/
.dataTables_filter  {
	width: 210px !important;
	float: left !important;
	text-align: left;
	font-family: Arial;
	font-size: 11px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 20px;
		border:0px solid red;

}

.dataTables_filter input {
	width: 210px;
	border:1px dotted gray;
	
}


/* Feld mit Anzahl d. Seiten / Auswahl */
.dataTables_paginate {
	float: right;
	/*text-align: left;
	margin-top: 30px;*/
	margin-top: 15px;
	margin-bottom: 5px;
	margin-left: 10px;/**/
	
}

/*.pagination li a:link {
  background-color: rgba(255,128,128,.8);

.pagination a:link {
  background-color: rgba(94, 148, 181,.7);
 padding:4px 7px !important;
}
}*/
/*
.paginate_button.active 
{
    background-color:Blue;
    color:White;
}

*/



 #nav-icon3 {
  
  border:0px solid black;
  width: 35px;
  height: 25px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

 #nav-icon3 span{
  
  border:0px solid blue;
  margin:0px;
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 5px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
} 
 
#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 10px;
}

#nav-icon3 span:nth-child(4) {
  top: 20px;
}

#nav-icon3.open span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}





body 
{
    font-family:arial ;
    line-height:25px;
      margin:0px; padding:0px;
}

#container {
    display: flex;
    x-align-items: stretch;
    height: calc(100vh - 70px);
 
    
}
.left {
   
    flex: 0 0 270px;  /**/
    margin-left: 0px ;
    border-right:1px dotted gray;
   
}
.right {
    flex: 1 0 0;
    border:0px solid green;
    padding:0px 0px 30px 0px ;
    
}


.schmal{
  margin-left: -270px ;  
} 


#div_overlay{
    -webkit-transition: 3.5s ease-in;
    -moz-transition:  3.5s ease-in;
    -o-transition:  3.5s ease-in;
    transition:  3.5s ease-in;
}

#div_overlay{
    -webkit-transition:  0.3s ease-out;
    -moz-transition:  0.3s ease-out;
    -o-transition:  0.3s ease-out;
    transition:  0.3s ease-out;
}

.overlay 
{
    background-color:Gray;/*  */
	opacity: 0.9;
	z-index:999999999999999999999999 !important;
   
}

.unsichtbar 
{
     opacity : 0; 
     font-size:0px;
}




h1 
{
 color:#bd2308;  
 color:#f58a00; 
  text-shadow: 0px 1px #a8a5a5;
  
 
 font-size:33px;
 font-weight:normal; 
}




/********************************  Custom  dropdowns **************************************/
.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
   
    padding: 5px 18px 5px 7px;
    background: #fff url("select-arrows.svg") no-repeat right 16px center;
    background-size: 25px;
    transition: border-color .2s ease-in-out,box-shadow .2s ease-in-out;
    border: 1px solid #ddd;
    border-radius: 13px;
     box-shadow: 0 3px 5px 0 rgba(0,0,0,.2);
     font-size:17px;
     color:gray;
    
}
.custom-select:hover {
    border: 1px solid #999;
}
.custom-select:focus {
    border: 1px solid #999;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,.4);
    outline: none;
   
}
/* remove default arrow in IE */
select::-ms-expand {
    display:none;
}


/******************************** ENDE Custom  dropdowns **************************************/




/****  damit linebreak im Tooltip möglich ist  ****/
.ui-tooltip {
  white-space: pre-line;
  opacity:1;
    width:300px !important;

}




@media (max-width: 430px) {
          html {
            font-size: 85%;
          
          }
          
.dataTables_filter, .dataTables_info { display: none; }

          
h1 
{
    font-size:27px;
    margin-bottom:20px;
}
     #logo 
     {
         width:70px !important;
     }
     
     #div_titel  {
           
            margin:22px 0px 0px -40px !important;
            font-size:25px !important;
           
        }
        
     
        #div_inhalt 
        {
           
            margin:5px 0px 30px 0px ;
           
        }

}


@media (max-width: 400px) {
          html {
            font-size: 85%;
           
          }

     #logo 
     {
         width:70px !important;
     }
     
     #div_titel  {
           
            margin:22px 0px 0px -40px !important;
            font-size:21px !important;
           
        }
        
     
        #div_inhalt 
        {
           
            margin:5px 0px 30px 0px ;
           
        }

}





/************************ https://www.mediaevent.de/tutorial/flexbox.html  -*********************/

.mixed { 
   display: flex;
   flex-wrap:wrap; 
}

/** kleiner Viewport **/
.mixed>* { 
   width: 45%; 
   margin: 10px; border: 1px solid silver;
}

/** großer Viewport **/
@media (min-width: 980px) {
   .mixed>* { width: 22%;}
}