/*********** Z-INDEX VALUES***********
  THE FOLLOWING IS A REFERENCE FOR THE Z-INDEX VALUE FOR VARIOUS PAGE ELEMENTS 
  TO ENSURE THAT NEW ELEMENTS HAVE THEIR VALUE SET CORRECTLY */

/* 999999 */
/* #wb-sm .menu (navigation menu) */

/* 600000 */
/* #session-timeout-popup.wb-popup-mid  (session timeout popup) */
/* .fsSessionPopup */

/* 580000 */
/* .fsMetaPopup (draw map - metadata modal) */
/* #meta-popup.wb-popup-mid */
/* .fsSitePopup (edit site marker modal) */
/* #site-popup.wb-popup-mid */
/* .fsRoutePopup (edit route modal) */
/* #route-popup.wb-popup-mid */
/* .fsTowerPopup (edit circle coverage modal) */
/* .fsErrorNoConfirmationPopup (draw errors modal on map) */

/* .wb-popup-mid (confirmation modals) */
/* #confirmationMessages.wb-popup-mid */
/* #uploadRequestPopup.wb-popup-mid */
/* #uploadRequestPopup.wb-popup-full */
/* #requestStepOnePopup.wb-popup-mid */
/* #requestStepOnePopup.wb-popup-full */
/* #confirmDeleteResponse */
/* #deletePopup.wb-popup-mid */


/* 550000 */
/* #validating-overlay (overlay when navigating from file upload to file validation page in elig. tool) */
/* #loading-overlay (loading spinning wheel/gray screen) */
/* .fsLoadingOverlay */

/* 500000 */
/* #layerSelection .panel-body(layer selection panel) */

/* 5000 */
/* .dropdown-content (projectSelector) */
/* .layer-actions (project [adhoc layer] actions menu) */

/* 2008 */
/* .popoverContainer[data-popover] > div.popoverContent (save coverage/draft popup) */

/* 2003 */
/* .modal-header--sticky (submitted applications modals) */
/* .modal-footer--sticky */
 

/* 2000 */
/* .fsMetadataNotFull (metadata panel in drawing toolbar) */
/* .fsbtnToolbarNotFull (toolbar button) */

/* 1999 */
/* .roadPopZoomAlert (populated/large area zoom in for roads msg) */
/* .fsAlertNote (zoom in for roads - on map load) */

/* .fsBtnContainerLegend (full-screen map buttons for search/layers/area info) */
/* .fsBtnContainerLegendFull */
/* .fsBtnContainerLegendNotFull */
/* .fsBtnContainerLegendNotFull.item-hide */

/* .fsSearchNotFull (search panel) */
/* .fsSearchNotFull.item-hide */

/* .fsAreaInfoFull  (area information panel) */
/* .fsAreaInfoNotFull  */
/* .fsAreaInfoFull.item-hide  */
/* .fsAreaInfoNotFull.item-hide */

/* .fsMetadataChosenNotFull (no metadata entered banner on map- draw) */
/* .fsMetadataChosenNotFull.item-hide */

/* .fsToolbarNotFull (toolbar panel) */
/* .fsToolbarNotFull.item-hide */

/* .fsMetadataNotFull.item-hide (metadata panel in drawing toolbar) */

/* .fsLayerLegendNotFull.item-hide (layer selector) */

/* 1998  */
/* .fsLayerLegendNotFull(layer selector) */

/* 1800 */
/* .fsInternalData (internalDataBanner) */

/* 900 */
/* #layers (layer select warning) */

/* 4 */
/* .loading-icon (spinning wheel) */

/* 2 */
/* #files  (file upload) */




/* File validation styling */

#validating-overlay .alert{
	background-color: #fcf8e3;
}

.fsColorPickerFull {
	top: 555px;
	left: 153px;
}

#ValidationResultsTitle {
	margin-left: 10px;
	font-size: 24px;
}

#gaddress {
	margin-top: 0;
}

.validationHeader { text-align:center; }

#zoomRequired .alert {
	position: relative;
}

/* Layer selector Styling */
#layerSelection header.main {
	background-color: #38414d;
	color: #ffffff;
	cursor: pointer;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 6px 15px;
}

#layerSelection header.main h3,
#layerSelection header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#layerSelection .h3 { margin-bottom:5px; }
#layerSelection .h5 { margin-top:0; }
#layerSelection header button { color: #ffffff; }
#layerSelection table tb li { vertical-align: middle; }
#layerSelection table .list-inline>li { vertical-align: middle; }


