.header {
  display: flex;

  align-items: center;
  height: 80px;
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(180, 210, 255) 80%, rgb(255, 255, 255) 100%);
}

.download {
  padding: 8px 18px;
  border: none;
  background-color: #ffeb4e;
  color: black;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0px 0px 10px 6px #ffffffb3;
}

.download:hover {
  background-color: #ffc107;

}



.email-found {
  color: blue;
}

/* Capitalize first letter of each option */
.first_capital option {
  text-transform: lowercase;
}

.first_capital option:first-child {
  text-transform: capitalize;
}

.search-input {
  display: block;
  margin-bottom: 12px;
  padding: 10px;
  /* width: 100%; */
  box-sizing: border-box;
  border: 2px solid #f37423;
  border-radius: 10px;
  box-shadow: rgb(236 116 116 / 37%) 0px 0px 10px 6px;

}

.header .logos {
  width: 200px;
  padding: 20px;
  align-items: center;
  display: flex;
  justify-content: center;

}

.header .logos img {
  width: 80%;
}

h2,
h1,
h3,
h4 {
  text-align: left;
  font-family: 'Arial', sans-serif;
  font-size: 18px;
  color: black
}


label {
  display: block;
  margin-bottom: 5px;
}

input[type='text'],
option {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #0a71ab;
  border-radius: 10px;
}

button[type="submit"] {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  float: right;
  font-size: 16px;
}

form button:hover {
  background-color: #006699;
}

table {
  border-collapse: collapse;
  width: 100%;


}

th,
td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;

}

th {
  background-color: #0a71ab;
  color: white;
}

.delete-button {
  background-color: rgb(218, 64, 64);
  color: white;
  border: none;
  cursor: pointer;
  padding: 8px 18px;
  text-align: center;


  font-size: 14px;
  margin: 4px 2px;

  border-radius: 55px;

}

.delete-button:hover {
  background-color: rgb(150, 15, 37);
}

.edit-button {

  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
  padding: 8px 18px;
  text-align: center;


  font-size: 14px;
  margin: 4px 2px;

  border-radius: 55px;
}

.edit-button:hover {
  background-color: #13760f;
}

#userbutton {
  background-color: #f37423;
  color: white;
  border: none;
  cursor: pointer;

  text-align: center;
  padding: 8px 18px;

  font-size: 14px;
  margin: 4px 2px;

  border-radius: 55px;

}

#userbutton:hover {
  background-color: #7e3f05;
}

#add-data-form {
  display: inline;
}

.success {
  background-color: green;
  font-size: 18px;
  padding: 10px 25px;
  color: #ddd;
  cursor: pointer;

  border-radius: 55px;
  border: none;
  margin-right: 5px;

}

.success:hover {
  background-color: #045007;
}

.cancel {
  background-color: red;
  font-size: 18px;
  padding: 10px 25px;
  color: #ddd;
  cursor: pointer;

  border: none;
  border-radius: 55px;

}

.logout {
  background-color: #ff3f3f;
  font-size: 18px;
  padding: 8px 18px;
  color: #ddd;
  cursor: pointer;
  box-shadow: 0px 0px 10px 6px #ffffffb3;
  border: none;
  border-radius: 20px;
}

.logout:hover {
  background-color: #751912;
}

.cancel:hover {
  background-color: #751912;
}

.hidden {
  display: none !important;
}

#add-data-button {

  background-color: #03A9F4;
  border: none;
  color: white;
  padding: 8px 18px;
  text-align: center;

  box-shadow: rgba(116, 185, 236, 0.7) 0px 0px 10px 6px;


  text-decoration: none;
  display: inline-block;
  font-size: 16px;

  cursor: pointer;
  border-radius: 55px;

}



#login-button {
  background-color: #9130e5;
  border: none;
  color: white;
  padding: 12px 25px;
  text-align: center;




  text-decoration: none;
  display: inline-block;
  font-size: 16px;

  cursor: pointer;
  border-radius: 55px;
}

#add-data-button:hover {
  background-color: rgb(70, 133, 201);
}

#add-field {

  background-color: #03A9F4;
  border: none;
  color: white;
  padding: 12px 25px;
  text-align: center;


  text-decoration: none;
  display: inline-block;
  font-size: 16px;

  cursor: pointer;
  border-radius: 55px;

}

#add-field:hover {
  background-color: rgb(70, 133, 201);
}

