/*Common CSS*/
	p.success-msg {
		color: #008000;
		font-weight: bold;
	}

.k-grid-content 
{
	height: 200px;
	overflow-y: auto;
}
/*Common CSS*/

@media all
	and (min-width: 320px) { /* This is used starting from 320px and above resolutions OR we can say Iphone Portrait mode */
		body {
			background: none;
			width: 100%;
		}
		#page {
			overflow: hidden;
			width: 100%;
		}
		header{	/* This is header strip */
			visibility: hidden; /* Naren - hiding header bar */
			padding: 15px 0;
			position: fixed;
			z-index: 4;
			width: 100%;
			opacity: .75;
			background-image: linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);
			background-image: -o-linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);
			background-image: -moz-linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);
			background-image: -webkit-linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);
			background-image: -ms-linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);

			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0.52, rgb(185,175,201)),
				color-stop(0.65, rgb(255,189,255)),
				color-stop(0.83, rgb(174,209,209))
			);
		}

		
		#signInLabel {
				font-weight: 700;
				font-size: 18px;
				padding-left: 15px;

		}
		h1#logo {
			background: url("../../../styles/default/images/insyncLogo2.gif") no-repeat scroll 20% 60% rgba(0, 0, 0, 0);  /* InSync Logo */
			color: rgba(0, 0, 0, 0);
			cursor: pointer;
			float: left;
			margin: 0 auto;
			text-align: center;
			width: 50%;
		}
		#mobile-navigation {    /* 'Menu' button in mobile view */
			background-color: #FFA500; /* background colour for 'Menu' button in mobile view */
			border-radius: 5px 5px 5px 5px;  /* this is used for rounded corners */
			float: right;
			margin-right: 10px;
			padding: 10px 25px;
			cursor: pointer;
		}
		#mobile-navigation:hover, #mobile-navigation:focus{
			box-shadow: 0 0 10px #FFF; /* This colour is used when we mouse over / focus on the mobile 'menu' button */
			color: #FFF;  /* Text colour for the mobile 'menu' button */
			font-weight: bold;
		}
		#mobile-menu li {
			padding: 15px;
			border: 1px solid gray; /* border colour for the Mobile Menu - This will expand when we click on the mobile 'Menu' button */
			cursor: pointer;
		}
		
		#mobile-menu a {
			color: #FFFFFF;  /* Text colour of the Mobile menu */
			font-weight: bold;
		}
		#mobile-menu li:hover, #mobile-menu li:focus {
			background-color: yellowgreen;  /* This color is use when user mouse over / focus on the mobile navigation */
		}
		#mobile-nav {
			background-color: #696969; /* background color for the mobile Menu - This will expand when we click on the mobile 'Menu' button */
			left: 0;
			opacity: 0.9;
			position: absolute;
			top: 60px;
			width: 100%;
			display: none;
		}
		
		UL{
			padding: 0;
			margin: 0;
		}
		UL LI{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		ul#menu li a{
			text-decoration: none;
		}
		
		#image-slider  ul {
			margin: 0;
			padding: 0;
		}
		#image-slider ul li {
			background-color: #D2B48C;
			height: 400px;
			list-style: none outside none;
			position: relative;
		}
		#slides .slides-navigation{
			top: 75%; /* positions of left and right arrows in mobile View */
		}
		.slider-content {
			padding: 10px;
		}
		.slider-content UL li {
			list-style: none;
		}

		#reset-btn{
			visibility:hidden;
		}
		#login-box-outer{
			position: absolute;
			right: 0;
			top: 15%;
			width: 100%;
			z-index: 5;
		}
		#login-box {
			background-color: #FFF;  /* background colour for the login box */
			border-radius: 3px 3px 3px 3px; /* round corners for the login box */
			opacity: 1;  /* It sets the opacity of the login box values ranging from "0 to 1" */
		    box-shadow: 3px 3px 3px #000;
		}
		
		#login-box .login-box-inner{
			padding: 10px;
		}
		.form-row{
			clear: both;
			margin: 10px 0;
			display: block;
			padding-left: 16px;
		}
		.form-row input, .form-row select {
			font-size: 12px;
			padding: 10px 0;
			width: 100%;
		}
		.form-row STRONG{
			display: block;
		}
		.btn { /* this is the button style we used entire this module (login and forgot password button)  */
			background-color: #BC2429;  /* Button background colour */
			border-radius: 4px 4px 4px 4px;
			color: #FFFFFF;  /* Text colour of the button */
			cursor: pointer;
			font-weight: bold;
			padding: 5px 10px;
			text-align: center;
			font-size: 16px;
		}
		.btn:hover, .btn:focus{
			box-shadow: 0 0 10px #FFF;  /* Shadow colour for the button when use mouse over / focus on it */
		}
		.hide{
			display: none;
		}
		.mobile-hide{
			display: none;
		}
		.mobile-show{
			display: block;
		}
		
	/* This CSS will be applied to the multiple sessions popup grid */
	.k-grid td {
	
		border-bottom: 1px solid #e5e5e5;
	}
	
	.clsBtnContainer{
		clear: both;
		margin-bottom: 20px;
		margin-top: 20px;	
		text-align: center;
	}
		
	.clsBtnContainer input[type=button] {
		padding: 10px 20px;
		font-weight: bold;
		width: 100px;
	}
	
	.k-dropdown {
		font-size: 16px;
		margin: 20px 0;
	}
	
	#org-error-msg {
		color: red;
		font-size: 14px;
		text-align: center;
	}
	
	#organization-list {
		text-align: center;
		font-size: 14px;
	}
	
	#more-org-cancel {
		margin-left: 15px;
	}
	
	#more-org-inner {
		padding-bottom: 30px;
	}
	
	#organization_listbox
	{
		text-align: left;
	}
}

