*{
	box-sizing: border-box;
}

/*FLASH MESSAGES*/
#flash-message-container {
  z-index: 9999;
  max-width: 320px;
}
#flash-message-container .alert{
	width: 280px;
}

/* Animação de entrada */
.slide-in {
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animação de saída (fade-out) */
.fade-out {
  transition: opacity 0.4s ease;
  opacity: 0;
}


/*SELECT2*/
.select2-container .select2-selection--single {
	height: 31px; /* Ajuste a altura para combinar com o seu design */
	display: flex; /* Alinha o conteúdo do campo */
	align-items: center; /* Centraliza verticalmente o texto */
}

.select2-container .select2-selection__rendered {
	line-height: 31px; /* Alinha o texto do placeholder com a nova altura */
	font-size: 16px; /* Ajuste o tamanho da fonte, se necessário */
	color: #999; /* Cor do placeholder */
}

.select2-container .select2-selection__arrow {
	height: 31px; /* Ajusta a altura da seta */
}








/* Para esconder totalmente a scrollbar (funciona em navegadores modernos) */

.sidebar, 
.offcanvas-body,
.modal-system .modal-body {
  overflow-y: auto;
  overflow-x: visible; /* ou auto, se quiser rolagem horizontal também */
  scrollbar-width: none; /* Firefox: oculta apenas vertical se usada com overflow-y */
}

/* Chrome, Safari e Edge */
main::-webkit-scrollbar:vertical,
.sidebar::-webkit-scrollbar:vertical,
.offcanvas-body::-webkit-scrollbar:vertical,
.modal-system .modal-body::-webkit-scrollbar:vertical
 {
  display: none;
}

input[type=checkbox]{
	cursor: pointer;
}



body {
	margin: 0;
	font-family: Arial, sans-serif;
	position: relative;
}

.loading{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1100;
}

.sidebar {
	position: fixed;
	top: 0; 
	height: 100vh;
	width: 60px; /* largura inicial só com ícones */
	transition: width 0.3s ease;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #1f2937;
	color: white;
	z-index: 10;
}

.offcanvas{
	background-color: #1f2937;
	color: white;
}
.sidebar:hover {
	width: 330px; /* expande ao hover */
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); /* Sombra lateral suave */
}
.menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.menu li {
	display: flex;
	align-items: center;
	padding: 15px 10px;
	cursor: pointer;
	white-space: nowrap;
	min-height: 60px;
	max-height: 60px;
}
.menu li:not(:first-child):hover {
	background-color: #495057;
}
.menu li .menu-icon.active {
	color: orange;
	font-weight: bold;
}
.menu li .menu-icon.active + span {
	font-weight: bold;
}
.menu li .menu-icon,.menu li .div_perfil {
	min-width: 40px;
	font-size: 18px;
	text-align: center;
}
.sidebar .menu li .sidebar-text {
	opacity: 0;
	margin-left: 10px;
	transition: opacity 0.3s ease;
}
.sidebar:hover .menu li .sidebar-text{
	opacity: 1;
}
li.sidebar-divisor{
	display: none;
}
.sidebar:hover li.sidebar-divisor{
	display: block;
	background-color: #008B8B;
}

/* Botão hamburger mobile, escondido em desktop */
#btn-menu-mobile {
	display: none;
	background: transparent;
	border: none;
	font-size: 24px;
	color: white;
}

header{
	position: fixed;
	background-color: #374151;
	top: 0;
	right: 0;
	left: 60px;
	height: 60px;
	padding: 0px 10px;
	z-index: 5;
	color: white;
}

.div_perfil{
	width: 40px; 
	height: 40px;
}
.div_perfil img{
	width: 100%; 
	height: 100%; 
	object-fit: cover;
}

footer{
	position: fixed;
	bottom: 0;
	left: 60px;
	right: 0;
	height: 40px;

	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #374151;
	color: white;
	z-index: 5;
	padding: 10px;
}

#comandos{
	position: fixed;
	top: 60px;
	left: 60px;
	right: 0;
	padding: 10px;
}

main{
	padding: 10px;
	margin-left: 60px; /* compensando a .sidebar */
	margin-top: 110px;  /* compensando o header + comandos */
	margin-bottom: 40px; /* compensando o footer */
	height: calc(100vh - 150px); /* header (60px) + comandos (40px) + footer (40px) */
	overflow: auto;
	transition: margin-left 0.3s ease;
}

table td,table th{
	vertical-align: middle;
}
thead.sticky-top{
	z-index: 1 !important;
}

/* responsividade  */
/* Em telas menores que md (768px), esconder .sidebar e mostrar botão */
@media (max-width: 640px) {
	.sidebar, .header-description{
		display: none;
	}
	header,#comandos,footer{
		width: 100vw;
		left: 0;
	}
	#btn-menu-mobile {
		display: block;
	}
	main {
		width: 100vw;
		margin-left: 0px;
	}
}

/*CONFIGURAÇÕES GERAIS DE FORMULARIOS DE CADASTRO E EDIÇÃO*/
.modal-system .modal-content {
  background-color: #b0b0b0;
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.modal-system .form-control,.modal-system .form-select{
	border: 1px solid silver;
}

/* Barra superior */
.modal-system .modal-header {
  background-color: #3a3f51;
  color: white;
  padding: 16px 24px;
  border-bottom: none;
}

.modal-system .modal-header .btn-close {
  filter: invert(1);
}

.modal-system .modal-title {
  font-size: 18px;
  font-weight: 600;
}

/* Corpo */
.modal-system .modal-body {
  padding: 24px;
}

/* Labels dos inputs */
.modal-system label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}

/* Fieldset e legend */
.modal-system fieldset {
  border: 1px solid #ddd;
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 6px;
  background-color: #f9f9f9;
}

.modal-system fieldset legend {
  font-weight: 600;
  font-size: 18px;         /* tamanho maior que o das labels dos campos */
  color: #2c2c2c;
  margin-bottom: 12px;
  padding-bottom: 4px;
  display: block;
}

.modal-system .modal-footer {
  padding: 16px 24px;
  background-color: #3a3f51;
  border-top: none;
}

.modal-system .modal-footer .btn {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 4px;
}

/*CONFIGURAÇÕES GERAIS  DE IMPRESSÃO*/
.only-print{
	display: none !important;
}
@media print{
	.only-print{
		display: block !important;
	}
	.not-print{
		display: none !important;
	}
	main{
		margin: 15px !important;
	}
}