/* Metadata group settings Styling  */
#metadataGroupSettings header.main {
	background-color: #38414d;
	color: #ffffff;
	cursor: pointer;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 6px 15px;
}

#metadataGroupSettings header.main h3,
#metadataGroupSettings header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#metadataGroupSettings .h3 { margin-bottom:5px; }
#metadataGroupSettings .h5 { margin-top:0; }
#metadataGroupSettings header button { color: #ffffff; }
#metadataGroupSettings table tb li { vertical-align: middle; }
#metadataGroupSettings table .list-inline>li { vertical-align: middle; }


/* Rural road coverage styling */
#ruralRoadCoverage header.main {
	background-color: #395075;
	color: #ffffff;
	padding: 6px 15px;
}

#ruralRoadCoverage header.main h3,
#ruralRoadCoverage header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#ruralRoadCoverage .h3 { margin-bottom:5px; }
#ruralRoadCoverage .h5 { margin-top:0; }
#ruralRoadCoverage header button { color: #ffffff; }
#ruralRoadCoverage table tb li { vertical-align: middle; }
#ruralRoadCoverage table .list-inline>li { vertical-align: middle; }


/* Aggregated presentation Styling */
#aggregatedPresentation header.main {
	background-color: #5676B4;
	color: #ffffff;
	padding: 6px 15px;
}

#aggregatedPresentation header.main h3,
#aggregatedPresentation header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#aggregatedPresentation .h3 { margin-bottom:5px; }
#aggregatedPresentation .h5 { margin-top:0; }
#aggregatedPresentation header button { color: #ffffff; }
#aggregatedPresentation table tb li { vertical-align: middle; }
#aggregatedPresentation table .list-inline>li { vertical-align: middle; }


/* Other supported layers styling */
#otherSupportedLayers header.main {
	background-color: #6825C0;
	color: #ffffff;
	padding: 6px 15px;
}

#otherSupportedLayers header.main h3,
#otherSupportedLayers header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#otherSupportedLayers .h3 { margin-bottom:5px; }
#otherSupportedLayers .h5 { margin-top:0; }
#otherSupportedLayers header button { color: #ffffff; }
#otherSupportedLayers table tb li { vertical-align: middle; }
#otherSupportedLayers table .list-inline>li { vertical-align: middle; }


/* Project selection styling */
#projectSelection header.main {
    background-color: #065656;
    color: #ffffff;
    padding: 6px 15px;
}

#projectSelection header button { color: #ffffff; }

#projectSelection header.main h3,
#projectSelection header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#projectSelection .h3 { margin-bottom:5px; }
#projectSelection .h5 { margin-top:0; }
#projectSelection table tb li { vertical-align: middle; }
#projectSelection table .list-inline>li { vertical-align: middle; }


/* Location search Styling */
#locationSearchContainer header.main {
	background-color: #38414d;
	color: #ffffff;
	cursor: pointer;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 6px 15px;
}

#locationSearchContainer header.main h3,
#locationSearchContainer header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#locationSearchContainer .h3 { margin-bottom:5px; }
#locationSearchContainer .h5 { margin-top:0; }
#locationSearchContainer header button { color: #ffffff; }
#locationSearchContainer table tb li { vertical-align: middle; }
#locationSearchContainer table .list-inline>li { vertical-align: middle; }


/*Area information Styling*/
#areaInformation header.main {
	background-color: #38414d;
	color: #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 6px 15px;
}

#areaInformation header.main h3,
#areaInformation header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#areaInformation header.main h3 {
    padding-top: 0.3rem;
}

#areaInformation .h3 { margin-bottom:5px; }
#areaInformation .h5 { margin-top:0; }
#areaInformation header button { color: #ffffff; }
#areaInformation table tb li { vertical-align: middle; }
#areaInformation table .list-inline>li { vertical-align: middle; }


/* Mobile eligible coverage styling */
#mobileEligibleCoverage header.main {
	background-color: #395075;
	color: #ffffff;
	padding: 6px 15px;
}

#mobileEligibleCoverage header.main h3,
#mobileEligibleCoverage header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#mobileEligibleCoverage .h3 { margin-bottom:5px; }
#mobileEligibleCoverage .h5 { margin-top:0; }
#mobileEligibleCoverage header button { color: #ffffff; }
#mobileEligibleCoverage table tb li { vertical-align: middle; }
#mobileEligibleCoverage table .list-inline>li { vertical-align: middle; }


/* Eligible coverage Styling */
#eligibleCoverage header.main {
	background-color: #395075;
	color: #ffffff;
	padding: 6px 15px;
}

