/* All of the styles that are unique to FEC search but not present in maplight.css

May still include many duplicative styles, but this is at least a short list of styles that are different.

*/

.site-content {
  padding: 0px;
  position: relative;
  background: #eaeaea;
}
.noscript-message {
  background: #f7f7f7;
  padding: 10px;
}
.main-container {
  min-height: 550px;
  background-color: #ffffff;
}

/*
body h1 {
  font-size: 4rem;
  color: #37824A;
  font-weight: bold;
}
body h2 {
  font-size: 2.5rem;
  margin-bottom: 5px;
}
*/

button,
input[type="text"] {
  font-family: inherit;
  font-size: inherit;
}

input[type="text"].search-header,
input[type="text"].search-header::-webkit-input-placeholder {
  color: #fff;
  font-weight: 300;

  font-family: "soleil",sans-serif;
}

input[type="text"].signup-footer::-webkit-input-placeholder {
  color: #8c8c8c;
  font-weight: 300;
}

/* FEC Search specific styles */

.fec-search-container{
	padding-left: 15px;
	padding-right: 15px;
}

.site-header{
  line-height: 1.42857143;
}

.fec-intro{
  font-weight: 300;
  margin-top: 15px;
  margin-bottom: 15px;
}

.data-search-form-container {
  background-color: #37824A;
  padding-bottom: 15px;
  padding-left: 0px;
  padding-right: 0px;
  color: #fff;
}

.data-search-form label {
  color: #fff;
  font-size: 1.5rem;
  display: block;
}

div.radio-button-group label{
  display: inline-block;
  margin-right: 15px;
  font-size: 18px;
  cursor: pointer;
}

.radio-button-option{
  display: inline-block;
  position: relative;
}

.contributors, .candidates {
  margin-top: 10px;
}

/* We only disable fields while submitting the form, so this overrides the treatment that grays the field out - overriding twitter's rude !important tag. */
.data-search-form input[type="text"].add-another-tag-text-input:disabled {
  background-color: #fff !important;
}

.time-period{
  margin-top: 20px;
}

.form-error-message {
  display: none;
}

/* checkbox styles */
.data-search-form .checkbox-float {
  display: inline-block;
  margin-right: 30px;
  font-size: 18px;
  position: relative;
  left: -17px;
}

