/*****************************************************************************/
/*               Warteanimationen     (https://cssload.net)                  */
/*****************************************************************************/


/*****************************************************************************/
/*               Ladeanimation von inputs 									 */
/*        (Container für die schmale Ladeanimation  )     					 */
/*****************************************************************************/


.theySeeMeLoading{
	width:16px;
	height:16px;
	display:inline-block;
	text-align:center;
	vertical-align: middle;
}

/*****************************************************************************/
/*               horizontal cubes                                            */
/*****************************************************************************/

.floatBarsGContainer{
	position:relative;
	width:240px;
	height:20px;
	margin:auto;
}

.floatBarsG{
	position:absolute;
	top:0;	
	background-color:var(--backgroundColor9);
	width:20px;
	height:20px;
	animation-name:bounce_floatBarsG;
		-o-animation-name:bounce_floatBarsG;
		-ms-animation-name:bounce_floatBarsG;
		-webkit-animation-name:bounce_floatBarsG;
		-moz-animation-name:bounce_floatBarsG;
	animation-duration:2.28s;
		-o-animation-duration:2.28s;
		-ms-animation-duration:2.28s;
		-webkit-animation-duration:2.28s;
		-moz-animation-duration:2.28s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.3);
		-o-transform:scale(.3);
		-ms-transform:scale(.3);
		-webkit-transform:scale(.3);
		-moz-transform:scale(.3);
}

.floatBarsG_1{
	left:0;
	animation-delay:0.91s;
		-o-animation-delay:0.91s;
		-ms-animation-delay:0.91s;
		-webkit-animation-delay:0.91s;
		-moz-animation-delay:0.91s;
}

.floatBarsG_2{
	left:30px;
	animation-delay:1.14s;
		-o-animation-delay:1.14s;
		-ms-animation-delay:1.14s;
		-webkit-animation-delay:1.14s;
		-moz-animation-delay:1.14s;
}

.floatBarsG_3{
	left:60px;
	animation-delay:1.37s;
		-o-animation-delay:1.37s;
		-ms-animation-delay:1.37s;
		-webkit-animation-delay:1.37s;
		-moz-animation-delay:1.37s;
}

.floatBarsG_4{
	left:90px;
	animation-delay:1.59s;
		-o-animation-delay:1.59s;
		-ms-animation-delay:1.59s;
		-webkit-animation-delay:1.59s;
		-moz-animation-delay:1.59s;
}

.floatBarsG_5{
	left:120px;
	animation-delay:1.82s;
		-o-animation-delay:1.82s;
		-ms-animation-delay:1.82s;
		-webkit-animation-delay:1.82s;
		-moz-animation-delay:1.82s;
}

.floatBarsG_6{
	left:150px;
	animation-delay:2.05s;
		-o-animation-delay:2.05s;
		-ms-animation-delay:2.05s;
		-webkit-animation-delay:2.05s;
		-moz-animation-delay:2.05s;
}

.floatBarsG_7{
	left:180px;
	animation-delay:2.28s;
		-o-animation-delay:2.28s;
		-ms-animation-delay:2.28s;
		-webkit-animation-delay:2.28s;
		-moz-animation-delay:2.28s;
}

.floatBarsG_8{
	left:210px;
	animation-delay:2.5s;
		-o-animation-delay:2.5s;
		-ms-animation-delay:2.5s;
		-webkit-animation-delay:2.5s;
		-moz-animation-delay:2.5s;
}



@keyframes bounce_floatBarsG{
	0%{
		transform:scale(1);
		background-color:var(--accentFontColor);
	}

	100%{
		transform:scale(.3);
		}
}

@-o-keyframes bounce_floatBarsG{
	0%{
		-o-transform:scale(1);
		background-color:var(--accentFontColor);
	}

	100%{
		-o-transform:scale(.3);
	}
}

@-ms-keyframes bounce_floatBarsG{
	0%{
		-ms-transform:scale(1);
		background-color:var(--accentFontColor);
	}

	100%{
		-ms-transform:scale(.3);
	}
}

@-webkit-keyframes bounce_floatBarsG{
	0%{
		-webkit-transform:scale(1);
		background-color:var(--accentFontColor);
	}

	100%{
		-webkit-transform:scale(.3);
	}
}

@-moz-keyframes bounce_floatBarsG{
	0%{
		-moz-transform:scale(1);
		background-color:var(--accentFontColor);
	}

	100%{
		-moz-transform:scale(.3);
	}
}

/*****************************************************************************/
/*               flip cube                                                   */
/*****************************************************************************/

