.frm-skeleton {
	position: relative;
	background-color: #e2e2e2;
	border-radius: 4px;
	overflow: hidden;

	color: transparent !important;
	text-shadow: none !important;
	pointer-events: none;
	user-select: none;
}

.frm-skeleton::after {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	height: 100%;
	width: 150%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: shimmer 1.2s infinite;
}

.offcanvas .offcanvas-body::-webkit-scrollbar {
	width: 4px;
}

.offcanvas .offcanvas-body::-webkit-scrollbar-track {
	background: transparent;
}

.offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
	background: rgba(20, 20, 20, 0.3);
	border-radius: 999px;
	transition: background 0.2s ease, width 0.2s ease;
}

.offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
	background: rgba(20, 20, 20, 0.5);
}

.custom-scrollbar {
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--bs-body-color-rgb), .3) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(var(--bs-body-color-rgb), .3);
	transition: background-color .2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--bs-body-color-rgb), .5);
}

.offcanvas .offcanvas-header button:hover,
.offcanvas .offcanvas-header button:focus,
.offcanvas .offcanvas-header button:active,
.offcanvas .offcanvas-header button:visited {
	outline: none !important;
	box-shadow: none !important;
}

#notification-anchor {
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
}

.notification-dropdown {
    border-radius: .75rem;
    overflow: hidden;
}

@media (min-width: 600px) {
    .notification-dropdown {
        width: 400px;
    }
}

.notification-dot {
    width: .5rem;
    height: .5rem;
    margin-top: 1.25rem;
}

.notification-list .list-group-item {
    border-color: #e5e8ec;
}

.notification-list .notification-unread {
    background-color: #eff2f7;
}

.notification-list .notification-unread:hover,
.notification-list .notification-unread:focus {
    background-color: #e1e7f2;
}

.min-w-0 {
	min-width: 0 !important;
}

.card-subtle-border {
	border: 1px solid rgba(var(--bs-secondary-rgb), .12);
	border-radius: 1.25rem;
}

.btn-action {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .75rem;
	border: 1px solid transparent;
	border-radius: .65rem;
	color: var(--bs-secondary);
	background: transparent;
	transition: .2s;
}

.btn-action:hover {
	color: var(--bs-primary);
	background: rgba(var(--bs-primary-rgb), .08);
}

.btn-action,
.btn-action:hover,
.btn-action:focus,
.btn-action:focus-visible,
.btn-action:active {
	border-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	transform: none !important;
}

.btn-action[aria-expanded="true"] {
	color: var(--bs-primary);
	border-color: rgba(var(--bs-primary-rgb), .2) !important;
	background: rgba(var(--bs-primary-rgb), .08) !important;
}

.btn-group>.btn.btn-action {
	border-radius: .65rem !important;
}

body[data-style-mode="dark"] .offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.25);
}

body[data-style-mode="dark"] .offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.45);
}

body[data-style-mode="dark"] .custom-scrollbar {
	scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

body[data-style-mode="dark"] .custom-scrollbar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .25);
}

body[data-style-mode="dark"] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, .45);
}

.recipients-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
}

.announcement-recipients-list thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #f8f9fa;
}

@keyframes shimmer {
	100% {
		left: 100%;
	}
}

/* Remove bordas do Modal */
.modal>.modal-dialog>.modal-content {
	border: none;
}

/* Avatar do usuário (components/UI/Avatar.html.twig). */
.ui-avatar {
    flex: 0 0 auto;
    object-fit: cover;
}

.ui-avatar--initials {
    align-items: center;
    background: color-mix(in srgb, var(--env-color) 11%, white);
    color: var(--env-color);
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    line-height: 1;
}

.ui-avatar__icon {
    font-size: 1.3em;
}