.data-search-form .checkbox-float i {
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.data-search-form .checkbox-float .checked {
  display: none;
}

.checkbox-float span{
  cursor: pointer;
}

.data-search-form .checkbox-float input[type="checkbox"]{
  display: inline;
  position: relative;
  z-index: -1;
  margin: 0;
  left: 15px;
}

.data-search-form .checkbox-float input[type="checkbox"]:checked~ .checked {
  display: inline-block;
}

.data-search-form .checkbox-float input[type="checkbox"]:checked~ .unchecked {
  display: none;
}

.data-search-form .checkbox-float .current {
  font-style: italic;
  font-weight: normal;
}

.checkbox-focused{
  color: #ffeab4;
}

/* form button styles */

.button {
  border: none;
  text-align: center;
  padding: 15px;
  display: inline-block;
  line-height: 2rem;
  margin-top: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 2rem;
  min-width: 290px;
  max-width: 320px;
  width: 85%;
}

.search-button {
  background-color: #ffcf57;
  color: #404040;
  box-shadow: 3px 3px 1px #419c58;
  border-radius: 8px;
  display: inline-block;
  border: 2px solid #ffcf57;
}

.search-button:hover {
  background-color: #ffd874;
  color: #333;
}

.search-button:focus {
  border: 2px solid #ffeab4;
  color: #333;
  outline: none;
}

.search-button:active{
  box-shadow: inset 0px 0px 4px #dd9e00;
}

.search-button.inactive {
  background-color: #666666;
  color: #FFF;
  box-shadow: none;
  border: 2px solid #eaeaea;
}

.search-button.inactive:focus {
  border: none;
  outline: 1px dashed #eaeaea;
}

.search-button-spinner {
  display: none;
  color: #333;
  text-align: center;
  padding: 0px 10px;
  line-height: 2rem;
  font-size: 2rem;
}

.search-guide-container{
  position: relative;
  margin-top: 10px;
}

.search-guide{
  color: #ffcf57;
}

.search-guide > a{
  color: #ffffb0;
}

.search-guide > i {
  font-size: 22px;
}

.download-button {
  background: #006396;
  color: #fff;
  width: 100%;
  border: 2px solid #006396;
  border-radius: 6px;
  box-shadow: 2px 2px 2px #0170BE;
}

.download-button:hover{
  border: 2px solid #0170BE;
  cursor: pointer;
  text-shadow: 1px 1px 3px #008bd0;
}

.download-button:focus{
  border: 2px solid #309ebe;
}

.download-button:active{
  box-shadow: inset 0px 0px 6px #333;
}

/* search results table styles */
.results-header {
  background-color: #333;
  padding: 15px 0;
  color: #fff;
}

.results-header p{
  margin: 0 0 10px 0;
}

.results-header p a{
  color: #ffcf57;
}

.table-info {
  margin: 30px 0 0 0;
}

.transaction-summary {
  font-weight: bold;
}

.citation {
  font-size: 18px;
}

.total-contributions {
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: 5px;
}

/* The Modal (background) */
.modal-background {
    position: fixed; /* Stay in place */
    z-index: 300; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-container{
  position: relative;
  top: 100px;
  width: 90%;
  margin: 0 auto;
  float: none;
  border-radius: 15px;
  padding: 25px 25px;
  background-color: #333;
  color: #fff;
  line-height: 25px;
}

.modal-container a{
  color: #ffcf57;
}

.modal-container h2{
  font-size: 1.25em;
  margin-bottom: 15px;
}

.retry-button{
  color: #fff;
  background-color: #046698;
  text-transform: uppercase;
  display: inline-block;
  padding: 5px 10px;
}

.search-results {
  padding: 0;
}

.search-results td{
  border-bottom: 1px solid #999999;
}

.search-results table th, .search-results table td {
  padding: 20px 15px 5px 15px;
}

.search-results table {
  width: 100%;
  margin: 0;
  padding: 0;
}


/* typeahead */

.list-group {
  background-color: #3b3b3b;
  color: #ffffff;
}

div .list-group-empty{
  margin-bottom: 0px;
}

div .list-group-empty > .list-group-item{
  padding-bottom: 0px;
}

.list-group-item {
  background: transparent;
  color: #ffffff;
  border: none;
}

i.fa {
  padding-right: 5px;
}

.list-group-item i.fa {
  color: #ddd;
}

.list-group-item i.fa.highlighted,
i.highlighted {
  color: #981c1c;
}

#name-suggestion-container{
  cursor: pointer;
}

#name-suggestion-container2{
  cursor:pointer;
  padding-left: 5px;
}

.name-suggestion-spacer{
  border-top: 2px #666 solid;
  margin: 10px 15px 0px 15px;
}

#name-suggestion-last{
  margin: 0px;
  padding: 5px 0px 0px 0px;
}

.tm-tag {
  margin: 8px 0px 2px 5px;
  background-color: #fff;

  box-shadow: none;
  border: none;
  font-family: inherit;
  display: inline-block;
}

.tm-tag .tm-tag-remove {
  color: #981c1c;
  opacity: 1;
}

.tm-tag .tm-tag-remove:hover {
  opacity: 1;
  color: #981c1c;
}

.tm-tag-remove:hover {
  cursor: pointer;
}

.tm-tag-remove{
  position: relative;
  top: -20px;
  left: -9px;
  cursor: pointer;
  font-size: 18px;
  font-weight: normal;
}

#candidates-tag-container > .tm-tag-success{
  padding-right: 0px;
  padding-left: 0px;
  margin-left: 10px;
}

#candidates-tag-container > .tm-tag-success > span{
  padding-right: 0px;
}

#candidates-tag-container > .tm-tag-success  > .tm-tag-remove{
  margin: 0px;
  position: relative;
  top: -21px;
  right: -7px;
  left: initial;
}

#test > span > span {

  background-color: #cde69c;
  border-color: #a5d24a;
}

#test2 > span > span {
  background-color: #eaeaea;
}


