/* Typography */
/* @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap'); */

:root {
  --body-font: "Source Sans 3", sans-serif;
  --heading-font: "EB Garamond", serif;

  --color-blue-1: #51516e;
}

body {
  font-family: var(--body-font);
  font-size: 20px;
  color: #453B36;
}

:is(h1,h2,h3,h4,h5,h6) {
  font-family: var(--heading-font);
}

a {
  transition: all .2s;
  cursor: pointer;
}

/* Lists */

.WaGadgetRecentBlogPosts ul li,
.arrows-list ul li {
  padding-left: 27px;
  position: relative;
}
.WaGadgetRecentBlogPosts ul li::before,
.arrows-list ul li::before {
  content: url(/resources/Pictures/icons/bullet-arrows.svg);
  position: absolute;
  top: .1em;
  left: 0;
  border: none;
}


/* General */
* {
  box-sizing: border-box;
}
body {
  border-top: 3px solid #F3E8E2;
}
.mLayout {
  overflow: hidden;
}

.s1_grid_12 {
  width: 100%;
  margin-inline: 0;
}

:is(.zoneHeader1, .zoneHeader2, , .zoneHeader3, .zoneContent, .zoneFooter1, .zoneFooter2, .zoneFooter3) .container_12,
.zoneContent .boxHeaderContainer .inner,
.zoneContent .boxBodyOuterContainer,
#mLayout .zoneContent .pageTitleContainer,
.WaGadgetBlog .blogEntryOuterContainer .boxBodyOuterContainer {
  width: 100%;
  max-width: 1170px;
  padding-inline: 1em;

  @media screen and (min-width: 616px) {
    margin-inline: auto;
    padding-inline: 0;
  }
}


/* Main Header
---------------------------------------------------------------- */

#id_Header > div {
  margin-block: 0 -35px;
  gap: 0 1em;
  padding: 1px 0;
  display: grid;
  grid-template-columns: 60px 4fr 60px;

  @media screen and (min-width: 616px) {
    grid-template-columns: 5fr 7fr;
    grid-template-rows: 20px 120px 1fr;
  }
}
#id_Header .WaLayoutContainerFirst {
  grid-column: 2/3;
  grid-row: 1/2;
  align-self: center;
  margin-block: 0;

  @media screen and (min-width: 616px) {
    grid-column: 1/2;
    grid-row: 1/3;
  }
}
#id_Header .WaLayoutContainerFirst .WaLayoutTable {
  @media screen and (min-width: 616px) {
    height: 100px;
  }
}
#id_Header .WaLayoutContainerFirst .WaLayoutTable .WaLayoutRow {
  display: flex;
  align-items: center;
  height: 100%;
}

#id_Header .WaGadgetMenuHorizontal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  @media screen and (min-width: 616px) {
    position: static;
    width: auto;
    grid-column: 2/3;
    grid-row: 2/3;
    justify-self: end;
  }
}

#id_Header .WaGadgetSiteSearch {
  @media screen and (max-width: 616px) {
    grid-column: 2/3;
  }
}

#id_Header .WaLayoutContainerLast {
  grid-column: 1/3;
}

.WaGadgetSiteSearch .searchBoxField {
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: .25em;
  box-shadow: none;
  margin-block: .25em 0;
}


/* Navigation
---------------------------------------------------------------- */
.WaGadgetMenuHorizontal .menuInner {
  height: 100%;
  display: flex;
  align-items: center;
}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel {
  display: flex;
}
#id_Header .menuInner a {
  color: #fff;
  font-size: 17px;
  padding: .5em 1em;
  height: auto !important;
}
#id_Header .menuBackground {
  display: none;
  background: none;
  box-shadow: none;
}
/* Selected Item */
#id_Header .WaGadgetMenuHorizontal .menuInner .firstLevel>li.sel>.item>a,
#id_Header .WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item:hover>a {
  background: none;
  color: #983301;
}
#id_Header .WaGadgetMenuHorizontal .menuInner .firstLevel>li.sel>.item>a::after,
#id_Header .WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item:hover>a::after,
#id_Header .WaGadgetMenuHorizontal .menuInner ul.firstLevel>li.dir>.item>a:after {
  content: none;
}

