/* Ensure form labels, inputs align properly */
.customform {
	text-align: left;
}

/* Center login/register box like AdminLTE */
.login-box,
.register-box {
	width: 430px;
	margin: 0 auto;
	/* centers horizontally */
	margin-top: 5%;
	/* spacing from top */
}

.img-center {
    text-align: center;
    margin-top: 5%;
}

#404_Error {
    display: inline-block;
}

/* Full-width banner image at top */
.banner-img,
.header-banner-img {
	height: 100px;
	width: 100%;
	object-fit: cover;
	/* prevents distortion */
}

/* Captcha Refresh Icon */
.captcha-refresh-icon {
	height: 25px;
	width: 25px;
	cursor: pointer;
}

/* Utility class: width 100% */
.w-100 {
	width: 100%;
}

/* Very small column for serial numbers */
.col-serial {
	width: 10px;
}

/* Correct background (FULL PAGE) */
body.login-page {
	background-image: url("../img/bgimg.jpg") !important;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	min-height: 100vh;
	/* IMPORTANT */
}

.mt-1cm {
    margin-top: 1cm !important;
}

.mt-06cm {
    margin-top: 0.6cm !important;
}

.bg-info {
	    background-color : #5bbcec !important;
}

/* Add this to your external CSS file */
.badge-custom-secondary {
	background-color: #6c757d !important;
	color: white !important;
	padding: 0.25em 0.4em !important;
	border-radius: 0.25rem !important;
	font-size: 0.875em !important;
	font-weight: 700 !important;
	display: inline-block !important;
	line-height: 1 !important;
	text-align: center !important;
	white-space: nowrap !important;
	vertical-align: baseline !important;
}

/* For table badges specifically */
table .badge-custom-secondary,
.table .badge-custom-secondary,
#flagWorldWide .badge-custom-secondary {
	background-color: #6c757d !important;
	color: white !important;
}

/* Hover state for links */
a:hover .badge-custom-secondary {
	background-color: #5a6268 !important;
	text-decoration: none !important;
}

/* Add this to your CSS file - it will fix the issue immediately */
#flagWorldWide td:nth-child(3) .badge {
	background-color: #6c757d !important;
	color: white !important;
	display: inline-block !important;
	padding: 0.25em 0.70em !important;
	font-size: 0.875em !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center !important;
	white-space: nowrap !important;
	vertical-align: baseline !important;
	border-radius: 1.4rem !important;
}

#within1000NM td:nth-child(3) .badge {
	background-color: #6c757d !important;
	color: white !important;
	display: inline-block !important;
	padding: 0.25em 0.70em !important;
	font-size: 0.875em !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center !important;
	white-space: nowrap !important;
	vertical-align: baseline !important;
	border-radius: 1.4rem !important;
}

.no-backdrop-opacity .modal-backdrop.show {
	opacity: 0 !important;
	pointer-events: none !important;
}

.btn-close {
    background-image: var(--bs-btn-close-bg) !important;
    opacity: 1;
}
.dropdown-item2 span.alert-counter-font-weight {
    font-weight: 400 !important;
}

.card-body-geo {
    background-color: rgb(229, 244, 251);
}


/* #showBookmarkTable {
    width: 100% !important;
    white-space: nowrap;
    display: table;
}

#showBookmarkTable td,
#showBookmarkTable th {
    white-space: nowrap;
    padding: 8px 12px;
}

MAKE MODAL BODY SCROLLABLE
#pageModal .modal-body {
    overflow-x: auto !important;
    max-width: 100% !important;
}

#pageModal .modal-dialog {
    max-width: 95% !important;
} */

/* Table scroll */
#showBookmarkTable_wrapper {
    overflow-x: auto !important;
    max-width: 100% !important;
}

#showBookmarkTable {
    white-space: nowrap !important;
    display: table !important;
    width: 100% !important;
}

#showBookmarkTable td,
#showBookmarkTable th {
    white-space: nowrap !important;
    padding: 8px 12px !important;
}

/* Modal - scroll only, position unchanged */
#pageModal .modal-body {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 80vh !important;
}