.cssload-loader {
	width: 16px;
	height: 16px;
	display: inline;
	position: relative;
	transform: translate3d(-50%, -50%, 0);
		-o-transform: translate3d(-50%, -50%, 0);
		-ms-transform: translate3d(-50%, -50%, 0);
		-webkit-transform: translate3d(-50%, -50%, 0);
		-moz-transform: translate3d(-50%, -50%, 0);
	perspective: 1200;
		-o-perspective: 1200;
		-ms-perspective: 1200;
		-webkit-perspective: 1200;
		-moz-perspective: 1200;
}

.cssload-flipper {
	position: relative;
	display: block;
	height: inherit;
	width: inherit;
	animation: cssload-flip 2.1s infinite ease-in-out;
		-o-animation: cssload-flip 2.1s infinite ease-in-out;
		-ms-animation: cssload-flip 2.1s infinite ease-in-out;
		-webkit-animation: cssload-flip 2.1s infinite ease-in-out;
		-moz-animation: cssload-flip 2.1s infinite ease-in-out;
	transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
}

.cssload-front,
.cssload-back {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background-color: var(--basicFontColor);
	height: 100%;
	width: 100%;
	backface-visibility: hidden;
}

.cssload-back {
	background-color:var(--accentFontColor);
	z-index: 800;
	transform: rotateY(-180deg);
		-o-transform: rotateY(-180deg);
		-ms-transform: rotateY(-180deg);
		-webkit-transform: rotateY(-180deg);
		-moz-transform: rotateY(-180deg);
}



@keyframes cssload-flip {
	0% {
		transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

@-o-keyframes cssload-flip {
	0% {
		-o-transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		-o-transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		-o-transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

@-ms-keyframes cssload-flip {
	0% {
		-ms-transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		-ms-transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		-ms-transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

@-webkit-keyframes cssload-flip {
	0% {
		-webkit-transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		-webkit-transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		-webkit-transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

@-moz-keyframes cssload-flip {
	0% {
		-moz-transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		-moz-transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		-moz-transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

.waitingAnimationSmall{
	display:inline-block; 
	vertical-align: middle;
}

/*Initiale Ladeanimation für Angular*/
@keyframes rotate {
	from { transform: rotate( 0deg ); }
	to { transform: rotate( 360deg ); }
}
.logo-httpOverlay {
	animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    height: 150px;
    width: 150px;
	position: fixed;
	left: 50%; 
	top: 50%; 
	margin: -75px 0 0 -75px;
}
.httpOverlay {
	width: 100%; 
	height: 100%; 
	background-color: rgba(204,204,204,0.3); 
	position: fixed;
	top: 0; 
	left: 0; 
	z-index: 1000;
	cursor:wait;
}

/* Würfel Weiterleitungsanimation zu Angular-Seiten - Farbe per CSS-Variable setzen, nimmt automatisch die Schriftfarbe beim Customizing an*/
.icon-style-wrapper.icon-fill--rgb0-106-178{
	fill:var(--accentFontColor) !important;
}


/* Ladeanimation für Touchgeräte */
/* #global-waiting:before {
	font-family: "HISinOneIcons" !important;
	font-size:150px;
	content: "\e906" / "";
	color:var(--accentFontColor);
	position:fixed;
	left: 50%;
    top: 50%;
    margin: -75px 0 0 -75px;	
	width:150px;
	height:150px;
	z-index:9999;	
	animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
} */
/* "aufblinken" des Warte-Vorhanges bei Click */
#global-waiting > div{
	height:100%;
	width:100%;
	background-color: var(--backgroundColor6);
	opacity:0.1;
	display:none;
}
.loadingTopAnimation, #full-screen-waiting {
	animation: fadein 1s;
}
.loadingTopAnimation:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -190vw;
    width: 400vw;
    height: 0.5em;
    background: linear-gradient(90deg, var(--accentFontColor), var(--accentFontColor), rgba(255,255,255,0.5), var(--accentFontColor), var(--accentFontColor), rgba(255,255,255,0.5)  , var(--accentFontColor), var(--accentFontColor), rgba(255,255,255,0.5), var(--accentFontColor), var(--accentFontColor), rgba(255,255,255,0.5)  ); 
    animation: loading 5s infinite;
    animation-timing-function: linear; 
}
/* start and end positioning of the gradients need to be exactly the same on both positions for the infinite effect.*/
@keyframes loading {
    0% {
        left: -190vw;
	}
	100% {
        left: -80vw;
	}
}
/* loading animation is fading in */
@keyframes fadein {
    0% {
    	display: block;
        opacity: 0;
	}
	100% {
        opacity: 1;
	}
}
/* loading animation is fading out */
@keyframes fadeout {
    0% {
        /* opacity: 1; */
	}
	100% {
		display: none;
        opacity: 0;
	}
}

.treeTableSmallAnimation {
	margin-top: 50px;
}