.filled-add {

  background-color: green;
  font-size: 18px;
  padding: 10px 25px;
  color: #ddd;
  margin-top: 30px;
  cursor: pointer;
  border-radius: 55px;
  border: none;
}

.filled-add:hover {
  background-color: #045007;
}

.filled-cancel {
  background-color: red;
  font-size: 18px;
  padding: 10px 25px;
  color: #ddd;
  cursor: pointer;
  border: none;
  border-radius: 55px;

}

.filled-cancel:hover {
  background-color: #751912;
}




.modal {
  position: fixed;
  z-index: 20;
  top: 20%;
  left: 26%;
  display: flex;
  flex-direction: column;
  width: 40%;
  max-height: 60%;
  overflow: auto;
  background: white;
  padding: 20px;
  border: 1px solid #bbb;
  box-shadow: 2px 2px 6px rgb(39, 38, 38);
  opacity: 12;
  animation: fadeIn 0.4s ease-in-out forwards;
  border-radius: 30px;




}

.modal-edit {
  position: fixed;
  z-index: 20;
  top: 20%;
  left: 26%;
  width: 40%;
  max-height: 60%;

  background: white;
  padding: 20px;
  border: 1px solid #bbb;
  box-shadow: 2px 2px 6px rgb(39, 38, 38);
  opacity: 12;
  animation: fadeIn 0.3s ease-in-out forwards;
}

.modal-editcontent {
  margin: 20px;

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-header {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 21;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px;
  padding-bottom: 10px;
}

.checkbox-group {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.checkbox-group label {
  margin-right: 10px;
}

.horizontal-label {
  display: inline-block;
  margin-right: 20px;
  font-weight: bold;
  margin-top: 10px;
}

.horizontal-dropdown {
  display: inline-block;
}


.field {
  background-color: rgb(162, 22, 218);
  font-size: 18px;
  color: #ddd;
  margin-top: 20%;
  border-radius: 5px;

}

.option {
  width: 100%;
  padding: 10px;
  border: 2px solid #0a71ab;
  border-radius: 10px;

}

.table-field {
  width: 100%;

}

.mobile-view {
  display: none;
  ;
}

.header .title {
  flex-grow: 1;
}

.desktop-title-text {
  display: inline;
}

.mobile-title-text {
  display: none;
}

@media only screen and (max-width: 900px) {

  .header {
    gap: 30px !important;
  }

  div[style*="height: 1000px;"] {
    height: auto !important;
    /* Apply !important to override inline style */
  }

  .button-text {
    display: none;
  }

  .search-input {


    width: 100%;


  }

  .download {

    font-size: 12px;
    padding: 3px 3px;
    /* Remove padding on mobile view */
  }

  .logout {
    padding: 3px 3px;

  }

  .modal {
    width: 100%;
    top: 0;
    left: 0px;
    height: 100%;
    margin: 0px;
    padding: 0px;
    max-height: none;
  }

  .column-class,
  .data-class {
    display: none;
  }

  .mobile-icons {
    display: inline-block !important;
  }

  .mobile-view {
    display: inline-block;
  }

  .desktop-view {
    display: none;
  }

  #footer {
    background-color: rgb(12, 30, 129);
    color: rgb(255, 255, 255);
    padding: 20px;
    text-align: center;
    font-size: 10px !important;

  }

  .mobile-viewtime {

    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: grey;
  }

  .last-modified {
    display: none;
  }

  .table-content-size {
    font-size: 13px;
  }

  .header .title {
    flex-grow: 1;
  }

  .desktop-title-text {
    display: none;
  }

  .mobile-title-text {
    display: inline;
    font-size: 10px;
  }

  .header .logos {
    width: 25%;
  }

  .delete-button,
  .edit-button,
  #userbutton {
    padding: 8px;

  }

}


@media only screen and (min-width: 901px) {
  .mobile-viewtime {

    display: none;
    margin-top: 5px;
    font-size: 14px;

  }

  .mobile-icons {
    display: none !important;
  }

  .mobile-view {
    display: none;
  }

  .desktop-view {
    display: inline-block;
  }
}

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  cursor: pointer;

}


.public-icon {
  color: #0a71ab;
}

.private-icon {
  color: #f37423;
}


.left-align {
  margin-top: 9px;
  text-align: left;
}


label,
input,
select,
tr,
td {
  font-family: 'Arial', sans-serif;
}

.modal-content {

  padding: 10px;
  overflow: auto;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;

}

body {
  margin: 0px;
}


