/* Base & Setup */

/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Qw3aZQNVED7rKGKxtqIqX5EUA3x4Vn8siqM7.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Qw3aZQNVED7rKGKxtqIqX5EUDXx4Vn8sig.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Qw3aZQNVED7rKGKxtqIqX5EUA3x4Vn8siqM7.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Qw3aZQNVED7rKGKxtqIqX5EUDXx4Vn8sig.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue: rgb(51,193,210);
  --red: rgb(199,53,60);
  --yellow: rgb(255,207,55);
  --dk-blue: rgb(94,160,194);
  --dk-brand-blue: rgb(56, 142, 183);
  --red-orange: rgb(255,100,0);
  --green: rgb(0,166,81);
  --orange: rgb(255,147,34);
  --lt-grey: rgb(148,162,178);
  --dk-grey: rgb(104,124,141);
  --nav-grey: rgb(207,213,220);
  --sidebar-grey: rgb(234,236,240);
}

#nc-app .loader {
  position: fixed;
  z-index: 100;
  width: 80px;
  top: 50%;
  left: 45%;
  -webkit-animation: spin 1.2s linear infinite;
  -moz-animation: spin 1.2s linear infinite;
  animation: spin 1.2s linear infinite;
  height: 35px;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

body {
  font-family: 'Open Sans', sans-serif;
  padding: 0px;
  margin: 0px;
}

#ie-warning {
  text-align: center;
  width: 100%;
  display: none;
  margin-top: 100px;
}

#nc-app h1,#nc-app h2,#nc-app h3,#nc-app h4,#nc-app h5,#nc-app h6,#nc-app button {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

#nc-app fieldset {
  position: relative;
  border: none;
  margin: 0;
  padding: 0;
}

#nc-app .hide { display: none; }

#nc-app .error {
  color: var(--red);
  font-family: 'Josefin Sans';
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}

#nc-app .layout {
  margin-left: auto;
  margin-right: auto;
}

#nc-app button {
  border: none;
  outline: none;
  border-radius: 25px;
  background-color: var(--yellow);
  color: var(--blue);
  font-size: 16px;
  font-weight: bold;
  padding: 13px 22px 11px 22px;
}

#nc-app button:hover {
  background-color: var(--blue);
  color: var(--yellow);
}

/* Mock up main site */
#nc-app .header {
  height: 40px;
}

/* Components */
#nc-app .gallery-header {
  border-bottom: 4px solid var(--blue);
  height: 475px;
  background: url(/img/hero.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding-left: 100px;
  padding-top: 150px;
  box-sizing: border-box;
}
#nc-app .gallery-header h1 {
  color: var(--blue);
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-size: 4.25rem;
  line-height: 4.5rem;
}

#nc-app .gallery-header h2 {
  margin: 0;
  padding: 0;
  color: var(--blue);
  font-size: 65px;
  font-weight: 300;
}

#nc-app .gallery-header p {
  width: 600px;
  color: var(--dk-grey);
}

#nc-app .gallery-header button {
  border: none;
  outline: none;
  border-radius: 25px;
  background-color: var(--yellow);
  color: var(--blue);
  font-size: 16px;
  font-weight: bold;
  padding: 13px 22px 11px 22px;
}

#nc-app .gallery-header button:hover {
  background-color: var(--blue);
  color: var(--yellow);
}

#nc-app .search-container { display: flex; }

#nc-app .search-results {
  padding-top: 40px;
  padding-left: 60px;
  max-width: 1200px;
}

#nc-app .search-results-count {
  color: var(--orange);
  font-size: 32px;
}

#nc-app .search-results-page {
  color: var(--blue);
  font-style: oblique;
  margin-bottom: 35px;
}

#nc-app .search-results-container {
  display: flex;
  flex-flow: row wrap;
}

#nc-app .search-result {
  box-sizing: border-box;
  width: 260px;
  height: 330px;
  margin-left: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
}

#nc-app .search-result-image-wrapper {
  box-sizing: border-box;
  position: relative;
  width: 260px;
  height: 260px;
  overflow: hidden;
  border-bottom-right-radius: 75px;
}

#nc-app .search-result-image {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

#nc-app .search-result-name {
  font-size: 20px;
  margin-left: 20px;
  text-transform: none;
  font-family: 'Open Sans', sans-serif;
  text-align: left;
  font-weight: normal;
}

#nc-app .search-result-state {
  color: #fff;
  border-radius: 30px;
  z-index: 100;
  width: 50px;
  height: 50px;
  position: absolute;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  bottom: 70px;
  right: 2px;
  text-transform: uppercase;
}

#nc-app .video .search-result-image-wrapper:after {
  content: "\25B6";
  text-align: center;
  line-height: 25px;
  opacity: 0.5;
  padding: 3px 3px 3px 5px;
  height: 25px;
  width: 25px;
  border-radius: 20px;
  z-index: 100;
  bottom: 12px;
  left: 12px;
  position: absolute;
  background-color: var(--blue);
  box-sizing: content-box;
}