@media all and (min-width: 480px) {

	/* This CSS will apply starting from 480px resolutions OR we can treat it as Iphone landscape mode */

	#login-box-outer{
		top: 25%;
	}
}

@media all and (min-width: 600px) {  
	
		/* This CSS will apply starting from 600px resolutions OR we can treat as 'Ipad Mini' Portrait mode */
		
	#login-box-outer{
		top: 15%;  /* Position of the login box from TOP */
	}
	#login-box-outer{
		width: 300px;  /* Width of the login box */
	}
	h1#logo {
		width: 20%;  /* Width of the LOGO */
	}
	.form-row input, .form-row select {
		width: 250px;  /* width of the text fields (user name and password) in the login Form */
		float: right;
		margin-bottom: 20px;
		margin-right: 10px;
	    height: 4px;
	    border-radius: 3px;
	    padding:0px !important;
		height:30px !important;

	}
	#slider-content-box {  /* Text content box on the Slider */
		background-color: #696969;  /* background colour of text box */
		border-radius: 5px 5px 5px 5px;  /*  rounded corners of text content box*/
		color: #FFFFFF;  /* Text colour of text content box */
		font-weight: bold;
		height: 150px;  /* Height of the box */
		left: 10%;  /* position of the box from LEFT */
		opacity: 0.65;  /* It sets the opacity for the box and range starts from "0 to 1" */
		position: absolute;
		top: 65%;  /* position of the box from TOP */
		width: 80%;	/* Width of the box */
		z-index: 4;
	}
	#slides .slides-navigation{
		top: 56%; /* Position of LEFT and RIGHT arrows of the slide from TOP */
	}
	
/*This CSS will apply to portrait mode of Surface tablet */

	h1 {
		font-size: 18px !important;
	}
	
	body {
		font-size: 16px !important;
	}
	
	a {
		font-size: 12px !important;
	}
	
	.form-row input, .form-row select {
		font-size: 18px;
	}
	
	.btn.form-row
	{
		margin: 15px 0;
	}
	
}

@media all and (min-width: 768px) {

	/* This CSS will apply starting from 768px resolutions OR we can treat as Ipad Portrait mode */

	nav {
		float: left;
		width: 75%;
	}  
	ul#menu li {
		float: left;
		list-style: none outside none;
		width: 15%;
	}
	
	#login-box-outer { /* Naren - Position box in the middle */
		right: 40%; /* Position of the login box from RIGHT side of the screen */
		top: 30%;  /* Position of the login box from TOP of the screen */
		display: block !important;
	}
	#mobile-nav{
		display: none !important;
	}
	.mobile-hide{
		display: block;
	}
	.mobile-show{
		display: none;
	}
	
