html, body {
    font-size: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}


/* Mobile-specific styles */
@media (max-width: 1000px) {
    html, body {
        font-size: 14px;
    }
    .navbar {
        width: 100%;
        padding: 10px;
    }
    .navbar-collapse {
		display: block !important; /* Force visibility */
    }
    .navbar-collapse.show {
        display: block;
        background-color: #1E90FF;
    }
    .navbar-nav {
        width: 100%;
        flex-direction: column;
        background-color: #1E90FF;
    }
    .nav-item {
        width: 100%;
    }
    .nav-link {
        font-size: 16px;
        padding: 10px;
		color: black !important; /* Bright strong color for debugging */
        background-color: transparent !important;
        display: block;
        text-align: left;
    }
	.dropdown-menu {
	    min-width: 100%; /* Ensures it can take full width if needed */
	    width: auto; /* Sizes to the largest item */
	    display: inline-block; /* Allows content-based sizing */
	    font-size: 14px;
	    position: static;
	    background-color: #f8f9fa;
	    border: 1px solid #ccc;
	    box-shadow: none;
	    white-space: nowrap; /* Prevents text wrapping in dropdown items */
	}
    .dropdown-item {
		color: black !important; /* Strong color for debugging */
        padding: 8px 16px;
        display: block;
    }
    .dropdown-item:hover, .dropdown-item:active {
        background-color: #e0e0e0 !important;
    }
    .dropdown-divider {
        margin: 0;
        border-top: 1px solid #ccc;
    }
    .container-fluid {
        width: 100%;
        padding: 10px;
    }
    #cf1 {
        min-height: 100px;
        background-color: #ffffff;
        border: 1px solid #ccc;
    }
    #table1 {
        min-height: 100px;
        background-color: #ffffff;
        border: 1px solid #ccc;
    }
}

#output {
    color: red;
    margin: 10px;
    font-size: 16px;
}

#canvasContainer {
    position: relative;
}

#myCanvas {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 100%;
}

.col-sm-4 {
    box-sizing: border-box;
    overflow: hidden;
}


/************** tbl5 ******************/
/************** tbl5 ******************/
/************** tbl5 ******************/

#tbl5 .input-group {
    margin: 20px;
}
#tbl5 .texto {
    width: 300px;
    height: 100px;
}
#tbl5 .results,
#tbl5 .detail {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
}
#tbl5 .file-result,
#tbl5 .line-result {
    cursor: pointer;
    margin: 5px;
}
#tbl5 .context-line {
    margin-left: 20px;
}
#tbl5 .context-current {
    font-weight: bold;
}
#tbl5 .context-before {
    color: gray;
}
#tbl5 .context-after {
    color: blue;
}


.more-results {
    color: #007bff;
    cursor: pointer;
    margin-left: 10px;
    font-weight: bold;
}

.source-result {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}
.source-header {
    margin: 0;
    padding: 5px;
    background-color: #f5f5f5;
}
.source-header:hover {
    background-color: #e0e0e0;
}
.titles-container {
    margin-left: 20px;
}
.file-result {
    padding: 5px;
    margin: 5px 0;
}
.additional-results {
    margin-left: 20px;
    border-left: 2px solid #ddd;
    padding-left: 10px;
}

.additional-result {
    background-color: #f8f8f8;
    padding: 10px;
    margin-top: 5px;
}

.context2 {
    margin-top: 10px;
    font-style: italic;
}


#sources {
    margin-left: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.texto {
    width: 300px;
    height: 100px;
}


#tbl5 .error {
    color: red;
}
/**************  ******************/
/**************  ******************/
/**************  ******************/



/************** STATS ******************/
/************** STATS ******************/
/************** STATS ******************/


#stats-container {
    font-family: Arial, sans-serif;
    margin: 20px;
}

#stats-container .filters {
    margin-bottom: 20px;
}

#stats-container .filters label {
    margin-right: 10px;
}

#stats-container .filters input,
#stats-container .filters select,
#stats-container .filters button {
    margin-right: 20px;
    padding: 5px;
}

#stats-container .filters button {
    cursor: pointer;
}

#stats-container #statsTable {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}

#stats-container #statsTable th,
#stats-container #statsTable td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#stats-container #statsTable th {
    background-color: #f2f2f2;
    cursor: pointer;
}

#stats-container #statsTable th:hover {
    background-color: #ddd;
}

/**************  ******************/
/**************  ******************/
/**************  ******************/

.table-responsive {
    max-width: 100%;
}

.table {
    width: 100%;
    table-layout: auto;
}

.table td, .table th {
    overflow-wrap: break-word;
    padding: 8px;
    border: 1px solid black;
}



