/* -- Original Styles -- */

body, td, th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

a, .pseudo-link {
	color: #FF0000;
	text-decoration: none;
  cursor: pointer
}

a:hover, .pseudo-link:hover {
	text-decoration: underline;
}

/* External Link Symbols */
a[href^="http"]:after {
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

/* prevent Neighborhood Archive sites from showing external link symbols */
/* class for hiding external link icon (such as when wrapping images in a link) */
.hide-external-link:after, a[href*="neighborhoodarchive.com"]:after {
	content: "" !important;
	display: none;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: normal;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
}

p, ul, ol, footer {
  line-height: 20px;
}

blockquote {
	white-space: pre-line;
}

blockquote.lyrics {
	font-style: italic;
}

.notes {
	line-height: normal;
}

#navigation td {
	border-bottom: 1px solid #000000;
}

#navigation a {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #FF0000;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	display:block;
	padding:8px 6px 10px 20px;
}

#navigation a:hover {
	background: #FF0000;
	color:#F2F2F2;
}

footer {
	text-align: center;
	font-size: 12px;
	margin-bottom: 2em;
}

/* ----- */

.pop-up-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 110;
  overflow-y: hidden;
  overflow-x: hidden;
}

.pop-up-background {
  position: fixed;
  background: black;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 50%;
}

.pop-up-wrapper-inner {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pop-up-message {
  background: white;
  max-width: 480px;
  max-height: 100vh;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1em 2em;
  border-radius: 1em;
  border: solid 2px red;
}

.pop-up-message .form-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  algin-items: center;
}

.admin-btn {
  border-radius: .25em;
  background: #f0f0f0;
  cursor: pointer;
}

.admin-btn:hover {
  background: #e0e0e0;
}

.admin-btn.gray {
  background: #BEBEBE;
}

.admin-btn.gray:hover {
  background: #A9A9A9;
}

.admin-btn.green {
  background: #64b56b;
}

.admin-btn.green:hover {
  background: #4c9c53;
}

.admin-btn.delete, .admin-btn.red {
  background: #ff0000;
}

.admin-btn.delete:hover, .admin-btn.red:hover {
  background: #d90000;
}

.breadcrumb {

}

  /*Forms*/
  .pascode-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  form h3 {
    margin-top: 0;
  }

  form hr {
    width: 35px;
    margin: 0 1em 2em 1em;
  }

  .form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: .5em;
  }

  .form-group {
    display: flex;
  }

  .form-group button {
    align-self: center;
    height: 2.5em;
    margin-left: .5em;
    cursor: pointer;
  }

  .form-column {
    display: flex;
    flex-direction: column;
    margin-bottom: .5em;
  }

  .form-element {
    display: flex;
    flex-direction: column;
    margin: 0 1em;
    margin-bottom: 10px;
  }

  .form-err {
    font-size: 80%;
    color: red;
    margin-top: .2em;
  }

  .form-err.main {
    font-size: 100%;
    color: red;
    margin-bottom: 1em;
		max-width: 500px;
  }

  .is-invalid, select.is-invalid {
    box-shadow: 0 0 4px red;
  }

  .form-success {
    color: #06a130;
    margin-top: .2em;
    font-weight: bold;
  }

	.form-top {
		margin-top: 1em;
		margin-bottom: -.6em;
	}

  .form-description {
    margin-top: .5em;
    font-size: 70%;
  }

	.form-description-header {
		font-size: 70%;
		margin-top:-1.5em;
		margin-bottom: 1.5em;
		font-size: 70%;
	}

  .form-tip {
    font-size: 70%;
    text-decoration: underline;
    cursor: pointer;
  }

	h1 .form-tip {
		font-size: 40%;
	}

  .form-add-button {
    margin: 6px 0;
    cursor: pointer;
  }

  input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
    padding: .5em;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin: 6px 0;
    resize: vertical;
    width: 100%;
    font-size: 14px;
  }

  .checkbox-container {
    margin-bottom: 1em;
  }

  input[type="checkbox"] {
    vertical-align: middle;
    margin-top: .05em;
  }

  textarea {
    font-family: Arial, Helvetica, sans-serif;
  }

	.html-input {
    background: #f2f7fc;
  }

  input.hide-counter::-webkit-outer-spin-button,
  input.hide-counter::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number].hide-counter {
    -moz-appearance: textfield;
  }

  input[type="submit"] {
    align-self: flex-start;
    cursor: pointer;
  }

  .form-note {
    margin: 16px;
    font-style: italic;
    font-size: 80%;
  }

  .form-note.above {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .form-note.below {
    margin-top: -20px;
    margin-bottom: 26px;
  }

  .greyed {
    color: gray;
  }

  .form-disabled {
    color: gray;
  }

  .delete-warning {
    font-size: 120%;
    font-weight: bold;
    color: red;
  }

  .remove-alternate-version {
    font-size: 80%;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
  }

/* End of Form Styles */

.delete-table {
  border-collapse: collapse;
  margin: 1em 0;
}

.delete-table tr {
  border: solid;
}

.delete-table th, .delete-table td {
  padding: .2em .5em;
}

.delete-table th {
  text-align: right;
}

#view-selector {
  padding: unset;
  border: 1px solid #ccc;
  box-sizing: unset;
  margin-top: unset;
  margin-bottom: unset;
  width: unset;
  font-size: unset;
}

/* MEDIA QUERIES */

@media (max-width: 740px) {
  .hideOnSmall {
    display: none;
  }
}

@media (min-width: 740px) {
  .pascode-form {
    width: 600px;
  }

  .form-row {
    flex-direction: row;
  }

  .form-row .form-element {
    width: 50%;
  }

}

@media (min-width: 960px) {
  .hideOnLarge {
    display: none;
  }

}

@media (min-width: 1200px) {

}