/*This CSS will apply to portrait mode of Surface tablet */

	h1 {
		font-size: 18px !important;
	}
	
	body {
		font-size: 16px !important;
	}
	
	a {
		font-size: 12px !important;
	}
	
	.form-row input, .form-row select {
		font-size: 18px;
	}
	
	.btn.form-row
	{
		margin: 15px 0;
	}
	
}

@media all and (min-width: 800px) {

	/* This CSS will apply starting from 768px resolutions OR we can treat as Ipad Mini Landscape mode */

}

@media all and (min-width: 960px) {
	#login-box-outer{ /* Naren - Changed box position */
		right: 40%;
		top: 30%;
	}
	#slider-content-box {
		height: 280px;
		left: 10%;
		top: 30%;
		width: 380px;
	}
}

@media all and (min-width: 1170px) {}
@media all and (max-width: 320px) {

	/* This is used starting from 320px and below resolutions */

	body {
			background: none;
			width: 100%;
		}
		#page {
			overflow: hidden;
			width: 100%;
		}
		header{	/* This is header strip */
			padding: 15px 0;
			position: fixed;
			z-index: 4;
			width: 100%;
			visibility: hidden; /* Naren - hiding header bar */
			opacity: .75;
			background-image: linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);
			background-image: -o-linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);
			background-image: -moz-linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);
			background-image: -webkit-linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);
			background-image: -ms-linear-gradient(bottom, rgb(185,175,201) 52%, rgb(255,189,255) 65%, rgb(174,209,209) 83%);

			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0.52, rgb(185,175,201)),
				color-stop(0.65, rgb(255,189,255)),
				color-stop(0.83, rgb(174,209,209))
			);
		}
		
		h1#logo {
			background: url("../../../styles/default/images/insyncLogo2.gif") no-repeat scroll 20% 60% rgba(0, 0, 0, 0);  /* InSync Logo */
			color: rgba(0, 0, 0, 0);
			cursor: pointer;
			float: left;
			margin: 0 auto;
			text-align: center;
			width: 50%;
		}
		#mobile-navigation {    /* 'Menu' button in mobile view */
			background-color: #FFA500; /* background colour for 'Menu' button in mobile view */
			border-radius: 5px 5px 5px 5px;  /* this is used for rounded corners */
			float: right;
			margin-right: 10px;
			padding: 10px 25px;
			cursor: pointer;
		}
		#mobile-navigation:hover, #mobile-navigation:focus{
			box-shadow: 0 0 10px #FFF; /* This colour is used when we mouse over / focus on the mobile 'menu' button */
			color: #FFF;  /* Text colour for the mobile 'menu' button */
			font-weight: bold;
		}
		#mobile-menu li {
			padding: 15px;
			border: 1px solid gray; /* border colour for the Mobile Menu - This will expand when we click on the mobile 'Menu' button */
			cursor: pointer;
		}
		
		#mobile-menu a {
			color: #FFFFFF;  /* Text colour of the Mobile menu */
			font-weight: bold;
		}
		#mobile-menu li:hover, #mobile-menu li:focus {
			background-color: yellowgreen;  /* This color is use when user mouse over / focus on the mobile navigation */
		}
		#mobile-nav {
			background-color: #696969; /* background color for the mobile Menu - This will expand when we click on the mobile 'Menu' button */
			left: 0;
			opacity: 0.9;
			position: absolute;
			top: 60px;
			width: 100%;
			display: none;
		}
		
		UL{
			padding: 0;
			margin: 0;
		}
		UL LI{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		ul#menu li a{
			text-decoration: none;
		}
		
		#image-slider  ul {
			margin: 0;
			padding: 0;
		}
		#image-slider ul li {
			background-color: #D2B48C;
			height: 400px;
			list-style: none outside none;
			position: relative;
		}
		#slides .slides-navigation{
			top: 75%; /* positions of left and right arrows in mobile View */
		}
		.slider-content {
			padding: 10px;
		}
		.slider-content UL li {
			list-style: none;
		}
		#login-box-outer{
			position: absolute;
			right: 0;
			top: 15%;
			width: 100%;
			z-index: 5;
		}
		#login-box {
			background-color: #ADD8E6;  /* background colour for the login box */
			border-radius: 5px 5px 5px 5px; /* round corners for the login box */
			opacity: 0.85;  /* It sets the opacity of the login box values ranging from "0 to 1" */
		}
		
		#login-box .login-box-inner{
			padding: 10px;
		}
		.form-row{
			clear: both;
			margin: 10px 0;
			display: block;
		}
		.form-row input, .form-row select {
			font-size: 12px;
			padding: 10px 0;
			width: 100%;
		}
		.form-row STRONG{
			display: block;
		}
		.btn { /* this is the button style we used entire this module (login and forgot password button)  */
			background-color: #FFA500;  /* Button background colour */
			border-radius: 5px 5px 5px 5px;
			color: #FFFFFF;  /* Text colour of the button */
			cursor: pointer;
			font-weight: bold;
			padding: 5px 10px;
			text-align: center;
		}
		.btn:hover, .btn:focus{
			box-shadow: 0 0 10px #FFF;  /* Shadow colour for the button when use mouse over / focus on it */
		}
		.hide{
			display: none;
		}
		.mobile-hide{
			display: none;
		}
		.mobile-show{
			display: block;
		}

}





