/**
 * Basic styling for directories
 * This file is part of the Name Directory plugin for WordPress
 */

:root {
  --highlight-color: yellow;
}

.name_directory_column_clear {
  clear: both;
}
.name_directory_column {
  padding-left: 0.3%;
}

.name_directory_column.name_directory_nr2 {
  width: 49%;
  float: left;
  display: inline-block;
}
.name_directory_column.name_directory_nr3 {
  width: 33%;
  float: left;
  display: inline-block;
}
.name_directory_column.name_directory_nr4 {
  width: 24%;
  float: left;
  display: inline-block;
}
.name_directory_form_result {
  padding: 10px;
  width: 100%;
  border: 1px solid #d8d8d8;
  text-align: center;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  display: none;
}

.name_directory_form_result.form-result-success {
  background-color: rgb(236, 255, 216);
  display: block;
  color: green;
}

.name_directory_form_result.form-result-error {
  background-color: rgb(255, 249, 242);
  display: block;
  color: rgb(211, 0, 0);
}

.name_directory_character_header {
  font-size: x-large;
  font-weight: bold;
  text-decoration: underline;
}

/**
 * Read-more buttons without Javascript
 * Credits: https://codepen.io/Idered/pen/AeBgF
 */
.name_directory_readmore_state {
  display: none;
}

.name_directory_readmore_target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: 0.25s ease;
}

.name_directory_readmore_target img {
  display: none;
}

.name_directory_readmore_state:checked
  ~ .name_directory_readmore_wrap
  .name_directory_readmore_target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.name_directory_readmore_state:checked
  ~ .name_directory_readmore_wrap
  .name_directory_readmore_target
  img {
  display: block;
}

.name_directory_readmore_state ~ .name_directory_readmore_trigger:before {
  content: "Show more";
}

.name_directory_readmore_state:checked
  ~ .name_directory_readmore_trigger:before {
  content: "Show less";
}

.name_directory_readmore_trigger {
  cursor: pointer;
  display: inline-block;
  color: #666;
  font-size: 0.9em;
  font-weight: normal;
  font-style: italic;
}

/* Custom CSS */
.name-directory-readmore-state {
  display: none;
}

.name-directory-readmore-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: 0.25s ease;
}

.name-directory-readmore-state:checked
  ~ .name-directory-readmore-wrap
  .name-directory-readmore-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.name-directory-readmore-state ~ .name-directory-readmore-trigger:before {
  content: "Show more";
}

.name-directory-readmore-state:checked
  ~ .name-directory-readmore-trigger:before {
  content: "Show less";
}

.name-directory-readmore-trigger {
  cursor: pointer;
  display: inline-block;
  color: #666;
  font-size: 0.9em;
  font-weight: normal;
  font-style: italic;
}
.searched_value {
  background-color: #ffff00;
  font-style: normal;
}

/* New Custom CSS */

.name_directory_startswith {
  padding: 0 2px;
  text-decoration: none !important;
  color: #e64946 !important;
  font-weight: 700;
}

.name_directory_total {
  margin-top: 9px;
}

.name_directory_total em,
.name_directory_total div mark {
  background-color: var(--highlight-color) !important;
  color: #000;
  font-weight: 700;
}

.name_directory_total small {
  font-size: 10px !important;
}

.name_directory_names {
  margin-top: 25px;
}

#name-directory-search-input-box {
  margin-top: 30px;
  padding: 9px 10px;
  width: 50%;
  border: 1px solid #cecece;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#name-directory-search-input-button {
  background: #e64946;
  margin-top: 30px;
  padding: 10px 20px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.name_directory_submit_bottom_link,
.name_directory_submit_top_link {
  background-color: #000;
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  text-align: center;
  text-decoration: none !important;
}

.name_directory_submit_bottom_link:hover,
.name_directory_submit_top_link:hover {
  background-color: #e64946;
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  text-align: center;
}

#paging {
  margin-top: 35px;
}

#paging a {
  background-color: #000;
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  text-align: center;
  text-decoration: none !important;
}

#paging a.active,
#paging a:hover {
  background-color: #e64946;
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  text-align: center;
}