#eligibleCoverage header.main h3,
#eligibleCoverage header.main button {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#eligibleCoverage .h3 { margin-bottom:5px; }
#eligibleCoverage .h5 { margin-top:0; }
#eligibleCoverage header button { color: #ffffff; }
#eligibleCoverage table tb li { vertical-align: middle; }
#eligibleCoverage table .list-inline>li { vertical-align: middle; }
.buttonSelected { background-color: #ffffff; }

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#coverageTable.table-responsive {
   overflow-x: hidden;
}

.initialSave {
	margin-left: -5px;
	padding-left: 0;
}

#layers { height: auto; }

#drawMap .btn-toolbar.buttonGroup>.btn.initialSave, 
.btn-toolbar.buttonGroup>.btn-group.initialSave, 
.btn-toolbar.buttonGroup>.input-group.initialSave {
    margin-left: 0;
    padding-left: 0;
}

/* Basic styling for the panel containers */
#btnSearchSelector,
#btnMetadataGroupSettings,
#btnlayerSelector,
#btnAreaInformation {
	background-color: #38414d;
	color: #ffffff;
	cursor: pointer;
	padding: 1rem;
	width: 56px;
    height: 56px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#btnMetadataGroupSettings { background-color: #38414d; }

/* Reset the font size for the comtainer span */
#btnSearchSelector,
#btnMetadataGroupSettings span,
#btnlayerSelector span,
#btnAreaInformation span {
	font-size: 1.5em;
}

/* Reset the background color for the Hover for the panel */
#btnSearchSelector:hover,
#btnMetadataGroupSettings:hover,
#btnlayerSelector:hover,
#btnAreaInformation:hover,
#btnMetadataGroupSettings:hover {
	background-color: #2F4765;
}

/* Reset margin bottom for the main map container panels */
#aggregatedPresentation,
#ruralRoadCoverage,
#otherSupportedLayers,
#projectSelection,
#eligibleCoverage {
	margin-bottom: 5px;
}

/* Change cursor to pointer for all map panel headers */
#areaInformation header,
#aggregatedPresentation header,
#ruralRoadCoverage header,
#otherSupportedLayers header
#layerSelection header,
#projectSelection header,
#metadataGroupSettings header,
#locationSearchContainer header {
	cursor: pointer;
}

/* Reset box shadow for .thumbnail */
#areaInformation .thumbnail,
#areaInformation .thumbnail:active,
#areaInformation .thumbnail:focus,
#areaInformation .thumbnail:hover {
	box-shadow: none!important;
	-webkit-box-shadow: none!important;
	border: none!important;
}

/* Reset box shadow for container panel containers */
#layerSelection.panel,
#ruralRoadCoverage.panel,
#otherSupportedLayers.panel,
#aggregatedPresentation.panel,
#eligibleCoverage.panel,
#mobileEligibleCoverage.panel,
#metadataGroupSettings.panel,
#locationSearchContainer.panel {
	box-shadow: none!important;
	-webkit-box-shadow: none!important;
}

/* Reset margin bottom for metadatagroupsettings panel container*/
#metadataGroupSettings.panel { 
	margin-bottom: 0; 
	width: 705px;
}


/* Specific styling reset for layer selection panel */
#layerSelection legend { font-size: 18px; }

#layerSelection label {
    font-weight: normal;
    padding-left: 0;
}


/* Specific styling resets for location search panel container*/
#locationSearchContainer #locationSearchInfoBody { display: block; }


.fade-in {
	opacity: 1;
	animation-name: 1;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

.fade-out {
	opacity: 1;
	animation-name: 0;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-duration: 2s;
}

.buttonSelected { background-color: white; }

.toolbarSelected {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.toolbarDismiss {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

.toolbarSelectedAreaInfo {
  animation: slide-up 0.5s forwards;
  -webkit-animation: slide-up 0.5s forwards;
}

.toolbarDismissAreaInfo {
  animation: slide-down 0.5s forwards;
  -webkit-animation: slide-down 0.5s forwards;
}

.toolbarSelectedMetadataGroup {
   animation: slide-up 0.5s forwards;
  -webkit-animation: slide-up 0.5s forwards;
}

.toolbarDismissMetadataGroup {
  animation: slide-down 0.5s forwards;
  -webkit-animation: slide-down 0.5s forwards;
}

#areaInfoToggle .checkbox input { margin-left: 0; }

#areaInfoToggle .checkbox {
	border-top: 0.1em solid #000;
	padding-top: 1em;
}

#undoSection { margin-left: 0.3em; }

#undoSection button {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

#enableAreaInfo {
	border-left: 0.1em solid #000;
	margin-left: 0.3em;
}

#enableAreaInfo button {
	margin-left: 1em;
	margin-right: 0.5em;
}