#nc-app .co .search-result-state { background-color: var(--blue); }
#nc-app .mo .search-result-state { background-color: var(--red-orange); }
#nc-app .nv .search-result-state { background-color: var(--orange); }
#nc-app .ok .search-result-state { background-color: var(--red); }
#nc-app .sd .search-result-state { background-color: var(--lt-grey); }
#nc-app .ut .search-result-state { background-color: var(--yellow); }
#nc-app .wy .search-result-state { background-color: var(--dk-blue); }

#nc-app .search-pagination {
  list-style: none;
  margin: 75px auto 35px 0px;
  padding-left: 0px;
}

#nc-app p.informative-msg {
  color: var(--dk-grey);
  margin-bottom: 100px;
}

#nc-app .search-pagination li {
  display: inline-block;
  margin-left: 5px;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 20px;
}

#nc-app .search-pagination li a {
  text-decoration: none;
  color: var(--dk-grey);
}

#nc-app .search-pagination li.active {
  border-radius: 25px;
  background: var(--nav-grey);
}

#nc-app nav.search {
  box-sizing: content-box;
  flex: none;
  width: 300px;
  color: #fff;
  text-transform: uppercase;
  background: var(--blue);
  margin-left: 100px;
  padding-left: 20px;
  padding-right: 20px;
}

#nc-app .search-section-header {
  margin: 75px auto 10px auto;
  border-bottom: 2px dotted white;
}

#nc-app .advanced-search {
  margin: 25px auto 10px auto;
}

#nc-app .search-filter {
  border-bottom: 1px solid var(--dk-blue);
  padding-top: 10px;
  padding-bottom: 10px;
}

#nc-app .search-filter p {
  line-height: 1;
  margin: 16px 0;
}

#nc-app .to {
  font-style: oblique;
  font-size: 12px;
  line-height: 16px;
  margin-left: 10px;
  margin-right: 10px;
}

#nc-app select {font-size: 16px;}

#nc-app .gender,
#nc-app .siblings,
#nc-app .age {
  width: 80px;
  display: inline-block;
}

#nc-app select {
  height: 35px;
  width: 70px;
  margin: 0;
}

#nc-app nav.search select {
  color: var(--lt-grey);
  border: 0;
  outline: none;
  font-family: 'Open Sans', sans-serif;
}

#nc-app .gender-select {
  width: 180px;
}

#nc-app .search-checkbox-header {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
  padding: 0;
}

#nc-app .search-expander {
  width: 30px;
  height: 30px;
  color: var(--blue);
  background-color: var(--yellow);
  border: none;
  outline: none;
  border-radius: 30px;
  padding: 0 0 1px 1px;
  font-weight: 300;
  font-size: 54px;
  line-height: .5em;
  float: right;
}

#nc-app .search-checkbox {
  position: absolute;
  clip: rect(0,0,0,0);
  margin: 0;
  box-sizing: initial;
  padding: 0;
}

#nc-app .search-checkbox + label {
  color: var(--yellow);
}

#nc-app .search-checkbox + label::before {
  content: '\a0'; /* non-break space */
  display: block;
  float: left;
  width: 24px;
  height: 24px;
  margin-right: 18px;
  margin-left: 18px;
  background: white;
  text-indent: 2px;
  box-sizing: initial;
}

#nc-app .search-checkbox:checked + label::before {
  content: "\2713";
  color: var(--dk-blue);
  font-size: 36px;
  font-weight: bold;
  font-family: 'Josefin Sans';
  line-height: 16px;
}

#nc-app .search-checkbox-list {
  list-style: none;
  padding-left: 10px;
  margin: 0;
}

#nc-app .search-checkbox-list li {
  margin-bottom: 10px;
}

#nc-app .search-button-search,
#nc-app .search-button-clear,
#nc-app .search-download-info {
  border-radius: 25px;
  height: 40px;
  line-height: 40px;
  padding-left:15px;
  padding-right:15px;
  padding-top: 2px;
  padding-bottom: 0;
  font-size: 16px;
  border: none;
  outline: none;
  margin-top: 20px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .3s,color .3s;
}

#nc-app .search-button-search,
#nc-app .search-download-info {
  color: var(--dk-blue);
  background-color: var(--yellow);
}

#nc-app .search-button-search:hover,
#nc-app .search-download-info:hover {
  color: #fff;
  background-color: var(--dk-brand-blue);
}

#nc-app .search-button-clear {
  color: var(--yellow);
  background-color: var(--dk-brand-blue);
  margin-left: 20px;
  width: 160px;
}

#nc-app .search-button-clear:hover {
  color: #fff;
  background-color: var(--dk-brand-blue);
}

#nc-app .search-need-more-info {
  color: var(--yellow);
  font-size: 24px;
  margin-top: 65px;
  border-bottom: 2px dotted white;
  line-height: initial;
}

#nc-app .search-more-info {
  text-transform: none;
  font-size: 20px;
  line-height: initial;
  margin: 0;
}

#nc-app .search-download-info {
  display: block;
  margin: 40px auto;
}

#nc-app nav.search label {
  font-size: 16px;
  font-weight: bold;
  color: var(--dk-grey);
  color: var(--lt-grey);
  color: var(--nav-grey);
  color: var(--sidebar-grey);
  line-height: initial;
  vertical-align: middle;
  margin: 0;
}

