.d-block{display:block}.d-flex{display:flex}.d-grid{display:grid}.align-self-start{align-self:flex-start}.align-items-start{align-items:flex-start}.align-self-end{align-self:flex-end}.align-items-end{align-items:flex-end}.align-self-center{align-self:center}.align-items-center{align-items:center}.align-self-stretch{align-self:stretch}.align-items-stretch{align-items:stretch}.align-self-baseline{align-self:baseline}.align-items-baseline{align-items:baseline}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-center{display:flex;justify-content:center;align-items:center}.justify-self-start{justify-self:start}.justify-items-start{justify-items:start}.justify-self-end{justify-self:end}.justify-items-end{justify-items:end}.justify-self-center{justify-self:center}.justify-items-center{justify-items:center}.w-100{width:100%}.w-95{width:95%}table.enqyr-table.enqyr-table-fixed{table-layout:fixed}table.enqyr-table.enqyr-table-auto{table-layout:auto}table.enqyr-table{border-collapse:collapse;border:solid 1px var(--color-secondary);background-color:var(--color-secondary-muted-high-key)}table.enqyr-table>thead>tr>th,table.enqyr-table>tbody>tr>td{padding:20px}table.enqyr-table>thead>tr>th{letter-spacing:2px;background-color:var(--color-secondary);color:var(--color-secondary-muted-high-key)}table.enqyr-table.alternating-colored-rows>tbody>tr:nth-child(odd){background-color:var(--color-secondary-muted-high-key)}table.enqyr-table.alternating-colored-rows>tbody>tr:nth-child(even){background-color:var(--color-secondary-muted-low-key)}table.enqyr-table.alternating-colored-rows-body>tbody:nth-child(odd)>tr{background-color:var(--color-secondary-muted-high-key)}table.enqyr-table.alternating-colored-rows-body>tbody:nth-child(even)>tr{background-color:var(--color-secondary-muted-low-key)}.text-center{text-align:center}
:root {
  --dot-status-size: 25px;
}
:root {
  --color-primary: hsla(218, 91%, 21%, 1);
  --color-text-primary: hsla(218, 91%, 21%, 1);

  --color-secondary: hsla(0, 54%, 23%, 1);
  --color-secondary-hover: hsl(0, 31%, 11%);
  --color-secondary-muted-high-key: hsla(0, 16%, 97%, 1);
  --color-secondary-muted-low-key: hsl(0, 64%, 92%);
  
  --color-danger: hsla(0, 54%, 23%, 1);
  --color-danger-hover: hsl(0, 31%, 11%);
  --color-danger-muted-high-key: hsla(0, 16%, 97%, 1);
  --color-danger-muted-low-key: hsl(0, 64%, 92%);

  --color-green: hsla(113, 63%, 28%, 1);
  --color-green-hover: hsl(113, 40%, 16%);
  --color-green-muted-high-key: hsla(113, 16%, 97%, 1);
  --color-green-muted-low-key: hsl(113, 64%, 92%);


  
  --color-tricery: hsla(114, 28%, 86%, 1);
  --color-light-grey-text: hsla(218, 5%, 48%, 1);
  --color-mid-grey-text: hsla(215, 7%, 34%, 1);
  --color-darkBlue: #052865;
  --color-darkRed: #5A1B1B;
  --color-brown: #5A401B;

  

  --color-lightGreen: #D3E5D1;
  --color-lightPink: #F9F6F6;
  --color-border-bottom-header: hsla(218, 95%, 40%, 1);
  --color-nav-active-tab-underline: hsla(0, 70%, 35%, 1);
  --color-attention: hsla(0, 92%, 51%, 1);
  --color-attention-circle-outer: hsla(114, 9%, 90%, 1);

  --small-border-radius: 10px;

  --dot-color-red: #F00;
  --dot-color-green: #0F0;
  --dot-color-in-progress: rgb(255, 255, 0);
  --dot-color-not-applicable: #979494ad;
}


.secondary-color {
  background-color: var(--color-secondary);
  color: var(--color-secondary-muted-high-key);
}
/** all pages shared css */

html, body, #root, .Router {
  height: 100%;
  max-height: 100%;
}


body {
  margin: 0;
}