@media all and (min-width: 768px) {

	h1 {
		font-size: 35px !important;
	}
	
	body {
		font-size: 48px !important;
	}
	
	a {
		font-size: 32px !important;
	}
	
	.form-row input, .form-row select {
		font-size: 42px;
	}
	
	.btn.form-row
	{
		margin: 20px 0;
	}
}




@media all and (min-width: 1280px) {
	h1 {
		font-size: 35px !important;
	}
	body {
		font-size: 32px !important;
	}
	a {
		font-size: 16px !important;
	}
	.form-row input, .form-row select {
		font-size: 25px;
	}
	.btn.form-row {
		margin: 20px 0;
	}
	
	.k-widget.k-window
	{
		font-size: 18px;
	}
}


	.clsDTh1 {
		font-size: 13px !important;
	}
	.clsbody {
		font-size: 13px !important;
	}
	.clsa {
		font-size: 13px !important;
	}
	.clsinput, .clsselect {
		font-size: 13px !important;
	}
	.btn.clsform-row {
		clear: both;
		margin: -12px 0 !important;
		width: 233px;
	}
	
	.k-widget.k-window
	{
		font-size: 13px !important;
	}




.clsTabletButton{
	width: 210px !important;
	height: 70px;
	text-align: center;
	background-image: none;
	color: #000;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	cursor: pointer;
	margin-right: 20px;
	margin-top: 40px;
}

#menu-info-msg
{
	text-align: left;
	color: #000;
	font-size: 20px;
	margin-left: 45px;
}

.clsTabletButton:disabled,.clsTabletWideButton:disabled,.clsTabletExtraWideButton:disabled{
	color: #CCC;
	cursor: default;
}

#pwd-reset-curlbl > span {
	position: relative;
    top: 20px;
}

#pwd-reset-newlbl > span {
	position: relative;
    top: 20px;
}

#pwd-reset-confirmlbl > span {
	position: relative;
    top: 20px;
}

#pwd-reminder-curlbl > span {
	position: relative;
    top: 20px;
}

#pwd-reminder-newlbl > span {
	position: relative;
    top: 20px;
}

#pwd-reminder-confirmlbl > span {
	position: relative;
    top: 20px;
}
.errMsgMargin {
	margin-bottom: 30px;
}

.tiLoginOrg {
	height:15px; 
	margin-left:-20px; 
	margin-bottom:30px !important; 
	margin-top: -10px; 
	font-size: 20px !important;
	width: 200px !important;
}

.orgLblPadding {
	padding-right: 50px;
}