body {
    /*background: #ffffff;
    background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(117, 168, 199, 1) 50%, rgba(107, 134, 207, 1) 99%);
    background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(117, 168, 199, 1) 50%, rgba(107, 134, 207, 0.8) 100%);
    */
    background: #ffffff;
    /*background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(227, 248, 255, 1) 100%);*/
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(135, 155, 199, 1) 100%);
    overflow-anchor: none;
    font-family: 'DM Sans', sans-serif;
    overflow-anchor: none;
    font-family: 'DM Sans', sans-serif;
}

pre {
    background-color: lightgray;
    font-family: 'Courier New', Courier, monospace;
    overflow-x: auto;
    white-space: pre;
    word-break: break-all;
}

#copyToClipboardButton {
    width: 26px;
    height: 26px;
}

#copyToClipboardImg, #copyToClipboardImg2 {
    cursor: copy;
}

.copyToClipboardImg {
  cursor: copy;
}

.no-users {
    color: red;
}

.name-input {
    width: 10em;
}

.email-input {
    width: 10em;
}

.users-header {
    background-color: blue;
    color: white;
}

.users-header-row {
    padding-bottom:5px;
}

.new-user-card {
    margin-top: 20px;
    background-color: blue;
    color: white;
}

.new-user-error {
    color: yellow;
}

.usernameExists-div {
    color: yellow;
    background-color: red;
}

.contact-me-error {
    color: yellow;
}

.contact-details-submitted {
    color: yellow;
}

.gdp-map-table {
    width: 1000px;
}

.gdp-slider-div {
    width:1000px;
}

.gpd-map-td {
    width:100%;
    text-align: center;
}

.gpd-map-td-rank {
    width:200px;
    text-align: left;
}

.map {
    width: 100%;
    height: 100%;
}

.gpd-map-td-2 {
    height: 600px;
}

.guest_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.guest_modal.show {
  display: flex;
  opacity: 1;
}

.guest_modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: guest_fadeIn 0.5s ease;
}

@keyframes guest_fadeIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.guest_modal-content input,
.guest_modal-content textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}
/*
.guest_modal-content button {
  padding: 10px 15px;
  margin-top: 10px;
  border: none;
  background-color: #007BFF;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
*/
.guest_modal-content button:hover {
  background-color: #0056b3;
}

#modal-buttons {
  margin-top:5px;
}

.guest_error {
  color: red;
  font-size: 0.9em;
  margin-top: -5px;
  margin-bottom: 8px;
  margin-left: 5px;
  display: none;
}

#guest_table-container {
  /*max-width: 800px;*/
  max-width:100%;
  margin-top:80px;
  margin-left:10px;
  margin-right:10px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#guest_table {
  width: 100%;
  border-collapse: collapse;
}

#guest_table th, #guest_table td {
  border: 1px solid #ddd;
  padding: 8px;
}

#guest_table th {
  background-color: #f2f2f2;
  text-align: left;
}

#guest_table th:nth-child(1) {
  width:15%;
  vertical-align: top;
}

#guest_table th:nth-child(2) {
  width:20%;
  vertical-align: top;
}

#guest_table th:nth-child(3) {
  width:20%;
  vertical-align: top;
}

#guest_table th:nth-child(4) {
  width:45%;
  vertical-align: top;
}

#guest_table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#guest_sign-btn {
  padding: 6px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#guest_sign-btn:hover {
  background-color: #0056b3;
}

.guest_cell {
  vertical-align: top;
}

#guest_location {
  width: calc(100% - 100px);
  display: inline-block;
}
/*
#guest_detect-btn {
  display: inline-block;
  margin-left: 5px;
  padding: 6px 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  vertical-align: top;
}
*/
#guest_detect-btn:hover {
  background-color: #218838;
}

.guest_card {
  width:100%;
  margin-bottom:10px;
  background-color:rgba(144, 201, 219, 0.3);
}

.guest_card_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  /*padding: 1rem;*/
}

.guest_card_title_left {
  text-align: left;
}

.guest_card_title_right {
  text-align: right;
}
/*
#content_moderation {
  margin-left: 20px;
  margin-right: 20px;
}
*/
.cm_modal::backdrop {
  opacity: 0.8; /* Optional: adjust transparency */
  backdrop-filter: blur(4px); /* Optional: blur background */
  z-index: 1050;
}

.cm_modal {
  display: none;
  position: fixed;
  z-index: 1100;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0,0.5);
}

.cm_modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 10px;
  border-radius: 8px;
  width: 550px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.cm_modal-close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

#cm_sampleInputs {
  margin-top: 10px;
}

.btn-sample-input {
  margin-top: 10px;
}

.cm_table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid #ddd;
  padding: 8px; 
  font-size: smaller;
}

.cm_td_1 {
  padding: 5px;
  width:20%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ddd;
}

.cm_td_2 {
  padding: 5px;
  width:80%;
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ddd;
}

#cm_header {
  top: 70px;
  position:fixed;
  z-index:1000;
}
/*
#cm_body {
  margin-top: 40px;
}
*/
.fixed-header {
  position: fixed;
  top: 56px; /* Height of navbar */
  left: 0;
  width: 100%;
  height:fit-content;
  background-color: white;
  z-index: 1030; /* Just above navbar */
  border-bottom: 1px solid #ddd;
  padding: 10px 20px;
}

#sampeInput {
  margin-bottom: 10px;
  width: 100%;
}

#userText {
  width: 100%;
}

.gradient-card {
  /*background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(117, 168, 199, 1) 50%, rgba(107, 134, 207, 0.8) 100%);*/
  background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(107, 155, 199, 0.8) 100%);
  color: white;
  border: none;
  border-radius: 1rem;
  /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);*/
}
/*
.gradient-card .card-body {
  padding: 2rem;
}

.gradient-card h5 {
  font-weight: 600;
}

.gradient-card p {
  opacity: 0.9;
}

.gradient-card .btn {
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  transition: background-color 0.3s ease;
}

.gradient-card .btn:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
*/
.main_content {
  margin-top: 200px;
}

.myh1 {
  font-size: 1.5rem;
}

.myh2 {
  font-size: 1.25rem;
}

h1 {
  font-size: 1.5rem !important;
}

h2 {
  font-size: 1.25rem !important;
}

h3 {
  font-size: 1.05rem !important;
}

h4 {
  font-size: 0.90rem !important;  
}

@media only screen and (max-width: 600px) {
  /* Example: stack elements vertically on mobile */
  #map {
    width: 100%;
    padding: 10px;
  }
  #mynavbar, #myNavBarContainer, #blogContainer {
    width: 100%;
  }
  .cm_td_2 {
    word-break: break-all !important;
  }
}

#cookie-banner {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 15px;
    z-index: 1200;
}

.no-scroll { overflow: hidden; }

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 1100; /* Must be higher than background content */
    display: none; /* Hidden by default */
}

.agent_audit_body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: smaller;
}

.agent_audit_table {
  font-size: smaller;
}

.agent_audit_cell {
  border: 1px solid black;
  vertical-align: top;
}