.cardBackgroundify {
  background-color: var(--color-secondary-muted-high-key);
  padding: 2rem;
  margin-top: 1rem;
}


.padding-1-rem {
  padding: 1rem;
}

.gap-2-rem {
  gap: 2rem;
}

.overflow-wrap-anywhere {
  overflow-wrap: anywhere;
}
.overflow-wrap-break-word {
  overflow-wrap: break-word;
}
.overflow-x-hidden {
  overflow-x: hidden;
}

.removeLinkStyling {
  text-decoration: none;
  color: inherit;
}
input, textarea, select {
  font-size: inherit;
}

.align-content-center {
  align-content: center;
}

.justify-content-center {
  justify-content: center;
}

.user-select-none {
  user-select: none;
}

h1 {
  font-family: "Cormorant SC", serif;
}

h2 {
  font-family: "Cormorant SC", serif;
}


.navbar-container h3.linkItem {
  font-family: "Inter", serif;
}

body {
  font-family: "Roboto", serif;
}
.primary-cell-information {
  font-weight: 500;
  font-size: 1.2rem;
  text-align: left;
}

.secondary-cell-information {
  font-weight: 300;
  font-size: 0.8rem;
}
  

.absorbing-column {
  width: 100%;
}
@property --attention-circle-outer-circle-diameter {
  syntax: "<length>";
  inherits: true;
  initial-value: 200px;
}

@property --attention-circle-inner-circle-diameter {
  syntax: "<length>";
  inherits: true;
  initial-value: 190px;
}

@property --attention-circle-text-circle-diameter {
  syntax: "<length>";
  inherits: true;
  initial-value: 180px;
}

@property --attention-circle-circle-offset {
  syntax: "<length>";
  inherits: true;
  initial-value: 5px;
}

.AttentionCircle {
  position: relative;
  width: max-content;
}

.AttentionCircle .outerCircle {
  background-color: var(--color-attention-circle-outer);
  position: relative;
  width: var(--attention-circle-outer-circle-diameter);
  height: var(--attention-circle-outer-circle-diameter);
}

.AttentionCircle .innerCircle {
  background-color: var(--color-text-primary);
  position: relative;
  width: var(--attention-circle-inner-circle-diameter);
  height: var(--attention-circle-inner-circle-diameter);
  top: var(--attention-circle-circle-offset);
  left: var(--attention-circle-circle-offset);
}

.AttentionCircle .textCircle {
  position: relative;

  background-color: var(--color-attention-circle-outer);
  width: var(--attention-circle-text-circle-diameter);
  height: var(--attention-circle-text-circle-diameter);
  top: var(--attention-circle-circle-offset);
  left: var(--attention-circle-circle-offset);
  
}

.AttentionCircle .textCircle .attentionTitle{
  position: relative;
  top: 95px;
  text-align: center;
  color: var(--color-text-primary);
  text-transform: uppercase;
  font-size: 1.8rem;
  margin: 0;
  font-weight: 600;
}

.AttentionCircle .textCircle .attentionDate{
  position: relative;
  top: 95px;
  text-align: center;
  color: var(--color-text-primary);
  text-transform: uppercase;
  font-size: 2.5rem;
  margin: 0;
  font-weight: 600;
}

.AttentionCircle .textCircle .attentionSubtitle{
  position: relative;
  top: 105px;
  text-align: center;
  color: var(--color-text-primary);
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0;
  font-weight: 400;
}

.AttentionCircle .applyCircle {
  border-radius: 50%;
}
.LandingPage  .pageDetails {
  text-align: center;
}

.LandingPage  .pageDetails h2 {
  color: var(--color-text-primary)
}

.LandingPage  .pageDetails section h3 {
  color: var(--color-secondary);
}

.LandingPage  .pageDetails section h4 {
  color: var(--color-text-primary);
}

.LandingPage  .pageDetails .infoNavSection {
  background-color: var(--color-tricery);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 40px;
  > div {
    width: 20rem;
  }
}