#nc-app nav.search input[type=text] {
  box-shadow: none;
  display:inline-block;
  width: 212px;
  height: 35px;
  box-sizing: border-box;
  margin-bottom: 30px;
  padding: 0 0 0 10px;
  line-height: 12px;
  font-size: 11px;
  border: none;
  color: var(--lt-grey);
  outline: none;
  font-family: 'Open Sans', sans-serif;
}

#nc-app nav.search .go {
  box-sizing: border-box;
  margin: 0;
  font-size: 16px;
  text-align: center;
  height: 35px;
  position: absolute;
  top: 0;
  background: var(--yellow);
  color: var(--blue);
  border-radius: 0px;
  border-bottom-right-radius: 15px;
  border: none;
  outline: none;
}

#nc-app nav.search .go:hover {
  background: var(--blue);
  color: #fff;
  border: none;
}

#nc-app nav.search input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-style: oblique;
  color: var(--lt-grey);
}

#nc-app nav.search input[type=text]::-moz-placeholder { /* Firefox 19+ */
  font-style: oblique;
  color: var(--lt-grey);
}

#nc-app nav.search input[type=text]:-ms-input-placeholder { /* IE 10+ */
  font-style: oblique;
  color: var(--lt-grey);
}

#nc-app nav.search input[type=text]:-moz-placeholder { /* Firefox 18- */
  font-style: oblique;
  color: var(--lt-grey);
}

/* Profile */
#nc-app .youth-profile-header {
  height: 340px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding-left: 100px;
  background: url(/img/profile-hero.jpg) no-repeat var(--blue);
}

#nc-app .youth-profile-header-new-search {
  font-weight: bold;
  font-size: 20px;
  margin: 0;
  position: absolute;
  top: 155px;
  right: 130px;
  text-transform: uppercase;
  color: var(--yellow);
}

#nc-app .youth-profile-header-new-search:before {
  content: "\25C4";
  color: var(--yellow);
  margin-right: 10px;
}

#nc-app .youth-profile-header-ask {
  border-radius: 25px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  border: none;
  outline: none;
  font-size: 20px;
  color: var(--dk-blue);;
  background: var(--yellow);
  position: absolute;
  top: 210px;
  right: 100px;
}

#nc-app .youth-profile-header-ask:hover {
  color: var(--blue);
  background: var(--yellow);
}

#nc-app .youth-profile-header-meet {
  font-size: 50px;
  font-weight: 300;
  margin: 0;
  color: var(--yellow);
  position: absolute;
  top: 150px;
}

#nc-app .youth-profile-header-name {
  font-size: 58px;
  font-weight: bold;
  margin: 0;
  color: #fff;
  position: absolute;
  top: 200px;
}

#nc-app .youth-profile-wrapper {
  display: flex;
}

#nc-app .youth-profile-stats {
  box-sizing: border-box;
  width: 500px;
  flex: 0 1;
  background: var(--sidebar-grey);
  padding: 70px 60px 35px 100px;
}

#nc-app .youth-profile-slideshow {
  border-bottom-right-radius: 75px;
  display: table-cell;
  width: 340px;
  overflow: hidden;
  position: relative;
}

#nc-app .youth-profile-slideshow-img {
  object-fit: cover;
  height: auto;
  width: 340px;
  max-width: none;
}

#nc-app .youth-profile-slideshow-back,
#nc-app .youth-profile-slideshow-forward {
  box-sizing: border-box;
  z-index: 100;
  background-color: rgba(255,255,255,0.6);
  border-radius: 25px;
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  font-size: 48px;
  text-align: center;
  line-height: 36px;
  color: var(--blue);
  overflow: hidden;
}

#nc-app .youth-profile-slideshow-back {
  left: 10px;
  padding-right: 5px;
}

#nc-app .youth-profile-slideshow-forward {
  right: 10px;
  padding-left: 5px;
}

#nc-app .youth-profile-slideshow-back:hover,
#nc-app .youth-profile-slideshow-forward:hover {
  color: black;
}

#nc-app .youth-profile-slideshow-back:active,
#nc-app .youth-profile-slideshow-forward:active {
  color: var(--orange);
}

#nc-app .youth-detail-header {
  color: var(--red-orange);
  font-size: 20px;
  border-bottom: 2px solid var(--blue);
  margin-top: 35px;
  margin-bottom: 0;
  padding-bottom: 10px;
}

#nc-app .youth-detail-list {
  font-size: 16px;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin-top: 8px;
  font-weight: bold;
  color: rgb(106,127,143);
}

#nc-app .youth-narrative {
  padding: 65px 100px 95px 50px;
}

#nc-app .youth-narrative-title {
  margin-top: 0px;
  padding-bottom: 7px;
  font-size: 26px;
  color: var(--red-orange);
  border-bottom: 4px solid rgb(104,124,141, 0.2);
}

#nc-app .youth-narrative-hero {
  border-bottom: 4px solid rgb(104,124,141, 0.2);
  margin-top: 30px;
  padding-bottom: 40px;
}

#nc-app .youth-narrative-text {
  color: rgb(106,127,143);
}

#nc-app .login-button-login,
#nc-app .login-button-register {
  border-radius: 25px;
  height: 40px;
  line-height: 40px;
  padding-left:15px;
  padding-right:15px;
  padding-top: 2px;
  font-size: 16px;
  border: none;
  outline: none;
  margin-top: 20px;
}

