/**
 * @file
 * Visual styles for tabs.
 */

div.tabs {
  margin: 1em 0;
}
ul.tabs {
  margin: 0 0 0.5em;
  padding: 0;
  list-style: none;
}
.tabs > li {
  display: inline-block;
  margin-right: 0.3em; /* LTR */
}
[dir="rtl"] .tabs > li {
  margin-right: 0;
  margin-left: 0.3em;
}
.tabs a {
  display: block;
  padding: 0 10px;
  text-decoration: none;
  border: 1px solid black;
  background: black;
}
.tabs a.is-active {
  background-color: transparent;
  border: 1px solid #A2C522;
}
.tabs a:focus,
.tabs a:hover {
  background-color: transparent;
  border: 1px solid #A2C522;
}
/*********** exceptions ************/
body.path-user .layout-container main .layout-content #block-tabs ul.tabs.primary {
	  margin: 0 auto;
	  max-width: 700px;
}




/*** tabs replacing radio buttons testimonals tabbed filter display ***/

.tab-display .form-radios.form--inline {
  display: flex;
  border-bottom: 1px solid #A2C522;
}

.tab-display .form-radios .form-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-display .form-radios .form-item .form-radio {
  display: none;
}

.tab-display .form-radios .form-item .option {
  padding: 10px 20px;
  cursor: pointer;
  color: #333;
  background: #7F9C18;
  border-radius: 7px 7px 0 0;
  border-bottom: none;
  margin-right: -1px;
  transition: background 0.3s;
}

.tab-display .form-radios .form-item .option:hover {
  background: #A2C522;
  color: black;
}

.tab-display .form-radios .form-item .form-radio:checked + .option {
  background: #A2C522;
  border-bottom: 3px solid #A2C522;
  color: black;
  position: relative;
  z-index: 1;
}

/* To ensure the tabs work, make sure to hide the unchecked content initially */
.tab-display .tab-content {
  display: none;
}

.tab-display .form-radios .form-item .form-radio:checked + .option + .tab-content {
  display: block;
}
.tab-display fieldset {
  border-bottom: 1px solid #A2C522;
  max-width: 100%;
  width: 100%;
}
form#views-exposed-form-testimonials-block-1.views-exposed-form.bef-exposed-form {
  max-width: 100%;
  width: 100%;
}
@media (max-width: 600px) {
  .tab-display .form-actions .button {
    display: none;
  }
}
