﻿/*This style maily for styling of pages outside the application login*/

body {
	-webkit-font-smoothing: antialiased!important;
	text-rendering: optimizeLegibility!important;
	font-family: Roboto, sans-serif!important;
	-ms-word-wrap: break-word!important;
	word-wrap: break-word!important;
	
	overflow:  hidden;
	/*word-wrap: break-word !important;*/
	text-align: center;
	-moz-animation: fadein 2s; /* Firefox */
	-webkit-animation: fadein 2s; /* Safari and Chrome */
	-o-animation: fadein 2s;
	animation: fadein 2s; /* Opera */
		}
@media screen and (max-device-width: 790px) {/*mobile*/
											 .loginBody{
												 /*background-image: url('../images/loginBG.png');*/
											 }
#sessionRedirect{
		margin-top: 20vh;
}
		#HomeLoader{
			   margin-top: 41vh;
		}
		#More {
			display: none;
		}
		body{
			background-color:white;
		}
		.loginCard{
			width: 100%;
			padding: 0.5em;
			min-height: 530px;
			margin-top: 50px;
			box-shadow: none !important;
	}
}
@media only screen and (min-width: 790px) {
	  .loginBody{
		background-image: url('../images/loginBG.png');
}
	#sessionRedirect{
		margin-top: 5vh;
}
	#HomeLoader{
			   margin-top: 33vh;
		}
	.loginCard{
		width: 100%;
		padding:1.5em;
		cursor: move;
		background-color: white;
		position: relative;
		min-height: 530px;
		margin-top: 60px;
	}
	
}
.footerLinkStyle{
	text-decoration:none;
	margin-left: 20px;
	color: #9E9E9E;
	font-weight:400;
}

 .textpart {
	margin-top: 100px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	background-repeat: no-repeat;
}
.sesseionOutIcon{
	font-size: 70px !important;
	color: #607D8B;
	margin: 30px;
		
}
.footerAlign{
	
	/*text-align:right !important;*/
	/*margin-right: 100px !important;*/
}
  #Sessionout {
		text-align: center;
		text-align: -webkit-center;
		text-align: -moz-center;
		background-repeat: no-repeat;
		vertical-align: middle;
	}
	
.footerLnk{
	padding:5px;
}

  .delay-1 {
	-moz-animation-delay: .25s;
	-o-animation-delay: .25s;
	-webkit-animation-delay: .25s;
	animation-delay: .25s;
}
.delay-2 {
	-moz-animation-delay: .5s;
	-o-animation-delay: .5s;
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
}
.delay-3 {
	-moz-animation-delay: .75s;
	-o-animation-delay: .75s;
	-webkit-animation-delay: .75s;
	animation-delay: .75s;
}
.delay-4 {
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}


		.reqMsg {
			margin-left: 120px;
		}
		.sidenav,
.sidenavLeft,
.sidenavRight {
	height: 100%;
	position: fixed;
	z-index: 99999;
	overflow-x: hidden;
	top: 0
}
.sidenav,
.sidenavRight {
	right: -520px;
	-moz-transition: all .5s ease-in;
	-o-transition: all .5s ease-in;
	-webkit-transition: all .5s ease-in;
	transition: all .5s ease-in
}
.sidenav,
.sidenavLeft {
	width: 80%;
	left: -400px;
	-moz-transition: all .5s ease-in;
	-o-transition: all .5s ease-in;
	-webkit-transition: all .5s ease-in;
	transition: all .5s ease-in
}

 .sidenavRight {
		width: 450px
	}
	.helpbtnpri {
		margin-bottom: 2px!important
	}
	.knsrchBox {
		margin-left: 35%!important
	}
		.style1 {
			width: 100%;
		}

		.leftstyle {
			text-align: right;
			color: Black;
			font-weight: bolder;
		}

		.Rightstyle {
			color: Red;
			font-weight: bolder;
		}

		#Lbl_waringmsg {
			height: 31px;
			width: 41px;
		}

		.shadow {
			box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
			-moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
			-o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
			-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
			transition: all 0.3s cubic-bezier(.25,.8,.25,1);
		}

			.shadow:hover {
				box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
			}
.warningarea{
	display:none;
}
.pbd{
	display:none;
}
#InitLdr{
	display:none;
}
a {
	text-decoration: none;
}
.showbox {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5%;
}

.loader {
  position: relative;
  margin: 0 auto;
  width: 50px;
}

.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular {
  -moz-animation: rotate 2s linear infinite;
  -o-animation: rotate 2s linear infinite;
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -moz-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  -o-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@-moz-keyframes rotate {
  100% {
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  100% {
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
  }
  50% {
	stroke-dasharray: 89, 200;
	stroke-dashoffset: -35px;
  }
  100% {
	stroke-dasharray: 89, 200;
	stroke-dashoffset: -124px;
  }
}

@keyframes color {
  100%,
  0% {
	stroke: #d62d20;
  }
  40% {
	stroke: #0057e7;
  }
  66% {
	stroke: #008744;
  }
  80%,
  90% {
	stroke: #ffa700;
  }
}


@keyframes placeHolderShimmer {
  0% {
	background-position: -468px 0
  }
  100% {
	background-position: 468px 0
  }
}
.animated_bg_short_loder {
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-moz-animation-name: placeHolderShimmer;
	-o-animation-name: placeHolderShimmer;
	-webkit-animation-name: placeHolderShimmer;
	animation-name: placeHolderShimmer;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	background: #f6f7f8;
	background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
	background-size: 800px 104px;
	position: relative;
}
.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.rectangle {
  height: 30px;
  width: 350px;
  margin: auto;
}


/*fb sm-loader*/
.timeline-item {
  padding: 25px;
  margin: 0 auto;
}

@keyframes placeHolderShimmer {
  0% {
	background-position: -468px 0
  }
  100% {
	background-position: 468px 0
  }
}

.animated-background {
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-moz-animation-name: placeHolderShimmer;
	-o-animation-name: placeHolderShimmer;
	-webkit-animation-name: placeHolderShimmer;
	animation-name: placeHolderShimmer;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	background: #f6f7f8;
	background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
	background-size: 800px 104px;
	height: 40px;
	position: relative;
}

.background-masker {
  background: #fff;
  position: absolute;
}


/* Every thing below this is just positioning */

.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
  top: 0;
  left: 40px;
  right: 0;
  height: 10px;
}

.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
  top: 10px;
  left: 40px;
  height: 8px;
  width: 10px;
}

.background-masker.header-bottom {
  top: 18px;
  height: 6px;
}

.background-masker.subheader-left,
.background-masker.subheader-right {
  top: 24px;
  height: 6px;
}

.background-masker.header-right,
.background-masker.subheader-right {
  width: auto;
  left: 300px;
  right: 0;
}

.background-masker.subheader-right {
  left: 230px;
}

.background-masker.subheader-bottom {
  top: 30px;
  height: 10px;
}

.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
  top: 40px;
  left: 0;
  right: 0;
  height: 6px;
}

.background-masker.content-top {
  height: 20px;
}

.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end {
  width: auto;
  left: 380px;
  right: 0;
  top: 60px;
  height: 8px;
}

.background-masker.content-second-line {
  top: 68px;
}

.background-masker.content-second-end {
  left: 420px;
  top: 74px;
}

.background-masker.content-third-line {
  top: 82px;
}

.background-masker.content-third-end {
  left: 300px;
  top: 88px;
}