#table1, #table2 {
    display: block;
    width: 100%;
    overflow-x: auto;
}

#tbl0 table, #table1 table, #table2 table {
    border-collapse: collapse;
    border: none;
}

#tbl0 td, #tbl0 th, #table1 td, #table1 th, #table2 td, #table2 th {
    border: 1px solid black;
    padding: 8px;
}

a {
    text-decoration: none;
    color: #4DDED0;
}

.form-group {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.form-group label {
    display: block;
}

/*#posts {*/
/*    min-height: 800px;*/
/*    width: 100%;*/
/*}*/


.form-group textarea {
    display: block;
    width: 100%;
    height: 150px;
    text-align: left;
    padding: 8px;
    box-sizing: border-box;
}

.fin1 {
    margin: 20px 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.col-sm-3 {
    flex: 1;
    min-width: 200px;
}

.texto {
    width: 100%;
    padding: 8px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}



button:hover {
    background-color: #0056b3;
}

/************** aps ******************/
/************** aps ******************/
/************** aps ******************/

.swiper-container {
    width: 100%;
    height: 200px; /* Reduced height for popups */
    margin-bottom: 10px;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.swiper-button-next, .swiper-button-prev {
    color: #333;
    transform: scale(0.7); /* Smaller arrows for popups */
}
.leaflet-popup-content {
    width: 300px !important;
    max-height: 400px;
    overflow-y: auto;
}
.leaflet-popup-content-wrapper {
    padding: 5px;
}
.popup-images.hidden {
    display: none;
}
/**************  ******************/
/**************  ******************/
/**************  ******************/


/************** POSTS ******************/
/************** POSTS ******************/
/************** POSTS ******************/

.no-results {
  color: #888 !important;
}



#selected-list, #original-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 10px 0 !important;
  padding: 0 !important;
}

.original-img, .selected-img {
  max-width: 400px !important;
  height: auto !important;
  display: block !important;
  border: 1px solid #ccc !important;
  cursor: pointer !important;
}

.selected-item {
  display: inline-block !important;
}


.toggle-button {
	cursor: pointer !important; 
	color: blue !important; 
	text-decoration: underline !important; 
	background: none !important; 
	border: none !important; 
	padding: 0 !important; 
	margin-left: 5px !important; 
}

#selected-images {
  margin: 20px 0 !important;
  padding: 10px !important;
  border: 2px solid #007bff !important;
  background: #f8f9fa !important;
}

#selected-images h2 {
  margin-top: 0 !important;
}

.selected-img {
  max-width: 400px !important;
  opacity: 0.8 !important;
}

.selected-img:hover {
  opacity: 1 !important;
}

.original-img.selected {
  opacity: 0.5 !important;
}

.dimensions {
  font-size: 12px !important;
  color: #555 !important;
  margin: 5px 0 0 0 !important;
  text-align: center !important;
}

.hidden {
  display: none !important;
}

.content-text {
  margin-bottom: 10px !important;
}


.section-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
}

.post-container {
  flex: 1 1 400px !important;
  max-width: 400px !important;
  padding: 15px !important;
}

.post-href { margin-bottom: 10px; }


/************** flights ******************/
/************** flights ******************/
/************** flights ******************/


.section-title:hover {
    color: #007bff;
}

.table-bordered td.price-yellow {
    background-color: #ffffcc !important;
}
.table-bordered td.price-blue {
    background-color: #ccffff !important;
}
.table-bordered td.price-green {
    background-color: #ccffcc !important;
}

.table-bordered tr.bus-row td,
.table-bordered tr.bus-row th {
    background-color: #ffcccc !important;
}
.table-secondary.bus-row td,
.table-secondary.bus-row th {
    background-color: #ffcccc !important;
}

#itineraryTable tr td {
    vertical-align: middle;
}
#itineraryTable .btn-danger {
    background-color: #dc3545;
}
#itineraryTable .btn-danger:hover {
    background-color: #c82333;
}

/************** ******************/
/**************  ******************/
/**************  ******************/



/************** ******************/
/**************  ******************/
/**************  ******************/

#header {
    text-align: center;
    margin-bottom: 20px;
}

.input-group {
    margin: 1em 0;
}

.texto {
    width: 100%;
    min-height: 100px;
}

.file-result, .line-result {
    cursor: pointer;
    padding: 0.5em;
}

.file-header {
    font-weight: bold;
    margin: 1em 0;
}

.error {
    color: red;
    font-weight: bold;
}

.context-line {
    padding-left: 1em;
}

.context-current {
    background: #f0f0f0;
}

.context-before, .context-after {
    color: #666;
}

.results, .summary, .detail {
    margin: 1em 0;
}