#nc-app .forgot-password {
  background: white;
  border: 1px solid var(--blue);
  display: block;
  margin: 10px auto;
}

#nc-app .login-button-login {
  color: var(--dk-blue);
  background-color: var(--yellow);
}

#nc-app .login-button-login:hover {
  color: var(--yellow);
  background-color: var(--dk-blue);
}

#nc-app .login-button-register {
  color: var(--yellow);
  background-color: var(--dk-blue);
  margin-left: 20px;
}

#nc-app .login-button-register:hover {
  color: var(--dk-blue);
  background-color: var(--yellow);
}

#nc-app .login {
  text-align: center;
}

#nc-app .login-register-header {
  margin-bottom: 40px;
  font-size: 26px;
  color: var(--red-orange);
}

#nc-app .login form {
  display: block;
  max-width: 600px;
  margin: 100px auto;
}

#nc-app .login-error {
  color: var(--red);
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
  font-size: 20px;
}

#nc-app .login input {
  display: block;
  width: 212px;
  height: 35px;
  box-sizing: border-box;
  margin: auto auto 30px auto;
  padding: 0px 0px 0px 10px;
  line-height: 16px;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}

#nc-app .register form {
  text-align: center;
  min-height: 400px;
}

#nc-app .child-specific-inquiry input {
  display: block;
  width: 400px;
  height: 35px;
  box-sizing: border-box;
  margin: auto auto 30px auto;
  padding: 0px 0px 0px 10px;
  line-height: 16px;
  font-size: 16px;
}

#nc-app .child-specific-inquiry select {
  width: 400px;
}

#nc-app .child-specific-inquiry form {
  display: block;
  max-width: 400px;
  margin: 100px auto;
}

#nc-app .child-specific-inquiry-header {
  text-align: center;
  font-size: 26px;
  color: var(--red-orange);
  margin-bottom: 0px;
}

#nc-app .child-specific-inquiry form label {
  max-width: 400px;
  display: block;
  margin-top: 30px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
}

#nc-app .inquire-button-submit {
  border-radius: 25px;
  height: 40px;
  line-height: 40px;
  padding-left:15px;
  padding-right:15px;
  padding-top: 2px;
  font-size: 16px;
  border: none;
  outline: none;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  color: var(--dk-blue);
  background-color: var(--yellow);
}

#nc-app .inquire-button-submit:hover {
  color: var(--yellow);
  background-color: var(--dk-blue);
}

/* Hero */
#nc-app .hero {
  height: 340px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding-left: 100px;
  background: url(/img/profile-hero.jpg) no-repeat var(--blue);
}

#nc-app .hero-name {
  margin: 0px;
  font-size: 58px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 200px;
}

#nc-app .hero-button {
  border-radius: 25px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  border: none;
  outline: none;
  font-size: 20px;
  color: #fff;
  background: var(--dk-blue);
  position: absolute;
  top: 210px;
  right: 100px;
}

#nc-app .hero-button:hover {
  background-color: var(--yellow);
  color: var(--blue);
}

#nc-app .my-account-wrapper {
  display: flex;
}

#nc-app .my-account-wrapper.my-profile .form h1 {
  display: none;
}
#nc-app .my-account-wrapper.my-profile .field:last-child {
  display: none;
}

#nc-app .my-account-sidebar {
  box-sizing: border-box;
  width: 500px;
  flex: 0 1;
  background: var(--sidebar-grey);
  padding: 70px 40px;
}

#nc-app .my-account-sidebar-header {
  color: var(--red-orange);
}

#nc-app .my-account-sidebar-nav {
  list-style: none;
  margin-left: 0px;
  padding-left: 10px;
  min-width: 11.875rem;
  margin-top: -.125rem;
  border-top: 2px solid #33c1d2;
  background: hsla(0,0%,100%,.92);
  padding-bottom: .625rem;
}

#nc-app .my-account-sidebar-nav li {
  margin-bottom: 5px;
  display: flex;
  position: relative;
  padding-top: 1.25rem;
}

#nc-app .my-account-sidebar-nav li:first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 0;
  height: 0;
  border-color: var(--blue) transparent transparent;
  border-style: solid;
  border-width: 15px 11.5px 0;
}

#nc-app .my-account-sidebar-nav li a {
  color: var(--dk-grey);
  padding-left: 0;
  padding-right: 0;
}

#nc-app .my-account-sidebar-nav li a:hover {
  color: var(--blue);
}

#nc-app .child-inquiry-history {
  padding: 70px 60px 35px 75px;
}

#nc-app .child-inquiry-history-title {
  font-size: 32px;
  color: var(--red-orange);
}

#nc-app .list-of-children {
  list-style: none;
  width: 35rem;
}

#nc-app .list-of-children li {
  margin-bottom: 5px;
}

#nc-app .list-of-children li:before {
  content: "\25B6";
  font-size: 12px;
  margin-right: 5px;
}

#nc-app .list-of-children li a {
  text-decoration-style: dotted;
}
.list-of-children .remove {
  margin-left: .8rem;
  color: red;
  font-size: 1.2rem;
  position: relative;
  top: 3px;
}

