.header-bar {
  display: flex;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  padding-left: 0 !important;
}
.card-container2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  padding-left: 0 !important;
}

.card {
  list-style: none !important;
  background: white;
  box-shadow: 0px 0px 0px lightgray;
  border-radius: 0.3em;
  position: relative;
  height: fit-content;
  min-height: 15px;  
}
.card-content {
  padding: 0em;
  gap: 1em; border : none  ;
}

.icon-title-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.icon-title {
  font-size: 1.18rem;
  margin: 0;
  padding: 0;
}
hr.border-light {
  display: block;
  width: 100%;
  margin: 0.42em 0;
  height: 2px;
  background: linear-gradient(90deg, #e3e3e352, #8b8b8b47,  #e3e3e36b);
  border: 0;
}
.project-description.truncated {
 overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.read-more-project {
  width: fit-content;
  border: 0;
  padding: .3rem;
}
.phase {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-left: 0.5em;
}
.phase p {
  padding: 0;
  margin: 0;
}
.phase i {
  font-size: 1.3rem;
}
.phase strong.planned {
  color: #1395d3;
}
.phase strong.underway {
  color:  #f26723;
}
.phase strong.complete {
  color:    green;
}
/*.active {
  position: absolute;
  right: 5px;
  height: 20px;
  z-index: 20;
  top: 10px;
}*/

.search-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 25em;
}

.search-form ul {
  padding-left: 1em;
  margin-left: 0;
}

.search-form input {
  padding: 4px 4px 4px 40px;
  border: 1px solid #555;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E")
    no-repeat 13px center;
  border-radius: 4px;
  outline: none;
  width: 100%;
}

.search-form input:focus-visible {
  box-shadow: 2px 4px 10px #0000007d;
  outline: #3838bba1 solid 2px;
}

@media (max-width: 1920px) {
  .card-container {   grid-template-columns: repeat(3, 1fr);     }
}

@media only screen and (max-width: 1450px) {
  .card-container {    grid-template-columns: repeat(3, 1fr);  }
}

@media only screen and (max-width: 1150px) {
.card-container {    grid-template-columns: repeat(2, 1fr);  } 
.card-container2 {    grid-template-columns: repeat(1, 1fr);
  }
}

@media only screen and (max-width: 800px) {
.card-container { grid-template-columns: repeat(1, 1fr); }
.card-container2 { grid-template-columns: repeat(1, 1fr); } 
.search-form { width: 100%;   }
}

/* 26 nov */
@media only screen and (max-width: 600px) {
.card-container { grid-template-columns: repeat(1, 1fr); margin: 0 8% ; }
.card-container2 { grid-template-columns: repeat(1, 1fr); } 
}

@media only screen and (max-width: 400px) {
.card-container { grid-template-columns: repeat(1, 1fr); margin: 0 0 ;  }
.card-container2 { grid-template-columns: repeat(1, 1fr); } 
}




.search-item-holder {
  margin-right: 10px;
  margin-left: 10px;
}

.search-button {
  padding: 5px 1em 5px 1em;
  border: 1px solid black;
  border-radius: 5px;
  color: #565656;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 1px 2px 12px #80808038;
}

.search-button:hover {
  background: green;
  transition: 0.2s;
  color: white;
  border: #3838bba1 solid 1px;
}

button {
  cursor: pointer;
}

@media only screen and (max-width: 765px) {
  .search-form input {
    margin-bottom: -12px;
  }
}

.top-searches {
  margin: 0 0 0 1em;
  display: flex;
  align-items: center;
  margin-right: 10px;
  white-space: nowrap;
}

.flex-wrap-break {
  display: flex;
  list-style: none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: auto;
}

.display-none {
  display: none;
}

.display-flex {
  display: flex;
  flex-wrap: wrap;
}

.section-container {
  padding: 0 0 0 0;
}

@media only screen and (max-width: 700px) {
  .search-item-holder {
    margin: 0.5em 2px 0.5em 2px;
  }
  .flexmargin {
    flex: none;
    margin-left: 0px;
  }
  .display-flex {
    display: block !important;
  }
  .flex-wrap-break {
    display: -ms-flexbox;
    width: 100%;
    flex-wrap: wrap;
  }
  .top-searches {
    margin: 0;
  }
  .flex-wrap-break div {
    flex: 0 0 33.333%;
  }
  .section-container {
    padding: 0 0 0 0;
  }
}

.subnav { background : transparent !important ;
  display: flex;
  list-style: none !important; 
   align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  margin-left: 0 !important;
  padding-left: 0 !important;
  flex: 1;
}

.subnav li {
margin : 0 0 10px 0 !important ; 
}

.subnav li a {
  padding: 0.3em 0.8em 0.3em 0.8em;  
  position: relative;
  border-radius: 0.1rem;
  text-decoration: none !important; 
}
.uk-active a {
    background: #36a166; /* bg-button */
    background: linear-gradient(180deg, rgba(54, 161, 102, 0.45) 0%, rgba(43, 128, 80, 1) 100%) ;
	
  color: whitesmoke !important;  border-radius : 13px !important;  box-shadow: 0px 10px 10px -3px rgba(0, 0, 0, 0.3);
}

.card-content {position:relative;}
.ribbon{width:188px;height:188px;position:absolute;top:-8px;right:-8px;overflow:hidden;color:#fff; font-size:14px;}
.ribbon:before,.ribbon:after{content:"";position:absolute}
.ribbon:before{width:40px;height:8px;right:100px;background:Gray;border-radius:8px 8px 0 0}
.ribbon:after{width:8px;height:35px;right:0;top:100px;background:Gray;border-radius:0 8px 8px 0}
.ribbon span {width:200px;height:35px;line-height:35px;position:absolute;top:30px;right:-50px;z-index:2;overflow:hidden;-webkit-transform:rotate(45deg);transform:rotate(45deg) ;
 background: linear-gradient(  SeaGreen  0%, DarkSeaGreen 100%) ; text-align:center}