/* $Id */

/* Navbar container */

.navbar {
  overflow: hidden;
  /* background-color: #333; */
  background: url("../img/bg-nav.png") top left repeat-x;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* CI honeypot container */
#hpc {
  display: none;
}

/* The dropdown container */
.dropdownMenu {
  float: left;
  overflow: hidden;
}

span.down-arrow::after {
  content: "▼";
}

/* Dropdown button */
.dropdownMenu .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdownMenu:hover .dropbtn {
  background-color: black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdownMenu:hover .dropdown-content {
  display: block;
}


/* General styles */

body {
  font-family: arial;
}

ul.bnc-unstyled-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.bnc-unstyled-list li input[type="checkbox"] {
  margin-bottom: 15px;
}

a:hover {
  cursor: pointer;
}

label.question {
  color: green;
}

.bnc-home-column {
  width: 500px;
}

a.bnc-link:hover,
.bnc-ops-links a:hover {
  text-decoration: underline;
}

.bnc-underline {
  text-decoration: underline;
}

.bnc-nodisplay {
  display: none;
}

.bnc-background {
  background: url("/assets/img/bg-header-stars-blue.jpg") repeat-x scroll center top transparent;
  background-color: #f8f8ff;
}

.bnc-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
}

.bnc-logo {
  display: flex;
  height: 100px;
  margin-bottom: 7px;
}

.bnc-logo-text {
  margin-top: 20px;
  margin-left: 10px;
  color: white;
  min-width: 400px;
}

.bnc-title {
  font-size: 30px;
}

.bnc-subtitle {
  font-size: 20px;
  margin-top: 5px;
}

.bnc-logo-text a {
  color: white;
  text-decoration: none;
}

.bnc-env-title {
  text-transform: uppercase;
  color: white;
  margin-left: auto;
  margin-right: 5px;
}

.bnc-clear {
  clear: both;
}

.bnc-svg-sprite-folder {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  position: relative;
  width: 1em;
}

main {
  clear: both;
  margin-left: 20px;
}

a {
  text-decoration: none;
  color: #337ab7;
}

legend {
  padding: 10px;
  background-color: lightgray;
}

.logged-out-spacer {
  margin-bottom: 8px;
}

.small {
  font-size: smaller;
}


/* Speicial purpose styles */

.bnc-progress-bar {
  border-width: 2px;
  border-style: solid;
  border-color: DarkRed;
  margin-top: 10px;
  margin-right: 20px;
}

.bnc-progress-bar-color {
  background-color: DarkRed;
  height: 24px;
}

#hp-phone {
  visibility: hidden;
}


/* Home page styles */

.home-welcome-grid-container {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 20px;
  padding: 20px;
}

.home-welcome {
  padding-left: 10px;
}

.home-info-grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 20px;
  margin: 20px;
}


/* Button styles */

.bnc-button {
  margin: 10px;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
  padding: 5px 10px;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: #FFF;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  cursor: pointer;
  display: inline-block;
  border-radius: 25px;
  white-space: nowrap;
}

.bnc-button:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  margin: 8px 10px 12px;
}

.bnc-button-red {
  background-image: linear-gradient(to right, maroon 0%, red 51%, maroon 100%)
}

.bnc-button-red:hover {
  background-position: right center;
}

.bnc-button-red:disabled {
  background-image: none;
  box-shadow: none;
  margin: 10px;
}

.bnc-button-green {
  background-image: linear-gradient(to right, darkgreen 0%, lightgreen 51%, darkgreen 100%)
}

.bnc-button-green:hover {
  background-position: right center;
}

.bnc-button-green:disabled {
  background-image: none;
  box-shadow: none;
  margin: 10px;
}

.bnc-button-blue {
  background-image: linear-gradient(to right, darkblue 0%, lightblue 51%, darkblue 100%)
}

.bnc-button-blue:hover {
  background-position: right center;
}

.bnc-button-blue:disabled {
  background-image: none;
  box-shadow: none;
  margin: 10px;
}

.bnc-button-purple {
  background-image: linear-gradient(to right, purple 0%, violet 51%, purple 100%)
}

.bnc-button-purple:hover {
  background-position: right center;
}

.bnc-button-gray {
  background-image: linear-gradient(to right, gray 0%, lightgray 51%, gray 100%)
}

.bnc-button-gray:hover {
  background-position: right center;
}

.bnc-button-gray:disabled {
  background-image: none;
  box-shadow: none;
  margin: 10px;
}

/* Radio button styles */

.radio-text {
  display: flex;
  flex: 1;
  align-items: flex-start;
}

