.dienstsymbolBG_Kreis {
  width: 2.5em; /* Breite der Ellipse */
  height: 1.5em; /* Höhe der Ellipse */
  /*background-color: #3498db; /* Farbe der Ellipse */
  border-radius: 50%; /* Macht das Element oval */
  display: flex; /* Optional, um Text innerhalb der Ellipse zu zentrieren */
  justify-content: center; /* Text horizontal zentrieren */
  align-items: center; /* Text vertikal zentrieren */
  color: black; /* Textfarbe */
  font-size: 1em; /* Schriftgröße */
  text-align: center; /* Textausrichtung */
}

.dienstsymbolBG_Rechteck {
  width: 2.5em; 
  height: 1.5em; 
  /*background-color: #3498db; /* Farbe */
  display: flex; /* Optional, um Text innerhalb zu zentrieren */
  justify-content: center; /* Text horizontal zentrieren */
  align-items: center; /* Text vertikal zentrieren */
  color: black; /* Textfarbe */
  font-size: 1em; /* Schriftgröße */
  text-align: center; /* Textausrichtung */
}

.dienstsymbolBG_Pfeil {
  width: 2.5em; /* Breite */
  height: 1.5em; /* Höhe */
  background-color: black; /* Farbe */
  clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
  display: flex;
  justify-content: center; /* Text horizontal zentrieren */
  align-items: center; /* Text vertikal zentrieren */
  color: black; /* Textfarbe */
  font-size: 1em; /* Schriftgröße */
  text-align: center; /* Textausrichtung */
}

.dienstsymbolBG_Hexagon {
  width: 2.5em; /* Breite */
  height: 1.5em; /* Höhe */
  background-color: black; /* Farbe */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex;
  justify-content: center; /* Text horizontal zentrieren */
  align-items: center; /* Text vertikal zentrieren */
  color: black; /* Textfarbe */
  font-size: 1em; /* Schriftgröße */
  text-align: center; /* Textausrichtung */
}

.dienstsymbolBG_ { /*für z.B. K*/
  width: 2.5em; /* Breite */
  height: 1.5em; /* Höhe */
  display: flex;
  color:red !important;
  justify-content: center; /* Text horizontal zentrieren */
  align-items: center; /* Text vertikal zentrieren */
  color: black; /* Textfarbe */
  font-size: 1em; /* Schriftgröße */
  text-align: center; /* Textausrichtung */
}

.contentContainer {
	
	box-shadow: 3px 4px 0px 0px #899599;
	background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
	background-color:#ededed;
	border-radius:8px;
	border:1px solid #d6bcd6;
	display:inline-block;
	cursor:pointer;
	padding:10px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #e1e2ed;
	margin:1em;
	width:95%;
	max-width:95%;
}

/* Anpassungen für Smartphones (z.B. Bildschirmbreite bis 768px) */
@media only screen and (max-width: 768px) {
    .contentContainer {
        width: 100%;
        max-width: 100%;
        padding: 4px 8px;
        margin-left: 0;
		margin-right: 0;
        
    }
	#contentContainerCol {
		padding-right: 0;
	}

}

	

/* Optional: Anpassungen für sehr kleine Bildschirme (z.B. bis 480px) */
@media only screen and (max-width: 480px) {
    .contentContainer {
        border-radius: 6px;
        padding: 2px 6px;
    }
}



.contentPage {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	padding:10px 15px;
	width:95%;
	max-width:95%;
}

#MainContent {
	padding-top: 0.25em;
}

/*Animationen*/



/* Ende Animationen*/

/* UNTERHALB IST AUS VERSION 1
----------------------------------------------------------------------------------------------
*/

body,div,span,table,td {
			  font-family:Ubuntu,Calibri,sans-serif; //nicht important, damit das Glyphicons Font nicht überschrieben wird
}



/*https://codepen.io/maxds/pen/jgeoA*/
.pcp-panel {
  padding: 9px 14px;
  margin-bottom: 14px;
  margin-right: 14px;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
  border-radius: 10px;

   //https://www.cssmatic.com/box-shadow
  -webkit-box-shadow: 10px 10px 41px -7px rgba(0,0,0,0.36);
  -moz-box-shadow: 10px 10px 41px -7px rgba(0,0,0,0.36);
  box-shadow: 10px 10px 41px -7px rgba(0,0,0,0.36);
}

