/**
*For Mobiles 
*/
@media only screen and (max-width: 640px) {
	.body-panel {
		background: #FFF;
		overflow-y:auto;
	}
	.content-holder {
		background: none repeat scroll 0% 0% white;
		color: rgb(71, 71, 71);
		animation: 800ms ease 10ms normal backwards 1 valo-animate-in-slide-up,
			600ms ease 100ms normal backwards 1 valo-animate-in-fade;
		-moz-animation: 800ms ease 10ms normal backwards 1
			valo-animate-in-slide-up, 600ms ease 100ms normal backwards 1
			valo-animate-in-fade;
		-webkit-animation: 800ms ease 10ms normal backwards 1
			valo-animate-in-slide-up, 600ms ease 100ms normal backwards 1
			valo-animate-in-fade;
		width: 100%;
		height: 240px;
		border: none;
		box-shadow: none;
		border-radius: 0px;
		background: #FFF;
		position: absolute;
		/*Basically, we use left: 50%, then back it out half of it's width with a negative margin.  */
		top: 50%;
		margin-top: -120px;
		padding:0 15px;
	}
	
	.notification-message {
	height: 100%;
	width: -webkit-calc(100% - 170px);
	float: left;
	padding: 0 10px;
	font-size: 14px;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	webkit-align-items: center;
	word-wrap: break-word;
	display: flex;
	font-weight: normal;
	font: 400 14px/1.55 "Open Sans", sans-serif;
}

.input-field-panel {
	width: 75%;
	height: 70px;
	float:left;
}
	
}

/**
*For Tablets and Desktop 
*/
@media only screen and (min-width: 641px) {
	
	.body-panel {
		background: #E9E9E9;
		overflow-y:auto;
	}
	
	.content-holder {
		background: none repeat scroll 0% 0% white;
		color: rgb(71, 71, 71);
		animation: 800ms ease 10ms normal backwards 1 valo-animate-in-slide-up,
			600ms ease 100ms normal backwards 1 valo-animate-in-fade;
		-moz-animation: 800ms ease 10ms normal backwards 1
			valo-animate-in-slide-up, 600ms ease 100ms normal backwards 1
			valo-animate-in-fade;
		-webkit-animation: 800ms ease 10ms normal backwards 1
			valo-animate-in-slide-up, 600ms ease 100ms normal backwards 1
			valo-animate-in-fade;
		width: 500px;
		height: 290px;
		margin: 0 auto;
		padding:15px;
		border: 1px solid rgb(213, 213, 213);
		background: #FFF;
		position: absolute;
		/*Basically, we use left: 50%, then back it out half of it's width with a negative margin.  */
		left: 50%;
		margin-left: -250px;
		top: 50%;
		margin-top:-120px;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		border: 1px solid rgb(213, 213, 213);
		border-radius: 4px;
		outline: 0;
		-webkit-box-shadow: 0 1px 8px #D4D5D5, 0 1px 8px #D4D5D5;
		box-shadow: 0 1px 8px #D4D5D5, 0 1px 8px #D4D5D5;
	}
	
	.notification-message {
	height: 100%;
	width: -webkit-calc(100% - 170px);
	float: left;
	padding: 0 10px;
	font-size: 14px;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	webkit-align-items: center;
	word-wrap: break-word;
	display: flex;
	font-weight: normal;
	font: 400 16px/1.65 "Open Sans", sans-serif;
}

.input-field-panel {
	width: 50%;
	height: 70px;
	float:left;
}
		
}

.body-panel {
	width: 100%;
	height: 100%;
	-moz-animation-name: fadeinBody;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-in;
	-moz-animation-duration: 0.4s;
	-webkit-animation-name: fadeinBody;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-duration: 0.4s;
	animation-name: fadeinBody;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.4s;
	overflow-y:auto;
}

@
-moz-keyframes fadeinBody { 0% {
	opacity: 0;
	background: FFF;
}

100%
{
opacity


:


1;
background


:

 

#E9E9E9


;
}
}
@
-webkit-keyframes fadeinBody { 0% {
	opacity: 0;
	background: #FFF;
}

100%
{
opacity


:


1;
background


:

 

#E9E9E9


;
}
}
@
keyframes fadeinBody { 0% {
	opacity: 0;
	background: #FFF;
}
100%
{
opacity


:


1;
background


:

 

#E9E9E9


;
}
}
.content-details-subholder {
	float: left;
	width: 50%;
}

.support-picture {
	width: 100%;
	height: 150px;
}

.content-header {
	height: 30px;
	width: 80%;
	margin: 10px 0 20px 0;
}

.content-header-label {
	font: 300 22px/1.55 "Open Sans", sans-serif;
	color: rgb(25, 125, 225);
	line-height: 30px;
	height: 30px;
	width: 100%;
	text-align: left;
}

.content-details-holder {
	width: 100%;
	margin: 10px 0;
}

.notification-div {
	height: 80px;
	width: 100%;
	font-size: 16px;
	color: #FFF;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	text-align: left;
	background: #39424E;
	opacity: 1;
	position: absolute;
	top: -85px;
	left: 0px;
	z-index: 100;
	cursor: pointer;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px
		rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.notification-image {
	width: 40px;
	height: 40px;
	float: left;
	margin: 20px 5px 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40px 40px;
	background-position: center;
}


.notification-close {
	width: 70px;
	height: 36px;
	background: none;
	border: none;
	color: #119DC9;
	font-size: 18px;
	margin: 0 10px;
	cursor: pointer;
	float: right;
	margin: 22px 15px 22px 5px;
	padding:5px 45px;
	display:none;
}

.notification-close::-moz-focus-inner {
	border: 0;
}

.notification-close::HOVER{
	
	border:1px solid #119DC9;
	color:#FFF
}

.textbox-label {
	text-align: left;
	font: 400 14px/1.55 "Open Sans", sans-serif;
}

.login-reirection-holder {
	padding: 15px 0px;
}

.note-label {
	font: 400 14px/1.55 "Open Sans", sans-serif;
	color: #878787;
}

.button-action {
	padding:0 10px;
	height: 39px;
	font: 300 18px/1.55 "Open Sans", sans-serif;
}

.button-action::-moz-focus-inner {
	border: 0;
}

/* enable absolute positioning */
.inner-addon {
	position: relative;
}

/* style font-awesome icon */
.inner-addon .fa {
	position: absolute;
	padding: 10px;
	pointer-events: none;
}

/* align font-awesome icon */
.left-addon .fa {
	left: 0px;
}

.right-addon .fa {
	right: 0px;
}

/* add font-awesome icon  */
.left-addon input {
	padding-left: 30px;
}

.right-addon input {
	padding-right: 30px;
}

/*float left*/
.float-left {
	float: left;
}
/*float right*/
.float-right {
	float: right;
}