/* State and Community Map Page Styles */

/*---------------------------------------------
    General Styles
 ----------------------------------------------*/

.site-header {
  box-shadow: 0 5px 8px rgba(19, 64, 116, 0.3);
  background: #004e6b;
    background-position-x: 0%;
    background-repeat: repeat;
    background-image: none;
    background-size: auto;
    background-origin: padding-box;
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: border-box;
  background-position-x: 200px;
  background-image: url(https://www.pire.org/wp-content/uploads/2020/09/PIRE-web-header-bg.svg);
}

.wp-custom-logo .title-area img {
  width: 180px;
  padding: 15px 0;
}


/*---------------------------------------------
    Map Specific Styles
 ----------------------------------------------*/

    @media (max-width:767px){
        #title-bar h1{
            text-align:left;
        }
    }


	.lead{
		font-weight:normal !important;
		font-size:1.5em;
		line-height:1.2em;
		margin-bottom: 30px;
		margin-top:15px;
	}
	
    #browse-menu{
    }
    
    #browse-menu .btn{
        border-radius:6px !important;
        margin-bottom:10px !important;
        text-transform: none !important;
        white-space: normal;
    }
	
	g path.map-state, g polygon.map-state, g rect.map-state {
		/*fill:#E6E6E6;*/
		fill: #E6E6E6;
	}
	g path.map-text{
		/*fill:rgb(180,180,180);*/
		fill:rgb(180,180,180);
	}
	
    g.active path.map-state, g.active polygon.map-state, g.active rect.map-state, #national-button.active, #territory-button.active {
	    /*fill: rgb(43,171,97);*/
	    fill: rgb(43,171,97);
	    background-color: rgb(43,171,97);
    }

    g.active path.map-text, #national-button.active, #territory-button.active {
	    /*fill: #FFF;*/
	    fill: #FFF;
	    color: #FFF;
    }	

    g.active:hover path.map-state, g.active.overlay:hover path.map-state, g.active:hover polygon.map-state, g.active.overlay:hover polygon.map-state, g.active:hover rect.map-state, g.active.overlay:hover rect.map-state, #national-button.active:hover, #national-button.active.overlay:hover, #territory-button.active:hover, #territory-button.active.overlay:hover  {
	   /*fill: #FC0;*/
	    fill: #FC0;		
	    background-color: #FC0;
	    color:#000;
    }

    g.active:hover path.map-text, g.active.overlay:hover path.map-text {
	   /* fill: #000;*/
	    fill: #000;
    }
	
	g.active.overlay path.map-state, g.active.overlay polygon.map-state, g.active.overlay rect.map-state, #national-button.active.overlay, #territory-button.active.overlay{
		/*fill: rgb(204,51,102);*/
		fill: rgb(255,102,0);
		background-color:rgb(255,102,0);
	}
	
	g.active.overlay path.map-text, #national-button.active.overlay, #territory-button.active.overlay {
		/*fill: #FFF;*/
		fill: #FFF;
		color: #FFF;
	}	
	

    .modal-dialog{
        width: 80%;
        max-width: 1200px;
    }
	
	.modal-header{
		background-color:rgba(0, 102, 147, 1);
	}
	
	.modal-header h2{
		color:white !important;
		font-weight:bold !important;
	}
	
	.modal-content{
		border: none !important;
	}
	

    #bio-modal .modal-dialog,  #project-modal .modal-dialog{
        width: 70%;
        max-width: 900px;
		border:50px solid rgb(43,171,97);
    }
	

    #browse-experts-modal .modal-dialog{
        width: 60%;
        max-width: 900px;
    }
	

    .modal-dialog table{
        width: 100%;
    }
    .modal-dialog table td{
        padding: 8px;
    }
    .modal-dialog table tr:first-child td{
        text-align: center;
    }
    .modal-footer .btn.btn-default, .filter-box  .btn.btn-default{
        color: white;
    }
    .modal-footer .btn-default:hover, .filter-box  .btn-default:hover{
        color: #333333;
		background-color:rgb(212,212,212);
    }

    .projects-table td{
        padding:10px;
        text-align:left !important;
    }
    .projects-table tr:first-child{
        background-color: beige;
        font-weight:bold;
    }
    #map-regions a{
       /* width:200px;*/
        padding:12px 24px;
        margin-bottom:20px;
        text-transform: uppercase;
        letter-spacing:.6px;
    }
	
	#national-button, #territory-button {
		display:inline-block;
		margin-left:290px;
		border-radius:24px;
		color:rgb(180,180,180);
		text-decoration::none;
		font-weight:bold;
		background-color: #e6e6e6; 
	}
	
	#national-button:hover, #territory-button:hover{
		text-decoration:none;
	}
	
	#results-message, #product-results-message{
		background-color:rgba(252, 255, 153, 1);
	}
	
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/*---------------------------------------------
    Responsive Modal and Filter Display
 ----------------------------------------------*/

.results-container {
  display: grid;
  grid-template-columns: 30% 14% 14% 14% 14% 14%;
  gap: 0;
  background-color: #ededed;
  padding: 0;
  margin: 0;
  line-height: 1.3;
}

.filter-box {
  display: grid;
  grid-template-columns: 30% 10% 10% 10% 15% 10% 15%;
  gap: 0;
  background-color: #ededed;
  padding: 0;
  margin: 0;
  line-height: 1.3;
  margin: 0 auto;
  max-width: 90%;
}

.filter-box div {
  background-color: #fff;
  border: solid 1px #ddd;
  padding: 10px;
  font-size: 16px;
  text-align: left;
}

.filter-input-bar {
  display: grid;
  grid-template-columns: 18% 18% 18% 18% 14% 14%;
  gap: 0;
  background-color: #ededed;
  padding: 0;
  margin: 0;
  max-width: 90%;
  margin: 0 auto;
  line-height: 1.3;
  margin-top: 60px;

}

.filter-input-bar div {
  background-color: #fff;
  font-size: 16px;
  text-align: left;
}

.filter-input-bar button {
  color: rgb(43,171,97);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  background-color: #fff;
  margin: 20px auto;
  border-radius: 5px;
  padding: 12px;
}

/*.filter-section {
  background-color: rgb(43,171,97);
  padding: 40px 0;
}*/

.results-container div {
  background-color: #fff;
  border: solid 1px #ddd;
  padding: 10px;
  font-size: 16px;
  text-align: left;
}

.header > div {
  background-color: #eee;
  font-size: 12px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}



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

/*.results-container {
  	display: grid;
  	grid-template-columns: 33.3% 33.3% 33.3%;
  	background-color: #fff;
}

.results-container div {
	font-size: 14px;
}*/


.results-container, .filter-box, .filter-input-bar {
  display: block;
  max-width: 100%;
}


/*.name {
  	grid-column: 1 / span 3;
  	font-weight: 700;
}

.contact {
  grid-column: 2 / span 2;
}

.agency::before {
	content: "Federal Agency: ";
}

.program::before {
	content: "Federal Program: ";
}

.partner::before {
	content: "Partner: ";
}
*/



  div.name {
    border-top: solid 3px rgba(0, 102, 147, 1);
    margin-top: 15px;
  }

  div.header {
  	display: none;
  }


}