html {
	position: relative;
	min-height: 100%;
}

body {
	/* Margin bottom by footer height */
	margin-bottom: 80px;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	color: #444;
	line-height: 22px;
	font-size: 14px;
}
@media only screen and (min-width: 768px) {
	.bodyContainer {
		padding-top: 9.5em;
	}
}
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: 80px;
}

a, a:hover {
	text-decoration: none;
}

a { cursor: pointer;}

a:focus {outline:0; text-decoration: none;}
button:focus {outline:0;}

.noshow {
	display: none;
}

label.error {
	display: block;
	color: #EA3C53;
	font-weight: normal;
	font-size: 12px
}

span.error {
	color: #EA3C53;
	font-weight: normal;
	padding-left: 10px;
}

input.error {
	border: 1px solid #EA3C53
}

.hide {
	visibility: hidden !important; /*align with Bootstrap5 and jquery add remove classname hide*/
}

.hidden {
	display: none !important; /*align with hidden class when use with jquery*/
}

.min-height-50px {
    min-height: 50px;
}

.err-border {border: 1px solid #EA3C53}

.italic {font-style: italic}
.bold {font-weight: bold}
.underline {text-decoration: underline;}
.red {color: #ff3333}
.gray {color: #aaa}
.green {color: #74C365;}
.yellow {color: #ff3;}
.orange {color: #FF8C00;}

.small, small {font-size: 12px; text-transform: lowercase;}
.font-12 {font-size: 12px}
.font-16 {font-size: 16px}
.font-20 {font-size: 20px}
.font-25 {font-size: 25px}
.font-30 {font-size: 30px}
.font-35 {font-size: 35px}

.padding-5 {padding: 0 5px}
.padding-10 {padding: 0 10px}
.padding-15 {padding: 0 15px}
.padding-20 {padding: 0 20px}

.pl-10 {padding-left: 10px}
.pl-20 {padding-left: 20px}

.mt-0 { margin-top: 0;}
.mt-10 { margin-top: 10px;}
.mt-15 { margin-top: 15px;}
.mt-20 { margin-top: 20px;}
.mt-30 { margin-top: 30px;}
.mt-40 { margin-top: 40px;}
.mt-50 { margin-top: 50px;}
.mt-60 { margin-top: 60px;}
.mt-70 { margin-top: 70px;}
.mt-80 { margin-top: 80px;}
.mt-90 { margin-top: 90px;}
.mt-100 { margin-top: 100px;}

.mb-5 { margin-bottom: 5px !important;}
.mb-10 { margin-bottom: 10px !important;}
.mb-20 { margin-bottom: 20px !important;}
.mb-30 { margin-bottom: 30px !important;}
.mb-40 { margin-bottom: 40px !important;}
.mb-50 { margin-bottom: 50px !important;}
.mb-60 { margin-bottom: 60px !important;}
.mb-70 { margin-bottom: 70px !important;}
.mb-80 { margin-bottom: 80px !important;}
.mb-90 { margin-bottom: 90px !important;}
.mb-100 { margin-bottom: 100px !important;}

.ml-10 { margin-left: 10px;}
.ml-20 { margin-left: 20px;}
.ml-30 { margin-left: 30px;}
.ml-40 { margin-left: 40px;}
.ml-50 { margin-left: 50px;}
.ml-60 { margin-left: 60px;}
.ml-70 { margin-left: 70px;}
.ml-80 { margin-left: 80px;}
.ml-90 { margin-left: 90px;}
.ml-100 { margin-left: 100px;}

.mr-10 { margin-right: 10px;}
.mr-20 { margin-right: 20px;}
.mr-30 { margin-right: 30px;}
.mr-40 { margin-right: 40px;}
.mr-50 { margin-right: 50px;}
.mr-60 { margin-right: 60px;}
.mr-70 { margin-right: 70px;}
.mr-80 { margin-right: 80px;}
.mr-90 { margin-right: 90px;}
.mr-100 { margin-right: 100px;}

.marginRow {margin-top: 10px; margin-bottom: 10px;}

.dataTable {
	font-size: 13px
}

.nav-tabs > li > a,
.nav-pills > li > a,
.nav-tabs.nav-justified > li > a {
	border-radius: 0;
}

/*Tabs v1
------------------------------------*/
.tab-v1 .nav-tabs {
	border: none;
	background: none;
	border-bottom: solid 2px #72c02c;
}

.tab-v1 .nav-tabs a {
	font-size: 14px;
	padding: 5px 15px;
}

.tab-v1 .nav-tabs > .active > a,
.tab-v1 .nav-tabs > .active > a:hover,
.tab-v1 .nav-tabs > .active > a:focus {
	color: #fff;
	border: none;
	background: #72c02c;
}

.tab-v1 .nav-tabs > li > a {
	border: none;
}
.tab-v1 .nav-tabs > li > a:hover {
	color: #fff;
	background: #72c02c;
}

.tab-v1 .tab-content {
	padding: 10px 0;
}

.tab-v1 .tab-content img {
	margin-top: 4px;
	margin-bottom: 15px;
}

.tab-v1 .tab-content img.img-tab-space {
	margin-top: 7px;
}

/* overwrite bootstrap css */
.btn-primary {
	background: #3498db !important;
	border: 0 !important;
	color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.open .dropdown-toggle.btn-primary {
	background: #2980b9 !important;
}

.custom-btn {
    font-size: 0.7rem; 
    padding: 1px 5px; 
    border: 1px solid gray !important; 
    color: gray !important; /* Icon color */
    line-height: 1; /* Ensure proper spacing */
    /* width: 32px;  */
	min-width: 32px;
    height: 32px; 
    display: inline-flex;
    align-items: center;
    justify-content: center;	
}

.custom-btn:hover {
    background-color: lightgray !important; /* Light gray background on hover */
    border-color: darkgray !important; /* Darker border on hover */
}

.custom-btn span {
    font-size: 0.9rem; 
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3); /* Subtle bold effect */
}

th {
	background-color: #e4eefb;
	border-bottom: 1px #e4eefb solid !important;
}

hr {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #eee;
}

legend {
	border-bottom: 1px solid #ccc;
}

h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
	letter-spacing: 3px;
}

h2 {
	letter-spacing: 2px;
}

h3, h4 {
	letter-spacing: 1px;
}

.dataTable input {
  display: block;
  width: 100%;
  border: 1px solid #ddd;
}

/* Apply a grey-blue background for table headers */
.dataTable thead th {
    background-color: #d5e5f7 !important;  /* table header color */
    color: #495057;  /* Darker text for contrast */
    border-bottom: 2px solid #dee2e6;
	position: relative;
    padding-right: 24px; /* Space for the icon */
}

/* Sorting icons in headers */
.dataTable thead th.sorting:after,
.dataTable thead th.sorting_asc:after,
.dataTable thead th.sorting_desc:after {
    position: absolute;
    right: 8px;
    font-family: "bootstrap-icons"; /* Ensure Bootstrap Icons are used */
    font-size: 0.8rem;
    color: #495057;  /* Color for the sorting arrows */
}

/* Sorting icon when no sorting is applied */
.dataTable thead th.sorting:after {
    content: "\f127"; /* Placeholder for the arrow (Up or Down) */
}

/* Sorting Ascending */
.dataTable thead th.sorting_asc:after {
    content: "\f148"; /* bi-arrow-up */
}

/* Sorting Descending */
.dataTable thead th.sorting_desc:after {
    content: "\f128"; /* bi-arrow-down */
}

/* Align the dataTables_info to the right */
.dataTables_info {
    text-align: right;
    float: right;  /* This will push it to the right side */
}

/* Ensure pagination is displayed in a single line and aligned to the right */
.dataTables_paginate .pagination {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
}

/* Style for pagination buttons to make them look like a single connected box */
.dataTables_paginate .pagination .paginate_button {
    display: inline-block;
	padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #dee2e6; /* Border like Bootstrap 3 */
    background-color: #fff;
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0; /* Removes rounded corners */
    margin-left: -1px; /* Connects button borders */
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* General button styles to ensure consistency */
.dataTables_paginate .pagination .paginate_button a {
    display: block;              /* Make <a> tag block-level so it fills the entire button */
    text-align: center;          /* Center the text (page number) */
    color: inherit;              /* Inherit text color from button */
    text-decoration: none;       /* Remove default text underline */
    border: 0;                   /* Remove border from <a> tag */
    background-color: transparent; /* Ensure no extra background on <a> */
}

/* First button to have rounded-left corner */
.dataTables_paginate .pagination .paginate_button:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-left: 0; /* Removes extra spacing */
}

/* Last button to have rounded-right corner */
.dataTables_paginate .pagination .paginate_button:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Active button styling */
.dataTables_paginate .pagination .paginate_button.active {
    background-color: #4287d1; /* Background color of the button */
    border-color: #4287d1; /* Border color */
}

.dataTables_paginate .pagination .paginate_button.active a {
    color: white; /* White color for the page number text */
	display: block; /* Make the anchor take up the full space of the li */
    background-color: #4287d1; /* Matching the button background */
    border-radius: 0; /* Ensure no border-radius if necessary */
}

/* Hover effect on normal buttons */
.dataTables_paginate .pagination .paginate_button:hover:not(.disabled):not(.active) {
    background-color: #39689b;
    color: white !important;
    border-color: #39689b;
}

/* Hover effect on disabled buttons */
.dataTables_paginate .pagination .paginate_button.disabled:hover {
	opacity: 0.5;
	background-color: #f8f9fa;
    color: #6c757d;
}

/* Disabled button styling */
.dataTables_paginate .pagination .paginate_button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #f8f9fa;
    color: #6c757d;
}

/* Button for Previous and Next */
.dataTables_paginate .pagination .paginate_button.previous a,
.dataTables_paginate .pagination .paginate_button.next a {
    padding: 0;
    font-size: 14px;
    font-weight: bold;
}

/* Adjust the space between the day numbers */
.datepicker tbody td {
    padding: 6px 6px; 
    text-align: center; 
}

/* Reduce the size of the day numbers */
.datepicker tbody td .day {
    font-size: 10px; 
}

/* Fix the arrow positioning for date picker */
.datepicker .datepicker-dropdown {
    position: absolute;
    top: 100% !important; /* Position it directly below the input */
    left: 0;
    right: 0;
    z-index: 9999; /* Ensure it's on top of other content */
    margin-top: 4px; /* Optional: add a small margin to separate it from the input */
}

/* Adjust the arrow inside the date picker dropdown */
.datepicker .datepicker-dropdown .datepicker-arrow {
    position: absolute;
    top: 0px !important; /* Adjust based on the size of date picker */
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #ccc; /* Adjust color to match your theme */
}

/* If using an icon for the date picker button, you may want to adjust it as well */
.datepicker .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-control {
	box-shadow: none;
	border-radius: 0;
}

.form-control:focus {
	border-color: #bbb;
	box-shadow: 0 0 2px #c9c9c9;
}

.input-group-addon {
	border-radius: 0;
}

.btn {
	box-shadow: none;
	border-radius: 0;
}
.label {
	border-radius: 0;
}
.alert {
	border-radius: 0;
}

.thumbnail {
	border-radius: 0;
}
.pagination>li:first-child>a {
	border-radius: 0;
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
	border-radius: 0;
}
.pagination a:hover {
	color: #fff !important
}

.panel,
.panel-heading,
.panel-group .panel {
	border-radius: 0;
}
.panel-heading {
	color: #fff;
	padding: 5px 15px;
}

.panel .table {
	margin-bottom: 0;
}

.panel-blue {
	border-color: #3498db;
}

.panel-blue > .panel-heading {
	background: #3498db;
}

/*Panel Red*/
.panel-red {
	border-color: #e74c3c;
}

.panel-red > .panel-heading {
	background: #e74c3c;
}

/*Panel Green*/
.panel-green {
	border-color: #2ecc71;
}

.panel-green > .panel-heading {
	background: #2ecc71;
}

.panel-sea {
	border-color: #1abc9c;
}

.panel-sea > .panel-heading {
	background: #1abc9c;
}

.panel-orange {
	border-color: #e67e22;
}

.panel-orange > .panel-heading {
	background: #e67e22;
}

.panel-yellow {
	border-color: #f1c40f;
}

.panel-yellow > .panel-heading {
	background: #f1c40f;
}

/*Panel Grey*/
.panel-grey {
	border-color: #95a5a6;
}

.panel-grey > .panel-heading {
	background: #95a5a6;
}

.panel-dark {
	border-color: #555;
}

.panel-dark > .panel-heading {
	background: #555;
}

.panel-purple {
	border-color: #9b6bcc;
}

.panel-purple > .panel-heading {
	background: #9b6bcc;
}

.panel-aqua {
	border-color: #27d7e7;
}

.panel-aqua > .panel-heading {
	background: #27d7e7;
}

.panel-brown {
	border-color: #9c8061;
}

.panel-brown > .panel-heading {
	background: #9c8061;
}

.panel-dark-blue {
	border-color: #4765a0;
}

.panel-dark-blue > .panel-heading {
	background: #4765a0;
}

.panel-light-green {
	border-color: #79d5b3;
}

.panel-light-green > .panel-heading {
	background: #79d5b3;
}

.panel-default-dark {
	border-color: #585f69;
}

.panel-default-dark > .panel-heading {
	background: #585f69;
}

/* Panel Dark-Blue (Replaces panel-dark-blue) */
.card.panel-dark-blue {
    border-color: #4765a0;
	margin-bottom: 20px;
}

.card.panel-dark-blue .card-header {
    background: #4765a0;
    color: white;
}

/* Panel Blue (Replaces panel-blue) */
.card.panel-blue {
    border-color: #3498db;
	margin-bottom: 20px;
}

.card.panel-blue .card-header {
    background: #3498db;
    color: white;
}

/* Panel Info (Replaces panel-info) */
.card.panel-info {
    border-color: #bce8f1;
	margin-bottom: 20px;
}

.card.panel-info .card-header {
    background: #bce8f1;
    color: #31708f;
}

/* Get margin with form-group adapt Bootstrap 5*/
.form-group {
	margin-bottom: 1rem;
}

/* Match Bootstrap 3's panel-title styling */
.card-title {
    font-size: 16px;  /* Adjust to match old panel-title */
    font-weight: bold;
    margin-bottom: 0;  /* Remove extra spacing */
}

/* fix modal not scrolling after closing 1st modal and opening 2nd modal */
.modal {
	overflow-y: scroll;
}

.modal-header {
	padding: 15px 3% 15px 5%;
	background-color: #3498db;
	color: #efefef;
}

.close {
	color: #eee !important;
	font-size: 30px !important;
	font-weight: 100;
	margin-top: -10px !important;
	opacity: 0.6;
	
}

.modal-content > .modal-content {
	border: none;
}

.modal-body {
	padding: 30px 5% 30px 5%
}

.divider {
	background-color: #555 !important;
}

.code {
	font-family: monospace;
}

.cap {
	text-transform: uppercase;
	font-family: ""Source Sans Pro";
}

.decap {
	text-transform: none;
}

.textList li{
	margin-top: 12px
}

.borderBottom {
	border-bottom: 1px solid #eee
}

.highlight {
	background-color: #ff3333;
	color: #fff;
	padding: 5px 10px
}

.box {
	border: 1px solid #ccc;
	padding: 30px
}

/* fix autocomplete result not shown in modal*/
ul.ui-autocomplete {
	z-index: 1100;
}

.paddingBtn {
	padding: 15px 50px 15px 50px
}

.editableTitle {
	border: none;
	border-bottom: 1px solid #ccc;
	padding: 5px 0;
	width: 100%;
	font-size: 30px;
}

.box-shadow {
	border: 1px solid #ccc;
	box-shadow: 0px 8px 10px #999;
	padding: 34px;
}

.blankImg {
	width: 140px;
	height: 140px;
	background-color: #eee;
}

.blankImgTxt {
	text-align: center;
	padding: 50px 0;
}

.noty_message {
	padding: 20px 20px !important;
}

.noty_message i {
	padding: 0 10px 10px 0;
}

.noty_close {
	margin: 10px !important;
}

.noty_buttons {
	padding-right: 8px !important;
}

.noty_buttons button {
	padding: 4px 10px !important;
}

.dotLine hr {
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #eee;
}

.coy_logo {
	max-height: 160px
} 

.alignedList {
	border-bottom: 1px solid #ccc;
	padding-bottom: 8px;
	margin-bottom: 15px;
	clear: both;
}

.viewField {
	border-bottom: 1px dotted #ccc;
	padding-bottom: 2px;
	margin-bottom: 12px;
}

.section {
	margin-bottom: 20px;
	padding: 30px;
	background-color: #e4eefb;
}

.formDiv {
	display: block;
	width: 100%;
	height: 34px;
}

.password-verdict{
	font-size: 10px;
}

.actionMenu i {width: 24px}

.tableResponsive {
    min-height: .01%;
    overflow-x: auto;
}

.header-v6 li.menu-icons:first-child {
	padding-right: 0
}

/* back to top control */
.cd-top {
  display: inline-block;
  height: 30px;
  width: 30px;
  position: fixed;
  bottom: 20px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: #3498db url(../pics/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 40px;
    width: 40px;
    right: 30px;
    bottom: 30px;
  }
}
/* end of back to top control */
#loginPage .box-shadow{
	margin-top: 50px;
	padding: 20px 50px 70px 50px
}

#homePage .fa-2x{
	width: 42px
}

.header-v6 .navbar {
    box-shadow: none;
    border-bottom: 1px solid #b3ddf8;
}

.header-v6.header-classic-white .navbar-nav > li > a {
 font-weight: bold !important;	
}

.header-v6 .dropdown-menu li a:hover {
	background-color: #3498db;
}

.header-v6.header-classic-white .navbar-nav .dropdown-menu li > a:hover {
	color: #fff !important;
}

.btn-close span {
	font-size: 2rem;
	color: #eee;
}