/* Tooltip styles */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: black;
  color: #fff;
  padding: 5px 5px;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.header-tooltip {
  clear: both;
  display: inline-block;
  line-height: 1.3;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 1.25rem;
  font-weight: 700;
}

a.tooltip-more-info {
  color: white;
}

a.tooltip-more-info:hover {
  color: yellow;
}

.ui-dialog-titlebar-close {
  visibility: hidden;
}


/* Alerts */

.bnc-alert {
  margin-top: 0;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-style: italic;
}

.bnc-alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.bnc-alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}


/* Formatting styles */

.bnc-special-title {
  color: #31708f;
}

.bnc-nowrap {
  white-space: nowrap;
}

.bnc-right,
.table tr .bnc-right,
.table td .bnc-right {
  text-align: right;
}

.bnc-gte1000 {
  color: blue;
}

.bnc-flex {
  display: flex;
  column-gap: 10px;
}

.bnc-flex-column {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.show-password-spacer {
  width: 80px;
}

.bnc-inline-form-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}

.table th,
.table td {
  vertical-align: top;
  text-align: left;
  padding: 5px;
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: lightgray;
}

.table-hover>tbody>tr:hover {
  background-color: pink;
}

table.table-condensed {
  border-spacing: 1px;
}

.table-condensed>thead th,
.table-condensed>tbody td {
  padding: 1px;
  font-size: 11px;
}

.table>caption {
  font-weight: bold;
  font-size: large;
  text-align: left;
  color: darkblue;
  margin-bottom: 5px;
}

table.bnc-ops-links {
  width: 100%;
}

table.bnc-ops-links td {
  font-size: 14px;
}

.bnc-env-list {
  text-align: center;
}

.disabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
  visibility: hidden;
}

pre.confirm-address {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  white-space: pre-wrap;
  color: black;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* Form styles */

label {
  font-weight: bold;
  margin-bottom: 5px;
}

label.normal {
  font-weight: normal;
}

label.title {
  display: block;
  margin-bottom: 10px;
}

select:not([multiple]) {
  margin-top: 5px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
  background-image: url("../img/arrow-down.png");
  background-image: url("../img/arrow-down.svg");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.0rem;
  text-transform: none;
  border-radius: 0;
  box-sizing: border-box;
  display: block;
  font-size: 14px;
  height: 2rem;
  line-height: 1.3;
  padding-left: 5px;
  padding-right: 30px;
  outline: none;
  width: fit-content;
}

select[multiple] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
  background-size: 1.0rem;
  text-transform: none;
  border-radius: 0;
  box-sizing: border-box;
  display: block;
  font-size: 14px;
  height: 2rem;
  line-height: 1.3;
  padding-left: 5px;
  outline: none;
  width: fit-content;
  height: 100%;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="date"],
input[type="tel"],
textarea {
  border: 1px solid #5b616b;
  border-radius: 0;
  box-sizing: border-box;
  color: #212121;
  display: block;
  margin: 0.2em 0;
  max-width: 46rem;
  width: 100%;
  line-height: 1.2;
  outline: none;
  height: 2rem;
  padding-left: 5px;
  font-size: 14px;
}

input[type="file"] {
  line-height: 1.2;
  height: 2rem;
  padding-left: 5px;
  font-size: 14px;
}

input[type="checkbox"]:not(#ids):not(.toggle.hidden),
input[type="radio"] {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  transform: scale(2, 2);
}

button:not(.dropbtn),
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

input[type="text"].name,
input[type="text"]#zip5,
input[type="text"]#zip4 {
  display: inline;
}

textarea[name="synonym_address[]"] {
  display: inline;
  vertical-align: top;
}

.form-required,
.attention {
  color: #cd2026
}

.aok {
  color: green;
}

.warning {
  color: darkorange;
}

.description {
  font-style: italic;
  font-size: small;
}

.bnc-field {
  margin-top: 20px;
}

.bnc-button-row {
  margin-top: 10px;
}

.bnc-input-error {
  border-left: 4px solid #cd2026;
  padding-left: 1.5rem;
  position: relative;
  right: 1.9rem;
}

.bnc-input-error input,
.bnc-input-error textarea,
.bnc-input-error select {
  border: 3px solid #cd2026;
}

.bnc-input-error label {
  margin-top: 0;
}

.bnc-input-error-label {
  display: block;
  font-weight: bold;
  color: #cd2026;
}

.bnc-input-error-message {
  color: #cd2026;
  display: block;
  font-weight: bold;
  padding-bottom: 3px;
  padding-top: 3px;
  font-size: small;
}