.tm-tag span {
  font-weight: bold;
  color: #333;
  font-family: inherit;
  font-size: 16px;
 /* background-color: #eaeaea; /* #CAEFCA  - green option */
  padding: 8px 10px;
  border-radius: 4px;
}

#or-any-names{
  display: none;
}

/* typeahead overrides and autocomplete select positioning */

.typeahead-container {
  background: #ffffff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.tt-dropdown-menu {
  margin: 0;
  padding: 0;
}

.twitter-typeahead {
  width: 100%;
  min-height: 55px;
  display: flex;
}

.tt-menu {
  margin: 0;
  width: 100%;
  background-color: #3b3b3b;
  padding: 0 5px 10px 0;
}

.typeahead-box {
  width: 100%;
  clear: both;
}

.typeahead-box {
  display: inline-block;
}


.typeahead-box {
  display: flex;
  width: 100%;
  min-width: 240px;
}

.typeahead-container{
  display: inline-block;  
  flex: 1;
}

.label-container{
  flex: 0;
}

#contributors-container .tag-container {
  /*padding-left: 70px;
  min-height: 54px;
  position: absolute;
  z-index: 1000;*/
}

/* Needs some explaining: hide the last tag added by the tags manager.
   When the tags are displayed, it changes the size of the container and will move the search button.
   This will effectively move the search button out of the way by the time the mouse click event bubbles up
   to initiate search.  To work around it, we delay showing new tags briefly, allowing the rest of the event
   stack to complete */
.tag-container > *:last-child{
  display: none;
}

.add-icon-container{
  color: #a7d4b2;
  width: 30px;
  margin: 0;
  font-size: 20px;
  display: inline-block;
  padding: 8px 10px 0px 10px;
  display: none;
  cursor: pointer;
}

