/*
 * NSRC navbar Google search box (Google CSE, cse.js).
 *
 * Makes Google's widget look like the search box on the Drupal site
 * (https://nsrc.org/): a plain white input with a blue search button.
 * Ported from the Drupal theme's #block-googlecse rules
 * (/themes/nsrc/styles/css/custom.css) and the google_cse module's
 * no_watermark.css, re-scoped to .nsrc-search. If the Drupal box is
 * restyled, update this file to match.
 *
 * Use: add class="nsrc-search" to the element around <gcse:search>,
 * and load /include/nsrc-search.js for the "Search" placeholder.
 * Used by: /calendar/include/header.php
 */

/* Same width as the Drupal box (the calendar's own CSS sets 256px). */
#block-google-cse-google-cse.nsrc-search {
  width: 205px;
}
.nsrc-search .gsc-control-cse {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: inherit !important;
}
.nsrc-search form.gsc-search-box {
  margin: 0 !important;
}
.nsrc-search table.gsc-search-box {
  width: 100% !important;
}
.nsrc-search table.gsc-search-box td {
  padding: 0 !important;
  vertical-align: middle !important;
}
.nsrc-search .gsc-input-box,
.nsrc-search td #gsc-iw-id1 {
  box-sizing: border-box;
  width: auto;
  height: 29px;
  margin: 0 !important;
  padding: 0 8px !important;
  background: #fff !important;
  border: 1px solid #c8d3df !important;
  border-right: 0 !important;
  border-radius: 4px 0 0 4px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.nsrc-search .gsc-input-box:focus-within {
  border-color: #0059b0 !important;
  box-shadow: 0 0 0 3px rgba(0, 89, 176, 0.25);
}
.nsrc-search .gsc-input-box table,
.nsrc-search .gsc-input-box td {
  height: 27px !important;
  padding: 0 !important;
  vertical-align: middle !important;
}
/* Google's in-box magnifier icon; the button below replaces it. */
.nsrc-search td.gsib_a {
  background: none !important;
}
/* Hide the "Enhanced by Google" watermark (google_cse no_watermark.css). */
.nsrc-search input.gsc-input {
  background: #fff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: #333;
}
.nsrc-search img.gcsc-branding-img-noclear {
  display: none;
}
.nsrc-search input.gsc-input::placeholder {
  color: #888;
  opacity: 1;
}
/* Google's own CSS hides the button (display: none !important). */
.nsrc-search td.gsc-search-button {
  display: table-cell !important;
  width: 1%;
}
.nsrc-search button.gsc-search-button-v2 {
  display: block !important;
  height: 29px;
  margin: 0 !important;
  padding: 0 11px !important;
  background: #0059b0 !important;
  border: 1px solid #0059b0 !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
}
.nsrc-search button.gsc-search-button-v2:hover,
.nsrc-search button.gsc-search-button-v2:focus {
  background: #044a90 !important;
  border-color: #044a90 !important;
}
.nsrc-search button.gsc-search-button-v2 svg {
  width: 13px;
  height: 13px;
  fill: #fff;
}
.nsrc-search td.gsc-clear-button {
  display: none;
}
