/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */


.reverse-string {
  direction: rtl;
  unicode-bidi: bidi-override;
}

 #submit-loading {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  background: rgba(0, 0, 0, .4);
  margin: 0;
  padding: 0;
  z-index: 9999;    
}

#submit-loading div {
  opacity: 25%;
}

.exclude-sold-checkbox {
  width: 1.5rem !important;
  height: 1.5rem !important;
}
/* ------------------- */
/*        setup        */
/* ------------------- */

:root {
  --dark-blue: #2B348E;
  --sky-blue: #55C0EE;
  --lapis-lazuli: #0064A0;
  --grey: #4F4F4F;
  --black: #231F20;
  --pastel-blue: #D1EFFB;
  --myriad: "myriad-pro", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
}

body * {
  font-family: var(--myriad);
}

body a {
  text-decoration: none;
}

.mw-480 {
  width: 100%;
  max-width: 480px;
}


.mw-576 {
  width: 100%;
  max-width: 576px;
}

.mw-lg-576 {
  width: 100%;
}

.mw-768 {
  width: 100%;
  max-width: 768px;
}

.mw-lg-768 {
  width: 100%;
}

.mw-1024 {
  max-width: 1024px;
}

h1,
h2,
h3,
h4,
h5 {
  margin-bottom: 0;
}

.section-p {
  padding-top: 64px;
  padding-bottom: 64px;
}

.single-p {
  padding-bottom: 64px;
}

.section-p p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.section-long-p {
  padding-top: 176px;
  padding-bottom: 96px;
}

.row-gap-6 {
  row-gap: 64px;
}

.row-gap-7 {
  row-gap: 96px;
}

.row-gap-64 {
  row-gap: 64px;
}

.bg-pastel {
  background-color: var(--pastel-blue) !important;
}

.c-dark-blue {
  color: var(--dark-blue) !important;
}



/* buttons */
.nbao-btn {
  background-color: var(--lapis-lazuli);
  border-radius: 8px;
  border: 1px solid var(--dark-blue);
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  padding: 12px 18px;
  text-align: center;
  white-space: nowrap;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nbao-btn a {
  color: white;
}

.resource-item .nbao-btn {
  color: #fff;
  text-decoration: none;
}

.nbao-btn:hover,
.nbao-btn:focus-visible {
  background-color: var(--pastel-blue);
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}

.nbao-btn i {
  font-size: 18px;
  color: #ffffff;
}

.nbao-btn:hover i {
  color: var(--dark-blue);
}

/* Skip to main content */
.skip-to-main-content {
  position: absolute;
  left: -9999px;
  z-index: 9999;
  padding: 1em;
  background-color: black;
  color: #fff;
  opacity: 0;
}

.skip-to-main-content:focus {
  left: 50%;
  top: 1%;
  transform: translateX(-50%);
  opacity: 1;
  border: 1px solid red;
}

/* section divider */
.section-divider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-divider div {
  height: 1px;
  width: 100%;
  max-width: 1300px;
  padding: 0px 32px;
  align-self: center;
  background-color: var(--sky-blue);
}

/* top bar */
.nbao-top-bar {
  background-color: var(--dark-blue);
}

.top-bar-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: 32px;
  padding: 8px 0px;
}

.member-login {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #ffffff;
  gap: 16px;
  font-weight: 700;
  position: relative;
  font-size: 16px;
  line-height: auto;
}

.member-login::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.member-login:hover::before {
  transform: scale(1);
}

.lang-switch {
  display: flex;
  flex-direction: row;
  column-gap: 1px;
  background-color: var(--dark-blue);
  border-radius: 8px;
}

.lang-switch a {
  background-color: #ffffff;
  padding: 5px 8px;
  color: var(--dark-blue);
  font-weight: 700;
  font-size: 12px;
  /* line-height: ; */
  transition: background-color 0.2s ease;
}

.lang-switch a:hover,
.lang-switch:focus-visible {
  background-color: var(--pastel-blue);
}

.lang-switch a.active {
  background-color: var(--pastel-blue);
}

.lang-switch a:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.lang-switch a:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* navigation menu */
.navbar-brand {
  height: 60px;
}

.navbar-brand img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.navbar-brand .logo-small {
  display: block;
}

.navbar-brand .logo-big {
  display: none;
}

.nbao-nav {
  /* margin-top: 44px; */
  background-color: #ffffff;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.1);
}

.nbao-nav .nbao-top-bar {
  height: 44px;
  transition: height 0.2s ease;
  overflow: hidden;
}