.LandingPage  .pageDetails .infoNavSection div h5 {
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.LandingPage  .pageDetails .infoNavSection div p {
  color: var(--color-text-primary);
  text-align: left;
}

.LandingPage  .pageDetails .bottomDisclaimer {
  color: var(--color-text-primary);
  text-align: left;
}




.landing-photo-with-circle {
  --attention-circle-offset: 14rem;
  display: grid;
  grid-template-areas: 
    "cell-0";

  margin-block-end: var(--attention-circle-offset);
}

.landing-photo-with-circle > * {
  grid-area: cell-0;
}

.AttentionCircle {
  justify-self: flex-end;
  position: relative;
  margin-block-end: calc(-1 * var(--attention-circle-offset));
}
.attention-container {
  justify-self: end;
  align-self: end;
  margin-inline-end: 15%;
}


.navbar-container {
  --logo-width: 114px;
  --nav-item-border-size: 4px;

  display: grid;
  grid-template-areas: 
    "logo         main-navbar"
    "sub-navbar   sub-navbar"
    ;
  grid-template-columns: var(--logo-width) auto;
  grid-auto-rows: 80px auto;
  justify-content: space-between;

  background-color: white;
  padding: 0 1rem;
  border-bottom: solid 1px var(--color-border-bottom-header);
}

/* add a hover indicator */
.navbar-container .navbar a:hover h3:not(.active),
.navbar-container .navbar a:focus h3:not(.active) {
  border-bottom: solid var(--nav-item-border-size) var(--color-mid-grey-text);
}


/* add a transparent default border so hovering doesnt resize stuffs */
.navbar-container .navbar a h3:not(.active) {
  border-bottom: solid var(--nav-item-border-size) transparent;
} 


.navbar-container .menu-button {
  display: none;
}


.navbar-container .logo {
  margin-top: 4px;
  width: var(--logo-width);
  height: auto;
}


.navbar-container .navbar {
  display: flex;
  flex-direction: row;
  gap: 25px;
  z-index: 100;
}

.navbar-container .main-logo {
  grid-area: logo;
  align-self: center;
}
.navbar-container .main-navbar.full-nav-links {
  grid-area: main-navbar;
  align-self: center;
}
.navbar-container .sub-navbar.full-nav-links {
  grid-area: sub-navbar;
  justify-self: end;
}

.navbar-container .navbar a {
  /* align children so the border and underline are the same size and on same level */
  display: flex;
  align-items: baseline;

  text-decoration: none;
  color: var(--color-text-primary);
}


.navbar-container .navbar h3 {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.navbar-container .navbar .active {
  font-weight: 800;
  text-decoration: underline;
  border-bottom: solid var(--nav-item-border-size) var(--color-nav-active-tab-underline);
}

.navbar-container .menu-button {
  display: none;
}
.navbar-container .hidden-nav-links {
  display: none;
}


@media only screen and (max-width: 972px) {
  .navbar-container {
    padding: 4px;
    grid-template-columns: var(--logo-width) 1fr;
    justify-content: space-between;
  }

  .navbar-container .menu-button {
    display: flex;
    grid-area: main-navbar;
    align-self: center;
  }
  
  .navbar-container .hidden-nav-links {
    display: grid;
  }

  .navbar-container .navbar {
    background-color: white;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    border: solid #aaa;
    padding: 15px;
    box-shadow: #aaa 5px 5px 5px;
  }
  .navbar-container .floating-menu {
    display: flex;
    align-items: start;
    flex-direction: row;

    gap: 15px;

    position: absolute;
    
    top: 20px;
    right: 60px;
  }

  .navbar-container .full-nav-links {
    display: none;
  }
}
.enqyr-icon {
  width: 36px;
  height: 36px;
  background-color: transparent;
  color: var(--color-secondary);
}
.page-header {
  flex-shrink: 0;
  background-color: var(--color-tricery);
  color: var(--color-secondary);
  min-height: 3.625rem;
  padding-block-end: .325rem;
  padding-left: 2rem;
}

/* ==== font-sizes ==== */
.page-header h1 {
  font-size: 3rem;
}

.page-header h2 {
  font-size: 1rem;
}

/* ==== margins ==== */
.page-header h1,
.page-header h2 {
  margin-block: 0px;
}


.Footer {
  margin-top: 2rem;
  background-color: var(--color-secondary-muted-high-key);
  text-align: center;
  color: var(--color-light-grey-text);
  padding: 1rem;
}

.enqyr-btn {
  border-radius: .5rem;
  font-size: 2rem;
  border: none;
  border-collapse: collapse;
  padding: 1rem;
  cursor: pointer;
}

.enqyr-btn:disabled {
  cursor: default;
}


/* BEGIN: default color styling */
.enqyr-btn {
  background-color: var(--color-secondary);
  color: var(--color-secondary-muted-high-key);
}

.enqyr-btn:hover {
  background-color: var(--color-secondary-hover);
}

.enqyr-btn:disabled {
  background-color: hsl(60, 15%, 91%);
  color: var(--color-secondary-muted-high-key);
}
/* END: default color styling */

/* BEGIN: "danger" flavor styling */
.enqyr-btn.danger-btn {
  background-color: var(--color-danger);
  color: var(--color-danger-muted-high-key);
}

.enqyr-btn.danger-btn:hover {
  background-color: var(--color-danger-hover);
}

.enqyr-btn.danger-btn:disabled {
  background-color: hsl(60, 15%, 91%);
  color: var(--color-danger-muted-high-key);
}
/* END: "danger" flavor styling */


/* BEGIN: "success" flavor styling */
.enqyr-btn.success-btn {
  background-color: var(--color-green);
  color: var(--color-green-muted-high-key);
}

.enqyr-btn.success-btn:hover {
  background-color: var(--color-green-hover);
}

.enqyr-btn.success-btn:disabled {
  background-color: hsl(113, 15%, 91%);
  color: var(--color-green-muted-high-key);
}
/* END: "success" flavor styling */

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}

.pageContent {
  flex: 1;
  padding-inline: 2rem;
}



.LandingPageMainPhoto img {
  width: 100%;
  height: auto; /* Adjust height as needed */
}


.page-section-header {
  color: var(--color-green);
  font-size: 2.5rem;
  margin-top: 1rem;
}


.Resources .pageContent {
  padding-block: 1rem;
  background-color: var(--color-secondary-muted-high-key);
}

.Resources div h4 {
  color: var(--color-mid-grey-text);
  font-size: 2rem;
}
.Resources div p {
  color: var(--color-mid-grey-text);
  font-size: 1rem;
}
.Resources div ol,
.Resources div ul {
  color: var(--color-mid-grey-text);
  font-size: 1rem;
}

.Resources .addressGridDisplay {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 40px;
}


.help-image-box > img {
  width: 100%;
  max-width: 100%;
}
.ResourcePresenter {
  background-color: var(--color-secondary-muted-high-key);
  color: var(--color-secondary);
  box-shadow: 10px 10px 20px var(--color-light-grey-text);
  border-radius: 10px;
}

.ResourcePresenter header {
  background-color: var(--color-secondary);
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 400;
  margin: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.ResourcePresenter header h3 {
  color: var(--color-secondary-muted-high-key);
}

.ResourcePresenter h4 {
  padding: 20px;
  font-size: 1.5rem;
  margin: 0;
}
.ResourcePresenter .fullDetails {
  padding: 30px;
}

.ResourcePresenter .detailsLine {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
}
.detailsLine {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
 
}

.detailsLine .contactEmail {
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: 12rem;
}

.detailsLine > .enqyr-icon {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.AboutPage {
  background-color: var(--color-secondary-muted-high-key);
}

.AboutPage .pageContent h3,
.AboutPage .pageContent h4 {
  color: var(--color-green);
}

.AboutPage .pageContent .partnerDetailsContainer {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.AboutPage .pageContent .partnerDetailsContainer .logoContainer {
  width: 175px;
  justify-content: center;
  align-content: center;
}
.EventsPage .pageContent {
  background-color: var(--color-secondary-muted-high-key);
}
.ClyP22TcvO6M469w7ySq {
  --event-gap: 20px;
  --event-border-radius: 12px;
  background-color: var(--color-secondary-muted-high-key);
  display: grid;
  padding-block-start: var(--event-gap);
}

.N7lYWf_myxUVC8I89zYu {
  gap: var(--event-gap);
}


.QLiTd32pJtPmt4Uh_owP {
  display: flex;
  flex-direction: row;
  border-top-left-radius: var(--event-border-radius);
  border-bottom-left-radius: var(--event-border-radius);

  justify-content: space-evenly;
  background-color: var(--color-secondary);
}

.doqg410fULRSP5FioHr3 {

  display: grid;
  grid-template-areas:
    "name   org-details   description"
  ;
  grid-template-columns:
    min(33%, 24rem) 
    min(33%, 24rem) 
    1fr
  ;
  color: var(--color-secondary);

  width: 100%;
  border: solid 1px var(--color-secondary);
  border-top-right-radius: var(--event-border-radius);
  border-bottom-right-radius: var(--event-border-radius);

}

.eKTOrtJ6QlMeFTs6UqiE {
  align-self: center;
  color: var(--color-tricery);
  width: 100px;
  text-align: center;
}

.eKTOrtJ6QlMeFTs6UqiE h2 {
  font-size: 1rem;
  margin: 0;
  font-weight: 300;
  text-transform: uppercase;
}

.eKTOrtJ6QlMeFTs6UqiE h3 {
  font-size: 3rem;
  margin: 0;
  font-weight: 600;
}

.eKTOrtJ6QlMeFTs6UqiE h4 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
}

.NIQzNXGs8goPPTmETcEw {
  margin-inline-start: 1rem;
}

.NIQzNXGs8goPPTmETcEw {
  grid-area: name;
}

.NIQzNXGs8goPPTmETcEw h4 {

  font-weight: 600;
  font-size: 1.5rem;
}

.NIQzNXGs8goPPTmETcEw h5 {
  font-weight: 400;
  font-size: 1rem;
}

.KcUs017TrE7RvaCQShOq {
  font-size: 1.5rem;
}

.TTDAac76lGLYGnEyrhz8 {
  grid-area: description;
  text-wrap: 'nowrap';

}

.TTDAac76lGLYGnEyrhz8>p {
  white-space: pre-wrap;
}


/* ================= */
.NrqtZ76nNOW5VrnWHShN {
  grid-area: org-details;
  align-self: center;
  display: grid;
  grid-template-areas:
    "label"
    "name"
    "language"
  ;
  grid-template-rows:
    auto 
    auto 
    1fr
  ;
}

.NrqtZ76nNOW5VrnWHShN .Ml3sT0NWPMubQjVngHYJ {
  grid-area: label;

  font-weight: 400;
  font-size: 0.8rem;
  margin: unset;
}

.NrqtZ76nNOW5VrnWHShN .I6KkvZHawD_a9HE02kru {
  grid-area: name;
  margin: unset;
  font-size: 1rem;
}

.NrqtZ76nNOW5VrnWHShN .YKjuiv6tt3nMyQcJNNrP {
  grid-area: language;
  margin: unset;
  margin-block-start: 1rem;
  margin-inline-start: 1rem;
  font-size: 2rem;

}

/* ================= */



.f918tQGMZLk5C4N8zL5u {
  container-type: inline-size;
}

.TTDAac76lGLYGnEyrhz8 {
  margin: .5rem;
}

.NIQzNXGs8goPPTmETcEw {
  display: grid;
  grid-template-areas:
    "name"
    "address"
  ;
  grid-template-rows:
    auto
    1fr
  ;
  gap: .5rem;
  align-self: center;
}

.NIQzNXGs8goPPTmETcEw>h4 {
  grid-area: name;
  margin: unset;
  margin-block-start: 1rem;
  align-self: flex-end;
}

.NIQzNXGs8goPPTmETcEw>h5 {
  grid-area: address;
  justify-self: start;
  align-self: flex-start;
  margin: unset;
  margin-inline-start: 1.25rem;
}

/* If the container is larger than 700px */
@container (max-width: 920px) {
  .doqg410fULRSP5FioHr3 {
    grid-template-areas:
      "name   description"
      "org-details   description"
    ;
    grid-template-columns:
      min(40%, 24rem) 
      1fr
    ;
    row-gap: 1rem;
  }

  .TTDAac76lGLYGnEyrhz8 {
    align-self: center;
    ;
  }

  .NIQzNXGs8goPPTmETcEw {
    word-wrap: break-word;
  }

  .NrqtZ76nNOW5VrnWHShN {
    margin-inline-start: 1rem;
    margin-block-end: 1rem;
  }
}
@container (max-width: 480px) {
  .YKjuiv6tt3nMyQcJNNrP {
    word-break: break-all;
  }
} 

.TermsAndConditions .pageContent h3 {
  color: var(--color-green);
  font-size: 2rem;
  line-height: 3rem;
}

.TermsAndConditions .pageContent h6 {
  font-size: 1.3rem;
  margin: 0;
}

.TermsAndConditions .pageContent p {
  color: var(--color-light-grey-text);
}

.TermsAndConditions .pageContent ul li {
  margin: 2rem;
  color: var(--color-light-grey-text);
}

.PrivacyPolicy .pageContent h3 {
  color: var(--color-green);
  font-size: 2rem;
  line-height: 3rem;
}

.PrivacyPolicy .pageContent h6 {
  font-size: 1.3rem;
  margin: 0;
}

.TermsAndConditions .pageContent p {
  color: var(--color-light-grey-text);
}

.PrivacyPolicy .pageContent ul li {
  margin: 2rem;
  color: var(--color-light-grey-text);
}
.AuthenticationPage .pageContent {
  display: flex;
  align-content: center;
  justify-content: center;
}
.auth-details-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.auth-details-container.overridden-credentials {
  border: solid 4px orange !important;
}

.override-button.selected {
  border: solid 2px red;
}
.Vh_SvxVxfGoPPFlFNOHh {
  color: red;
  font-size: 2rem;
}
.labelled-input-field {
  display: flex;
  flex-direction: column;
  
}

.input-container {
  display: flex;
  flex-direction: column; 
  label,
  input {
    font-size: 1.5rem;
    color: var(--color-secondary);
  }
}
.inIaq6Zu7O0IaKjF4ga6 {
  color: var(--color-attention);
  font-weight: bold;
} 
.auth-form {
  gap: 30px;

  padding: 3rem;
  margin-top: 1rem;
  background-color: var(--color-secondary-muted-high-key);
  border-radius: var(--small-border-radius);
  max-width: 400px;
  border: solid 1px var(--color-secondary);
}


.enqyr-form {
  display: flex;
  flex-direction: column;
}

.enqyr-form.horizontal-form {
  flex-direction: row;
}
.AuthenticationPage .pageContent {
  display: flex;
  align-content: center;
  justify-content: center;
}
.AgencyAssignedRespondentsList {
  display: flex;
  justify-content: center;
  align-content: center;
}


table.RespondentDetailsTable > tbody > tr > td {
  text-align: center;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
  color: var(--color-secondary);
}

/* 
table.RespondentDetailsTable > tbody > tr > td .contactDetailsRowContainer .contactEmail {
  font-size: 1rem;
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
} */

.RespondentTableRowActions button {
  border: 0;
  border-collapse: collapse;
  margin: .125rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.RespondentTableRowActions button .enqyr-icon {
  color: var(--color-secondary-muted-high-key);
}

table.RespondentDetailsTable > tbody > tr > td .fullName {
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0;
}

table.RespondentDetailsTable > tbody > tr > td .anonymousIdText {
  font-weight: 300;
  font-size: 0.8rem;
}

table.RespondentDetailsTable > tbody > tr > td .timestampText {
  font-weight: 300;
  font-size: 0.8rem;
}



table.RespondentDetailsTable > tbody > tr > td .RespondentTableRowActions {
  display: flex;
  height: 8.125rem;
}


/* 
.enqyr-table th + th,
.enqyr-table td + td {
  border-left: 4px solid black
} 
*/

.enqyr-table > thead > tr > th {
  overflow-wrap: break-word;
}
.dot-status {
  height: var(--dot-status-size);
  width: var(--dot-status-size);
  display: inline-block;
  border-radius: 50%;
  border: solid 2px black;
}
.dot-status.red {
  background-color: var(--dot-color-red);
}
.dot-status.green {
  background-color: var(--dot-color-green);
}
.dot-status.in-progress {
  background-color: var(--dot-color-in-progress);
}
.dot-status.not-applicable {
  background-color: var(--dot-color-not-applicable);
}
.respondent-override-list {
  --color-secondary-muted-high-key: #FFF;
  --color-secondary-muted-low-key: hsl(204, 64%, 92%);
  --actions-column-width: 8rem;
  --value-column-width: 8rem;
}


table.show-column-boundary td + td,
table.show-column-boundary th + th
{ border-left:2px solid red; }


.status-cell-grid {
  display: grid;
  grid-template: 
    "dot reason"
    "date date"
    / auto 1fr;
}

.status-cell-grid > .dot-status {
  grid-area: dot;
}
.status-cell-grid > [data-info="date"] {
  grid-area: date;
}
.status-cell-grid > [data-info="reason"] {
  grid-area:  reason;
}


.edit-answers-section-header {
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
}


.RespondentOverallFlagEditor {
  display: grid;
  grid-template-areas: 
    "current-status       action-form     actions"
    "check-in             action-form     actions"
}

.RespondentOverallFlagEditor {
  width: 100%;
}

.RespondentOverallFlagEditor .check-in-container {
  grid-area: check-in;
  height: auto;
  width: 15rem;
}

.RespondentOverallFlagEditor [data-status] {
  grid-area: current-status;
  justify-self: start;
}
.RespondentOverallFlagEditor [data-actions] {
  grid-area: actions;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.RespondentOverallFlagEditor [data-form] {
  grid-area: action-form;
}




.labelled-value-grid {
  display: grid;
  column-gap: .5rem;
  align-items: center;
}
.labelled-value-grid.min-content-label {
  grid-template-columns: min-content 1fr;
  grid-auto-rows: min-content;
}
.labelled-value-grid.max-content-label {
  grid-template-columns: max-content 1fr;
  grid-auto-rows: min-content;
}
.labelled-value-grid .lvg-label {
  grid-column: 1;
}
.labelled-value-grid .lvg-value {
  grid-column: 2;
}
.labelled-value-grid .lvg-label {
  justify-self: left;
  font-size: 1.0625rem;
  font-weight: bold;
}
.labelled-value-grid .lvg-value {
  justify-self: left;
}


.HKhhtM7kSJFDYUbpZl1b {
  font-size: 2rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}


.WorkShopListDetails {
  background-color: var(--color-secondary-muted-high-key);
  padding: 3rem;
}

.WorkShopListDetails h2 {
  color: var(--color-green);
  font-size: 2rem;
}

.WorkShopListDetails h3 {
  color: var(--color-green);
  font-size: 1.5rem;
}

.WorkShopListDetails h3 span {
  color: var(--color-attention);
}

.WorkShopListDetails li {
  color: var(--color-light-grey-text);
}


.PictureSlideshow {
  position: relative;
  width: 100%;
  height: 600px; /* Adjust height as needed */
  overflow: hidden;
}


.PictureSlideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: slideAnimation 10s infinite;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.PictureSlideshow .slide:nth-child(1) {
  animation-delay: 0s;
}
.PictureSlideshow .slide:nth-child(2) {
  animation-delay: 8s;
}
.PictureSlideshow .slide:nth-child(3) {
  animation-delay: 16s;
}
.PictureSlideshow .slide:nth-child(4) {
  animation-delay: 24s;
}
.PictureSlideshow .slide:nth-child(5) {
  animation-delay: 32s;
}
.PictureSlideshow .slide:nth-child(6) {
  animation-delay: 40s;
}
.PictureSlideshow .slide:nth-child(7) {
  animation-delay: 48s;
}
.PictureSlideshow .slide:nth-child(8) {
  animation-delay: 56s;
}
.PictureSlideshow .slide:nth-child(9) {
  animation-delay: 64s;
}
.PictureSlideshow .slide:nth-child(10) {
  animation-delay: 72s;
}
.PictureSlideshow .slide:nth-child(11) {
  animation-delay: 80s;
}
.PictureSlideshow .slide:nth-child(12) {
  animation-delay: 88s;
}
.PictureSlideshow .slide:nth-child(13) {
  animation-delay: 96s;
}

@keyframes slideAnimation {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 
  NOTE: this was left blank intentionally since 
no custom styles are needed, feel free to specify 
some if you want.
*/


.QuestionPresenterContainer {
  --question-presenter-header-margin: 1rem;
  --question-presenter-radio-button-size: 1.5rem;
  --question-presenter-question-font-size: 1.5rem;

  /* the size for a question number */
  --question-presenter-question-number-size: 2rem;

  /* the space between the question container and the header, content, and error sections */
  --question-presenter-content-margin: 1.25rem;
  --question-presenter-content-padding: 3rem;

  /* the space between the header, content, and error sections */
  --question-presenter-section-gap: 1.25rem;

  /* the gap between the radio button choices */
  --radio-button-options-gap: 1rem;
  
  /* the space on the left and right of the questions */
  --question-presenter-document-margin: 3rem;

  display: flex;
  flex-direction: column;
  gap: var(--question-presenter-section-gap);
  margin-inline: var(--question-presenter-document-margin);
  background-color: var(--color-secondary-muted-high-key);
  
  border: solid 1px var(--color-secondary);
  border-radius: var(--small-border-radius);
  
  padding-block-end: var(--question-presenter-section-gap);
}

.padded-question-presenter-section {
  padding-inline: var(--question-presenter-content-padding);
}

.QuestionPresenterContainer header {
  background-color: var(--color-secondary);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  min-height: 2rem;
}

.QuestionPresenterContainer header h5 {
  font-size: var(--question-presenter-question-font-size);
  margin-inline: var(--question-presenter-header-margin);
  margin-block: var(--question-presenter-header-margin);
  color: var(--color-secondary-muted-high-key);
}

.QuestionPresenterContainer header h5 .questionNumber {
  font-weight: 600;
  font-size: 1rem;
  width: var(--question-presenter-question-number-size);
}

.QuestionPresenterContainer header h5 .SuccessfulQuestionCheckmark {
  color: var(--color-secondary-muted-high-key);

  /* this grossness is to make the checkmark not resize the header, i'm sure there's a better way! */
  max-height: calc(var(--question-presenter-question-font-size) - 2px);
  max-width: calc(var(--question-presenter-question-font-size) - 2px);

  margin-inline-start: 1rem;
}

.QuestionPresenterContainer .answerSelectionContainer {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  
  margin-inline: var(--question-presenter-content-margin);
  font-size: 1.5rem;
  color: var(--color-secondary);
}
.QuestionPresenterContainer .error-message {
  margin-inline: var(--question-presenter-content-margin);
}


.RadioButtonAnswerGroup {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  
  font-size: 1.5rem;
  gap: var(--radio-button-options-gap);
}

.RadioButtonAnswerGroup input[type="radio"] {
  accent-color: var(--color-secondary);
  border: 0px;
  width: var(--question-presenter-radio-button-size);
  height: var(--question-presenter-radio-button-size);
  margin-inline-start: 0px;
  margin-right: 1rem;
}

.iti {
  width: 100%;
}
.iti > input {
  width: 100%;
}
.ApLVRoAS4l7RaJV6ppOK {
  --item-gap-inner: var(--item-gap, 30px);

  h3 {
    font-size: 3rem;
  }
}

.it6g_MZn7s8zuFWiRhfs {
  margin-block: var(--item-gap-inner);
  width: 100%;
}

.rVJWnCQ3MmmpsRgpTum3 {
  position: fixed;
  top: 6rem;
  right: 2rem;
  width: 16rem;
}

.mCzxKLshoUXJMxCReZrJ {
  
  display: flex;
  flex-direction: column;
  gap: var(--item-gap-inner);
}


.languageIcon {
  height: 26px;
  width: 26px;
}


.languagePickerSelectorContainer {
  border: 3px solid var(--color-green);
  font-size: 2rem;
}
.ignored-padding {
  display: inline-block;
  width: 0px;
  height: 0px;
}
table.AllRespondentsOverviewTable > tbody > tr > td {
  text-align: center;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
  color: var(--color-secondary);
  height: 6rem;
}


.enqyr-table.AllRespondentsOverviewTable > thead > tr > th .header-container {
  display: block;
  max-height: 6rem !important;
  overflow: hidden;
}
table.WorkshopGreenDotRespondentsOverviewTable > tbody > tr > td {
  text-align: center;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
  color: var(--color-secondary);
  height: 6rem;
}


.enqyr-table.WorkshopGreenDotRespondentsOverviewTable > thead > tr > th .header-container {
  display: block;
  max-height: 6rem !important;
  overflow: hidden;
}