@media screen and (min-width: 616px) {
  #id_Header .menuInner a {
    color: #453B36;
  }

  /* Dropdown */
  #id_Header .WaGadgetMenuHorizontal .menuInner ul ul {
    background: #983301;
  }
  #id_Header .WaGadgetMenuHorizontal .menuInner ul ul a {
    color: #fff;
  }
  #id_Header .WaGadgetMenuHorizontal .menuInner ul ul a:hover {
    background: #b34d1a;
  }
  #id_Header .WaGadgetMenuHorizontal .menuInner ul ul li {
    border-top: none;
  }
}


/* Mobile Header */
.WaGadgetMenuHorizontal[class*=menuStyle] .menuInner .menuButton {
  color: var(--color-blue-1);
  padding: 0.5em .5em 1em;
}

/* Breadcrumbs */
.WaGadgetBreadcrumbs {
  font-family: inherit;
  font-size: .8em;
  color: #E8E8F2;
  display: none;

  @media screen and (min-width: 616px) {
    display: block;
  }
}
.WaGadgetBreadcrumbs ul {
  display: flex;
  gap: .25em;
}
.WaGadgetBreadcrumbs ul li {
  max-width: 20ch;
  text-overflow: ellipsis;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}
.WaGadgetBreadcrumbs li,
.WaGadgetBreadcrumbs li::before {
  color: inherit !important;
}
.WaGadgetBreadcrumbs a {
  font-weight: normal;
  text-decoration: none;
  color: inherit !important;
}
.WaGadgetBreadcrumbs a:hover {
  text-decoration: underline;
}


/* Remove boxes and shadows */
#mLayout .boxBodyContentContainer,
.WaGadgetBlog .blogEntryOuterContainer,
.membersTable,
.WaGadgetBlog ul.boxesList li.boxesListItem,
.WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyContainer .boxBodyContentOuterContainer {
  box-shadow: none;
  margin: 0;
}

/* Boxes */
#mLayout :is(.boxHeaderOuterContainer, .boxBodyOuterContainer, .boxFooterOuterContainer) {
  padding-inline: 0;
}
#mLayout .boxesListItem + .boxesListItem {
  margin-top: 2em;
  padding-top: 2em;
  border-top: 2px solid #e7cfc3;
}
#mLayout .boxFooterPrimaryContainer a {
  font-weight: normal;
}

.WaGadgetBlog .pageTitleOuterContainer {
  display: none;
}

/* Content Header
---------------------------------------------------------------- */

.zoneHeader2 {
  background: #51516e url(/resources/Pictures/waves.svg) 100% 50% repeat-y;
  color: #fff;
  padding-block: 3em 2em;
}
.zoneHeader2 .page-title {
  margin-block-end: 0 !important;
}
.zoneHeader2 .WaPlaceHolder > div {
  padding-block: 0;
}
.zoneHeader2 .page-title .pageTitle,
.zoneHeader2 .page-title h1,
#mLayout .pageTitleContainer .pageTitle {
  font-family: var(--heading-font);
  font-weight: 500;
  color: inherit;
  font-size: 2.5em;
  padding-block-end: 0;
  margin-block-end: 0;
  
  @media screen and (min-width: 616px) {
    padding-inline-end: 33%; /* make space for sidebar */
  }
}
#mLayout .pageTitleOuterContainer {
  margin-block-end: 1em;
}
#mLayout .pageTitleContainer {
  margin-block: 0;
}
.WaGadgetBlog .blogEntryOuterContainer .boxHeaderOuterContainer h4 {
  color: inherit;
}

/* Content
---------------------------------------------------------------- */
.WaGadgetBlog .blogEntryOuterContainer :is(.boxBodyOuterContainer, .boxHeaderOuterContainer) {
  padding-inline: 0;
}
.pageBackContainer {
  display: none;
}