.sitePurposeCheck { margin-top: -5px; }



/* Mapmode styling */

#mapMode legend { margin-bottom: 0; }
#mapMode button.active { background-color: #ffffff; }
#mapMode h3 { margin-top: 0; }
.hideItem { display: none; }

/* Toolbar navigation styling */
nav#toolbarNavigation {
   background: #ffffff;
   border: 0.11em solid #000000;
   display: block;
   width: auto;
   height: auto;
   padding: 0.3em;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   margin: 0 0 20px 0;
}

nav#toolbarNavigation  ul {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
}

nav#toolbarNavigation li {
   color: #fff;
   padding: 0;
   text-decoration: none;
   transition-duration: 0.5s;
   margin: 0;
   display: inline-block;
}

nav#toolbarNavigation  ul li input { vertical-align: middle; }
nav#toolbarNavigation  li a { color: #fffff; }

nav#toolbarNavigation  li:hover {
  background: transparent;
  cursor: pointer;
}

nav#toolbarNavigation  li ul.editing {
  display:list-item;
  margin: 0;
  padding: 0;
  background: #ccc;
  padding: 0.2em 0 0.2em 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

nav#toolbarNavigation li ul.editing li:first-child {
  border-left: 0.3em solid #000;
  padding-left: 0.5em;
}

 nav#toolbarNavigation li ul.editing li:last-child {
   margin-left: 0;
   margin-right: 0.5em;
 }
 
  
/* Map button toolbar styling */
#btnToolbarTools {
	background-color: #38414d;
	color: #ffffff;
	cursor: pointer;
	padding: 1rem;
	width: 56px;
    height: 56px;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#btnToolbarTools:hover { background-color: #2F4765; }
#btnToolbarTools span { font-size: 1.5em; }


/* Metadata selector styling */
#metadataGroupSelectContainer {
	background-color: #f1f1f1;
	padding: 1em;
}

#metadataSelector select {
  background: #fff;
  border: 0.1em solid #000;
  padding: 0.4em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#metadataNoSelection span.label-warning { padding: 0.8em; }

#metadataSelectedGroup #selectedGroup {
	background-color: #ffffff;
  	-webkit-border-radius: 3px;
  	-moz-border-radius: 3px;
  	border-radius: 3px;
  	padding: 1.5rem;
  	border: 0.1em solid #000;
}

#metadataDropdown .btn { text-align: left; }
#metadataDropdowndMenu .btn { text-align: center; }

#metadataDropdowndMenu {
	list-style-type: none;
    padding: 0.3em;
    border: 0.1rem solid #000;
    margin-top: 0.3em;
    overflow-y: scroll;
    background-color: #ffffff;
}

#metadataDropdowndMenu li {
	margin-bottom: 0.3rem;
	padding: 0.5rem;
	border-bottom: 0.1rem solid #000;
}

#metadataDropdowndMenu li:first-child { margin-bottom: 0; }
#metadataGroupSettings .alert>:first-child:before { position: relative; }

#metadataDropdowndMenu .btn { padding: 0; }

#metadataGroupList {
    display: block;
    padding: 0; 
}

#metadataGroupList ul {
	list-style: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
}

#metadataGroupList li {
    padding: 0 1rem 1rem 1rem!important;
    border-bottom: 0.1rem solid #000000;
    margin-bottom: 1rem;
    display: table-row!important;
}

#metadataGroupList li .form-group { 
	margin-bottom: 0;
	margin-top: 1rem;
}

#metadataGroupList li:last-child { border-bottom: none; }
#metadataGroupList li label { color: #000000!important; }
#metadataGroupList li input { margin-left: 0; }

#metadataGroupContainer {
	overflow-y: scroll;
    max-height: 22vh;
    width: auto;
    overflow-x: hidden;
    display: contents;
    border: 0.1rem solid #000;
    padding: 1rem;
}

#metadataGroupActions {
	border-bottom: 0.1rem solid #000;
	display:block; 
	padding-bottom: 1rem;
	padding-top: 1rem;
	height: 40px;
}

.siteIdMissing { font-style: italic;
 }


#layerActionBtn,
#projectLayerActionsContainer button.btn {
	text-align: left;
}

#projectLayersContainer {
	width: 100%;
}

