/* General body settings for dividing the screen */
body {
    display: flex;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: white;
}

#app_single_name {
  display: none;            /* you still toggle this via JS */
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1.1rem;
  border: 1px solid #dee2e6;
  background-color: #f8f9fa;
  padding: 0.5rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.1rem;

}

/* Left-side container */
.left-div {
    display: flex;
    padding-right: 10px;
    min-width: 300px;
    min-width: 300px;
    flex-direction: column; /* Stack the app-selection and menu vertically */
    background-color: #f8f9fa;
    color: black;
	overflow: visible;
}
/* Hamburger button for mobile menu toggle */
    #menu-toggle {
        display: none;
    }
#button {
}

#menu .sidenav-menu,
#menu .sidenav-menu ul {
  list-style: none;            /* if you don’t want bullets */
  padding-inline-start: 15px !important;
  margin-block-start: 0;
  margin-block-end: 0;
}



.menu-toggle-button {
    background: none;
    border: none;
    color: black;
	right: 0px;
	float: right;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    display: block; /* Ensure it's visible on all screen sizes */
}
.svg-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px; /* Space between icon and text */
    margin-top: 5px;
	color: white; /* Apply the color directly */
	
}


/* App selection at the top of the left-div */
#app-selection {
    background-color: #f8f9fa;
	padding: 10px;
    display: inline-block;
    width: 300px;
    flex-shrink: 0; /* Prevent app-selection from shrinking */
}

/* Left-side menu (Sidenav) */
#menu {
    background-color: #f8f9fa;
    color: black;
    padding: 0px;
    width: 100%; /* Full width under app-selection */
    flex-grow: 1; /* Takes up remaining space in the left-div */
    position: relative; /* Position relative to app-selection */
    overflow-y: auto; /* Enables scrolling for long menus */
	display: block;

}

/* Menu items styling */
#menu_items {
    padding: 0px;
}

#menu a {
    padding: 2px 2px;
    text-decoration: none;
    font-size: 18px;
    color: black;
    display: block;
}

#menu a:hover {
    background-color: #515151;
    color: white;
	
}

/* Menu hidden state for mobile */
.menu-hidden {
    transform: translateX(-100%);
}

.menu-shown {
    transform: translateX(0);

}

.menu-icon {
    width: 24px; /* Adjust the size to fit the menu */
    height: 24px;
	margin-top: 0px;
	padding-right: 5px;
    fill: black; /* Change the color of the SVG */
}
.img {
	vertical-align: middle;
}

.fas {
    margin-left: 10px; /* Adjust as needed */
}

/* Menu items styling */

/* Expanded state */
.sidenav .expanded + ul {
    display: none;
}

/* Toggle Arrows */

.sidenav-menu li {
/* Default state (collapsed) */
    display: block;
    list-style-type: none;
    padding-left: 0;
}

.sidenav-menu a {
/* Default state (collapsed) */
	cursor: pointer;
}

/* Submenu collapse/expand styles */
.sidenav-menu ul {
    display: none; /* Hide submenus initially */

}
.sidenav-item .expanded + ul {
    display: block; /* Show the submenu when the parent is expanded */
}

.sidenav .toggle::before {
    content: '►'; /* Right arrow for collapsed */
}

.sidenav .toggle.expanded::before {
    content: '▼'; /* Down arrow for expanded */
}

/* Mobile menu styles */
@media (max-width: 768px) {
    #menu {
        display: none; /* Initially hide the menu */
        width: 100%; /* Full width for mobile */
    }

    .menu-toggle-button {
        display: inline-block; /* Show the hamburger icon */
    }
}

/* Main content area next to the menu */
#main-content {
    flex: 1;
    padding: 0px;
    overflow: auto;
	clear: both;
    transition: margin-left 0.3s ease-in-out;
}

#data-content {
    flex: 1;
    padding: 5px;
    overflow: auto;
	margin-top: 0px;
    transition: margin-left 0.3s ease-in-out;
	clear: both;

}


/* Hide the default radio button */
input[type="radio"] {
    position: relative;
	margin-left:10px;
}

/* Hide the default checkbox */
input[type="checkbox"] {
    position: relative;
	margin-left:10px;
}

/* Style for radio buttons within forms */
.form-check {
    margin-bottom: 10px; /* Add spacing between radio buttons */
}

.form-check-input {
    margin-right: 10px; /* Add space between the radio button and the label */
    cursor: pointer; /* Change cursor to pointer for better user experience */
}

.form-check-label {
    cursor: pointer; /* Make the label clickable */
    font-size: 16px; /* Adjust font size */
    color: #333; /* Text color */
}

/* Style for checked radio buttons */
.form-check-input:checked {
    background-color: #007bff; /* Blue color for checked radio */
    border-color: #007bff; /* Matching border for checked radio */
}

/* Optional: Style for hover effect on radio button labels */
.form-check:hover .form-check-label {
    color: #007bff; /* Change text color on hover */
}

/* Style for focused radio buttons */
.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.75); /* Blue glow on focus */
}


/* Style for readonly inputs to make them visually distinct */
.input[readonly] {
  border-style: dotted;
  cursor: not-allowed;
  color: #777;
  background-color: #f9f9f9; /* Optional: a lighter background to enhance the effect */
}

select[disabled] {
    border-style: dotted;
    cursor: not-allowed;
    color: #777;
    background-color: #f9f9f9; /* A lighter background to simulate readonly */
}

/* Adjust for when the menu is hidden */
.menu-hidden + #main-content {
    margin-left: 0;
}

/* Status bar at the top */
#status {
    position: relative;
    width: 100%;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px;
    border: 1px solid #dee2e6;
    top: 0;
	clear: both;
}
#editForm {
	position: sticky;
}
/* General styling for the status bar */
.status-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #dee2e6;

}

