body {
	font-size: 0.875rem;
}

.form-control:focus {
	outline: rgb(161, 220, 253) solid 2px;
}

.avatar_circle {
	width: 50px !important;
	height: 50px !important;
	border-radius: 50%;
	display: flex;
	/* or inline-flex */
	align-items: center;
	justify-content: center;
	float: left;
}

.pab {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 20px;
	display: none;
	z-index: 9999999;
	background-color: rgba(100, 100, 100, 0.5);
}

.pab_body {
	display: flex;
	/* or inline-flex */
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.pab_content {
	width: 33%;
	padding: 14px;
	font-size: 1rem;
	/* line-height: 1.1em; */
	z-index: 99999999;
	box-shadow: 5px 8px 8px 0 rgba(0, 0, 0, 0.2);
	display: block;
	border: 2px solid tomato;
	background: #fff none repeat scroll 0% 0%;
	color: tomato;
	text-align: center;
}

.pam {
	position: fixed;
	right: 30%;
	top: 1%;
	width: 40%;
	padding: 8px 20px 8px 8px;
	font-size: 16px;
	line-height: 25px;
	display: block;
	z-index: 99999;
	box-shadow: 5px 8px 8px 0 rgba(0, 0, 0, 0.2);
	display: none;
}

.pam_close {
	position: absolute;
	right: 2px;
	top: -2px;
	padding: 2px;
	font-weight: 600;
	font-size: 18px;
}

.pam_warning {
	border: 3px solid rgb(255, 156, 7);
	background: rgb(255, 253, 231) none repeat scroll 0% 0%;
	color: #9a460a;
}

.pam_warning .pam_close {
	color: #f4b13b;
}

.pam_error {
	border: 3px solid #f23535;
	background: #ffd7d7 none repeat scroll 0% 0%;
	color: #850d0d;
}

.pam_error .pam_close {
	color: #f23535;
}

.pam_success {
	border: 3px solid #07b03f;
	background: #cfe8c4 none repeat scroll 0% 0%;
	color: #0c5526;
}

.pam_success .pam_close {
	color: #07b03f;
}

i.icon {
	color: #bbb;
}

.hidablebox {
	display: none;
	transform: scale(0);
	opacity: 0;
	transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.hidablebox.hbactive {
	display: block;
	transform: scale(1);
	opacity: 1;
}

.hidablebox.hbactive.hbanim {
	animation: hbanimation 0.4s ease-in-out;
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.3s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes hbanimation {
	0% {
		display: none;
		opacity: 0;
	}

	1% {
		display: block;
		opacity: 0;
		transform: scale(0);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

pre {
	white-space: pre-wrap;
}

a.steelblue {
	color: steelblue;
}
.thumb_container {
	position: relative;
}
a.thumb_link {
	width: 100px;
	height: 100px;
	border: 1px solid #ccc;
	padding: 2px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

a.thumb_link_nb {
	width: 100px;
	height: 100px;
	border: none;
	padding:2px;
	margin:2px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.thumb_container .thumb_action {
	display: none;
	width: 100%;
	margin-top: 5px;
	position: absolute;
	left: 0;
	top: 0;
}
.thumb_container:hover .thumb_action {
	display: table;
}

.light_grey_bar {
	padding: 0.25em 0.35em;
	background-color: #f9f9f9;
}

.feather {
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
}

/*
   * Sidebar
   */

.sidebar {
	position: fixed;
	top: 0;
	/* rtl:raw:
	right: 0;
	*/
	bottom: 0;
	/* rtl:remove */
	left: 0;
	z-index: 100;
	/* Behind the navbar */
	padding: 48px 0 0;
	/* Height of navbar */
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 767.98px) {
	.sidebar {
		top: 5rem;
	}
}

.sidebar-sticky {
	position: relative;
	top: 0;
	height: calc(100vh - 48px);
	padding-top: 0.5rem;
	overflow-x: hidden;
	overflow-y: auto;
	/* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
	font-weight: 500;
	color: #333;
}

.sidebar .nav-link .feather {
	margin-right: 4px;
	color: #727272;
}

.sidebar .nav-link.active {
	color: #2470dc;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
	color: inherit;
}

.sidebar-heading {
	font-size: 0.75rem;
	text-transform: uppercase;
}

/*
   * Navbar
   */

.navbar-brand {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	font-size: 1rem;
	background-color: rgba(0, 0, 0, 0.25);
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.navbar .navbar-toggler {
	top: 0.25rem;
	right: 1rem;
}

.navbar .form-control {
	padding: 0.75rem 1rem;
	border-width: 0;
	border-radius: 0;
}

.form-control-dark {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.1);
}

.form-control-dark:focus {
	border-color: transparent;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

a {
	text-decoration: none;
}

a.btn-link-black,
a.black_link {
	color: #313A46;
}

a.btn-link-black:hover,
a.black_link:hover {
	color: #2f5477;
	transition: 0.5s;
}
a.btn-link-light,
a.light_link {
	color: #cfdbe2;
}

a.btn-link-light:hover,
a.light_link:hover {
	color: #2f5477;
	transition: 0.5s;
}

.masterNavContainer ul {
	text-align: left;
	position: relative;
}

.masterNavContainer ul li {
	padding: 0;
	margin: 10px 0 10px 2px;
	font-size: 0.9rem;
	box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.2);
}

.masterNavContainer ul li a {
	color: #000;
	padding: 8px;
	transition: all 0.3s;
	position: relative;
	display: block;
	border-left: 6px solid #eeeeee;
}

.masterNavContainer ul li a::before {
	content: "";
	display: block;
	border-top: 10px solid transparent;
	border-left: 15px solid rgb(188, 240, 158);
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 50%;
	right: -14px;
	transform: translateY(-50%);
	opacity: 0;
}

.masterNavContainer ul li a.selected::before {
	opacity: 1;
}

.masterNavContainer ul li a:hover {
	background-color: rgb(240, 218, 158) !important;
	border-left: 6px solid rgb(199, 166, 76);
	transition: all 0.3s;
}

.masterNavContainer ul li a.selected {
	background-color: rgb(188, 240, 158) !important;
	border-left: 6px solid rgb(100, 179, 54);
	transition: all 0.3s;
}

pre {
	white-space: pre-wrap;
}

.fs-7 {
	font-size: 0.9rem;
}

.fs-8 {
	font-size: 0.8rem;
}

.fs-9 {
	font-size: 0.7rem;
}

.fcBlack {
	color: #000000 !important;
}

.button-toggle-menu {
	width: 40px;
}

.autocomplete-suggestions {
	border: 1px solid #999;
	background: #fff;
	overflow: auto;
}

.autocomplete-suggestion {
	padding: 2px 5px;
	white-space: nowrap;
	overflow: hidden;
}

.autocomplete-selected {
	background: #f0f0f0;
}

.autocomplete-suggestions strong {
	font-weight: normal;
	color: #3399ff;
}

.autocomplete-group {
	padding: 2px 5px;
}

.autocomplete-group strong {
	display: block;
	border-bottom: 1px solid #000;
}
input[readonly],
input[readonly]:focus {
	background-color: #eeeeee;
}
.card_actions{
	position:absolute;
	top:10px;
	right:10px;
	display: none;
}
.card:hover .card_actions{
	display: block;
}

.itemrow_actions{
	position:absolute;
	top:0px;
	right:-50px;
	display: none;
}
.itemrow:hover .itemrow_actions{
	display: block;
}

li.menuitem-active a{
	color:#ffffff !important;
}
.table-less-padding th,
.table-less-padding td {
    padding: .3rem .3rem;
}

/* ------------------------------------------------------------
   DRAG & DROP ZONE
------------------------------------------------------------- */
.file-drop-zone {
    border: 1px dashed #becad3;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    transition: 0.25s ease-in-out;
    cursor: pointer;
    background: #fafafa;
}

.file-drop-zone:hover {
    border-color: #0d6efd;
    background: #f8f9fa;
}

.file-drop-zone.dragover {
    border-color: #0d6efd;
    background: #e9f2ff;
}

/* ------------------------------------------------------------
   PREVIEW GRID ITEM CARD
------------------------------------------------------------- */
.preview-grid-item {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background: #fff;
    position: relative;
    transition: box-shadow 0.2s ease-in-out;
}

.preview-grid-item:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* ------------------------------------------------------------
   THUMBNAIL (image or document icon)
------------------------------------------------------------- */
.preview-image,
.preview-icon {
    width: 100%;
    height: 140px;
    border-radius: 8px;
    object-fit: cover;
    background: #f8f9fa;
    position: relative;
}

/* FA Icons inside preview */
.preview-icon i {
    font-size: 48px;
    color: #6c757d;
}

/* ------------------------------------------------------------
   HOVER DELETE OVERLAY
------------------------------------------------------------- */
.preview-delete-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    border-radius: 8px;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
}

.preview-grid-item:hover .preview-delete-overlay {
    opacity: 1;
}

.preview-delete-overlay i {
    font-size: 30px;
    color: white;
    pointer-events: none; /* ensures click triggers parent */
}

/* ------------------------------------------------------------
   FILE NAME (single line ellipsis)
------------------------------------------------------------- */
.preview-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   FILE SIZE TEXT
------------------------------------------------------------- */
.preview-file-size {
    font-size: 12px;
    color: #6c757d;
}

/* ------------------------------------------------------------
   LABEL INPUT STYLE (Bootstrap already handles most)
------------------------------------------------------------- */
.preview-label-input {
    margin-top: 8px;
    font-size: 13px;
}

/* ------------------------------------------------------------
   GRID SPACING
------------------------------------------------------------- */
.preview-grid-item {
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------
   OPTIONAL: RESPONSIVENESS TWEAKS
------------------------------------------------------------- */
@media (max-width: 576px) {
    .preview-image,
    .preview-icon {
        height: 110px;
    }
    .preview-delete-overlay {
        height: 110px;
    }
}