:root {
  /* Font */
  --polly-nav-font-size: var(--polly-font-size--lg);
  --polly-nav-font-weight: var(--polly-font-weight--semi-bold);
  --polly-nav-font-weight--tagline: var(--polly-font-weight--semi-bold);
  --polly-nav-font-colour: var(--polly-font-colour--white);

  /* Inputs */
  --polly-nav-input-background-colour: var(--polly-grey--50);
  --polly-nav-input-background-colour--dark: var(--polly-grey--50);
  --polly-nav-input-background-colour--light: var(--polly-grey--50);
  --polly-nav-input-font-size: var(--polly-font-size--md);
  --polly-nav-input-font-colour: var(--polly-font-colour);
  --polly-nav-input-border-colour: var(--polly-grey--300);
  --polly-nav-input-border-radius: var(--polly-border-radius--sm);
  --polly-nav-input-border-width: var(--polly-border-width--sm);

  /* Links */
  --polly-nav-link-background-colour: var(--polly-grey--50);
  --polly-nav-link-font-size: var(--polly-font-size--sm);
  --polly-nav-link-font-colour: var(--polly-font-colour--white);
  --polly-nav-link-font-weight: var(--polly-font-weight--regular);

  /* Nav Container layout*/
  --polly-nav-container-display: flex;
  --polly-nav-container-padding: 0px 32px;
  --polly-nav-container-box-shadow: none;
  --polly-nav-container-flex-wrap: wrap;
  --polly-nav-container-min-height: 150px;
  --polly-nav-container-align-items: center;

  /* Nav Tagline */
  --polly-nav-tagline-display: flex;
  --polly-nav-tagline-margin: auto 3em auto 1em;
  --polly-nav-line-height: var(--polly-line-height--md);
  --polly-nav-logo-float: none;
  --polly-nav-logo-margin: auto 0em;
  --polly-nav-logo-display: flex;

  /* Nav Search Container */
  --polly-nav-search-container-width: 100%;
  --polly-nav-search-container-display: flex;
  --polly-nav-search-container-padding: 10px 14px;
  --polly-nav-search-container-margin: 0em;
  --polly-nav-search-container-justify: center;
  --polly-nav-search-container-flex-grow: 1;

  /* Nav Search */
  --polly-nav-search-width: 100%;
  --polly-nav-search-width--max: 600px;
  --polly-nav-search-height: 100%;
  --polly-nav-search-margin: 1em auto;
  --polly-nav-search-gap: 7px;
  --polly-nav-search-padding: 0px;
  --polly-nav-search-icon-display: flex;
  --polly-nav-search-background-colour: transparent;
  --polly-nav-search-border-radius: 0px;

  /* Nav links */
  --polly-nav-links-display: flex;
  --polly-nav-links-width: fit-content;
  --polly-nav-links-float: right;
  --polly-nav-links-margin: auto 0em;
  --polly-nav-links-padding: 0em;
  --polly-nav-links-background-colour: transparent;
  
}

/* Helpdesk Header */
.polly-help-top {
  display: var(--polly-nav-container-display);
  flex-wrap: var(--polly-nav-container-flex-wrap);
  width: 100%;
  min-height: var(--polly-nav-container-min-height);
  padding: var(--polly-nav-container-padding);
  justify-content: flex-start;
  align-items: var(--polly-nav-container-align-items);
  flex-shrink: 0;

  background: var(--polly-nav-gradient);
  box-shadow: var(--polly-nav-container-box-shadow);
}

.polly-help-logo {
  display: var(--polly-nav-logo-display);
  flex-direction: column;
  align-items: center;
  align-self: center;
  width: 100px;
  margin: var(--polly-nav-logo-margin);
  float: var(--polly-nav-logo-float);
}

.logoAndTagline {
  display: var(--polly-nav-tagline-display);
  margin: var(--polly-nav-tagline-margin);
  cursor: pointer;

  color: var(--polly-nav-font-colour);
  font-family: var(--polly-font-family);
  font-size: var(--polly-nav-font-size);
  font-style: normal;
  font-weight: var(--polly-nav-font-weight--tagline);
  line-height: var(--polly-nav-line-height);
}