.data-search-form .form-label {
  padding: 0;
  background: #efefef;
  color: #3b3b3b;
  line-height: 54px;
  font-size: 16px;
  font-style: italic;
  display: inline-block;
  margin: 0;
  min-width: 60px;
  text-align: center;
  min-height: 55px; 
  float: left;
  height: 100%;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.data-search-form input[type="text"] {
  padding: 5px 10px;
  display: inline-block;
  color: #3b3b3b;
  width: 100%;
  min-width: 200px;
  outline: none;
  border: none;
  min-height: 54px;
}

.data-search-form input[type="text"].add-another-tag-text-input, .add-another-tag-text-input{
  border-top: 2px solid #eaeaea;
  margin-top: 5px;
  border-bottom-right-radius: 4px;
}

input[type="text"].tm-input {
  margin-bottom: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Required fields messages */
.form-error-message {
  display: none;
}

.form-error-message.active {
  display: inline-block;
  background-color: #3b3b3b;
  color: #ffffff;
  padding: 10px;
  min-width: 240px;
}

.form-error-message-search-terms{
  width: 100%;
}

.fec-footer{
   border-top: 15px solid #eaeaea;
   background-color: #fff;
   padding: 15px;
   margin: 0;
   font-size: 16px;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   /*line-height: 1.42857143;*/
}

.fec-body{
   font-size: 16px;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.footer-spacer{
	background-color: #eaeaea;
	height: 30px;
}

.data-table-overlay{
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  width: 100%;
  height: 100%;
  display: none;
}

#update-prompt-container{
  position: absolute;
  width: 100%;
  margin: 0px 0px;
  z-index: 3;
}

#update-prompt{
  padding: 20px 0px 20px 0px;
  background-color: #333;
  color: #fff;
  text-align: center;
  font-size: 1.375em;
}

/* Experimental alternative table layout */
@media
only screen and (max-width: 768px){
/*(min-device-width: 768px) and (max-device-width: 1024px)  {*/

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr {
    /*border: 1px solid #ccc; */
  }

  .search-results table tr:nth-of-type(even) {
    background-color: #EAEAEA;
  }

	td {
		/* Behave  like a "row" */
		border: none;
		/*border-bottom: 1px solid #eee;*/
		position: relative;
		padding-left: 50%;
    background: transparent;
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 8px;
		left: 15px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
    font-size: 10px;
    color: #666;
	}

	/*
	Label the data
	*/
  th {
    display: none;
  }
	td:nth-of-type(1):before { content: "Date"; }
	td:nth-of-type(2):before { content: "Contributor"; }
	td:nth-of-type(3):before { content: "Contributor Organization"; }
	td:nth-of-type(4):before { content: "Candidate"; }
	td:nth-of-type(5):before { content: "Contribution Amount"; }

  .section-title {
    margin: 0 10px;
  }

}

.beta-label{
  display: inline-block;
  position: relative;
  right: -5px;
  top: -8px;
  background-color: #ffcf57;
  border-radius: 10px;
  padding: 3px 5px;
  font-weight: normal;
  font-size: 0.8em;
  color: #333;
  text-align: center;
}

/*
input[type=radio]{
  width: 2em;
  margin: 0;
  padding: 0;
  font-size : 1em;
  opacity: 0;
  cursor:pointer;
}

input[type=radio] ~ span{
  display          : inline-block;
  width            : 1.0em;
  height           : 1.0em;
  margin           : 0;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.5em;
  vertical-align: bottom;
  background-color: #fff;
  position: absolute;
  top: 0.375em;
  left: 0;
}

input[type=radio]:checked ~ span{
  background-color: #333;
}
*/

input[type=radio]:checked, input[type=radio]:checked ~ label{
  cursor: auto;
}


/* Responsive styles */
@media screen and (max-width: 768px) {
  .main-container {
    padding: 0;
    margin: 0;
  }
  
  .h1, .h2, .h3, h1, h2, h3 {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  body h1 {
    font-size: 2.5rem;
  }
  body h2 {
    font-size: 1.5rem;
  }
  table {
		overflow-x: auto;
		display: block;
	}
  .form-error-message.active {
    /*width: auto;*/
  }
}

@media (min-width: 768px) {
	.fec-search-container{
		padding: 0px;
	}
	
	.main-container{
		margin: 0 15px;
    min-height: 650px;
	}

  body h2 {
    font-size: 2.0rem;
    padding-bottom: 3px;
    /*color: #eaeaea;*/
  }

  .data-search-form-container {
    padding: 15px 30px 30px 15px;
    color: #fff;
  }

  .button{
    width: 100%;
  }

  .search-guide-container{
    vertical-align: bottom;
    min-height: 74px;
    margin-top: 0px;
  }

  .search-guide{
    position: absolute;
    bottom: 0;
    right: 15px;
  }

  .total-contributions{
    font-size: 2.5rem;
  }

  .search-results table th, .search-results table td {
    padding: 15px;
  }

  .search-results table tr:nth-child(even) td {
   background-color: #f7f7f7;
  }

  .search-results table tr:nth-child(even) td:first-child {
    background-color: #eaeff2;
  }

  .search-results table tr:nth-child(odd) td {
    background-color: #ffffff;
  }

  .search-results table tr:nth-child(odd) td:first-child {
    background-color: #f2f7fa;
  }

  .search-results table tr:first-child {
    background-color: #ffffff;
  }

  .search-results table tr th:first-child {
    background-color: #cce0ea;
  }

  .search-results th, .search-results td {
    border: 1px solid #e9e9e9;
  }

  .modal-container{
    width: 70%;
    top: 200px;
  }

  .results-header{
    padding: 15px 15px;
  }

  .beta-label{
    right: -7px;
    top: -10px;
  }

}

@media (min-width: 992px) {

  .data-search-form-container{
    padding-right: 15px;
    border-radius: 8px;
  }

  .fec-footer{
    border-top: 50px solid #eaeaea;
    padding: 60px 57px 50px;
  }

	.footer-spacer{
		height: 55px;
  	}

  	.main-container{
		margin: 0px;
	}

  .fec-intro{
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 22px;
  }

  .results-header {
    padding: 30px 15px;
    margin: 30px 0 0 0;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }

  #data-header-overlay{
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }

  .download-button-container{
    text-align: right;
  }

}

@media (min-width: 1250px) {
  .total-contributions{
    font-size: 3.0rem;
  }
}