#nc-app .my-account .my-account-wrapper .form-title  {
  font-size: 32px;
  color: var(--red-orange);
  margin-left: 75px;
}

#nc-app .my-account .my-account-wrapper .error {
  margin-top: 20px;
}

#nc-app .my-account .my-account-wrapper form {
  padding-top: 70px;
}

#nc-app .my-account .my-account-wrapper form .actions {
  text-align: center;
}

#nc-app .my-account .my-account-wrapper .section-collapse-button {
  display: none;
}

#nc-app .child-inquiry-history-search-bar {
  display: flex;
  align-items: center;
}
#nc-app .child-inquiry-history-search-bar input {
  width: 212px;
  height: 35px;
  box-sizing: border-box;
  padding: 0px 0px 0px 10px;
  line-height: 16px;
  font-size: 16px;
}
#nc-app .child-inquiry-history-help-text {
  margin: 0px 0px 0px 20px;
  max-width: 70%;
}

#nc-app .my-account-wrapper .section-header {
  display: none;
}
#nc-app .my-account-wrapper .content {
  padding: 70px 60px 35px 75px;
}
#nc-app .my-account-wrapper .content .section {
  margin-left: 0;
}
#nc-app .my-account-wrapper .content .section-fields {
  padding-left: 0;
}
#nc-app .my-account-wrapper .content h1 {
  font-size: 32px;
  color: var(--red-orange);
}

#nc-app table {
  margin: 40px auto;
  border-collapse: collapse;
  border: 1px solid #eee;
  border-bottom: 2px solid var(--blue);
}

#nc-app tr:hover { background: #f4f4f4; }
#nc-app tr:hover td { color: #555; }
#nc-app th, #nc-app td {
  color: #999;
  border: 1px solid #eee;
  padding: 12px 35px;
  border-collapse: collapse;
  min-width: 100px;
}

#nc-app th {
  background: var(--blue);
  color: #fff;
  text-transform: uppercase;
}

#nc-app th:after {
  content: "↕";
  position: relative;
  left: 3px;
  bottom: 1px;
}

#nc-app tr:last {
  border-right: none;
}

/* ────────── Form / render.mjs ────────── */
#nc-app .form { margin-bottom: 15rem;  margin: auto; }
#nc-app .form label.required:after {
  content: " *";
  color: red;
}
#nc-app .section {
  margin: auto;
  max-width: 80%;
  clear: both;
  margin-top: 50px;
}
#nc-app .section-header {
  position: relative;
}
#nc-app .section-collapse-button {
  position: absolute;
  top: 0rem;
  right: .5rem;
  font-size: 1.7rem;
}
#nc-app .section-title {
  border-top: 1px solid black;
  text-align: left;
}
#nc-app .collapsed .section-fields {
  display: none;
}
#nc-app .section-fields {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
#nc-app .field-previous-value {
  display: none;
}
#nc-app .form-editable .section.critical .field-previous-value {
  display: block;
}
#nc-app .single .section-fields {
  flex-flow: column;
}
#nc-app .single .field {
  margin: auto;
}
#nc-app .single .field input {
  margin: auto;
}
#nc-app .field {
  text-align: left;
  min-height: 65px;
  width: 380px;
}
#nc-app .field label {
  margin: 10px 0 0 0;
  display: flex;
  justify-content: end;
  align-items: center;
  text-align: left;
  height: 45px;
  float: left;
}
#nc-app .field.help-text label {
  height: auto;
}
#nc-app .field.help-text label span {
  -webkit-line-clamp: initial;
}
#nc-app .field label span {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nc-app .field .help-text {
  padding-bottom: 1rem;
  display: block;
}
#nc-app .field.field-error {
  color: var(--red);
}
#nc-app .field.field-error input,
#nc-app .field.field-error textarea,
#nc-app .field.field-error select {
  border: 1px solid var(--red);
  outline: 1px solid var(--red);
}
#nc-app .field img {
  width: 360px;
}
#nc-app .field input,
#nc-app .field textarea,
#nc-app .field select {
  font-size: 16px;
  display: block;
  border-color: rgb(221, 219, 218);
  border-left-radius: 4px;
  border-right-radius: 4px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  color: rgb(8, 7, 7);
  margin: 0;
  height: 30px;
  line-height: 30px;
  padding: 0px 16px 0px 10px;
  transition-delay: 0s, 0s;
  transition-duration: 0.1s, 0.1s;
  transition-property: border, background-color;
  transition-timing-function: linear, linear;
  visibility: visible;
  width: 380px;
  clear: both;
  font-family: 'Open Sans', sans-serif;
}
#nc-app .field select[multiple] {
  height: 5rem;
}
#nc-app .field input[type=checkbox] {
  width: 2rem;
}
#nc-app .field textarea {
  min-height: 5rem;
}
#nc-app .field input:disabled,
#nc-app .field textarea:disabled {
  background: rgb(244, 244, 244);
  cursor: not-allowed;
}
#nc-app input[type=file] {
  display: none;
}
#nc-app .actions {
  display: none;
  clear: both;
  padding-top: 80px;
  padding-bottom: 40px;
}
#nc-app .actions button {
  min-width: 75px;
  height: 25px;
  margin-left: 10px;
}
#nc-app .form-editable input[type=file],
#nc-app .form-editable .actions {
  display: block;
}
/* end of forms */