.status-item {
    flex: 1; /* Each item will take equal space */
    text-align: left;
}

.status-center {
    text-align: center; /* Center the entity caption */
}

.status-right {
    text-align: right; /* Right-align the action buttons */
}
.table thead {
    border-collapse: collapse;
    border: 1px solid #dee2e6;
	
}
/* Table styling */
.table-container {
    max-height: 800px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
}

.table {
    width: 100%;
    border-collapse: collapse;
	padding-top: 0px;
}

.table th, .table td {
    max-height: 1.5em; /* Height set to approximately one text line */
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.table tbody tr:hover {
    background-color: #f1f1f1;
}
th {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 100;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

.bottom-buttons-container {
        position: relative;
        bottom: 0;
        width: 100%;
        background-color: #f8f9fa;
        padding: 10px;
        display: flex;
		justify-content: center;
		grid-gap: 5px 8px;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }

#status-entity-caption{
	color: #256ce7;
    font-weight: bold;

}

/* Responsive adjustments */
@media (max-width: 1280px) {
	#app-selection {
		width: 300px;
	}
	#top-left {
		width: 300px;
	}
	.left-div {
		max-width: 300px;
		min-width: 150px;
	}
}

@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

	#top-left {
        display: flex;
		width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    #app-selection {
        width: 95%; /* Adjusted for mobile */
        display: inline-block;
    }
	.left-div {
		max-width: 100%;
		min-width: 150px;
	}

    #menu-toggle {
        display: inline-block;
        font-size: 24px;
    }
    #menu {
        width: 100%;
        position: relative;
        height: auto;
        position: relative;
        /*transform: translateX(-100%);  Hide the menu initially */
        transition: transform 0.3s ease-in-out; /* Smooth toggle animation */
		display: none;
    }

    /* Use the class '.menu-shown' to show the menu */
    .menu-shown {
        transform: translateX(0); /* Show the menu when class is applied */
    }
    .menu-hidden {
        max-height: 0; /* Collapse menu initially */
    }


    #main-content {
        margin-left: 0;
        padding: 10px;
    }

    
}

.modal {
  z-index: 1050 !important;
  position: fixed; /* Ensure it’s positioned on top */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.modal-backdrop.show {
  opacity: 0.5; /* Optional: darken background */
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040 !important;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

/* container must be relative (you already have that) */
.text-rotator {
  position: relative;
  overflow: hidden;
}
/* all rotator‐items are hidden by default, stacked on top of each other */
.text-rotator .rotator-item {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  /* you can tweak padding/text‐alignment here: */
  text-align: center;
  padding: 1rem;
}
/* only the active one shows */
.text-rotator .rotator-item.active {
  display: block;
  position: relative; /* if you want it to take up flow */
}

/* little dots at the bottom */
.text-rotator .rotator-indicators {
  position: absolute;
  bottom: 0;
  left: 50%;
/*  transform: translateX(-50%);
  gap: .5rem;
*/
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.text-rotator .rotator-indicators li {
  width: .75rem;
  height: .75rem;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.text-rotator .rotator-indicators li.active {
  background: #333;
}

.enonewsticker{
/*  background-color:#F2F2F2;*/
  display:block;
}
.titleenonewsticker{
  height:100%;
  align-items: center;
  justify-content: center;
}
.itemsenonewsticker{
/*  background-color:#F2F2F2;*/
}
.itemsenonewsticker p{
	/*  background-color:#F2F2F2;*/

  margin-bottom:0;position:relative;margin-left:20px; margin-right: 10px;
}
.navenonewsticker .carousel-control-prev,.navenonewsticker .carousel-control-next{
  color:#000;
  position:relative;
  flex-grow:2;
}
.navenonewsticker .carousel-control-next .carousel-control-next-icon,
.navenonewsticker .carousel-control-prev 
.carousel-control-prev-icon{
  display:block;
  height: 100%;
  width:100%;
/*  background-size: 60% 60%;*/
}

.navenonewsticker .carousel-control-next, .navenonewsticker .carousel-control-prev {
  width: auto;
}
.topicenonewsticker{
/*  background-color:#424867;*/
  color:#fff;
  font-size:70%;
  padding:5px 7px;
  text-transform:uppercase
}

.user-card {
  display: flex;               /* enable flex layout */
  padding: 0.5rem;
  overflow: hidden;            /* clip any overflow */
  width: 100%;              /* fill the parent’s full width */
  max-width: 300px;
  min-width: 300px;
  position: relative;


}
.user-card-link {
  align-items: flex-end; 
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  width: 100%;              /* fill the parent’s full width */

}

.user-photo {
    float: left;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding-right: 0px;
  overflow: hidden;
  flex-shrink: 0;
}

.user-photo img,
.user-photo svg {
    float: left;
 width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  padding-left: 0px;
  font-weight: bold;
   display: inline;
   position: absolute;
  max-width: 230px;
  min-width: 230px;
  min-height: 48px; 

}
/* Estilos para carrosséis de tabela */
.table-carousel {
  margin-bottom: 0px;
}

.table-carousel .carousel-indicators {
  bottom: 0px;
}

.table-carousel .carousel-indicators li {
  background-color: #007bff;
  border: 1px solid #007bff;
}

.table-carousel .carousel-indicators .active {
  background-color: #0056b3;
}

.table-carousel .carousel-control-prev,
.table-carousel .carousel-control-next {
  width: 5%;
  color: #007bff;
}

.table-carousel .carousel-control-prev-icon,
.table-carousel .carousel-control-next-icon {
  background-color: #007bff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}