.nbao-nav.scrolled .nbao-top-bar {
  height: 0;
  /* margin-top: 0; */
}

.nbao-nav .navbar-nav {
  column-gap: 8px;
}

.nbao-nav .nav-link {
  color: #475467;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  position: relative;
}

.nbao-nav .nav-link.active {
  color: #475467;
}

.nbao-nav .nav-link.active::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--dark-blue);
}

.nbao-nav .nav-link:not(.active)::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--dark-blue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nbao-nav .nav-link:not(.active):hover::after {
  transform: scaleX(1);
}

.nbao-nav .find-optometrist {
  /* background: var(--lapis-lazuli);
    border-radius: 8px;
    border: 1px solid var(--dark-blue);
    color: #ffffff; */
  display: block;
  /* font-weight: 600; */
  padding: 8px;
  /* text-decoration: none; */
  /* transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; */
}

.nbao-nav .find-optometrist:hover,
.nbao-nav .find-optometrist:focus-visible {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
}

/* ---------------- */
/*     HOMEPAGE     */
/* ---------------- */

/* homepage banner */
.home-banner {
  height: calc(100vh - 44px);
}

.home-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-image.no-img {
  object-fit: contain;
  padding: 20vh 5vw;
}

.home-banner .carousel-caption {
  bottom: 0;
  right: unset;
  left: unset;
  width: 100%;
  height: 100%;
  align-content: center;
  background-color: rgba(43, 52, 142, 0.80);
}

.carousel-caption div {
  max-width: 991px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15%;
  padding-right: 15%;
}

.carousel-caption h1,
.carousel-caption h2 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 900;
  line-height: 44px;
}

.carousel-caption p {
  font-size: 18px;
  line-height: 28px;
}

/* home navigation section */
.action-card-section {
  transform: translateY(-64px);
}

.action-card {
  height: 340px;
  min-width: 240px;
  max-width: 280px;
  border-radius: 16px;
  flex: 1 0 0;
  background-size: cover;
  background-position: center;
  background-image: var(--bg-image, "");
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.3s ease;
}

.action-card div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 100, 160, 0.25);
  backdrop-filter: blur(12px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px;
  top: 80%;

  transition: all 0.3s ease;
}

.action-card div i {
  display: none;
  width: 64px;
  height: 64px;
  text-align: center;
  align-content: center;
  color: #ffffff;
  background-color: var(--dark-blue);
  border-radius: 12px;
  font-size: 28px;
}

.action-card:hover {
  box-shadow: 0px 0px 0px 5px var(--sky-blue);
}

.action-card:hover div {
  top: 0;
}

.action-card:hover div i {
  display: block;
}

.action-card h3 {
  color: var(--dark-blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}

/* mission statement */
.home-mission .bg-logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: contain;
  position: absolute;
  /* margin-left: auto;
    margin-right: auto; */
  z-index: 0;
}

.section-title h2 {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark-blue);
  font-weight: 700;
}

.section-title p {
  font-size: 18px;
  line-height: 28px;
  color: var(--grey);
}


/* find optometrist */

.section-image {
  width: 100%;
  max-width: 576px;
  border-radius: 16px;
  overflow: hidden;
}

.section-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}


/* blue boxes */
.blue-box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}

.blue-box-item {
  background-color: var(--pastel-blue);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  height: 280px;
  min-width: 280px;
  max-width: 420px;
  padding: 24px;
  align-items: flex-start;
  flex: 1 0 0;
  justify-content: space-between;
}

.blue-box-item>i {
  color: #ffffff;
  background-color: var(--dark-blue);
  font-size: 14px;
  width: 48px;
  height: 48px;
  border-radius: 9px;
  align-content: center;
  text-align: center;
  flex-shrink: 0;
}

.blue-box-item h4 {
  color: var(--dark-blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 8px;
}

.blue-box-item p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--grey);
  text-overflow: ellipsis;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.blue-box-item a {
  color: var(--dark-blue);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  position: relative;
}

.blue-box-item a:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--dark-blue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.blue-box-item a:hover:before {
  transform: scaleX(1);
}




/* -------------- */
/*     footer     */
/* -------------- */
footer {
  background-color: var(--dark-blue);
  padding-top: 64px;
  padding-bottom: 48px;
}

.footer-logo {
  display: flex;
  width: 100%;
  max-width: 300px;
}

footer ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
  text-align: center;
}

footer p,
footer a {
  color: #ffffff;
}

footer ul a {
  color: #ffffff;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  position: relative;
}

footer ul a:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--pastel-blue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

footer ul a:hover {
  color: var(--pastel-blue);
}