/* ────────── Form overrides ────────── */
#nc-app .register .section-title {
  padding-top: 7px;
}
#nc-app .register .section-collapse-button,
.register .form-title {
  display: none;
}
#nc-app .actions button {
  border-radius: 25px;
  height: 40px;
  line-height: 40px;
  padding-left:15px;
  padding-right:15px;
  padding-top: 2px;
  font-size: 16px;
  border: none;
  outline: none;
  margin-top: 20px;
  color: var(--dk-blue);
  background-color: var(--yellow);
}
#nc-app .actions button:hover {
  color: var(--yellow);
  background-color: var(--dk-blue);
}

/* ────────── Modal ────────── */
#nc-app .modal {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
}
#nc-app .modal-content {
  position: relative;
  top: 10%;
  padding: 0;
  margin: 0px auto;
  width: 80%;
  height: 80%;
}
#nc-app .modal-iframe {
  border: none;
}
#nc-app .watch-video {
  margin: 40px auto;
  max-width: 40%;
  text-align: center;
}
#nc-app .thank-you {
  max-width: 80%;
  margin: 60px auto;
  text-align: center;
  min-height: 40vh;
}
#nc-app .thank-you button {
  margin: 40px 20px;
}

#nc-app .child .actions { display: none; }
#nc-app .child form { margin-bottom: 0; }
#nc-app .child .buttons,
#nc-app .spouse .buttons {
  margin: 0 auto 15rem;
  padding-top: 80px;
  text-align: center;
}
#nc-app .child .buttons button {
  margin-left: 40px;
}
#nc-app .child .button-top,
#nc-app .spouse .button-top {
  margin: 20px auto 20px;
  text-align: right;
}
#nc-app .child .button-top button,
#nc-app .spouse .button-top button {
  margin-right: 100px;
}

#nc-app .youth-additional-information {
  background: var(--sidebar-grey);
  padding: 35px;
}
#nc-app .youth-additional-information .youth-additional-information-title {
  margin-top: 0px;
  padding-bottom: 7px;
  font-size: 26px;
  color: var(--blue);
}
#nc-app .youth-additional-information .youth-additional-information-text {
  color: rgb(106, 127, 143);
}

#nc-app .mobile-menu-expand-block, #nc-app .mobile-info-block {
  display: none;
}

#nc-app .p-relative {
  position: relative;
}

