/**
	body {
		background-image: url("/resources/images/logos/wavebgndblue.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		padding: 50px;
		font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
	}
**/
/*-------------------------------------- latest UI Start---------------------------------------*/
.bannerDiv::before {
	
	background: rgba(27,39,59,.60)!important;
	height: 100%;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	content: '';
	display: block;
	/*background-repeat: no-repeat;*/
	/*padding: 50px; */
	/*font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;*/
	
}

.login_btn:hover {
	
	width: 100%;
	background: #2171b7;
	color: #FFF !important;
	border: 2px solid #eee;
	
}

.eyeIcon:hover {
	cursor:pointer!important;
	color: #2f2f2f !important;
}
	
@media (max-width: 768px) {
	.bannerDiv {
		display:none!important;
	}
	.logSection {
		background-image: url(/latestUI/images/banner2.jpg)!important;
		background-repeat: no-repeat!important!important;
		background-size:cover!important;
		position: relative!important;
		box-shadow: 3px 0px 20px -5px rgb(0 0 0 / 61%)!important;
		-webkit-box-shadow: 3px 0px 20px -5px rgb(0 0 0 / 61%)!important;
		-moz-box-shadow: 3px 0px 20px -5px rgba(0,0,0,0.61)!important;
		padding: 10% 10%!important;
	}
	.logSection::before {
		background: rgba(27,39,59,.50)!important;
		/**background: rgba(255,255,255,.80)!important;**/
		height: 98%!important;
		width: 98%!important;
		position: absolute!important;
		top: 50%!important;
		left: 50%!important;
		content: ''!important;
		display: block!important;
		transform: translate(-50%, -50%);
		border-radius:15px;
	}
	.logSection p,.logSection h1, .logSection span, .logSection label {
		color:#fff!important
	}
	.logSection .eyeIcon{
		color:#555!important
	}
}
/*-------------------------------------- latest UI END---------------------------------------*/
a {
  color: #00B7FF;
}


#btnGoTop {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 30px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: red; /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 15px; /* Some padding */
	border-radius: 10px; /* Rounded corners */
}

#btnGoTop:hover {
	background-color: #555; /* Add a dark-grey background on hover */
}


/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 250px; /* Set a default minimum width */
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: #333; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 2px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;} 
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;} 
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}


/* Added by JMD 10/09/2017*/
/* carousel */
#cgCarousel 
{
	padding: 0 10px 30px 10px;
	margin-top: 30px;
}

/* Control buttons  */
#cgCarousel .carousel-control
{
	background: none;
	color: #222;
	font-size: 2.3em;
	text-shadow: none;
	margin-top: 30px;
}
/* Previous button  */
#cgCarousel .carousel-control.left 
{
	left: -12px;
}
/* Next button  */
#cgCarousel .carousel-control.right 
{
	right: -12px !important;
}
/* Changes the position of the indicators */
#cgCarousel .carousel-indicators 
{
	right: 50%;
	top: auto;
	bottom: 0px;
	margin-right: -19px;
}
/* Changes the color of the indicators */
#cgCarousel .carousel-indicators li 
{
	background: #c0c0c0;
}
#cgCarousel .carousel-indicators .active 
{
	background: #333333;
}
#cgCarousel img
{
	width: 250px;
	height: 100px
}

.carousel-content {
	position: absolute;
	bottom: 10%;
	left: 5%;
	z-index: 20;
	color: white;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* End carousel */

/**
  MEDIA QUERIES
*/

/*dataTable selected background */
/*.selected tr td { */
/*	background-color: orange!important; /* Add !important to make sure override datables base styles */
/*} */

table.dataTable tbody tr.selected {
	color: white;
	background-color: #c0c0c0;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	#cgCarousel 
	{
		margin-bottom: 0;
		padding: 0 40px 30px 40px;
	}
    
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) { 
    
	/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
    
	#cgCarousel .carousel-indicators {
		bottom: -20px !important;  
	}
	#cgCarousel .carousel-indicators li {
		display: inline-block;
		margin: 0px 5px;
		width: 15px;
		height: 15px;
	}
	#cgCarousel .carousel-indicators li.active {
		margin: 0px 5px;
		width: 20px;
		height: 20px;
	}
}


.sigwrapper {
		position: relative;
		width: 320px;
		height: 200px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		user-select: none;
}

.signature-pad {
	position: absolute;
	left: 0;
	top: 0;
	width:320px;
	height:200px;
	background-color: white;
}

/* Added by Jammi Dee 03/28/2018 for waiting icon*/
.ajax-loader {
	visibility: hidden;
	background-color: rgba(255,255,255,0.7);
	position: absolute;
	z-index: +100 !important;
	width: 100px;
	height:100px;
}

.ajax-loader img {
	position: fixed;
	top:50%;
	left:50%;
}

/*Added by Jammi Dee 05/15/2018 */
#map {
	height: 400px;
	width: 100%;
	z-index: 100;
}

/*Added by Jammi Dee 09/24/2021 */
#mapsm {
	height: 400px;
	width: 100%;
	z-index: 100;
}

/* Added by Jammi Dee 07/18/2018 for the orgchart module*/
/*#chart-container {
	position: relative;
	display: inline-block;
	top: 10px;
	left: 10px;
	height: calc(100% - 24px);
	width: calc(100% - 24px);
	border: 2px dashed #aaa;
	border-radius: 5px;
	overflow: auto;
	text-align: center;
}
*/



/*Added by Jammi Dee 07/12/2018 - at small devices hide breadcrumbs, lower that ipad*/
@media (max-width: 768px) {
	.content-header > .breadcrumb {
		position: relative;
		margin-top: 5px;
		top: 0;
		right: 0;
		float: none;
		background: #d2d6de;
		padding-left: 10px;
		display:none;
	}


/*
@media (max-width: 414px) {
	.navbar-custom-menu .navbar-nav > li {
		float: left;
		display:none;
	}
	.navbar-custom-menu .navbar-nav {
		margin: 0;
		float: left;
		display:none;
	}
	.navbar-custom-menu .navbar-nav > li > a {
		padding-top: 15px;
		padding-bottom: 15px;
		line-height: 20px;
		display:none;
	}
}
*/

/* Correcting the AdminLTE logo */
@media (max-width: 525px) {
	
	.main-header .logo {
		/**
		position: absolute;
		top: 9px;
		right: 7px;
		text-align: center;
		font-size: 9px;
		padding: 2px 3px;
		line-height: .9;
		**/
		display:none!important;
	}
	
}