@font-face {
	font-family: 'OpenSans-Regular';
	src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}

body {
	font-family: 'OpenSans-Regular';
	font-size: 15px;
}
/*Height the logo area and chnage color*/
.brand-link {
	height: 56.5px;
	background-color: #FFFFFF;
}

/* Set height of GridView Rows */
.custom-gridview tbody tr td,
.custom-gridview thead tr th {
	padding: 5px;
	margin: 0;
}

.custom-gridview tbody tr td,
.custom-gridview thead tr th,
.custom-gridview tbody tr {
	line-height: 2;
}

/**Nav bar tab**/
.custom-tabs .nav-link {
	width: 180px;
	text-align: center;
	text-transform: uppercase;
	background-color: #f9f9f9;
	border-bottom: 3px solid gray;
	color: gray;
}

.nav-tabs.custom-tabs .nav-item .nav-link.active,
.nav-tabs.custom-tabs .nav-item .nav-link.active:hover {
	border-top-color: darkslateblue;
	border-bottom: 3px solid darkslateblue;
	background-color:darkslateblue;    
	color:white;  
}

/**Submenu icon resize**/
.nav-icon.custom-icon1 {
	font-size: 12px !important;
}

.nav-icon.custom-icon2 {
	font-size: 15px !important;
}

/**Indent submenu**/
.nav.nav-treeview {
	padding-left: 5px; /* Adjust the indentation as needed */
}

/**Selectize Dropdown**/
.custom-selectize-dropdown .selectize-dropdown-content {
	font-size: 15px; /* Adjust the font size as needed */
}
/* Override font size for selected items in Selectize */
.custom-selectize-dropdown .item {
	font-size: 15px; /* Adjust the font size as needed */
}

/**Gridview hiden column**/
.hiddencol {
	display: none;
}

/*Checkbox size*/
.myCheckbox input {
	width: 25px;
	height: 25px;	
}

.myCheckbox label {	
	margin-left: 10px;
	font-size: 15px;
}

/*form-control*/
.form-control {
	font-size: 16px;
	height: 35px;
}

	.form-control:focus {
		color: #000000;
		background-color: ivory;
	}

	.form-control:disabled,
	.form-control[readonly] {
		background-color: inherit;
	}

.btn {
	height: 35px;
	line-height: 20px;
}

/*Required mark on label*/
.required:after {
	content: " *";
	color: red;
}

/*Jquery Autocomplete in modal*/
ul.ui-autocomplete {
	z-index: 1100;
}

/*Google Map*/
#googleMap {
	width: 100%; /* Span the entire width of the screen */
	height: 500px; /* Set the height to 400 pixels */
}

/*Custom hr*/
.custom-hr {
	border: none; /* Remove default border */
	height: 2px; /* Set height */
	background-color: gray; /* Set color */
	margin: 20px 0; /* Adjust margin as needed */
}

/*Update progress loader*/
.custom-spinner {
	width: 5rem; /* Adjust the width */
	height: 5rem; /* Adjust the height */
}

.spinner-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.1); /* semi-transparent black overlay */
	z-index: 1000; /* ensure it appears above other content */
}

.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* Change link color */
a {
	color:darkblue;
}

	/* Change visited link color */
	a:visited {
		color: darkblue;
	}

	/* Change hover link color */
	a:hover {
		color:black;
	}

	/* Change active link color */
	a:active {
		color: black;
	}

	/*Document File Container*/
	.embed-container {
	width: 100%;
	height: 0;
	padding-top: 56.25%; /* 16:9 aspect ratio */
	position: relative;
}

.embed-container object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*Gallery Image Size*/
.fixed-size-image {
			width: 300px;
			height: 200px;
			object-fit: cover;
		}
/*Page heading color*/
.custom-heading-color{
	color:DarkBlue;
}

/*Panel Border*/
.panel-border {
	border: 1px solid #faebcc;
	border-radius: 4px;
	margin-bottom: 15px;
	padding: 15px;
}