.add-options-btn {
  background-color: #0a71ab;
  border-radius: 55px;
  margin-top: 10px;
  color: white;
  padding: 10px 25px;
  font-size: 18px;
  border: none;
  cursor: pointer;
}

.add-options-btn:hover {
  background-color: #006699;


}

.close {
  cursor: pointer;
}

.input-container {
  margin-top: 10px;

}

input[type='number'],
option {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #0a71ab;
  border-radius: 10px;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 5px;
}


.date-container {
  display: flex;

  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
}

.date-field {

  margin-right: 10px;
}




.date-field label {
  display: block;
  margin-bottom: 5px;
}

.radio-container {
  display: flex;
  flex-direction: row;
  font-family: Arial, sans-serif;
  margin-bottom: 10px;
}

.radio-container input[type="radio"] {
  margin-bottom: auto;
  /* Align the radio buttons to the baseline */
}


.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f0f0f0;
  height: 9vh;
}

#footer {

  color: rgb(255, 255, 255);
  padding: 7px;
  text-align: center;
  bottom: 0;
  width: 100%;
  position: fixed;
  font-size: 18px;
  background-color: #03A9F4;
  font-family: Arial, Helvetica, sans-serif;
}


.title h1 {
  text-align: center;
  font-family: sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  padding: 10px;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #eee;
  background-color: #03A9F4;
}

.sub-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}


.selectProjectmodal{
  position: fixed;
  z-index: 20;
  top: 20%;
  left: 10%;
  display: flex;
  flex-direction: column;
  width: 70%;
  /* max-height: 60%; */
  overflow: auto;
  background: white;
  padding: 20px;
  border: 1px solid #bbb;
  box-shadow: 2px 2px 6px rgb(39, 38, 38);
  opacity: 12;
  animation: fadeIn 0.4s ease-in-out forwards;
  border-radius: 30px;
}

.role-count-circle {
  width: 120px;
  height: 100px;
  /* background-color: #3498db; */
  color: #a79a11;
  display: flex;
  justify-content: center;
  border: 2px solid #0a71ab;
  align-items: center;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.feature-modal {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 50000;
  top: 15%;
  right: 20px;
  width: 340px;
  max-height: 70%;
  min-height: 70%;
  height: 70%;
  overflow: auto;
  /* Remove the overflow property from here */
  background: white;

  border-radius: 20px;
  box-shadow: 1px 1px 9px rgba(39, 38, 38, 0.4);
  opacity: 2;
  /* Fixing opacity value */
  animation: fadeIn 0.3s ease-in-out forwards;

}
.featureProperties-subdiv {
  margin: 10px;
  flex-grow: 0;
  border: 1px solid #eee;
}
.featureProperties-subdiv-2 {
  display: flex;
  flex-direction: row;
  margin: 20px;
  gap: 5px;
}
.featureProperties-lat-lon {
  display: inline-block;
  width: 140px;
}
strong {
  color: #ff5722;
}
#lightbox {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  border-radius: 40px;
  background: white;
  border: 1px solid grey;
  padding: 10px;
  top: 200px;
  width: 90%;
  box-shadow: 2px 2px 6px rgb(16 68 229);

}

.featureimageLightbox {
  height: 100%;
  width: 50%;
  max-height: 700px;
}

.display-flex {
  display: flex;
}

#featureImages {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
  flex-grow: 0;
  max-height: 750px;
}

@property --angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

:root{
  --d:2500ms;
  --angle:0deg;
  --c1:rgb(20,138,192);
  --c2:rgba(235, 138, 192, 0);
}

.featureimage {
  height: 200px;
  width: 400px;

  border-radius: 20px;
  border: 4px solid rgb(20, 138, 192);
  border-image: conic-gradient(from var(--angle),var(--c2),var(--c1) 0.1turn,var(--c1)0.15turn,var(--c2)0.25turn)1;
  animation: borderRotate var(--d) linear infinite;
  cursor: zoom-in;
  position: relative;
}

@keyframes borderRotate{

  100%{
    --angle:360deg;
  }
}


.custom-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(31, 29, 29, 0.445);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
}

.custom-alert-content {
  background: white;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0p 0px 10px rgba(0, 0, 0, 0.1);
}

.custom-alert-content button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #03A9F4;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


.confirmmodal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  border: 1px solid #bbb;
  box-shadow: 2px 2px 6px rgb(39, 38, 38);
  opacity: 12;
  animation: fadeIn 0.4s ease-in-out forwards;
  border-radius: 30px;
}

.consfirmmodal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.modal-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}