/* Homepage
---------------------------------------------------------------- */
#mLayout:has(.home-banner) .WaGadgetBreadcrumbs {
  display: none;
}
#mLayout:has(.home-banner) #id_Header > div {
  margin-block-end: -15px;
}
.zoneHeader2:has(.home-banner) {
  background: #51516e url(/resources/Pictures/eye-diagram.svg) 50% 150% no-repeat;
}
.home-banner tr {
  display: flex;
  align-items: center;
}
.home-intro font {
  font-family: var(--heading-font);
  font-size: 1.8em !important;
}
.home-photo {
  margin-top: -1em;
  margin-bottom: -4em;
}
#mLayout:has(.home-banner) .gadgetStyleNone .gadgetStyleTitle h4 {
  font-family: var(--heading-font);
  text-transform: uppercase;
  color: #993300;
  font-weight: 600;
}
#mLayout:has(.home-banner) .gadgetStyleNone .title a {
  font-weight: normal;
  color: #555;
}


/* Blog/news
---------------------------------------------------------------- */
.boxHeaderTitle {
  font-family: var(--heading-font);
  font-size: 1.5em !important;
}

/* Calendar
---------------------------------------------------------------- */
.sectionTitle {
  font-family: var(--heading-font);
  font-size: 2em !important;
}
.WaGadgetEventsStateList .boxOuterContainer .boxHeaderOuterContainer  {
  margin-block-end: 0;
}
#mLayout .upcomingEventsContainer .boxHeaderTitle {
  font-family: var(--heading-font);
  font-size: 1.5em !important;
}
#mLayout .upcomingEventsContainer .boxHeaderTitle a::after {
  transform: scale(.6);
  top: .3em;
}
#mLayout:has(.home-banner) .gadgetStyleNone :is(.date, .author) {
  color: #6f6057;
  font-size: .8em;
}
#mLayout:has(.home-banner) .gadgetStyleNone :is(.date, .author) a {
  color: inherit;
}
.gadgetStyleNone + .gadgetStyleNone {
  margin-block-start: 3em;
}

.WaGadgetRecentBlogPosts ul li {
  margin-block-end: 0;
}
.WaGadgetRecentBlogPosts ul li + li {
  margin-block-start: 1.5em !important;
}
.WaGadgetUpcomingEvents ul li {
  text-align: left;
}
.WaGadgetUpcomingEvents ul li::before,
.WaGadgetUpcomingEvents ul li::after {
  display: none;
}

/* Content
---------------------------------------------------------------- */
.zoneContent {
  position: relative;
  z-index: 20;
  pointer-events: none;
}
.zoneContent .s1_grid_12 {
  pointer-events: auto;
}


/* Sidebar
---------------------------------------------------------------- */
#mLayout:not(:has(.full-width)) {

  @media screen and (min-width: 616px) {
    .zoneHeader3 .s1_grid_12,
    .zoneContent .s1_grid_12 {
      max-width: 58%;
    }
    .zoneFooter1 {
      position: absolute;
      z-index: 10;
      top: 160px;
      width: 100%;
    }
    .zoneFooter1 .s1_grid_12 {
      max-width: 33%;
      margin-inline-start: auto;
      background-color: #fff !important;
      padding: 1em;
    }
  }
  
  
  .zoneFooter1 tr {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1em;
  }
  .zoneFooter1 td {
    width: 100% !important;
    color: #706057;
  }
  .zoneFooter1 td h4 {
    font-size: 1em;

  }
  .zoneFooter1 td h4 a,
  .zoneFooter1 .WaGadgetLoginButton::before {
    display: block;
    background: #e8e8f2;
    border-radius: .25em;
    font-family: var(--body-font);
    font-weight: 600;
    text-align: left;
    font-size: 1.2rem;
    padding: .5rem 1rem;
    margin-block-end: .5em;
    text-decoration: none;
    color: #35358B;
  }
  .zoneFooter1 td h4 a:hover {
    background-color: #C1C1DD;
  }
  .zoneFooter1 td p,
  .zoneFooter1 .WaGadgetLoginButton::after {
    font-size: 1rem;
    line-height: 1.5;
    padding-inline: 1rem;
  }
  .zoneFooter1 .alignRight { text-align: left; }

  .zoneFooter1 .WaGadgetLoginButton::before {
    content: "Membership";
    display: block;
    background-color: #f3e8e2;
    color: #993300;
  }
  /* .zoneFooter1 .WaGadgetLoginButton:has(.loginBoxProfileLink)::before {
    content: "Membership";
  } */
  .zoneFooter1 .WaGadgetLoginButton:has(.loginBoxLinkButton)::after {
    content: 'Membership in the American Uveitis Society is open to all physicians and researchers with an active role in the care of patients with uveitis and ocular inflammatory disease or who are currently performing research in an area directly applicable to the field of ocular inflammatory disease or ocular immunology.';
    display: block;
    visibility: visible;
    height: auto;
    text-align: left;
  }
}