//https://mycolor.space/gradient?ori=to+left+top&hex=%23FFFFFF&hex2=%23E2FFDC&sub=1
.pcp-ke { background-image: linear-gradient(to left top, #ffffff, #f9faff, #f2f5ff, #e8f1ff, #dceeff);}
.pcp-km { background-image: linear-gradient(to left top, #ffffff, #fffbff, #fff6f7, #fff4e8, #fff6dc);}
.pcp-vk { background-image: linear-gradient(to left top, #ffffff, #fbf7fc, #fbeef6, #fee5eb, #ffdcdc);}
.pcp-ue { background-image: linear-gradient(to left top, #ffffff, #f6feff, #e3ffff, #d7fff7, #e2ffdc);}

.helplabel a:link {
	color: white;
}

.popover {
	color: black;
}

.namenContainer {
 width:100%;
 
}
.rightFloat {
  float:right;
}

.morecontent span {
    display: none;
}
.morecontentlink {
    display: block;
}

img.grau {
	//filter: grayscale(50%);
	opacity: 0.3;
}


.popover{
    max-width: 60%; /* Max Width of the popover (depending on the container!) */
}

@supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ 
		body{ cursor:pointer; } /*damit Popovers auf iOS Mobile schließen */
}


.maCheckBox  { transform: scale(2);}

.maTabelle tbody tr:hover {
    background-color:white;
    
}

@media print
{    


    body {
 		  //Das Top-Spacing für die NavBar nicht beim Druck.
		  padding-top: 70px;
		}
		
		h1 { margin-top: 0; }
		
    .no-print, .no-print *
    {
        display: none !important;
    }
    
    .az_monats_tabelle {
       border-spacing: 10px;
       border-collapse: separate;
    }
		
		.az_monats_tabelle td {	 
			  padding:0;
        margin:0;
    }    
    
    
    
}

 .widgetContainer h1, h2, h3, h4, h5, h6, h7{
    margin-top:0;
 }
 .widgetContainer {
    margin: 0.5em;     //durch das breite Margin hab ich nicht die vollen 12 GridSlots zur Verfügung!
    background-color: #fff;
//    border-color: #ddd;
    border-width: 1px;
    border-radius: 4px 4px 0 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    padding: 45px 15px 15px;
    border-color: #e5e5e5 #eee #eee;
    border-style: solid;
    border-width: 1px 0;
    -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}

.widgetContainerTitle {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 12px;
    font-weight: 700;
    color: #959595;
    text-transform: uppercase;
    letter-spacing: 1px;
}


#zwangsLogout {
	left:0;
	top:0;
	position: fixed; /* Positionierung an Viewport */
	width: 100%; /* Volle Breite */
	height: 100%; /* Volle Hoehe */
	z-index: 9998; /* Ueber andere Elementen legen */
	background-color:#fff;
	opacity:0.7;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	top:60px;
	right:40px;
	background-color:#0000cc;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}
 
#saveFloat{
	position:fixed;
	width:60px;
	height:60px;
	top:60px;
	left:40px;
	/*background-color:#fff;*/
	/*color:#FFF;*/
	/*border-radius:50px;*/
	text-align:left;
	/*box-shadow: 2px 2px 3px #999;*/
}

.floatButton1{
	margin-top:22px;
}
.changeIndicator {
-webkit-box-shadow:0px 0px 10px 3px #ff0000 inset;
-moz-box-shadow:0px 0px 10px 3px #ff0000 inset;
box-shadow:0px 0px 10px 3px #ff0000 inset;
}

.hidden {
  display: none;
}	

#loadingscreen {
 /* position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background: white;
  z-index: 9;
   */
opacity:    0.9; 
  background: #fff; 
  width:      100%;
  height:     100%; 
  z-index:    1000;
  top:        0; 
  left:       0; 
  position:   fixed;
  display:table-cell; 
  vertical-align:middle; 
  text-align:center;  
  
}