/*Extra small devices (portrait phones, less than 576px)*!*/
@media (max-width: 767px) {
    #nc-app .gallery-header h1 {
        font-size: 2.3rem;
        line-height: 2.6875rem;
    }
    #nc-app .gallery-header h2 {
        font-size: 45px;
    }
    #nc-app .gallery-header p {
        max-width: 70%;
        color: var(--dk-grey);
        line-height: initial;
    }
    #nc-app .gallery-header button {
        color: var(--dk-blue)
    }
    #nc-app .search-container {
        max-width: 100%;
        overflow-y: hidden;
    }
    #nc-app .header {
        height: 100px;
    }
    #nc-app .gallery {
        padding: 0;
        margin: 0;
    }
    #nc-app .gallery-header {
        margin: 0;
        width: 100%;
        background-position-x: -780px;
        padding: 120px 20px;
    }
    #nc-app .search-container {
        display: block;
    }
    #nc-app .mobile-info-block {
        background: var(--dk-blue);
        color: #fff;
        padding-top: 30px;
        padding-bottom: 20px;
    }
    #nc-app .mobile-info-block h3 {
        color: var(--yellow);
        margin: 0;
        width: 80%;
        margin-left: 10%;
        text-align: center;
    }
    #nc-app .mobile-info-block p {
        font-size: 16px;
    }
    #nc-app .mobile-info-block .search-more-info {
        width: 80%;
        margin-left: 10%;
        text-align: center;
    }
    #nc-app .mobile-info-block .search-download-info {
        width: 80%;
        text-align: center;
        margin: 20px auto;
    }
    #nc-app nav.search {
        display: none;
        margin: 0;
        width: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 2px dotted white;
        border-bottom: 2px dotted white;
    }
    #nc-app .search label {
        display: block;
    }
    #nc-app .search-checkbox-list {
        margin: 10px;
    }
    #nc-app .search-checkbox + label::before {
        margin-left: 0;
    }
    #nc-app .search .search-filter p {
        margin: 0;
    }
    #nc-app .search .search-filter label {
        color: var(--sidebar-grey);
    }
    #nc-app .search .search-filter select {
        color: var(--lt-grey);
    }
    #nc-app .search-filter .search-checkbox-header {
        margin-bottom: 0;
        color: var(--sidebar-grey);
    }
    #nc-app .search-text label {
        color: var(--sidebar-grey);
    }
    #nc-app .search h2 {
        margin: 0;
    }
    #nc-app .search-results {
        width: 100%;
        padding: 0;
    }
    #nc-app .search-results-header {
        text-align: center;
    }
    #nc-app .search-results-container {
        text-align: center;
    }
    #nc-app .search-result {
        margin: 0 auto 30px auto;
    }
    #nc-app .search-pagination {
        text-align: center;
    }
    #nc-app .mobile-menu-expand-block {
        background: var(--blue);
        text-transform: uppercase;
        color: #fff;
        text-align: left;
        padding: 50px 30px;
        font-size: 21px;
    }
    #nc-app .mobile-menu-expand-block,
    #nc-app .mobile-info-block {
        display: block;
    }
    #nc-app .search-results-count {
        margin-top: 40px;
        color: var(--red-orange);
    }
    #nc-app .search-results-count .counter {
        display: block;
        line-height: 64px;
        font-size: 64px;
    }
    #nc-app .search-results-page {
        color: var(--lt-grey);
    }
    #nc-app .desktop-info-block {
        display: none;
    }
    #nc-app .youth-profile-wrapper {
        display: block;
    }
    #nc-app .youth-profile-stats,
    #nc-app .youth-narrative,
    #nc-app .section-fields {
        display: block;
        width: 100%;
        padding: 0;
    }
    #nc-app .section-fields {
        padding: 0;
    }
    #nc-app .section-fields .field {
        width: 100%;
    }
    #nc-app .section-fields input, #nc-app .section-fields select {
        width: 100%;
    }
    #nc-app .register .hero-name {
        left: 10%;
    }
    #nc-app .youth-profile-header-ask {
        top: 265px;
        right: 3%;
    }
    #nc-app .hero-name {
        left: 0;
        top: 100px;
        font-size: 48px;
    }
    #nc-app .list-of-children {
        width: auto;
    }
    #nc-app .section {
        max-width: 90%;
    }
    #nc-app .youth-profile-header-new-search {
        top: 100px;
    }
    #nc-app .youth-profile-header-meet {
        top: 125px;
        left: 4%;
    }
    #nc-app .youth-profile-header-name {
        top: 185px;
        left: 4%;
        font-size: 28px;
    }
    #nc-app .youth-profile-slideshow {
        max-width: 100%;
    }
    #nc-app .youth-profile-list {
        padding: 15px;
    }
    #nc-app .youth-narrative-hero iframe {
        width: 100%;
    }
    #nc-app .youth-narrative-title {
        margin-top: 20px;
        text-align: center;
    }
    #nc-app .co .search-result-image-wrapper,
    #nc-app .mo .search-result-image-wrapper,
    #nc-app .nv .search-result-image-wrapper,
    #nc-app .ok .search-result-image-wrapper,
    #nc-app .sd .search-result-image-wrapper,
    #nc-app .ut .search-result-image-wrapper,
    #nc-app .wy .search-result-image-wrapper {
        border: none
    }
    #nc-app .youth-narrative-text {
        padding: 15px;
    }
    #nc-app .my-account-wrapper {
        display: block;
    }
    #nc-app .child-inquiry-history {
        padding: 0;
    }
    #nc-app .my-account-sidebar {
        width: 100%;
    }
    #nc-app .my-account .hero {
        padding: 0;
    }
    #nc-app .child-inquiry-history-title {
        text-align: center;
    }
    #nc-app .child-inquiry-history-search-bar {
        text-align: center;
    }
    #nc-app .table-wrapper {
        max-width: 100%;
        overflow-x: scroll;
    }
    #nc-app .child-specific-inquiry {
        width: 100%;
        padding: 0;
    }
    #nc-app .child-specific-inquiry .hero {
        padding-left: 50px;
    }
    #nc-app .child-specific-inquiry fieldset {
        padding-left: 20px;
    }
    #nc-app .child-specific-inquiry select,
    #nc-app .child-specific-inquiry input {
        width: 80%;
        margin-left: 0;
    }
  #nc-app .hero-button {
    left: 5px;
    font-size: 16px;
  }
}