/* Footer
----------------------------------------------------------------- */
.zoneFooter1 {
  background: none;
  box-shadow: none;
}

.zoneFooter3 .container_12 {
  border-top: 3px solid #e7cfc3;
}
.zoneFooter3 {
  background: none;
  padding: 0;
  font-size: 0.8em;
}
.zoneFooter3::before {
  border: none;
}



/* Forms
---------------------------------------------------------------- */
.formTitleOuterContainer,
.generalFormOuterContainer .sectionOuterContainer {
  margin-block: 0;
  padding-block: 0;
}

.fieldSubContainer {
  margin: 0;
  padding-block: .15em;
}
.fieldSubContainer tr {
  display: flex;
  align-items: start;
  /* flex-direction: column; */
  gap: .5em;

  /* > * {
    width: 100% !important
  } */
}
.fieldSubContainer table td.left .fieldLabel {
  padding: .65em 0 0;
  text-align: left;
  width: 100%;
  font-size: .75em !important;
}
.fieldSubContainer .fieldBody {
  padding: 0;
}
.fieldSubContainer input.typeText,
.fieldContainer.textFieldContainer .fieldSubContainer .fieldBody textarea,
.fieldContainer.dropdownFieldContainer .fieldBody select {
  border: 1px solid rgba(0, 0, 0, .25) !important;
  border-radius: .125em;
  box-shadow: none;
  padding: .5em !important;
  font-size: 1em !important;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
}
.fieldContainer.dropdownFieldContainer .fieldBody select {
  background-color: #fafafa !important;
}
.fieldSubContainer .fieldLabel {
  font-size: .85em !important;
}
.checkboxGroupContainer table tr,
.radioGroupContainer table tr {
  flex-direction: column;

  td {
    width: 100% !important;
  }
  .fieldLabel {
    text-align: left;
  }
}

.mandatorySymbol, .requiredSymbol {
  width: .5em;
  margin-inline-start: -.5em;
}

/* Legends */
.captionOuterContainer {
  padding: 0;
  margin: 0;
}
.captionContainer {
  .fieldLabel {
    display: none;
  }
  .fieldBody {
    float: none !important;
    width: 100% !important;
  }

  h4 {
     padding: 2em 0 1em;
  }
}


/* Member Profile
---------------------------------------------------------------- */
.captionOuterContainer .captionContainer .fieldBody h4 {
  font-size: 1.2em;
  margin-block-end: .5em;
}
.sectionOuterContainer + .captionOuterContainer {
  margin-block-start: 2em;
}
:is(.simpleTextContainer, .pictureViewContainer) {
  .fieldSubContainer {
    display: flex;
    align-items: start;
    gap: 1em;
  }
  :is(.fieldLabel, .fieldBody) {
    padding: 0;
    font-size: .85em;
  }
  .fieldLabel {
    opacity: .4;
  }
  .fieldContainer:has(.fieldBody:empty) {
    display: none;
  }
  .fieldBody:empty {
    border: 1px solid #f00;
  }
}


/* Members Table
---------------------------------------------------------------- */
.membersTable thead :is(th, th:first-child),
.membersTable tbody :is(td, td:first-child) {
  padding: .5em;
  font-family: var(--body-font);
  font-size: .85em;
}
.membersTable thead :is(th, th:first-child) {
  border-bottom: 2px solid #eddbd1;
}
.membersTable tbody :is(td, td:first-child) {
  border-bottom: 1px solid #eddbd1;
}


/* Videos Table
---------------------------------------------------------------- */
.video-heading {
   color: #51516e;
   border-bottom: 2px solid #e8e8f2;
   padding-inline-start: .1em;
   padding-block-end: .25em;
   margin-block-end: .25em;
}
.video-table {
  font-size: .85em;

  td {
    vertical-align: top;
    padding: .25em .25em .5em;
  }
  tr + tr {
    td {
      padding-top: .5em;
      border-top: 1px solid #ededed;
    }
  }
  .video-date {
    width: 25%;
    color: #777;
  }
}