footer ul a:hover:before {
  transform: scaleX(1);
}


/* subpage banner */
.subpage-banner {
  /* margin-top: 44px; */
  width: 100%;
  height: 400px;
  position: relative;
}

.subpage-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.subpage-banner-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(43, 52, 142, 0.80);
  align-content: center;
}

.subpage-banner h1 {
  margin-top: 46px;
  color: #FFF;
  text-align: center;
  font-size: 44px;
  font-weight: 900;
  line-height: 72px;
}

/* -------------- */
/*     about      */
/* -------------- */

.code-of-ethics-segment {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.code-ethics-title h2 {
  color: var(--dark-blue);
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
}



.code-ethics-list {
  color: #475467;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}



.ethics-img-container {
  width: 100%;
  max-width: 576px;
  border-radius: 16px;
  overflow: hidden;
}

.ethics-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}



.team-section {
  background-color: var(--pastel-blue);
}

.team-title {
  color: var(--dark-blue);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-title h2 {
  color: var(--dark-blue, #2B348E);
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.72px;
}

.team-title p {
  color: var(--dark-blue, #2B348E);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.team-member {
  justify-content: start;
  align-items: center;
  min-width: 240px;
  max-width: 280px;
  gap: 20px;
  flex: 1 0 0;
}

.team-member h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.team-member .role {
  color: var(--lapis-lazuli);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.team-member span {
  font-size: 16px;
  font-weight: 400;
  color: #475467;
}

.team-member i {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--dark-blue);
  border-radius: 10px;
  background-color: #fff;
  color: var(--dark-blue);
}

.team-section .bg-logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: contain;
  position: absolute;
  z-index: 0;
}

.cao-img-container {
  height: 400px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.cao-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


.cao-description h2 {
  color: var(--dark-blue, #2B348E);
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px;
}

.cao-description p {
  color: var(--grey, #4F4F4F);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 34px;
}



/* -------------- */
/*    Contact     */
/* -------------- */

.blue-box-container.contact-container {
  gap: 24px;
}


.blue-box-container.contact-container p {
  overflow: hidden;
  color: var(--dark-blue, #2B348E);
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}


.contact-item a {
  font-weight: 600;
  color: var(--dark-blue);
}

.contact-item {
  row-gap: 64px;
  height: 270px;
  padding: 24px;
  align-items: flex-start;
  flex: 1 0 0;
}


.contact-item i {
  font-size: 24px;
}

.form-title {
  gap: 20px;
  display: flex;
  flex-direction: column;
}

.form-title h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--dark-blue);
  text-align: center;
}

.form-title h3 {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-form-item {
  display: flex;
  flex-direction: column;
}

.contact-form-item input {
  padding: 10px 14px;
}

.contact-form span {
  color: #D80000;
}

.contact-form button {
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--dark-blue, #2B348E);
  background: var(--lapis-lazuli, #0064A0);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.contact-form input:focus {
  border-color: var(--lapis-lazuli);
}

.blue-box-item.contact-item {
  justify-content: unset;
  row-gap: 64px;
  height: 270px;
  max-width: 342px;
}

.contact-form button {
  margin-top: 8px;
}

.contact-form-item textarea {
  resize: none;
}

/* -------------- */
/*   regulatory   */
/* -------------- */

.regulatory-container {
  row-gap: 96px;
}

.regulatory-text p {
  color: #4F4F4F;
  font-size: 18px;
  font: 400;
}

.regulatory-text a {
  color: var(--dark-blue, #2B348E);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}

.regulatory-text li::marker {
  color: var(--dark-blue);
}

.regulatory-text i {
  color: var(--dark-blue);
  width: 24px;
  height: 24px;
}

.regulatory-text li strong,
.regulatory-text li b {
  color: var(--dark-blue);
}

.regulatory-title h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--dark-blue);
  margin-bottom: 16px;
}

.regulatory-img-container {
  height: 400px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.regulatory-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image-show-none {
  display: none;
}


.law-button {
  border-radius: 8px;
  background-color: var(--lapis-lazuli);
  border: 1px solid var(--dark-blue);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.law-button:hover {
  background-color: var(--pastel-blue);
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}

.law-button i {
  color: #FFF;
}

.law-button i:hover {
  color: var(--dark-blue);
}

.regulatory-text a.law-button {
  color: #FFF;
  text-decoration: none;
}

.regulatory-text a.law-button:hover {
  color: var(--dark-blue);
}




/* -------------- */
/*   Resources    */
/* -------------- */

.tab-menu .nav-link {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid var(--dark-blue);
  box-shadow: none;
  transition: 0.2s;
  color: var;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.tab-menu .nav-link.active {
  background-color: #FFF;
  color: #344054;
  border: 1px solid var(--dark-blue);
  transform: translateX(-4px);
  transform: translateY(-4px);
  box-shadow: 4px 4px 0px 0px #C5C8F0;
}

.tab-menu .nav-link:hover {
  background-color: #FFF;
  color: #344054;
  border: 1px solid var(--dark-blue);
  transform: translateX(-4px);
  transform: translateY(-4px);
  box-shadow: 4px 4px 0px 0px #C5C8F0;
}


.resource-wrapper .resource-tab.show {
  max-width: 1216px;
  background-color: #F8F9FA;
  border-radius: 24px;
  box-shadow: 8px 8px 0px 0px #C5C8F0;
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}


.tab-img-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
}

.tab-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.resource-content {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
  padding: 0px;
  max-width: 576px;
  gap: 20px;
}

.resource-content h2 {
  color: var(--dark-blue, #2B348E);
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.72px;
}

.resource-content ul {
  margin-top: 20px;
  margin-bottom: 20px;
  list-style: none;
  padding-left: 0;
}

.resource-content li {
  color: var(--dark-grey, #2E2E2E);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 28px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 16px;
}

.resource-content li::after {
  font-family: 'Font Awesome 6 Pro';
  content: '\e122';
  font-weight: 900;
  position: absolute;
  color: var(--dark-blue);
  font-size: 12px;
  left: 0;
  top: 0;
}


.resource-content i {
  color: var(--dark-blue);
}

.resource-content a.law-button i {
  color: #FFF;
}

.resource-content a.law-button:hover i, 
.resource-content a.law-button:focus i {
  color: var(--dark-blue);
}

.resource-content li::marker {
  color: var(--lapis-lazuli);
}

.resource-content a {
  color: var(--dark-blue, #2B348E);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: underline;
}

.resource-content span {
  color: #2E2E2E;
  font-size: 18px;
  font-style: normal;
}

.resource-item li strong {
  color: var(--dark-blue, #2B348E);
}

.info-btn {
  background-color: var(--lapis-lazuli);
  border-radius: 8px;
  border: 1px solid var(--dark-blue);
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  padding: 12px 18px;
  text-align: center;
  white-space: nowrap;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.info-btn:hover,
.info-btn:focus-visible {
  background-color: var(--pastel-blue);
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}

/* -------------- */
/*     login      */
/* -------------- */

.login-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
}


.back-btn {
  display: flex;
  gap: 8px;
  align-items: center;
}

.back-btn a,
.back-btn i {
  color: var(--dark-blue);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  display: flex;
  padding-top: 21px;
}

.memeber-title-area {
  align-items: center;
  gap: 24px;
}

.logo-container {
  display: flex;
  background-color: var(--dark-blue);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
}

.logo-container img {
  width: 32px;
  height: 18px;
}

.form-member-wrapper {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-member input {
  padding: 10px 14px;
}

.form-member input:focus {
  border-color: var(--lapis-lazuli);
}

.form-member-wrapper p {
  color: #475467;
  font-size: 14px;
  font-weight: 400;
}

.form-member-wrapper a {
  color: var(--lapis-lazuli);
  font-size: 14px;
  font-weight: 600;
}

.member-title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-member-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-member {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-member p {
  margin-bottom: 0;
}

.member-title h2 {
  color: #101828;
  font-size: 30px;
  font-weight: 600;
}

.member-title p {
  color: #475467;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 0;
}



.member-btn {
  background-color: var(--lapis-lazuli);
  border-radius: 8px;
  border: 1px solid var(--dark-blue);
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  padding: 12px 18px;
  text-align: center;
  white-space: nowrap;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.member-btn:hover,
.member-btn:focus-visible {
  background-color: var(--pastel-blue);
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}

.member-btn:active {
  background-color: #fff;
}

.member-img-area {
  display: none;
  position: relative;
  width: 100%;
  border-radius: 20px;
  height: 850px;
  overflow: hidden;
}

.member-img-container {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 912px;
}

.member-img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.frost-window {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.member-logo-img {
  display: flex;
  position: absolute;
  width: 420px;
  height: 337px;
}

/* -------------- */
/*     sign-up    */
/* -------------- */
.back-btn-img {
  padding-top: 25px;
}

.back-btn-img a img {
  width: 220px;
  height: 30px;
}



/* members-home */

.mem-home-title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.mem-home-title p {
  color: #475467;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

.action-card-section.member-action-cards {
  transform: none;
  gap: 32px;
}

.member-action-cards .action-card {
  max-width: 384px;
  height: 340px;
}

.announcement-box {

  background-color: var(--pastel-blue);
  border-radius: 16px;
  padding: 24px;
  margin-top: 62px;
  max-width: 420px;

}

.announcement-box.updates-announcement-box {
  margin-top: 59px;
  max-width: 576px;
}

.announcement-box h4 {
  color: var(--dark-blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.announcement-title {
  margin-bottom: 8px;
}

.announcement-box i {
  height: 24px;
  width: 24px;
  color: var(--dark-blue);
  align-content: center;
}

.announcement-box h3 {
  color: var(--dark-blue);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

.announcement-box p {
  overflow: hidden;
  color: var(--grey, #4F4F4F);
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.announcement-box a {
  color: var(--dark-blue, #2B348E);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.latest-update-title {
  padding-bottom: 64px;
}

.latest-update-title h2 {
  color: var(--dark-blue, #2B348E);
  font-size: 36px;
  font-weight: 600;
}

.latest-update-title p {
  color: var(--grey, #4F4F4F);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.upcoming-events-title {
  margin-bottom: 32px;
}

.upcoming-events-title h3 {
  color: var(--dark-blue, #2B348E);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.upcoming-events-title i {
  height: 24px;
  width: 24px;
  color: var(--dark-blue);
  align-content: center;
}

.upcoming-events .accordion {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.upcoming-events .accordion-body p {
  color: var(--colors-text-text-tertiary-600, #475467);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}

.accordion-item:first-of-type>.accordion-header .accordion-button,
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
  border-radius: 0;
}

.upcoming-events .accordion-header button {
  color: var(--dark-blue, #2B348E);
  font-size: 18px;
  font-weight: 600;
}

.upcoming-events .accordion {
  --bs-accordion-active-bg: #FFF;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-border-width: none;
}

.upcoming-events .accordion-button:hover {
  background-color: var(--pastel-blue);
}

.upcoming-events .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.accordion-item:first-of-type,
.accordion-item:last-of-type {
  border-radius: 16px;
  overflow: hidden;
}

.upcoming-events .accordion-item:has(.accordion-button:not(.collapsed)) {
  border: 1px solid #C5C8F0;
}



/* news and announcements */

.members-title {
  background-color: var(--dark-blue);
  padding: 32px;
  margin-top: 66px;
}

.members-title h1 {
  color: #FFF;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  line-height: 66px;
}

.categories-nav {
  display: flex;
  flex-direction: column;

}

.categories-list .pb-2 {
  display: none;
}

.categories-list h4 {
  color: var(--lapis-lazuli, #0064A0);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.categories-list a {
  color: #667085;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-top: 6px;

}

.categories-nav :focus {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
  border-radius: 6px;
}

.categories-nav .active {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
  border-radius: 6px;
}

.categories-list a:hover {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
  border-radius: 6px;
}

.categories-list a:active {
  background-color: #fff;
  color: var(--dark-blue);
  border-radius: 6px;
}


.announcement-box-icon i {
  background-color: darkblue;
  font-size: 24px;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  width: 42px;
  height: 42px;
}

.announcement-box {
  display: flex;
  flex-direction: column;
  gap: 64px;
  min-width: 280px;
  margin-top: 0;
}

.announcement-link {
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
}


.announcement-link:before {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--dark-blue);
  transition: width 0.2s ease;
}

.announcement-link:hover:before {
  width: 26%;
}



.agm-hotel-dates {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
}

.agm-hotel-dates-title h2 {
  color: var(--dark-blue);
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
}

.agm-hotel-dates-text p {
  color: #344054;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.agm-hotel-info {
  gap: 8px;
}

.agm-hotel-info p {
  color: #344054;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.agm-hotel-info i {
  font-size: 24px;
  text-align: center;
  color: var(--dark-blue);
}

.news-and-announcement-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
}

.categories-menu a {
  color: #667085;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.categories-menu a.active {
  background-color: var(--pastel-blue);
  color: var(--dark-blue);
  border-radius: 6px;
}

.custom-dropdown-btn {
  display: block;
  width: 100%;
}

.dropdown-menu {
  --bs-dropdown-min-width: 100%;
}

/* practice and profession aides */

.info-list-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
}

.info-list-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-list-item h3 {
  color: var(--dark-blue, #2B348E);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.4px;
}

.info-list-item-text {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.info-list-item-text-inner {
  display: flex;
  gap: 8px;
  padding-left: 16px;
  align-items: center;
  position: relative;
}

.info-list-item-text-inner a {
  color: #344054;
  font-size: 18px;
  margin: 0;
  text-decoration: none;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}



.info-list-item-text-inner::before {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--dark-blue);
  transition: width 0.2s ease;
}

.info-list-item-text-inner:hover:before {
  width: 95%;
}



.info-list-item-text i {
  color: var(--dark-blue);
  font-size: 20px;
  position: relative;
}


/* News and Announcements */

.news-and-announcement-heading h2 {
  color: var(--dark-blue);
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
}

.news-and-announcement-text p {
  color: #344054;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

/* -------- */
/* 404 page */
/* -------- */
.not-found {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* gap: 24px; */
}

.not-found span {
  font-size: 96px;
  font-weight: 800;
  color: var(--dark-blue);
}

.not-found img {
  width: 100%;
  max-width: 768px;
  left: 0;
  top: 0;
  opacity: 0.6;
}

/* Tweaks & Overrides */ 
.blue-box-container .blue-box-item.contact-item { height: auto; }
.blue-box-container .blue-box-item.contact-item p { -webkit-line-clamp: unset; }

.contact-form label.required::after {
  content: ' *';
  color: red;
}

.nbao-nav .offcanvas .btn-close {
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nbao-nav .offcanvas .btn-close i {
  font-size: 1.25rem;
}


/*---------------------
  Interactive Map
-----------------------*/

.sidebar.map-listings {
    position:relative;
    width:33.3333%;
    height:100%;
    top:0;left:0;
    overflow:hidden;
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    border-left: 1px solid #EEE;
    padding-inline: 0;
}

.map.mapboxgl-map {
    position:relative;
    left:0%;
    min-height: 1000px;
    width:66.6666%;
    top:0;bottom:0;
}

.sidebar.map-listings .heading {
    padding: 16px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-bottom: 1px solid #EEE;
}

.sidebar.map-listings .listings {
  /* height: calc(100% - 140px); */
  overflow:auto;
  padding-bottom:40px;
}

.sidebar.map-listings .listings .item {
    border-bottom: 1px solid #EEE;
}

.sidebar.map-listings .listings .item .title a {
    display: flex;
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.sidebar.map-listings .listings .item.active {
  background-color: rgba(30, 63, 106, 0.075);
}
.sidebar.map-listings .listings .item .title p {
    color: var(--dark-blue);
    font-family: var(--txt-font);
}
.sidebar.map-listings .listings .item .title span {
  font-weight: 400;
  color: #000;
  font-size: 13px;
  margin-top: 11px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.listings .item .title span i {
    font-size: 17px;
    color: #344f74;
}
.mapboxgl-popup-content span.info-items i {
    margin: 0 7px 0 0;
    font-size: 17px;
    width: 32px;
    color: #344f74;
}

.marker {
  border: none;
  cursor: pointer;
  height: 40px;
  width: 40px;
  background-color: rgba(0, 0, 0, 0);
}

/* Marker tweaks */
.mapboxgl-popup {
  padding-bottom: 50px;
  max-width: 300px!important
}

.mapboxgl-popup-close-button {
  /*display:none;*/
    color: #000;
    padding: 10px;
    font-size: 35px;
    top: -14px;
    right: 3px;
}
.mapboxgl-popup-content {
  padding:0;
  width:330px;
}
.mapboxgl-popup-content-wrapper {
  padding:1%;
}
.mapboxgl-popup-content h3 {
/*  background: #fff;*/
  color: #2b2b2b;
  margin: 0;
  display: block;
  padding: 13px 15px;
  border-radius: 3px 3px 0 0;
  font-weight: 700;
  font-size: 16px;
/*  margin-top: -15px;*/
}

.mapboxgl-popup-content h4 {
    display: none!important;
    margin: 5px 13px;
    margin-bottom: 8px;
    display: block;
    padding: 10px 20px 0 7px;
    font-weight: 700;
    font-size: 16px;
    color: #79242f;
}
.mapboxgl-popup-content span {
  font-weight: 400;
  color: #2b2b2b;
  font-size: 13px;
  padding: 0 20px;
  margin: 5px 0 10px 0;
  position: relative;
  display: flex;
  line-height: normal;
}

.mapboxgl-popup-content div {
  padding:10px;
}
.mapboxgl-popup-content .btn-more-details {
/*  padding: 0px 0 4px 20px;*/
  padding: 0;
  display: block;
/*  margin: 21px 0 15px 0;*/
}
.mapboxgl-popup-content .btn-more-details a {
  padding: 7px 25px;
  font-size: 13px;
  border-radius: 25px;
}

.mapboxgl-container .leaflet-marker-icon {
  cursor:pointer;
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
  border-bottom-color: #79242f;
}

.sidebar.map-listings .listings .item .thumbnail .imagesThumbnail {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 0;
  padding: 0;
/*    margin-bottom: -19px;*/
}
.popup-imagesThumbnail {
  height: 150px;
  width: 100%;
  object-fit: cover;
  margin-bottom: 6px;
}
.geocoder {
  position: absolute;
  z-index: 1;
  width: 50%;
  left: 50%;
  margin-left: 0;
  top: 10px;
}
.geocoder .mapboxgl-ctrl-geocoder input[type='text'] {
  padding: 10px 40px 11px 33px;
}
select#category_filter,
input#map_query {
  height: 44px;
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.has-search .form-control {
  padding-left: 2.375rem;
}
.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.5rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  pointer-events: none;
  color: #aaa;
}

.sidebar.map-listings .listings .item .title div.category_name {
    position: absolute;
    top: unset;
    bottom: 0;
    margin-bottom: 15px;
    max-width: 120px;
    padding-left:5px ;
    height: auto;
    background: #1e3f6a;
    color: #fff;
    font-weight: 600;
    overflow: hidden;
}

/*---------------------
  Filter
-----------------------*/

.filter {
    position: relative;
    left: 0;
    top: 0;
    width: 20%;
    height: 100%;
    background: #f8feff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;
    padding: 30px 34px 30px 30px;
    overflow-y: auto;
    border-right:3px solid #513862;
    z-index: 99;
    padding-top: 120px;
    float: left;
}

.ov-hid {
  overflow: hidden;
/*  padding-left: 400px;*/
}

.filter__title h5 {
  font-size: 18px;
  color: #323232;
  text-align: center;
  font-weight: 700;
}

.filter__title h5 i {
  margin-right: 5px;
}

.filter__search {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    background: #ffffff;
    /* margin-bottom: 30px;
    margin-top: 25px; */
    margin: 15px 0;
}

.filter__search i {
    font-size: 20px;
    color: #513862;
    position: absolute;
    right: 11px;
    bottom: 12px;
}

.filter__select #category_filter:not(.selected):not(:focus-visible),
.filter__search #map_query::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #667085;
    font-family: var(--myriad);
    font-size: 1rem;
    font-weight: 400;
}  

.filter__search .btn.btn-primary {
    background-color: var(--dark-blue);
}

.filter__search .btn.btn-primary:hover, 
.filter__search .btn.btn-primary:focus-visible {
    background-color: white;
    color: var(--dark-blue)
}

.filter__select {
    display: flex;
  border-bottom: 0px solid rgba(0,0,0,.12);
}

.map-container {
    height: 1000px;
}

.map-listings .form-control {
    color: #2b2b2b;
}

.subpages .mapboxgl-popup-content ul li {
    font-size: 13px;
}

.marker::after {
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  width: 40px;
  height: 40px;
  text-align: center;
  align-content: center;
  content: var(--marker-icon, "\f3c5");
  color: #FFF;
  font-size: 20px;
  font-weight: 900;
  background-color: var(--dark-blue);
  border-radius: 50%;
}

.listings .marker-icon { 
    position: relative;
    width: 100%;
    height: 40px; 
}

.listings .marker-icon::after {
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    width: 40px;
    height: 40px;
    text-align: center;
    align-content: center;
    content: var(--marker-icon, "\f3c5");
    color: #FFF;
    font-size: 20px;
    font-weight: 900;
    background-color: var(--dark-blue);
    border-radius: 50%;
}

.map-listings .heading h2 {
    color: var(--dark-blue);
    font-family: var(--txt-font);
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.listings .item {
    padding: 16px 24px;
}

.listings .item .title {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 10px;
}

.listings .listing-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.listings .listing-title {
    color: var(--dark-blue);
    font-family: var(--txt-font);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    padding: 5px 0;
}

.listings .item.active a .listing-title,
.listings a:hover .listing-title,
.listings a:focus-visible .listing-title {
  /* background-color: var(--pastel-blue); */
  text-decoration: underline;
}

.listing-info .address {
    display: flex;
    align-items: center;
    gap: 10px;
}

.listing-info .link-container a {
    color: var(--dark-txt-color);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.listing-info .link-container a:hover span,
.listing-info .link-container a:focus span {
    color: var(--primary);
    text-decoration: underline;
}
.listing-info i {
    color: #000;
    font-size: 15px;
    font-weight: 300;
}

.map-container .mapboxgl-popup-content .popup-title {
    color: var(--dark-blue);
    font-family: var(--myriad);
    font-size: 24px;
    font-weight: 600;
}

.map-container .mapboxgl-popup-content {
    padding: 0;
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
}
.map-container .mapboxgl-popup-close-button {
    position: relative;
    display: block;
}


.map-listings .listing-info i.fad {
  color: var(--lapis-lazuli)
}
  
.map-listings .listing-info .doctor-container span {
  display: block;
  color: var(--lapis-lazuli);
  margin-bottom: 5px;
}
.map-listings .listing-info .doctor-container ul {
  margin: 0;
  list-style-type: none; 
  padding: 0; 
}

.map-listings .listing-info .doctor-container ul li::before {
  font-family: "Font Awesome 6 Pro"; 
  display: inline-block;
  font-weight: 900;
  width: 1.25em;
  margin-left: 2px;
  margin-right: 10px;
  content: "\f0f0";
  color: var(--dark-blue);
}
@media screen and (min-width: 375px) {}

/* Phablet */
@media screen and (min-width: 425px) {


    .navbar-brand .logo-small {
        display: none;
    }

    .navbar-brand .logo-big {
        display: block;
    }

    .navbar-brand {
        width: 280px;
        height: auto;
    }

    .back-btn-img a img {
        width: 318.526px;
        height: 45px;
    }

}

@media screen and (min-width: 576px) {
    .members-title h1 {
        font-size: 60px;
    }

    .custom-dropdown-btn {
        justify-content: center;
        align-items: center;
    }


}

/* Tablet */
@media screen and (min-width: 768px) {
    .section-p {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .single-p {
        padding-bottom: 96px;
    }

    .row-gap-64 {
        row-gap: 96px;
    }

    /* navbar */
    .navbar-brand {
        width: 320px;
    }

    /* homepage carousel */
    .carousel-caption h1,
    .carousel-caption h2 {
        font-size: 48px;
        line-height: 56px;
    }

    /* homepage mission statement */
    .section-title h2 {
        font-size: 36px;
        line-height: 44px;
    }


    .section-title p {
        font-size: 20px;
        line-height: 30px;
    }


    /* resources */
    .resource-content h2 {
        font-size: 36px;
        line-height: 44px;
    }

    .resource-content {
        padding: 16px;
    }

    /* blue box items */
    .blue-box-item {
        height: 300px;
    }

    /*contact*/
    .blue-box-container.contact-container {
        padding-left: 32px;
        padding-right: 32px;
    }

    /* footer */
    footer ul {
        flex-direction: row;
    }

    .ethics-img-container {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        height: 654px;
    }

    .subpage-banner h1{
        font-size: 60px;
    }

    /* 404 page */
    .not-found span{
        font-size: 192px;
    }
}
/* Laptop */
@media screen and (min-width: 992px) {
    .mw-lg-576 {
        max-width: 576px;
    }

    .mw-lg-768 {
        max-width: 768px;
    }

    .resource-wrapper .resource-tab.show {
        flex-direction: row;
        row-gap: 32px;
        padding: 24px;
    }

    /* regulatory */
    .image-show-none {
        display: block;
    }

    /*login*/

    .member-img-area {
        display: block;
    }

    .login-section {
        padding-top: 0;
    }

    /*news and announcements*/


    .categories-nav {
        text-align: left;
    }

    .categories-list .pb-2 {

        display: block;

    }

    .resource-content {
        padding: 32px;
    }

}

/* Small screen */
@media screen and (min-width: 1200px) {

    /* homepage carousel */
    .carousel-caption div {
        padding-left: 0;
        padding-right: 0;
    }

    .carousel-caption h1,
    .carousel-caption h2 {
        font-size: 60px;
        line-height: 72px;
    }

    /*members homescreen*/

    .action-card h3 {
        font-size: 24px;
    }


    .resource-wrapper .resource-tab.show {
        padding: 48px;
    }


}

/* Large screen */
@media screen and (min-width: 1400px) {}

/* ultra large */
@media screen and (min-width:1536px) {
    .subpage-banner {
        height: 396px;
    }

    .row {
        flex: 1;
    }
}

@media screen and (max-width:991px) {
    .map-container {
        flex-direction: column;
        height: unset;
    }
    .sidebar.map-listings {
        border-right: 1px solid #EEE;
        width: 100%;
        height: 600px;
        flex-shrink: 0;
    }
    .map.mapboxgl-map {
        width: 100%;
        min-height: 600px;
    }
}