/*Bootstrap Seachable Dropdown*/
.bootstrap-select .dropdown-toggle {
			border: 1px solid #ced4da; /* Border similar to form-control */
			background-color: white; /* Background color of form-control */
			color:#000000; /* Text color of form-control */
			border-radius: .25rem; /* Rounded corners like form-control */
			padding: .375rem .75rem; /* Padding similar to form-control */
			font-size: 16px; /* Font size similar to form-control */
		}

		.bootstrap-select .dropdown-menu {
			border: 1px solid #ced4da; /* Border similar to form-control dropdown */
			background-color:ivory; /* Background color of the dropdown */
		}

		.bootstrap-select .dropdown-menu .selected {
			background-color: #f8f9fa; /* Selected item background color */
		}

		.bootstrap-select .dropdown-menu .dropdown-item {
			color:#000000; /* Text color of dropdown items */
		}

		.bootstrap-select .dropdown-menu .dropdown-item:hover,
		.bootstrap-select .dropdown-menu .dropdown-item.active {
			background-color: #1967d2; /* Hover and active background color */
			color:white;
		}


/*Alert Popup Design*/
/* Custom style for Alertify dialog header */
.alertify .ajs-header {
	background-color:#c24141; /* Red header for alert */
	color: white;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	padding: 10px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

/* Custom style for Alertify dialog body */
.alertify .ajs-body {
	font-family: 'Arial', sans-serif;
	font-size: 16px;
	color: #333; /* Darker text for better readability */
	text-align: center;
	padding: 10px; /* Reduced padding to remove extra space */
	background-color: #ffffff; /* White background */
	border-bottom: 1px solid #ddd;
}

/* General container for custom alert content */
.alertify .custom-alert-content {
	font-family: Arial, sans-serif;
	text-align: center;
	padding: 5px; /* Reduced padding to remove extra space */
	position: relative; /* For icon positioning */
}

/* Style for warning icon */
.alertify .custom-alert-content .warning-icon {
	font-size: 40px;
	color: #f44336; /* Red warning icon */
	margin-bottom: 10px;
}

/* Style for the heading inside the alert */
.alertify .custom-alert-content h4 {
	color: red; /* Red text for validation message */
	font-weight: bold;
	font-size: 18px;
	margin: 0;
	padding: 5px 0; /* Minimal padding */
}

/* Optional: Paragraph or additional text in the alert */
.alertify .custom-alert-content p {
	color: #555; /* Softer text color for secondary messages */
	font-size: 14px;
	margin: 5px 0; /* Minimal margin */
}

/* Custom style for Alertify dialog footer */
.alertify .ajs-footer {
	background-color: #ffffff;
	padding: 10px;
	text-align: center;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* Style for OK button */
.alertify .ajs-footer .ajs-ok {
	background-color: #ddd; /* Gray button */
	color: white; /* Ensure text color is white */
	border: none;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* Hover effect for OK button */
.alertify .ajs-footer .ajs-ok:hover {
	background-color:#FFFFFF; /* Slightly darker gray */
	color: white; /* Keep text color white and vibrant */
	transform: scale(1.05); /* Slight zoom effect */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Elevated shadow */
}

/* Focus effect for OK button */
.alertify .ajs-footer .ajs-ok:focus {
	outline: none; /* Remove default outline */
	box-shadow: 0 0 5px 2px rgba(72, 187, 120, 0.5); /* Green focus ring */
}

/* Style for Cancel button (if used) */
.alertify .ajs-footer .ajs-cancel {
	background-color: #f44336; /* Red button */
	color: white;
	border: none;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 4px;
	margin-left: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover effect for Cancel button */
.alertify .ajs-footer .ajs-cancel:hover {
	background-color: #d32f2f; /* Darker red */
	transform: scale(1.05); /* Slight zoom effect */
}

/* Dialog box shadow and border */
.alertify .ajs-dialog {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	overflow: hidden;
}

/* Add subtle animation for dialog appearance */
.alertify .ajs-modal {
	animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}