/*#projectLayerActionsContainer {
  flex-wrap: wrap;
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  padding: 10px;
  z-index: 5000;
  width: inherit;
}*/


#layerActionsContainer h3 {
  margin: 0;
}

#layerActionsContainer p {
  margin: 5px 0;
}


/* Address/location container styling */
#addressContainer .description { font-style: italic; }
#addressContainer #searchBar input[type="submit"] { content: '\f002'; }

#btnGeoSearch, #projectButton, #btnCurrentLocation, #searchMoreInfo { padding: 0 14px; }


/* Reset background colour for Internal data */
.internalData {
  background-color: #A84307!important;
}


/* Panel animations */
@keyframes slide-in {
  0% {
    left: 0;
  }
  100% {
    left: 100;    
  }
}

@-webkit-keyframes slide-in {
  0% {
    left: 0;
  }
  100% {
    left: 100%;    
  }
}

@keyframes slide-out {
  0% {
    left: 0;
  }
  100% {
    left: 100;    
  }

}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(100%);
  }
}


/* slide up and down */
@keyframes slide-up {
  0% {
    -webkit-transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

@-webkit-keyframes slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes slide-down {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

@-webkit-keyframes slide-down {
  0% {
    -webkit-transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(100%);
  }
}


/* slide up and down */
@keyframes up {
  0% {
    -webkit-transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

@-webkit-keyframes up {
  0% {
    -webkit-transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

@keyframes down {
   0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

@-webkit-keyframes down {
   0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.fsBtnContainerLegendNotFull { margin: 150px 80px 0 10px; }
	.fsSearchNotFull { top: 150px; }
	.fsLayerLegendNotFull { top: 212px; }
	
	.fsToolbarNotFull {
	    top: 79px;
	    left: 75px;
	}
	
	.fsbtnToolbarNotFull {
	    top: 78px;
	    left: 10px;
	}
	
	.fsMetadataChosenNotFull {
	    top: 8px;
	    left: 230px;
	}
}

@media (max-width: 1199px) {
	
	nav#toolbarNavigation {
		width: 600px;
	}
	
	#metadataGroupSettings.panel {
		width: auto;
	}
}

@media (max-width: 991px) {
	
	nav#toolbarNavigation {
		width: auto;
	}
	
	#metadataGroupSettings.panel {
		width: auto;
	}
}

/* Start of styles for project listings */

#projectListDiv .internal {
  font-family: 'Font Awesome 6 free';
  font-weight: 900; /* Adjust font weight as needed */
  font-size: 16px; /* Adjust font size as needed */
  padding: 5px; /* Adjust padding as needed */
  width: 200px; /* Adjust width as needed */
}

#projectListDiv option.internal::before {
  font-family: 'Font Awesome 6 free';
  content: attr(value);
  padding-right: 5px; /* Adjust spacing between icon and text */
}

#projectListDropdown {
      width: 100%;
      height: auto;
      /*display: block;
      position:relative;*/
}

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
  /*background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;*/
  font-size: 16px;
  padding: 14px 20px 14px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}
     
/*.project-list-dropdown {
	position: relative;
	display: inline-block;
}*/
      
#projectListDiv {
	
	height: 205px;
	min-width: 150px;
	max-height: 500px;
	width: auto;

}
 
.dropdown-content {
   display: none;
   position: absolute;
   z-index: 5000;
   flex-wrap: wrap;
   position: absolute;
   justify-content: flex-start;
   direction: ltr;
      
   overflow-y: scroll;
   overflow-x: hidden;
   scroll-behavior: smooth;
   padding: 0.3em;
   border-radius: 5px;
   border: 1px solid #ddd;
   background-color: #f6f6f6;
   
   width: inherit;
   height: inherit;
   min-width: inherit;
   max-height: inherit;
   top: inherit;
   left: inherit;
}
    
.dropdown-content a {
    color: black;
    padding: 0.3em;
    text-decoration: none;
    display: block;
    width:100%;
}
      
.dropdown-content a:hover {background-color: #ddd;}
   
.project-list-dropdown a:hover {background-color: #ddd;}

.project-list-show {display: flex;}

/* End of styles for project listings */


.search-bar {
  position: relative;
}

.search-bar .filterProjectIcon {
  position: absolute;
  top: 47%;
  left: 10px;
  transform: translateY(-50%);
}

.search-bar .input-text {
   width: 0px;
   border: 0px;
   background-color: #fff;
   height: 20px;
   padding: 8px 8px 8px 35px;
   -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;
 }

.search-bar .input-text:focus {
  width: 80%;
  background-color: #ccc;
}