.bnc-info {
  display: block;
}

.bnc-info-none {
  display: none;
}

.bnc-message {
  color: blue;
}

.bnc-warning {
  color: red;
  font-weight: bold;
}

.bnc-final-warning {
  color: red;
  font-weight: bold;
  text-transform: uppercase;
}

.bnc-checkbox-label {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

.bnc-box {
  max-width: 800px;
}

.bnc-large-box {
  max-width: 1100px;
}

.bnc-side-by-side fieldset {
  display: inline-block;
  margin-right: 20px;
  vertical-align: top;
}

.bnc-bottom {
  margin-top: auto;
  padding-bottom: 10px;
}

fieldset {
  max-width: 700px;
}

#password-status {
  margin-top: 15px;
}

.login,
#search-for,
#search-str,
#ebn-signup-id,
#signup-code {
  width: 300px;
}

#month-day {
  width: 100px;
}

#no-lines,
#minus,
#plus,
#ip,
#pages,
#max-count,
#tpseq,
#rcseq,
#tpseq-rcseq,
#pdf-seq,
#poc-phone,
#poc-alt-phone,
#poc-fax,
#site-code,
#mebn-seq,
#action-id,
#batch-no,
#item-no,
#case-no,
#form-code,
#cycle-no,
#cycle,
#form,
#environments,
#device-type,
#new-zip-code,
#contact-zip,
#subscriber-zip,
#preferred-addr-zip,
#zip5,
#zip4,
#operator-id,
#van,
#phone-no,
#phone-no-ext,
#contact-phone-ext,
#contact-direct-phone-ext {
  width: 150px;
}

#mail-date {
  width: 175px;
}

#from-last {
  width: 200px;
}

#code,
#amp-resource,
#activity,
#model,
#serial-no,
#bae-asset-tag,
#os,
#os-version,
#ip-address,
#control-number,
#keyline,
#version,
#reason {
  width: 300px;
}

#to,
#from,
#edit-district-table-form .bnc-box,
#poc-email,
#pdf-dest,
#fax-dest,
#dla-email,
#pdf-password,
#bypass-email,
#email,
#confirm-email,
#contact-email,
#confirm-contact-email,
#notice-email,
#confirm-notice-email,
#contact-phone,
#contact-direct-phone,
#password,
#current-password,
#confirm-password,
#onetime-password,
#otp,
#edi-email,
#username {
  width: 400px;
}

#contact-city,
#subscriber-city,
#preferred-addr-city,
#desc,
#company-name,
#contact-name,
#subscriber-name,
#preferred-addr-name,
#name:not(select),
#city,
#synonym-name,
#poc-name,
#pref-name,
#email-subject,
#agent,
#addr,
#addr1,
#addr2,
#addr3,
#addr4,
#addr5,
#pref-addr1,
#pref-addr2,
#pref-addr3,
#pref-addr4,
#pref-addr5,
#other-reason,
#other-text,
textarea.address {
  width: 550px;
}

#ebn-signup-data-id {
  width: 800px;
}

#fail-item-msg,
#isa-id,
#local-isa-id,
#fg-id,
#local-fg-id,
#np-isa-qual,
#local-isa-qual,
#mailbox {
  width: 250px;
}

textarea {
  height: 80px;
}

#log-text,
#description {
  height: 100px;
}

textarea#notes {
  height: 150px;
  width: 600px;
}

#segment-terminator,
#field-terminator {
  width: 30px;
}

.bnc-field label[for="see"] {
  display: block;
}

label[for="select-all"] {
  font-weight: normal;
  display: inline-block;
  margin-bottom: 10px;
}

#email-type {
  margin-top: 10px;
}

iframe {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 800px;
  overflow: auto;
}


/* Collapsable fieldsets */

input.toggle.hidden {
  display: none;
}

fieldset.collapsable .toggle+.fieldset-content {
  display: none;
}

fieldset.collapsable .toggle:checked+.fieldset-content {
  display: block;
}

fieldset.collapsable legend>label {
  cursor: pointer;
}

fieldset.collapsable legend>label::after {
  content: "▼";
}


/* Dropdown Button */

.dd-btn {
  background-color: darkblue;
  color: white;
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  display: block;
}

a.dd-btn::after {
  content: "▼";
}

.dd-btn:hover,
.dd-btn:focus {
  background-color: darkslateblue;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dd-list {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dd-list a {
  color: black;
  padding: 5px 5px;
  text-decoration: none;
  display: block;
}

.dd-list a:hover {
  background-color: #ddd;
}

.hide {
  display: none;
}

.show {
  display: block;
}