:root{
    /*Brand Colors*/
    --yellow:#f7ae2b;
    --blue:#1D2754;
    
    /*Secondary Colors*/
    --lightBlue:#357ae8;/*#2771E7;*/
    --lace:#fff5e3;
    --red:#af0000;

    /*Neutral Colors*/
    --darkestGray: #333333;
    --darkerGray: #cacaca;
    --gray:#ededed;
    --lightGray:#f0f0f0;
    --darkGray:#c1c1c1;
    
    /*Alert colors*/
    --alertRed:#9f3a38;
    --alertYellow:#f8c71d;
    --alertGreen:#27963f;

    --transition:0.3s ease-out;
}

body{box-sizing: border-box;font-size:62.5%;margin:0;font-family: 'Montserrat', sans-serif;height: 100%;}
a, header .logo img, button span{text-decoration:none;-webkit-transition:0.3s ease-out;transition:0.3s ease-out;}
p, .content li, table{font-size: 1.85em;line-height: 25px; font-weight: 400;}

.alert{padding:20px;}
.alertRed{color: var(--alertRed);}
.alertYellow{color: var(--alertYellow);}
.alertGreen{color: var(--alertGreen);}

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.material-symbols-rounded{vertical-align: middle;}
.notranslate {
            unicode-bidi: isolate;
            direction: ltr;
}

.blueBack{background-color: var(--blue);}
.laceBack{background-color:var(--lace);}
.grayBack{background-color:var(--gray);}
.lightGrayBack{background-color:var(--lightGray);}
.rounded{border-radius: 20px;margin:20px 2%;padding:25px 25px;}

