﻿.notification-overlay {
    position: absolute; 
    top:0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(100,100,100,.3);
    z-index:10000;
}
.popupWindowContentDiv {
    width: auto;
    height:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    background-color: white;
    padding: 16px 32px 16px 32px;
    border-radius: 6px;
    box-shadow: 0px 0px 20px gray;
    -webkit-transition: margin-left .2s;
    -moz-transition: margin-left .2s;
    -ms-transition: margin-left .2s;
    -o-transition: margin-left .2s;
     transition: margin-left .2s;
    min-width: 50%;
}
.popupWindowContentDiv.loading {
    width: 200px;
    height: 90px;
    position: absolute;
    top: 45%;
    left: 38%;
    z-index: 10000;
    background-color: white;
    padding: 0px;
    min-width: inherit;
    border-radius: 4px;
}
#closeDialogDiv {
    width:16px;
    height:16px;
    position: absolute;
    top:6px; 
    right:8px; 
    color:#ccc; 
    cursor: pointer;
}

.element-notification-error-tooltip {
    background: white;
    border: 2px solid red;
    box-shadow: 0 0 7px red;
    z-index: 100020;
}
.element-notification-error {
    border-color: red !important;
    border-width: 2px !important;
    border-style: solid !important;
}
.element-notification-error-icon {
    font-size:9pt;
    color: red;
    float: left;
    position: relative;
    top: 0px;
    right: -5px;
}

.element-notification-info-tooltip {
    background: white;
    border: 2px solid lightskyblue;
    box-shadow: 0 0 7px lightskyblue;
    z-index: 100020;
}
.element-notification-info {
    border-color: lightskyblue !important;
    border-width: 2px !important;
    border-style: solid !important;
}
.element-notification-info-icon {
    font-size:13pt;
    color: lightskyblue;
    float: left;
    position: relative;
    top: 3px;
    right: -5px;
}

.loader{
	/*position: fixed;*/
	z-index: 10000;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 50%;
	margin: 0 auto;
	width: 60px;
	height: 60px;
    list-style: none;
    margin: 0px !important;
}
h1.ajax-loading-animation{
    font-size:20pt;
    margin: 0px;
}

@-webkit-keyframes loadbars {
	0%{
		height: 10px;
		margin-top: 25px;
	}
	50%{
		height:50px;
		margin-top: 0px;
	}
	100%{
		height: 10px;
		margin-top: 25px;
	}
}
@-moz-keyframes loadbars {
    0%{
		height: 10px;
		margin-top: 25px;
	}
	50%{
		height:50px;
		margin-top: 0px;
	}
	100%{
		height: 10px;
		margin-top: 25px;
	}
}
@-o-keyframes loadbars {
    0%{
		height: 10px;
		margin-top: 25px;
	}
	50%{
		height:50px;
		margin-top: 0px;
	}
	100%{
		height: 10px;
		margin-top: 25px;
	}
}
@keyframes loadbars {
    0%{
		height: 10px;
		margin-top: 25px;
	}
	50%{
		height:50px;
		margin-top: 0px;
	}
	100%{
		height: 10px;
		margin-top: 25px;
	}
}

li.loading-item{
	background-color: gray;
	width: 10px;
	height: 10px;
	float: right;
	margin-right: 5px;
    /*box-shadow: 0px 100px 20px rgba(0,0,0,0.2);*/
}
li.loading-item:first-child{
	-webkit-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
    -moz-animation: loadbars 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite 0s;
    -ms-animation: loadbars 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite 0s;
    animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
}
li.loading-item:nth-child(2){
	-webkit-animation: loadbars 0.6s ease-in-out infinite -0.2s;
    -moz-animation: loadbars 0.6s ease-in-out infinite -0.2s;
    -ms-animation: loadbars 0.6s ease-in-out infinite -0.2s;
    animation: loadbars 0.6s ease-in-out infinite -0.2s;
}
li.loading-item:nth-child(3){
    -webkit-animation: loadbars 0.6s ease-in-out infinite -0.4s;
    -moz-animation: loadbars 0.6s ease-in-out infinite -0.4s;
    -ms-animation: loadbars 0.6s ease-in-out infinite -0.4s;
    animation: loadbars 0.6s ease-in-out infinite -0.4s;
}


.spinner {
  margin: 0px auto;
  margin-top: 10px;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.spinner div {
    margin: 0 3px 0 0;
}
.loading-text-cont{
    text-align:center;
    vertical-align:middle;
    padding-top:25px;
    
}
h3.loading-text {
    margin-top: 0px;
    font-size: 10px !important;
}
.loading-text {
    margin-top: 0px;
    font-size: 20px !important;
}
@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}