.polly-help-search-container {
  display: flex;
  width:  var(--polly-nav-search-container-width);
  margin: var(--polly-nav-search-margin);
  justify-content: center;
  align-items: center;
  gap: var(--polly-nav-search-gap);
  flex-shrink: 0;
  flex-grow: 1;
}

/* Direct nav child for browse menu wrapper */
.polly-help-search-container > nav {
  display: flex;
  align-items: center;
}

.polly-help-search-container form[role="search"] {
  flex: 1;
  max-width: 600px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.polly-help-search-container #search {
  width: var(--polly-nav-search-width);
  height: var(--polly-nav-search-height);
  border: 0px solid transparent;
  padding: var(--polly-nav-search-padding);
  color: var(--polly-nav-input-font-colour);
  font-family: var(--polly-font-family);
  font-size: var(--polly-nav-input-font-size);

  border-radius: var(--polly-nav-search-border-radius);
  background-color: var(--polly-nav-search-background-colour);
}


.polly-help-search-container #search:focus {
  outline: none;
  border: none;
}

.polly-help-search-container #search::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: var(--polly-nav-input-font-colour);
}

.polly-help-search-container #search:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: var(--polly-nav-input-font-colour);
  opacity:  1;
}

.polly-help-search-container #search::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: var(--polly-nav-input-font-colour);
  opacity:  1;
}

.polly-help-search-container #search:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--polly-nav-input-font-colour);
}

.polly-help-search_search-input-container {
	display: var(--polly-nav-search-container-display);
  width: 100%;
  max-width: var(--polly-nav-search-width--max);
  height: 44px;
  padding: var(--polly-nav-search-container-padding);
  margin: var(--polly-nav-search-container-margin);
  align-items: center;
  justify-content: var(--polly-nav-search-container-justify);
  gap: 8px;
  flex-shrink: 0;
  flex-grow: var(--polly-nav-search-container-flex-grow);

  border-radius: var(--polly-nav-input-border-radius);
  border: var(--polly-nav-input-border-width) solid var(--polly-nav-input-border-colour);
  background: var(--polly-nav-input-background-colour); 
}

.polly-help-search_search-input-container:focus-within {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  border-color: #0066cc;
}

.polly-help-search_search-input-icon {
  display: var(--polly-nav-search-icon-display);
  width: 20px;
  flex-shrink: 0;

  color: var(--polly-nav-input-font-colour);
  font-family: var(--polly-font-family);
  font-size: var(--polly-nav-input-font-size);
  font-style: normal;
}

#polly-help-links {
  display: var(--polly-nav-links-display);
  float: var(--polly-nav-links-float);
  width: var(--polly-nav-links-width);
  margin: var(--polly-nav-links-margin);
  padding: var(--polly-nav-links-padding);
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 0;

  background: var(--polly-nav-links-background-colour);
}

#polly-help-links a {
	padding: 0.5em 1em;
  margin: 0em 0.25em 0em 0em;
	background-color: var(--polly-nav-link-background-colour);
	-webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  
  font-size: var(--polly-nav-link-font-size);
  font-weight: var(--polly-nav-link-font-weight);
}

#polly-help-links a:hover {
	text-decoration: none;
	opacity: 1;
}

#polly-help-links a:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  text-decoration: underline;
}


input.polly-help-top-dark-bg {
  width: 100%;
  background-color: var(--polly-nav-input-background-colour--dark);
}

input.polly-help-top-light-bg {
  width: 100%;
  background-color: var(--polly-nav-input-background-colour--light);
}
/* 
@media screen and (min-width: 751px) {
  .polly-help-top {
    flex-wrap: nowrap;
    gap: 1rem;
  }
  
  .logoAndTagline {
    margin: 0 2rem 0 1rem;
    align-self: center;
  }
  
  .polly-help-search-container {
    flex-grow: 1;
  }
} */