header{display: flex;justify-content: space-between;align-items: center;color:#FFF;}
header .ep311Logo{width:100px;}
header .cityLogo{width:60px;}
header .translate{color:#FFF;width:60px;text-align:right;}
header .translate:hover{color:var(--yellow);}
header .translate span{font-size: 3em;}

.title{margin:40px 4%;display: flex;align-items: center;justify-content: space-between;gap:40px;}

.content{margin:40px 4% 80px 4%;}
.content h1, .title h1{font-size: 4em;}
.content h2, .title h2{font-size: 3em;}
.content h3, .title h3{font-size: 2em;}


/* Main Nav */
.mainNavWrap{position: sticky;bottom:0;display: flex;justify-items: center;left:50%;transform: translateX(-50%);z-index: 995;}
.mainNav{margin-bottom:20px;background-color:var(--blue);padding:20px 40px;border-radius: 50px;}
.mainNav nav{display:flex;justify-content: center;text-align: center;gap:40px;}
.mainNav nav a{color:#FFF;font-size: 1.45em;font-weight: 600;}
.mainNav nav a span{font-size:2em;}
.mainNav nav a:hover{color:var(--yellow);}
.mainNav nav a .message{position: relative;}
.mainNav nav a .message.unread::before{position: absolute;top:0;right:0;content:"";border-radius: 50px;height:12px;width:12px;background-color:var(--yellow);outline:2px solid var(--blue);}


/* Hover button */
.fixed-buttons {
  position: fixed;
  bottom: 10px; /* Adjust this value based on your layout */
  right: 10px; /* Adjust this value based on your layout */
  z-index: 1000; /* Ensure the buttons are on top of other content */
}

.fixed-buttons button {
  margin: 5px; /* Add some margin between buttons */
}

.srOnly {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

h2.greeting{
  font-size: 9em;
  line-height: 90px;
  margin-top: 80px;
  text-transform: none;
}

.gradient{
    background: linear-gradient(45deg, var(--blue), var(--lightBlue), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textGrad 15s ease-in-out infinite alternate;
    padding-bottom: 5px;
}

@keyframes textGrad {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.blocks{display: flex;gap:40px;}
.blocks a.block{flex:1;border-radius: 20px;padding:25px;display: flex;flex-direction: column;color:var(--blue);background-color:var(--gray);justify-content: space-between;}
.blocks a.block p{font-size: 1.75em;font-weight:700;padding-right:20px;}
.blocks a.block span{align-self: flex-end;font-size: 3em;}
.blocks a.block:hover{background-color:var(--blue);color:var(--yellow);}

.requests{margin:0 4%;}
.requests a.requestItem{color:var(--blue);display: flex;align-items: center;border-bottom:1px solid var(--lightGray);padding:20px 10px;}
.requests a.requestItem:last-of-type{border-bottom:0;}
.requests a.requestItem .setWrap{display: flex;flex:1;gap:40px;}
.requests a.requestItem .set{display: flex;flex: 1;gap:40px;align-items: center;}
.requests a.requestItem .set *{flex-basis: 50%;}
.requests a.requestItem h3{font-size: 1.85em;}
.requests a.requestItem img{border-radius: 50%;width:60px;margin-right:4%;}
.requests a.requestItem:hover{background-color:var(--lightGray);}

/* Status Lables*/
.status{padding:5px 10px;border-radius: 8px;font-weight:600;color:#FFF;font-size: 0.90em;white-space: nowrap;}
.submitted{background-color:var(--yellow);}
.duplicate{background-color:var(--darkGray);}
.in-progress{background-color:var(--lightBlue);}
.canceled{background-color:var(--red);}
.completed{background-color:var(--blue);}

.map{margin:0 4%;}

.twoCol {display: flex;gap:80px;margin:40px 4% 80px 4%;}
.twoCol .col{flex-basis: 50%;}
.twoCol.noMargin{margin:0;}

.detailImageWrap{display: flex;justify-content: center;}
.detailImage{width: 500px;height: 500px;text-align: center;}
.detailImage img{width: 500px;height:500px;border-radius: 100%;overflow:hidden;}
.detailImage .slick-dots{bottom: -40px;}
.slick-dots li button:before{font-size:10px;}
.slick-dots li.slick-active button:before{color:var(--lightBlue);opacity: 1;}

.updates .update{margin-bottom:40px;background-color:var(--gray);border-radius: 10px;padding:20px;}
.updates .update h3{margin-bottom: 0;display: flex;align-items: center;gap:5px;color:var(--blue);}
.updates .update h3 .material-symbols-rounded{color:var(--yellow);}
.updates .update h3 .timeStamp{margin-left:auto;font-size: .85em;font-weight:400;}
.updates .update h3 + p {margin-top:10px;}

.loadMore{margin:0 4%;display: flex;justify-content: center;}

button{background-color:transparent;border:0;padding:0;}
button[type=button]:hover{background-color:transparent;}

.filterMap{display:flex;align-items: center;gap:20px;}
.filterMap .sep{background-color:var(--gray);width:2px;align-self: stretch;}
.filterMap button.mapIcon span{font-size:3.5em;color:var(--blue);cursor: pointer;}
.filterMap button.mapIcon span:hover{color:var(--yellow);}
.filterMap .ui.form{display:flex;align-items: center;gap:20px;}
.filterMap .ui.form .field.filterSearch{margin-bottom: 0;display:inline-block;}

.filterMap .ui.form .filterIcon{cursor: pointer;font-size: 2em;color:var(--blue);}
.filterMap .ui.form .filterIcon:hover{color:var(--yellow);}

.filters{display:none;position:fixed;background-color:var(--blue);width:100%;height:100%;top:0;left:0;justify-content: center;z-index:999;}
.filters .filterItems{padding:5% 10%;width:800px;}
.filters .filterItems .close-button{display:block;color:#FFF;cursor: pointer;text-align: right;font-size: 2em;margin-bottom:20px;}
.filters .filterItems .close-button:hover{color:var(--yellow);}
.filters .filterItems button[type=submit]{display:block;margin-top:20px;background-color:var(--yellow) !important;}
.filters .filterItems button[type=submit]:hover{background-color:#FFF !important;color:var(--blue) !important;}
.filters .filterItems label{color:#FFF !important;}

.step{display: none;}

.indicators{text-align:center;margin-bottom:40px;display: flex;justify-content: center;gap:20px;}
.indicator{display: flex;flex-direction: column;align-items: center;}
.indicator .icon{color:var(--darkGray);background-color:var(--gray);border-radius: 100%;padding:15px;}
.indicator .text{font-size:1.65em;font-weight: 600;margin-top:5px;color:var(--darkGray);}
.indicator.active{opacity: 1;}
.indicator.active .icon{color:#FFF;background-color:var(--blue);}
.indicator.active .text{color:var(--blue);}
.indicators .indicatorLine {border-top: 1px solid var(--darkGray);width: 5%;align-self: center;}

.prevNext{margin:20px 0;overflow: auto;display: flex;justify-content: flex-end;}
.prevNext #nextBtn{background-color:var(--blue);color:#FFF;}

.categorySearchWrap{margin-bottom:40px;}
.categories{display: flex;gap:40px;flex-wrap: wrap;flex-direction: column;}
.categories .category summary{border-radius: 20px;padding:25px 25px;margin-bottom: 20px;background-color: var(--gray);list-style: none;display:flex;align-items:center;justify-content:space-between;cursor: pointer;}
.categories .category summary h2, .categories .category summary span{font-size:2em;}
.categories .category summary span[aria-hidden="true"]::before {font-family: 'Material Symbols Rounded'; content: "\e313";font-weight: bold;padding-left: 10px;line-height: 0;}
.categories details[open].category summary span[aria-hidden="true"]::before {font-family: 'Material Symbols Rounded';content: "\e316";}
.categories .category[open] {
  display: block !important;
}
.categories .category .subCategories{display: flex;gap:20px;flex-wrap: wrap;}


 form.requestForm .categories label{
    padding: 25px;
    font-size: 1.65em;
    font-weight: 700;
    color: var(--blue);
    border:3px solid var(--blue);
    border-radius: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: all .2s linear;    
    transition: all .2s linear;
    box-sizing: border-box;
    flex-basis: calc((100% - 60px) / 3);
  }
  
  form.requestForm .categories input[type="radio"]{ display: none; }
  form.requestForm .categories input[type="radio"]:checked + label{background-color:var(--lightBlue);color:#FFF;border-color:var(--lightBlue);}

.uploadContainer {text-align: center;}

#fileInput {display: none;}

#dropArea {
    display: block;
  width: 100%;
  max-width: 500px;
  padding: 40px;
  border: 2px dashed #cccccc;
  border-radius: 10px;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

#dropArea:hover {background-color: var(--lightGray);}

#dropArea p {margin: 0;font-size: 16px;color: var(--darkestGray);}

#fileList {margin-top: 20px;}

.fileItem {
  background-color: #e0e0e0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fileItem span {font-size: 14px;}

.removeBtn {
  background-color: #ff4d4d;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s;
    margin-left:10px;
}

.removeBtn:hover {background-color: #ff1a1a;}

.gisMap{ height: 50vh;width: 100%;}
.gisMap li{font-size:inherit;}

.messages .messageWrap{margin-bottom:40px;display:flex;flex-wrap: wrap;position: relative;}
.messages .message{display: block;align-items: center;background-color:var(--gray);padding:20px;transition: transform 0.2s ease;flex-basis:100%;border-radius: 10px;touch-action: manipulation;overflow-x: visible;}
.messages .message .preview span{display: none;}
.messages .message:hover .preview span{display:block;}
.messages .message:hover .preview span:hover{color:var(--red);}
.messages .messageDelete{position: absolute;right: 0;top: 0;bottom: 0;width:100%;height:100%;background-color:var(--red);color:#FFF;font-size: 3em;display:flex;align-items:center;justify-content:flex-end;padding-right:15px;z-index:-1;border-radius: 12px;}
.messages .message .subjectArea{display:flex;justify-content: space-between;align-items: center;}
.messages .message h2{font-size: 2em; margin-bottom: 0;display: flex;align-items: center;gap:5px;color:var(--blue);font-weight: 600;}
.messages .message .timeStamp{color:#000;margin-left:auto;font-size: 1.55em;font-weight:400;}
.messages .message .preview{display: flex;justify-content: space-between;align-items: center;}
.messages .message p{color:#000;}
.messages .message h2 + p {margin-top:10px;}
.messages .message.newMessage .subject h2::before{content:"";height: 12px;width: 12px;background-color: var(--lightBlue);border-radius: 50%;display: inline-block;}
.messages .message.newMessage *{font-weight: bold;}
.messages .message:hover{background-color: var(--darkGray);}

.messageDetail .timeStamp{font-size: 1.55em;}
.messageDetail .messageActions{display: flex;justify-content: flex-end;}
.messageDetail .messageActions .delete:hover{color:var(--red);}

footer{margin-top:120px;}
footer p.copy{font-size: 1.35em;margin:0;text-align: center;}
footer p.copy a{color:var(--blue);}
footer p.copy a:hover{color:var(--lightBlue);}

@media screen and (min-width: 1000px){
    .rounded{margin:20px 4%;}
}

@media screen and (max-width: 1024px){
    .twoCol {flex-direction: column;}
    .twoCol .col{flex-basis: 100%;}
}

@media screen and (max-width: 600px) {
    h2.greeting{font-size: 13vw;font-weight: 800;line-height: 100%;}
    .blocks{flex-wrap: wrap;gap:20px;}
    .title{flex-direction: column;gap:0;align-items: flex-start;}
    .title form{width:100%;}
    .requests a.requestItem .setWrap{flex-direction: column;gap:0;}
    .requests a.requestItem .set{gap:0;}
    .requests a.requestItem .set *{flex-basis: 100%;margin-top:5px;margin-bottom:5px;}
    .requests a.requestItem h3{margin-bottom:0;}
    .requests a.requestItem h3, .requests a.requestItem p{font-size: 1.55em;}
    .detailImage{width: 350px;height: 350px;}
    .detailImage img{width: 350px;height:350px;}
    .filters{align-items: center;}
    .messages .message:hover .preview span{display: none;}
}

.popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 80%;
  max-width: 400px;
}

.fadeIn {
  animation: fadeIn 0.5s forwards;
}

.fadeOut {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.loading-spinner {
  display: none; /* Hide by default */
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  align-items: center;
  justify-content: center;
  flex-direction: column; /* Arrange children vertically */
  z-index: 1000; /* Ensure it appears above other content */
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.spinner-text {
  color: #fff;
  margin-top: 10px; /* Space between spinner and text */
  font-size: 16px;
  text-align: center; /* Center text horizontally */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Skeleton Loader */
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-item {
  height: 20px;
  background-color: var(--gray);
  border-radius: 4px;
  width: 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Create varying widths for a more natural loading feel */
.skeleton-item:nth-child(1) {
  width: 80%;
}

.skeleton-item:nth-child(2) {
  width: 90%;
}

.skeleton-item:nth-child(3) {
  width: 70%;
}
.ui.form textarea[disabled] {
  background-color: var(--lightGray);
  color: #bbb7b7;
  cursor: not-allowed;
}
.ui.button[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}
.ui.form textarea[disabled]::placeholder {
  color: #000000;
  font-style: italic;
}

/* Animation */
@keyframes skeleton-loading {
  0% {
      background-color: var(--gray);
  }
  50% {
      background-color: var(--lightGray);
  }
  100% {
      background-color: var(--gray);
  }
}