/*Medium devices (tablets, 768px and up)*!*/
@media (min-width: 768px) and (max-width: 992px) {
    #nc-app .gallery-header {
        margin: 0;
        width: 100%;
        padding: 120px 20px;
    }
    #nc-app .gallery-header h1 {
        font-size: 4.25rem;
        line-height: 4.5rem;
        display: inline-block;
    }
    #nc-app .gallery-header h2 {
        font-size: 50px;
        display: inline-block;
        margin-left: 10px;
    }
    #nc-app .gallery-header p {
        font-size: 18px;
        max-width: 70%;
        color: var(--dk-grey);
    }
    #nc-app .gallery-header button {
        color: var(--dk-blue);
        margin-top: 20px;
    }
    #nc-app .search-container {
        display: block;
    }
    #nc-app .search-checkbox-list {
       margin: 10px 0;
    }
    #nc-app nav.search label {
      font-size: 15px;
    }
    #nc-app .mobile-info-block {
        background: var(--dk-blue);
        color: #fff;
        padding-top: 0;
        padding-bottom: 20px;
        display: block;
        position: relative;
    }
    #nc-app .mobile-info-block h3 {
        color: var(--yellow);
        display: inline-block;
        width: 33%;
        text-align: right;
        border-bottom: none;
    }
    #nc-app .mobile-info-block .search-more-info {
        display: inline-block;
        font-size: 16px;
        width: 27%;
        padding: 0 25px;
    }
    #nc-app .mobile-info-block .search-download-info {
        display: inline-block;
        top: 10px;
        position: absolute;
    }
    #nc-app .mobile-info-block .search-download-info.contact-us {
        top: 60px;
    }
    #nc-app nav.search {
        padding: 20px 0;
        margin: 0;
        width: 100%;
        border-top: 2px dotted white;
        border-bottom: 2px dotted white;
    }
    #nc-app .search-results-count {
        margin-top: 38px;
        color: var(--red-orange);
        font-size: 38px;
    }
    #nc-app .search-results-count .counter {
        font-size: 38px;
    }
    #nc-app .search-results-page {
        color: var(--lt-grey);
    }
    #nc-app .co .search-result-image-wrapper,
    #nc-app .mo .search-result-image-wrapper,
    #nc-app .nv .search-result-image-wrapper,
    #nc-app .ok .search-result-image-wrapper,
    #nc-app .sd .search-result-image-wrapper,
    #nc-app .ut .search-result-image-wrapper,
    #nc-app .wy .search-result-image-wrapper {
        border: none
    }
    #nc-app .desktop-info-block {
        display: none;
    }
    #nc-app .youth-profile-wrapper {
        display: block;
    }
    #nc-app .youth-profile-stats {
        width: 100%;
    }
    #nc-app .youth-profile-header-new-search {
        top: 110px;
        left: 100px;
    }
    #nc-app .search-results {
        width: 100%;
        padding: 0;
    }
    #nc-app .search-results-header {
        text-align: left;
        margin-left: 20px;
    }
    #nc-app .search-results-container {
        text-align: center;
        padding-left: 10px;
    }
    #nc-app .search-result {
        width: 31%;
        padding: 0;
    }
    #nc-app .my-account-wrapper {
        display: block;
    }
    #nc-app .child-inquiry-history {
        padding: 0;
    }
    #nc-app .my-account-sidebar {
        width: 100%;
    }
    #nc-app .my-account .hero {
        padding: 0;
    }
    #nc-app .my-account .hero-name {
        left: 50px;
    }
    #nc-app .child-inquiry-history-title {
        text-align: center;
    }
    #nc-app .child-inquiry-history-search-bar {
        text-align: center;
    }
    #nc-app .table-wrapper {
        max-width: 100%;
        overflow-x: scroll;
    }
    #nc-app .search .w-30 {
        width: 30%;
        display: inline-block;
        padding: 0 20px;
        float: left;
        border-right: 2px solid var(--dk-blue);
    }
    #nc-app .search .w-43 {
        width: 43%;
        display: inline-block;
        float: left;
    }
    #nc-app .search .w-57 {
        width: 57%;
        display: inline-block;
        float: left;
    }
    #nc-app .search .search-button-clear {
        margin-left: 5px;
    }
    #nc-app .search .search-filter {
        padding-top: 0;
        width: 100%;
        min-height: 66px;
    }
    #nc-app .search .search-filter p {
        margin: 0;
    }
    #nc-app .search .search-filter label {
        color: var(--sidebar-grey);
    }
    #nc-app .search .search-filter select {
        color: var(--lt-grey);
    }
    #nc-app .search .w-60 {
        padding-left: 20px;
        width: 60%;
        display: inline-block;
    }
    #nc-app nav.search input[type=text] {
        width: 150px;
    }
    #nc-app .search-section-header {
        margin: 0 auto 10px auto;
        font-weight: 600;
    }
    #nc-app .search-section-header {
        margin: 0 auto 10px auto;
        font-weight: 600;
    }
    #nc-app .search-text label {
        color: var(--sidebar-grey);
    }
    #nc-app .search-filter label {
        display: block;
    }
    #nc-app .search-text button.go {
        position: absolute;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        top: 0;
    }
    #nc-app .search-checkbox + label::before {
        margin-left: 0;
    }
    #nc-app .search-pagination {
        padding-left: 15px;
    }
    #nc-app .search-filter .search-checkbox-header {
        margin-bottom: 0;
        color: var(--sidebar-grey);
        line-height: 1;
    }
}
@media (min-width: 720px) and (max-width: 922px) {
  #nc-app .gallery-header {
    background-position-x: -250px;
  }
}
@media (min-width: 577px) and (max-width: 719px) {
  #nc-app .gallery-header {
    background-position-x: -550px;
  }
}

@media(min-width: 1200px) {
  #nc-app .section {
    max-width: 900px;
  }
}

@media(max-width: 577px) {
  #nc-app .youth-profile-header-ask {
    font-size: 16px;
  }
}

@media(min-width: 1400px) {
  #nc-app .gallery-header {
    padding-left: 0;
  }

  #nc-app .header-wrapper {
    max-width: 75rem;
    margin: 0 auto;
  }

  #nc-app nav.search {
    margin-left: 0;
  }

  #nc-app .search-container,
  #nc-app .youth-profile-wrapper {
    max-width: 75rem;
    margin: 0 auto;
  }

  #nc-app .search-results {
    padding-left: 50px;
  }

  #nc-app .youth-profile-header {
    padding-left: 0;
  }

  #nc-app .youth-profile-header-wrapper {
    max-width: 75rem;
    margin: 0 auto;
    position: relative;
  }

  #nc-app .youth-profile-header-ask,
  #nc-app .youth-profile-header-new-search {
    right: 0;
  }
}