/* ==========================================================
   ESBS ROYAL LIMESURVEY THEME
   COMPLETE REPLACEMENT custom.css

   HEADER:
   ESBS | Egyptian Cancer Society

   COLOURS:
   Royal navy, institutional blue, gold and white

   SURVEY:
   Compact, readable and responsive

   FOOTER:
   Emblem | WhatsApp Help | Facebook
========================================================== */


/* ==========================================================
   1. DESIGN SYSTEM
========================================================== */

:root {
  --esbs-navy: #0b2d5c;
  --esbs-deep: #061b38;
  --esbs-royal: #17477f;
  --esbs-blue: #2362a2;
  --esbs-blue-soft: #edf4fb;
  --esbs-blue-pale: #f7faff;

  --esbs-gold: #b8860b;
  --esbs-gold-bright: #d4af37;
  --esbs-gold-light: #e7ca76;
  --esbs-gold-pale: #fff8e6;

  --esbs-white: #ffffff;
  --esbs-page: #f3f6fa;

  --esbs-text: #263648;
  --esbs-muted: #50657a;
  --esbs-light-text: #738394;

  --esbs-border: #d8e2ec;
  --esbs-border-strong: #b9c8d7;

  --esbs-red: #b42318;
  --esbs-red-pale: #fff3f2;

  --esbs-radius: 11px;
  --esbs-radius-small: 7px;

  --esbs-shadow:
    0 4px 14px rgba(11, 45, 92, 0.055);

  --esbs-shadow-hover:
    0 8px 23px rgba(11, 45, 92, 0.09);
}


/* ==========================================================
   2. GLOBAL PAGE
========================================================== */

html {
  width: 100%;
  min-height: 100%;

  overflow-x: hidden;

  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 6% 4%,
      rgba(212, 175, 55, 0.055),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #f8fafc 0%,
      var(--esbs-page) 100%
    ) !important;

  color: var(--esbs-text) !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 14px !important;
  line-height: 1.52 !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--esbs-royal) !important;
}

a:hover,
a:focus {
  color: var(--esbs-gold) !important;
}


/* ==========================================================
   3. TWO-LOGO HEADER
========================================================== */

#survey-nav.esbs-navbar {
  position: relative;
  z-index: 100;

  display: block !important;

  width: 100% !important;
  min-height: 150px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 0 !important;
  border-bottom:
    1px solid
    rgba(184, 134, 11, 0.25) !important;

  border-radius: 0 !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcfdff 100%
    ) !important;

  box-shadow:
    0 4px 18px
    rgba(11, 45, 92, 0.065) !important;
}

#survey-nav.esbs-navbar::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--esbs-gold-bright) 25%,
      var(--esbs-gold) 50%,
      var(--esbs-gold-bright) 75%,
      transparent 100%
    );

  pointer-events: none;
}

#survey-nav .esbs-navbar-inner {
  position: relative;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 1400px !important;
  min-height: 150px !important;

  margin: 0 auto !important;
  padding: 10px 68px 10px 20px !important;
}


/* ==========================================================
   4. HIDE THE TWO MIDDLE LOGOS
========================================================== */

#survey-nav .esbs-logo-presidential,
#survey-nav .esbs-logo-moh {
  display: none !important;
}

/*
   Remove separators so no empty gold lines remain
   between the two retained logos.
*/

#survey-nav .esbs-logo-divider {
  display: none !important;
}


/* ==========================================================
   5. TWO-LOGO ROW
========================================================== */

#survey-nav .esbs-logo-row {
  display: grid !important;
  grid-template-columns:
    minmax(300px, 1fr)
    minmax(300px, 1fr) !important;

  align-items: center !important;
  justify-items: center !important;

  gap: clamp(60px, 10vw, 170px) !important;

  width: 100% !important;
  max-width: 1050px !important;
  min-height: 126px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}

#survey-nav .esbs-logo-item {
  position: relative;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  height: 118px !important;

  margin: 0 !important;
  padding: 8px 15px !important;

  overflow: hidden !important;

  border:
    1px solid
    transparent !important;

  border-radius:
    15px !important;

  background:
    transparent !important;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

#survey-nav .esbs-logo-item:hover,
#survey-nav .esbs-logo-item:focus-within {
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(184, 134, 11, 0.26) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 248, 230, 0.94)
    ) !important;

  box-shadow:
    0 8px 24px
    rgba(11, 45, 92, 0.085) !important;
}


/* ==========================================================
   6. HEADER LOGOS
========================================================== */

#survey-nav .esbs-logo-item img,
#survey-nav img.esbs-header-logo,
#survey-nav .esbs-header-logo {
  display: block !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  transform: none !important;

  transition:
    transform 0.18s ease,
    filter 0.18s ease !important;
}


/* ESBS logo */

#survey-nav .esbs-logo-esbs {
  display: flex !important;
}

#survey-nav
.esbs-logo-esbs
.esbs-header-logo,
#survey-nav
.esbs-logo-esbs
img {
  width: auto !important;
  max-width: 430px !important;

  height: auto !important;
  max-height: 108px !important;
}


/* Egyptian Cancer Society logo */

#survey-nav .esbs-logo-ecs {
  display: flex !important;
}

#survey-nav
.esbs-logo-ecs
.esbs-header-logo,
#survey-nav
.esbs-logo-ecs
img {
  width: auto !important;
  max-width: 440px !important;

  height: auto !important;
  max-height: 101px !important;
}

#survey-nav
.esbs-logo-item:hover
.esbs-header-logo,
#survey-nav
.esbs-logo-item:hover
img {
  transform:
    scale(1.035) !important;

  filter:
    saturate(1.04)
    contrast(1.025) !important;
}


/* ==========================================================
   7. HEADER TOOLS BUTTON
========================================================== */

#survey-nav #navbar-menu {
  position: absolute !important;
  top: 50% !important;
  right: 17px !important;
  z-index: 120 !important;

  margin: 0 !important;

  transform:
    translateY(-50%) !important;
}

#survey-nav #navbar-toggler,
#survey-nav .navbar-toggle,
#survey-nav #navbar-menu > .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 43px !important;
  min-width: 43px !important;
  height: 43px !important;
  min-height: 43px !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    1px solid
    var(--esbs-border) !important;

  border-radius:
    50% !important;

  background:
    var(--esbs-white) !important;

  color:
    var(--esbs-navy) !important;

  box-shadow:
    0 4px 13px
    rgba(11, 45, 92, 0.09) !important;
}

#survey-nav #navbar-toggler:hover,
#survey-nav .navbar-toggle:hover {
  border-color:
    var(--esbs-gold) !important;

  background:
    var(--esbs-gold-pale) !important;
}


/* ==========================================================
   8. PROGRESS AREA
========================================================== */

.top-container,
.progress-wrapper {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    var(--esbs-white) !important;
}

.progress-wrapper {
  position: relative !important;

  min-height: 32px !important;
  padding-top: 22px !important;
}

.progress-wrapper::before {
  content: "Survey progress";

  position: absolute;
  top: 5px;
  left: 18px;

  color:
    var(--esbs-navy);

  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    650;
}

.progress {
  height:
    8px !important;

  margin:
    0 !important;

  overflow:
    hidden !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    #dce5ee !important;

  box-shadow:
    none !important;
}

.progress-bar,
.progress-bar-success {
  border-radius:
    0 !important;

  background:
    linear-gradient(
      90deg,
      var(--esbs-navy) 0%,
      var(--esbs-royal) 68%,
      var(--esbs-gold-bright) 100%
    ) !important;

  box-shadow:
    none !important;
}


/* ==========================================================
   9. MAIN SURVEY AREA
========================================================== */

#main-col {
  width: 100% !important;
  max-width: 1240px !important;

  margin: 0 auto !important;
  padding:
    22px
    18px
    30px !important;
}

#outerframeContainer {
  width: 100% !important;
  max-width: 1240px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}


/* ==========================================================
   10. SURVEY TITLE
========================================================== */

.survey-name,
.survey-title,
h1.survey-name {
  margin:
    0
    0
    13px !important;

  color:
    var(--esbs-navy) !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    clamp(
      27px,
      2.9vw,
      39px
    ) !important;

  line-height:
    1.13 !important;

  font-weight:
    800 !important;

  letter-spacing:
    -0.027em !important;
}


/* ==========================================================
   11. WELCOME AND PRIVACY PANELS
========================================================== */

.survey-description,
.survey-welcome,
.privacy-wrapper,
.privacy,
.data-security-wrapper {
  margin:
    0
    0
    15px !important;

  padding:
    18px
    21px !important;

  border:
    1px solid
    var(--esbs-border) !important;

  border-left:
    5px solid
    var(--esbs-gold-bright) !important;

  border-radius:
    12px !important;

  background:
    var(--esbs-white) !important;

  color:
    var(--esbs-muted) !important;

  font-size:
    14px !important;

  line-height:
    1.62 !important;

  box-shadow:
    var(--esbs-shadow) !important;
}

.survey-description p,
.survey-welcome p,
.privacy-wrapper p,
.privacy p,
.data-security-wrapper p {
  margin:
    0
    0
    9px !important;
}

.survey-description p:last-child,
.survey-welcome p:last-child,
.privacy-wrapper p:last-child,
.privacy p:last-child {
  margin-bottom:
    0 !important;
}

.survey-welcome strong,
.privacy-wrapper strong,
.privacy strong {
  color:
    var(--esbs-navy) !important;
}


/* ==========================================================
   12. PRIVACY ACCEPTANCE CHECKBOX
   Royal blue and gold, no green
========================================================== */

.privacy-wrapper input[type="checkbox"],
.privacy input[type="checkbox"],
.data-security-wrapper input[type="checkbox"] {
  width:
    19px !important;

  height:
    19px !important;

  accent-color:
    var(--esbs-navy) !important;
}

.privacy-wrapper label,
.privacy label,
.data-security-wrapper label {
  color:
    var(--esbs-navy) !important;

  font-size:
    15px !important;

  line-height:
    1.4 !important;

  font-weight:
    650 !important;
}

.privacy-wrapper input[type="checkbox"]:checked + label,
.privacy input[type="checkbox"]:checked + label {
  color:
    var(--esbs-gold) !important;
}


/* Remove inherited green text */

.text-success,
.has-success,
.ls-em-success,
.em-success {
  color:
    var(--esbs-navy) !important;
}


/* ==========================================================
   13. GROUP HEADINGS
========================================================== */

.group-outer-container {
  margin-bottom:
    12px !important;
}

.group-title,
.group-name,
h1.group-name,
h2.group-name,
.group-container > h1,
.group-container > h2 {
  margin:
    0
    0
    10px !important;

  color:
    var(--esbs-navy) !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    clamp(
      24px,
      2.2vw,
      31px
    ) !important;

  line-height:
    1.18 !important;

  font-weight:
    750 !important;

  letter-spacing:
    -0.018em !important;

  text-align:
    left !important;
}

.group-description {
  margin:
    0
    0
    13px !important;

  padding:
    12px
    15px !important;

  border:
    1px solid
    var(--esbs-border) !important;

  border-left:
    4px solid
    var(--esbs-gold-bright) !important;

  border-radius:
    8px !important;

  background:
    linear-gradient(
      135deg,
      var(--esbs-white),
      var(--esbs-blue-pale)
    ) !important;

  color:
    var(--esbs-muted) !important;

  font-size:
    13.5px !important;

  line-height:
    1.55 !important;
}


/* ==========================================================
   14. QUESTION CARDS
========================================================== */

.question-container {
  position: relative;

  margin:
    0
    0
    10px !important;

  padding:
    13px
    16px
    14px !important;

  border:
    1px solid
    var(--esbs-border) !important;

  border-radius:
    var(--esbs-radius) !important;

  background:
    var(--esbs-white) !important;

  box-shadow:
    var(--esbs-shadow) !important;

  transition:
    border-color 0.17s ease,
    box-shadow 0.17s ease !important;
}

.question-container:hover {
  border-color:
    var(--esbs-border-strong) !important;

  box-shadow:
    var(--esbs-shadow-hover) !important;
}

.question-container:focus-within {
  border-color:
    rgba(11, 45, 92, 0.46) !important;

  box-shadow:
    0 0 0 3px
    rgba(11, 45, 92, 0.05),
    var(--esbs-shadow-hover) !important;
}


/* ==========================================================
   15. REQUIRED LABEL
========================================================== */

.question-valid-container {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    4px !important;

  margin:
    0
    0
    2px !important;

  padding:
    0 !important;

  color:
    var(--esbs-muted) !important;

  font-size:
    11px !important;

  line-height:
    1.2 !important;

  font-weight:
    600 !important;
}

.question-valid-container .asterisk,
.question-container .asterisk {
  color:
    var(--esbs-gold) !important;

  font-size:
    17px !important;

  line-height:
    1 !important;

  font-weight:
    800 !important;
}

.question-number {
  color:
    var(--esbs-light-text) !important;

  font-size:
    10.5px !important;
}


/* ==========================================================
   16. QUESTION TYPOGRAPHY
========================================================== */

.question-title-container {
  margin:
    0
    0
    3px !important;
}

.question-title-container .question-text,
.question-text,
.question-title-container > div:last-child {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--esbs-navy) !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    16px !important;

  line-height:
    1.36 !important;

  font-weight:
    700 !important;

  letter-spacing:
    -0.004em !important;

  overflow-wrap:
    anywhere !important;
}

.question-title-container .question-text *,
.question-text * {
  color:
    inherit !important;

  font-size:
    inherit !important;

  line-height:
    inherit !important;

  font-weight:
    inherit !important;
}


/* ==========================================================
   17. HELP TEXT
========================================================== */

.question-help-container,
.ls-questionhelp,
.question-help {
  display:
    block !important;

  width:
    auto !important;

  min-height:
    0 !important;

  margin:
    5px
    0
    7px !important;

  padding:
    5px
    8px !important;

  border:
    0 !important;

  border-radius:
    6px !important;

  background:
    var(--esbs-blue-soft) !important;

  color:
    #405870 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    13.5px !important;

  line-height:
    1.45 !important;

  font-weight:
    400 !important;

  font-style:
    normal !important;

  box-shadow:
    none !important;
}


/* Remove all inherited icons */

.question-help-container::before,
.question-help-container::after,
.ls-questionhelp::before,
.ls-questionhelp::after,
.question-help::before,
.question-help::after {
  content:
    none !important;

  display:
    none !important;
}

.question-help-container .fa,
.question-help-container .fas,
.question-help-container .far,
.question-help-container .glyphicon,
.ls-questionhelp .fa,
.ls-questionhelp .fas,
.ls-questionhelp .far,
.ls-questionhelp .glyphicon,
.question-help .fa,
.question-help .fas,
.question-help .far,
.question-help .glyphicon {
  display:
    none !important;
}


/* ==========================================================
   18. ANSWER AREA
========================================================== */

.answer-container {
  margin-top:
    4px !important;

  padding-top:
    0 !important;
}

.answer-container ul {
  margin:
    0 !important;
}


/* ==========================================================
   19. RADIO BUTTONS AND CHECKBOXES
   Royal blue, not green
========================================================== */

.question-container .radio,
.question-container .checkbox,
.question-container .radio-item,
.question-container .checkbox-item {
  margin:
    0
    0
    2px !important;
}

.question-container .radio label,
.question-container .checkbox label,
.question-container .answer-item label {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    8px !important;

  min-height:
    27px !important;

  margin:
    0 !important;

  padding:
    3px
    5px !important;

  border-radius:
    5px !important;

  color:
    var(--esbs-text) !important;

  font-size:
    13.5px !important;

  line-height:
    1.4 !important;

  font-weight:
    400 !important;

  cursor:
    pointer !important;
}

.question-container .radio label:hover,
.question-container .checkbox label:hover,
.question-container .answer-item label:hover {
  background:
    var(--esbs-blue-soft) !important;

  color:
    var(--esbs-navy) !important;
}

.question-container input[type="radio"],
.question-container input[type="checkbox"] {
  width:
    17px !important;

  min-width:
    17px !important;

  height:
    17px !important;

  margin:
    0 !important;

  accent-color:
    var(--esbs-navy) !important;

  cursor:
    pointer !important;
}

.question-container
.radio-item
input[type="radio"]:checked
+ label,
.question-container
.checkbox-item
input[type="checkbox"]:checked
+ label {
  color:
    var(--esbs-gold) !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   20. TEXT INPUTS
========================================================== */

.question-container .form-control,
.question-container input[type="text"],
.question-container input[type="email"],
.question-container input[type="tel"],
.question-container input[type="number"],
.question-container input[type="password"],
.question-container input[type="search"],
.question-container textarea {
  width:
    100% !important;

  min-height:
    41px !important;

  padding:
    8px
    11px !important;

  border:
    1px solid
    var(--esbs-border-strong) !important;

  border-radius:
    var(--esbs-radius-small) !important;

  background:
    var(--esbs-white) !important;

  color:
    var(--esbs-text) !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    14px !important;

  line-height:
    1.4 !important;

  box-shadow:
    inset 0 1px 2px
    rgba(11, 45, 92, 0.025) !important;
}

.question-container textarea {
  min-height:
    92px !important;

  resize:
    vertical !important;
}

.question-container .form-control:focus,
.question-container input:focus,
.question-container textarea:focus {
  border-color:
    var(--esbs-royal) !important;

  outline:
    0 !important;

  box-shadow:
    0 0 0 3px
    rgba(23, 71, 127, 0.12) !important;
}


/* ==========================================================
   21. ROYAL BLUE AND GOLD DROPDOWNS
========================================================== */

.question-container select.form-control,
.question-container select {
  width:
    100% !important;

  min-height:
    43px !important;

  padding:
    8px
    40px
    8px
    11px !important;

  border:
    1px solid
    var(--esbs-royal) !important;

  border-left:
    5px solid
    var(--esbs-gold-bright) !important;

  border-radius:
    8px !important;

  background:
    linear-gradient(
      135deg,
      var(--esbs-white),
      var(--esbs-blue-pale)
    ) !important;

  color:
    var(--esbs-navy) !important;

  font-size:
    14px !important;

  font-weight:
    650 !important;

  cursor:
    pointer !important;

  box-shadow:
    0 3px 10px
    rgba(11, 45, 92, 0.055) !important;
}

.question-container select:hover {
  border-color:
    var(--esbs-blue) !important;

  background:
    var(--esbs-blue-soft) !important;
}

.question-container select:focus {
  border-color:
    var(--esbs-gold) !important;

  outline:
    0 !important;

  box-shadow:
    0 0 0 3px
    rgba(212, 175, 55, 0.20) !important;
}

.question-container select option {
  background:
    var(--esbs-white) !important;

  color:
    var(--esbs-text) !important;
}


/* Selected option: gold */

.question-container select option:checked {
  background:
    var(--esbs-gold-bright) !important;

  color:
    var(--esbs-deep) !important;

  font-weight:
    700 !important;
}


/* Bootstrap-select */

.question-container .bootstrap-select {
  width:
    100% !important;
}

.question-container
.bootstrap-select
> .dropdown-toggle {
  min-width:
    220px !important;

  min-height:
    43px !important;

  padding:
    8px
    40px
    8px
    11px !important;

  border:
    1px solid
    var(--esbs-royal) !important;

  border-left:
    5px solid
    var(--esbs-gold-bright) !important;

  border-radius:
    8px !important;

  background:
    linear-gradient(
      135deg,
      var(--esbs-white),
      var(--esbs-blue-pale)
    ) !important;

  color:
    var(--esbs-navy) !important;

  font-size:
    14px !important;

  font-weight:
    650 !important;

  box-shadow:
    0 3px 10px
    rgba(11, 45, 92, 0.055) !important;
}

.question-container
.bootstrap-select
> .dropdown-toggle:hover {
  border-color:
    var(--esbs-blue) !important;

  background:
    var(--esbs-blue-soft) !important;
}

.question-container
.bootstrap-select.open
> .dropdown-toggle,
.question-container
.bootstrap-select
> .dropdown-toggle:focus {
  border-color:
    var(--esbs-gold) !important;

  background:
    var(--esbs-white) !important;

  box-shadow:
    0 0 0 3px
    rgba(212, 175, 55, 0.20) !important;
}

.question-container
.bootstrap-select
.caret {
  border-top-color:
    var(--esbs-gold) !important;
}


/* Dropdown menu */

.question-container
.bootstrap-select
.dropdown-menu {
  max-height:
    360px !important;

  padding:
    5px !important;

  overflow-y:
    auto !important;

  border:
    1px solid
    var(--esbs-royal) !important;

  border-top:
    4px solid
    var(--esbs-gold-bright) !important;

  border-radius:
    9px !important;

  background:
    var(--esbs-white) !important;

  box-shadow:
    0 15px 34px
    rgba(11, 45, 92, 0.18) !important;
}

.question-container
.bootstrap-select
.dropdown-menu
> li
> a {
  padding:
    8px
    11px !important;

  border-radius:
    6px !important;

  color:
    var(--esbs-text) !important;

  font-size:
    13.5px !important;

  line-height:
    1.4 !important;

  transition:
    background-color 0.13s ease,
    color 0.13s ease !important;
}


/* Blue hover */

.question-container
.bootstrap-select
.dropdown-menu
> li
> a:hover,
.question-container
.bootstrap-select
.dropdown-menu
> li
> a:focus {
  background:
    var(--esbs-royal) !important;

  color:
    var(--esbs-white) !important;
}


/* Gold selected option */

.question-container
.bootstrap-select
.dropdown-menu
> .selected
> a,
.question-container
.bootstrap-select
.dropdown-menu
> .active
> a {
  background:
    var(--esbs-gold-bright) !important;

  color:
    var(--esbs-deep) !important;

  font-weight:
    750 !important;
}

.question-container
.bootstrap-select
.dropdown-menu
> .selected
> a::after {
  content: "✓";

  float: right;

  color:
    var(--esbs-navy);

  font-weight:
    900;
}


/* Search inside dropdown */

.question-container
.bootstrap-select
.bs-searchbox {
  padding:
    5px
    5px
    8px !important;
}

.question-container
.bootstrap-select
.bs-searchbox
input {
  min-height:
    40px !important;

  border:
    1px solid
    var(--esbs-royal) !important;

  border-left:
    4px solid
    var(--esbs-gold-bright) !important;

  color:
    var(--esbs-navy) !important;
}


/* ==========================================================
   22. MATRIX TABLES
========================================================== */

.question-container .table-responsive {
  margin-top:
    8px !important;

  overflow-x:
    auto !important;

  border:
    1px solid
    var(--esbs-border) !important;

  border-radius:
    9px !important;

  background:
    var(--esbs-white) !important;

  -webkit-overflow-scrolling: touch;
}

.question-container table {
  width:
    100% !important;

  border-collapse:
    separate !important;

  border-spacing:
    0 !important;

  color:
    var(--esbs-text) !important;

  font-size:
    12px !important;
}

.question-container table thead th {
  padding:
    8px
    6px !important;

  background:
    linear-gradient(
      180deg,
      var(--esbs-navy),
      var(--esbs-royal)
    ) !important;

  color:
    var(--esbs-white) !important;

  font-size:
    11px !important;

  line-height:
    1.3 !important;

  font-weight:
    700 !important;

  text-align:
    center !important;

  vertical-align:
    middle !important;
}

.question-container table tbody th,
.question-container table tbody td {
  padding:
    7px
    6px !important;

  border-top:
    1px solid
    #e7edf3 !important;

  color:
    var(--esbs-text) !important;

  font-size:
    11.5px !important;

  line-height:
    1.36 !important;

  vertical-align:
    middle !important;
}

.question-container table tbody th {
  min-width:
    190px !important;

  background:
    #f8fafc !important;

  color:
    var(--esbs-navy) !important;

  font-weight:
    650 !important;
}

.question-container table tbody tr:hover {
  background:
    var(--esbs-gold-pale) !important;
}


/* ==========================================================
   23. VALIDATION WITH ESBS STYLING
========================================================== */

.question-container.input-error,
.question-container.has-error,
.question-container.em-error,
.question-container[data-em-state="error"] {
  border:
    1px solid
    #c94b43 !important;

  border-left:
    4px solid
    var(--esbs-red) !important;

  background:
    #fffafa !important;

  box-shadow:
    0 0 0 3px
    rgba(180, 35, 24, 0.07),
    0 7px 20px
    rgba(180, 35, 24, 0.10) !important;
}

.question-container.input-error .form-control,
.question-container.has-error .form-control,
.question-container.input-error input,
.question-container.has-error input,
.question-container.input-error select,
.question-container.has-error select,
.question-container.input-error textarea,
.question-container.has-error textarea {
  border-color:
    var(--esbs-red) !important;

  background:
    var(--esbs-white) !important;

  box-shadow:
    0 0 0 3px
    rgba(180, 35, 24, 0.08) !important;
}

.question-container .em-error,
.question-container .ls-em-error,
.question-container .text-danger,
.question-container .alert-danger {
  color:
    #8f1f17 !important;

  background:
    var(--esbs-red-pale) !important;

  border:
    1px solid
    rgba(180, 35, 24, 0.24) !important;

  border-left:
    4px solid
    var(--esbs-red) !important;

  border-radius:
    6px !important;

  padding:
    6px
    9px !important;

  margin:
    5px
    0 !important;

  font-size:
    12.5px !important;

  font-weight:
    650 !important;
}


/* Valid state uses blue, not green */

.question-container.has-success,
.question-container.input-valid {
  border-color:
    rgba(23, 71, 127, 0.34) !important;

  box-shadow:
    0 3px 12px
    rgba(23, 71, 127, 0.06) !important;
}

.has-success .form-control {
  border-color:
    var(--esbs-royal) !important;

  box-shadow:
    0 0 0 3px
    rgba(23, 71, 127, 0.08) !important;
}


/* ==========================================================
   24. NAVIGATION PANEL AND BUTTONS
========================================================== */

.navigator,
.navigator-wrapper,
#navigator-container {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  min-height:
    78px !important;

  margin-top:
    18px !important;

  padding:
    14px
    16px !important;

  border:
    1px solid
    var(--esbs-border) !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      135deg,
      var(--esbs-white),
      var(--esbs-blue-pale)
    ) !important;

  box-shadow:
    var(--esbs-shadow) !important;
}

.navigator .btn,
.navigator-wrapper .btn,
#navigator-container .btn {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-width:
    124px !important;

  min-height:
    50px !important;

  padding:
    11px
    24px !important;

  border-radius:
    999px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    14px !important;

  line-height:
    1.3 !important;

  font-weight:
    750 !important;

  transition:
    transform 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease !important;
}

.navigator .btn:hover,
.navigator-wrapper .btn:hover,
#navigator-container .btn:hover {
  transform:
    translateY(-1px) !important;
}


/* Next and submit */

.navigator .btn-primary,
.navigator .btn-success,
.navigator .ls-move-next-btn,
.navigator .ls-move-submit-btn,
.navigator-wrapper .btn-primary,
.navigator-wrapper .btn-success,
.navigator-wrapper .ls-move-next-btn,
.navigator-wrapper .ls-move-submit-btn,
#navigator-container .btn-primary,
#navigator-container .btn-success,
#navigator-container .ls-move-next-btn,
#navigator-container .ls-move-submit-btn {
  border:
    2px solid
    var(--esbs-navy) !important;

  background:
    linear-gradient(
      135deg,
      var(--esbs-navy),
      var(--esbs-royal)
    ) !important;

  color:
    var(--esbs-white) !important;

  box-shadow:
    0 8px 20px
    rgba(11, 45, 92, 0.19) !important;
}

.navigator .btn-primary:hover,
.navigator .btn-success:hover,
.navigator .ls-move-next-btn:hover,
.navigator .ls-move-submit-btn:hover,
.navigator-wrapper .btn-primary:hover,
.navigator-wrapper .btn-success:hover,
#navigator-container .btn-primary:hover,
#navigator-container .btn-success:hover {
  border-color:
    var(--esbs-gold) !important;

  background:
    linear-gradient(
      135deg,
      var(--esbs-gold),
      var(--esbs-gold-bright)
    ) !important;

  color:
    var(--esbs-deep) !important;
}


/* Previous */

.navigator .btn-default,
.navigator .ls-move-previous-btn,
.navigator-wrapper .btn-default,
.navigator-wrapper .ls-move-previous-btn,
#navigator-container .btn-default,
#navigator-container .ls-move-previous-btn {
  border:
    2px solid
    var(--esbs-royal) !important;

  background:
    var(--esbs-white) !important;

  color:
    var(--esbs-navy) !important;
}

.navigator .btn-default:hover,
.navigator .ls-move-previous-btn:hover,
.navigator-wrapper .btn-default:hover,
#navigator-container .btn-default:hover {
  border-color:
    var(--esbs-gold) !important;

  background:
    var(--esbs-gold-pale) !important;

  color:
    var(--esbs-navy) !important;
}


/* ==========================================================
   25. FOOTER
========================================================== */

.esbs-survey-footer {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    100% !important;

  min-height:
    86px !important;

  margin:
    27px
    0
    0 !important;

  padding:
    11px
    16px !important;

  overflow:
    hidden !important;

  border:
    0 !important;

  border-top:
    3px solid
    var(--esbs-gold-bright) !important;

  background:
    linear-gradient(
      135deg,
      var(--esbs-deep),
      var(--esbs-navy)
    ) !important;

  color:
    var(--esbs-white) !important;
}

.esbs-survey-footer .esbs-footer-inner {
  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    nowrap !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    8px !important;

  width:
    auto !important;

  max-width:
    100% !important;

  min-height:
    60px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}

.esbs-survey-footer .esbs-footer-emblem,
.esbs-survey-footer .esbs-footer-brand {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    52px !important;

  min-width:
    52px !important;

  height:
    58px !important;

  margin:
    0 !important;

  padding:
    0
    8px
    0
    0 !important;

  border-right:
    1px solid
    rgba(212, 175, 55, 0.38) !important;
}

.esbs-survey-footer img,
.esbs-survey-footer .esbs-footer-emblem-img {
  display:
    block !important;

  width:
    auto !important;

  max-width:
    44px !important;

  height:
    auto !important;

  max-height:
    55px !important;

  margin:
    0 !important;

  object-fit:
    contain !important;
}

.esbs-survey-footer .esbs-footer-links,
.esbs-survey-footer .esbs-footer-support,
.esbs-survey-footer .esbs-support-links {
  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    nowrap !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    8px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}

.esbs-survey-footer a,
.esbs-survey-footer .esbs-footer-link {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    7px !important;

  min-height:
    38px !important;

  margin:
    0 !important;

  padding:
    8px
    13px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.26) !important;

  border-radius:
    999px !important;

  background:
    rgba(255, 255, 255, 0.08) !important;

  color:
    var(--esbs-white) !important;

  font-size:
    11.5px !important;

  line-height:
    1.2 !important;

  font-weight:
    700 !important;

  text-decoration:
    none !important;

  white-space:
    nowrap !important;
}

.esbs-survey-footer a:hover,
.esbs-survey-footer a:focus {
  border-color:
    var(--esbs-gold-light) !important;

  background:
    var(--esbs-gold) !important;

  color:
    var(--esbs-white) !important;
}

.esbs-survey-footer .fa,
.esbs-survey-footer .fab,
.esbs-survey-footer .fas {
  color:
    var(--esbs-gold-light) !important;

  font-size:
    14px !important;
}


/* ==========================================================
   26. TABLET
========================================================== */

@media (max-width: 1000px) {

  #survey-nav.esbs-navbar,
  #survey-nav .esbs-navbar-inner {
    min-height:
      128px !important;
  }

  #survey-nav .esbs-navbar-inner {
    padding:
      8px
      58px
      8px
      12px !important;
  }

  #survey-nav .esbs-logo-row {
    grid-template-columns:
      minmax(230px, 1fr)
      minmax(230px, 1fr) !important;

    gap:
      clamp(
        30px,
        7vw,
        85px
      ) !important;

    min-height:
      108px !important;
  }

  #survey-nav .esbs-logo-item {
    height:
      102px !important;
  }

  #survey-nav
  .esbs-logo-esbs
  img {
    max-width:
      330px !important;

    max-height:
      94px !important;
  }

  #survey-nav
  .esbs-logo-ecs
  img {
    max-width:
      340px !important;

    max-height:
      88px !important;
  }

}


/* ==========================================================
   27. MOBILE
========================================================== */

@media (max-width: 700px) {

  body {
    font-size:
      13.5px !important;
  }

  #survey-nav.esbs-navbar {
    min-height:
      116px !important;

    overflow:
      hidden !important;
  }

  #survey-nav .esbs-navbar-inner {
    min-height:
      116px !important;

    padding:
      7px
      43px
      7px
      7px !important;
  }

  #survey-nav .esbs-logo-row {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    grid-template-rows:
      100px !important;

    align-items:
      center !important;

    justify-items:
      stretch !important;

    gap:
      5px !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-height:
      100px !important;

    margin:
      0 !important;
  }

  #survey-nav .esbs-logo-item {
    width:
      100% !important;

    height:
      98px !important;

    min-height:
      98px !important;

    margin:
      0 !important;

    padding:
      5px !important;

    overflow:
      hidden !important;

    border:
      1px solid
      rgba(11, 45, 92, 0.07) !important;

    border-radius:
      9px !important;

    background:
      rgba(255, 255, 255, 0.94) !important;

    box-shadow:
      none !important;
  }

  #survey-nav
  .esbs-logo-esbs
  img,
  #survey-nav
  .esbs-logo-esbs
  .esbs-header-logo {
    width:
      auto !important;

    max-width:
      95% !important;

    height:
      auto !important;

    max-height:
      89px !important;
  }

  #survey-nav
  .esbs-logo-ecs
  img,
  #survey-nav
  .esbs-logo-ecs
  .esbs-header-logo {
    width:
      auto !important;

    max-width:
      96% !important;

    height:
      auto !important;

    max-height:
      80px !important;
  }

  #survey-nav #navbar-menu {
    top:
      8px !important;

    right:
      5px !important;

    transform:
      none !important;
  }


  /* Mobile content */

  #main-col {
    padding:
      14px
      8px
      23px !important;
  }

  .survey-name,
  .survey-title,
  h1.survey-name {
    font-size:
      25px !important;
  }

  .survey-description,
  .survey-welcome,
  .privacy-wrapper,
  .privacy,
  .data-security-wrapper {
    padding:
      14px
      15px !important;

    font-size:
      13.5px !important;
  }

  .group-title,
  .group-name,
  h1.group-name,
  h2.group-name {
    font-size:
      22px !important;
  }

  .group-description {
    padding:
      11px
      12px !important;

    font-size:
      13px !important;
  }

  .question-container {
    margin-bottom:
      8px !important;

    padding:
      11px
      11px
      12px !important;
  }

  .question-title-container .question-text,
  .question-text,
  .question-title-container > div:last-child {
    font-size:
      15px !important;
  }

  .question-help-container,
  .ls-questionhelp,
  .question-help {
    padding:
      5px
      7px !important;

    font-size:
      13px !important;
  }

  .question-container .radio label,
  .question-container .checkbox label,
  .question-container .answer-item label {
    font-size:
      13px !important;
  }

  .question-container .form-control,
  .question-container input,
  .question-container textarea,
  .question-container select,
  .question-container
  .bootstrap-select
  > .dropdown-toggle {
    min-height:
      45px !important;

    font-size:
      16px !important;
  }


  /* Large mobile navigation panel */

  .navigator,
  .navigator-wrapper,
  #navigator-container {
    flex-direction:
      column-reverse !important;

    align-items:
      stretch !important;

    gap:
      8px !important;

    min-height:
      0 !important;

    padding:
      12px !important;
  }

  .navigator .btn,
  .navigator-wrapper .btn,
  #navigator-container .btn {
    width:
      100% !important;

    min-height:
      50px !important;

    margin:
      0 !important;

    font-size:
      14px !important;
  }


  /* Mobile footer remains one row */

  .esbs-survey-footer {
    min-height:
      74px !important;

    padding:
      8px
      6px !important;
  }

  .esbs-survey-footer .esbs-footer-inner {
    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    gap:
      5px !important;

    min-height:
      54px !important;
  }

  .esbs-survey-footer .esbs-footer-emblem,
  .esbs-survey-footer .esbs-footer-brand {
    width:
      42px !important;

    min-width:
      42px !important;

    height:
      49px !important;

    padding-right:
      5px !important;
  }

  .esbs-survey-footer img,
  .esbs-survey-footer .esbs-footer-emblem-img {
    max-width:
      35px !important;

    max-height:
      46px !important;
  }

  .esbs-survey-footer a,
  .esbs-survey-footer .esbs-footer-link {
    min-height:
      34px !important;

    padding:
      6px
      8px !important;

    font-size:
      10px !important;
  }

}


/* ==========================================================
   28. SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

  #survey-nav.esbs-navbar,
  #survey-nav .esbs-navbar-inner {
    min-height:
      106px !important;
  }

  #survey-nav .esbs-logo-row {
    grid-template-rows:
      90px !important;

    min-height:
      90px !important;
  }

  #survey-nav .esbs-logo-item {
    height:
      88px !important;

    min-height:
      88px !important;
  }

  #survey-nav
  .esbs-logo-esbs
  img {
    max-height:
      80px !important;
  }

  #survey-nav
  .esbs-logo-ecs
  img {
    max-height:
      72px !important;
  }

  .esbs-survey-footer a,
  .esbs-survey-footer .esbs-footer-link {
    padding:
      6px
      7px !important;

    font-size:
      0 !important;
  }

  .esbs-survey-footer .fa,
  .esbs-survey-footer .fab,
  .esbs-survey-footer .fas {
    font-size:
      15px !important;
  }

}


/* ==========================================================
   29. ACCESSIBILITY
========================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:
    3px solid
    rgba(212, 175, 55, 0.44) !important;

  outline-offset:
    3px !important;
}


/* ==========================================================
   30. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation:
      none !important;

    transition:
      none !important;

    scroll-behavior:
      auto !important;
  }

}


/* ==========================================================
   31. PRINT
========================================================== */

@media print {

  #survey-nav,
  .esbs-survey-footer,
  .navigator,
  .navigator-wrapper,
  #navigator-container {
    display:
      none !important;
  }

  body {
    background:
      var(--esbs-white) !important;
  }

  #main-col,
  #outerframeContainer {
    max-width:
      none !important;

    padding:
      0 !important;
  }

  .question-container {
    break-inside:
      avoid;

    box-shadow:
      none !important;
  }

}
/* ==========================================================
   ESBS FINAL TWO-LOGO HEADER CORRECTION
   Paste at the VERY END of the current working custom.css

   Desktop:
   [ ESBS ]                     [ ECS ]

   Mobile:
   [ ESBS ] [ ECS ]

   This overrides all earlier four-logo header rules.
========================================================== */


/* ==========================================================
   1. RESET THE HEADER HEIGHT
========================================================== */

#survey-nav,
#survey-nav.esbs-navbar {
  position: relative !important;
  z-index: 100 !important;

  display: block !important;

  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 0 !important;
  border-bottom:
    1px solid
    rgba(184, 134, 11, 0.24) !important;

  border-radius: 0 !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfe 100%
    ) !important;

  box-shadow:
    0 4px 16px
    rgba(11, 45, 92, 0.055) !important;
}


/* Gold finishing line */

#survey-nav::after,
#survey-nav.esbs-navbar::after {
  content: "" !important;

  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 3px !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      #e7ca76 20%,
      #b8860b 50%,
      #e7ca76 80%,
      transparent 100%
    ) !important;

  pointer-events: none !important;
}


/* ==========================================================
   2. RESET THE INNER HEADER
========================================================== */

#survey-nav .esbs-navbar-inner {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 1320px !important;

  min-height: 0 !important;
  height: auto !important;

  margin: 0 auto !important;
  padding:
    14px
    66px
    14px
    24px !important;
}


/* ==========================================================
   3. HIDE EVERYTHING EXCEPT ESBS AND ECS
========================================================== */

#survey-nav .esbs-logo-row > * {
  display: none !important;
}

#survey-nav .esbs-logo-row > .esbs-logo-esbs,
#survey-nav .esbs-logo-row > .esbs-logo-ecs {
  display: flex !important;
}


/* Additional protection */

#survey-nav .esbs-logo-presidential,
#survey-nav .esbs-logo-moh,
#survey-nav .esbs-logo-divider {
  display: none !important;
}


/* ==========================================================
   4. TWO-COLUMN DESKTOP LOGO ROW
========================================================== */

#survey-nav .esbs-logo-row {
  position: relative !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  grid-template-rows:
    108px !important;

  align-items: center !important;
  justify-items: center !important;

  column-gap:
    clamp(
      50px,
      10vw,
      170px
    ) !important;

  row-gap: 0 !important;

  width: 100% !important;
  max-width: 1040px !important;

  min-height: 108px !important;
  height: 108px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* ==========================================================
   5. RESET BOTH LOGO CONTAINERS
========================================================== */

#survey-nav .esbs-logo-esbs,
#survey-nav .esbs-logo-ecs {
  position: relative !important;

  grid-column: auto !important;
  grid-row: 1 !important;

  align-self: center !important;
  justify-self: center !important;

  flex: none !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 450px !important;

  min-width: 0 !important;
  min-height: 0 !important;
  height: 100px !important;
  max-height: 100px !important;

  margin: 0 !important;
  padding: 6px 12px !important;

  overflow: hidden !important;

  border:
    1px solid
    transparent !important;

  border-radius:
    13px !important;

  background:
    transparent !important;

  transform: none !important;

  box-shadow: none !important;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease !important;
}


/* Explicit desktop positions */

#survey-nav .esbs-logo-esbs {
  grid-column: 1 !important;
}

#survey-nav .esbs-logo-ecs {
  grid-column: 2 !important;
}


/* ==========================================================
   6. CONTROL THE TWO LOGO IMAGES
========================================================== */

#survey-nav .esbs-logo-esbs img,
#survey-nav .esbs-logo-ecs img,
#survey-nav .esbs-logo-esbs .esbs-header-logo,
#survey-nav .esbs-logo-ecs .esbs-header-logo {
  position: static !important;

  display: block !important;

  float: none !important;

  width: auto !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  transform: none !important;
}


/* ESBS image */

#survey-nav .esbs-logo-esbs img,
#survey-nav
.esbs-logo-esbs
.esbs-header-logo {
  max-width: 390px !important;
  max-height: 94px !important;
}


/* ECS image */

#survey-nav .esbs-logo-ecs img,
#survey-nav
.esbs-logo-ecs
.esbs-header-logo {
  max-width: 410px !important;
  max-height: 86px !important;
}


/* ==========================================================
   7. SUBTLE DESKTOP HOVER
========================================================== */

@media (hover: hover) {

  #survey-nav .esbs-logo-esbs:hover,
  #survey-nav .esbs-logo-ecs:hover,
  #survey-nav .esbs-logo-esbs:focus-within,
  #survey-nav .esbs-logo-ecs:focus-within {
    transform:
      translateY(-2px) !important;

    border-color:
      rgba(184, 134, 11, 0.25) !important;

    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98),
        rgba(255, 248, 230, 0.90)
      ) !important;

    box-shadow:
      0 7px 20px
      rgba(11, 45, 92, 0.08) !important;
  }

  #survey-nav
  .esbs-logo-esbs:hover
  img,

  #survey-nav
  .esbs-logo-ecs:hover
  img {
    transform:
      scale(1.035) !important;
  }

}


/* ==========================================================
   8. HEADER MENU BUTTON
========================================================== */

#survey-nav #navbar-menu {
  position: absolute !important;
  top: 50% !important;
  right: 15px !important;
  z-index: 130 !important;

  display: block !important;

  margin: 0 !important;

  transform:
    translateY(-50%) !important;
}

#survey-nav #navbar-toggler,
#survey-nav .navbar-toggle,
#survey-nav #navbar-menu > .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  min-width: 42px !important;

  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    1px solid
    #d8e2ec !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;

  color:
    #0b2d5c !important;

  box-shadow:
    0 4px 13px
    rgba(11, 45, 92, 0.09) !important;
}


/* ==========================================================
   9. TABLET
========================================================== */

@media (max-width: 1000px) {

  #survey-nav .esbs-navbar-inner {
    padding:
      11px
      56px
      11px
      14px !important;
  }

  #survey-nav .esbs-logo-row {
    grid-template-rows:
      96px !important;

    column-gap:
      clamp(
        24px,
        6vw,
        70px
      ) !important;

    min-height:
      96px !important;

    height:
      96px !important;
  }

  #survey-nav .esbs-logo-esbs,
  #survey-nav .esbs-logo-ecs {
    height:
      90px !important;

    max-height:
      90px !important;

    padding:
      5px
      8px !important;
  }

  #survey-nav .esbs-logo-esbs img,
  #survey-nav
  .esbs-logo-esbs
  .esbs-header-logo {
    max-width:
      310px !important;

    max-height:
      84px !important;
  }

  #survey-nav .esbs-logo-ecs img,
  #survey-nav
  .esbs-logo-ecs
  .esbs-header-logo {
    max-width:
      325px !important;

    max-height:
      78px !important;
  }

}


/* ==========================================================
   10. MOBILE
   Two balanced logos in one row
========================================================== */

@media (max-width: 700px) {

  #survey-nav,
  #survey-nav.esbs-navbar {
    min-height:
      0 !important;

    height:
      auto !important;
  }

  #survey-nav .esbs-navbar-inner {
    min-height:
      0 !important;

    height:
      auto !important;

    padding:
      8px
      42px
      8px
      6px !important;
  }

  #survey-nav .esbs-logo-row {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(0, 0.92fr) !important;

    grid-template-rows:
      82px !important;

    align-items:
      center !important;

    justify-items:
      stretch !important;

    column-gap:
      4px !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-height:
      82px !important;

    height:
      82px !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }

  #survey-nav .esbs-logo-esbs,
  #survey-nav .esbs-logo-ecs {
    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-width:
      0 !important;

    height:
      78px !important;

    max-height:
      78px !important;

    margin:
      0 !important;

    padding:
      4px !important;

    overflow:
      hidden !important;

    border:
      1px solid
      rgba(11, 45, 92, 0.055) !important;

    border-radius:
      8px !important;

    background:
      rgba(255, 255, 255, 0.92) !important;

    box-shadow:
      none !important;

    transform:
      none !important;
  }

  #survey-nav .esbs-logo-esbs {
    grid-column:
      1 !important;

    grid-row:
      1 !important;
  }

  #survey-nav .esbs-logo-ecs {
    grid-column:
      2 !important;

    grid-row:
      1 !important;
  }

  #survey-nav .esbs-logo-esbs img,
  #survey-nav
  .esbs-logo-esbs
  .esbs-header-logo {
    width:
      auto !important;

    max-width:
      98% !important;

    height:
      auto !important;

    max-height:
      71px !important;
  }

  #survey-nav .esbs-logo-ecs img,
  #survey-nav
  .esbs-logo-ecs
  .esbs-header-logo {
    width:
      auto !important;

    max-width:
      98% !important;

    height:
      auto !important;

    max-height:
      64px !important;
  }

  #survey-nav #navbar-menu {
    top:
      8px !important;

    right:
      5px !important;

    transform:
      none !important;
  }

}


/* ==========================================================
   11. NARROW MOBILE
========================================================== */

@media (max-width: 430px) {

  #survey-nav .esbs-navbar-inner {
    padding-right:
      39px !important;
  }

  #survey-nav .esbs-logo-row {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    grid-template-rows:
      74px !important;

    min-height:
      74px !important;

    height:
      74px !important;
  }

  #survey-nav .esbs-logo-esbs,
  #survey-nav .esbs-logo-ecs {
    height:
      70px !important;

    max-height:
      70px !important;

    padding:
      3px !important;
  }

  #survey-nav .esbs-logo-esbs img,
  #survey-nav
  .esbs-logo-esbs
  .esbs-header-logo {
    max-height:
      64px !important;
  }

  #survey-nav .esbs-logo-ecs img,
  #survey-nav
  .esbs-logo-ecs
  .esbs-header-logo {
    max-height:
      57px !important;
  }

}


/* ==========================================================
   12. VERY NARROW MOBILE
   Stack only when two readable logos no longer fit
========================================================== */

@media (max-width: 330px) {

  #survey-nav .esbs-navbar-inner {
    padding:
      7px
      38px
      7px
      6px !important;
  }

  #survey-nav .esbs-logo-row {
    grid-template-columns:
      1fr !important;

    grid-template-rows:
      62px
      57px !important;

    row-gap:
      3px !important;

    min-height:
      122px !important;

    height:
      122px !important;
  }

  #survey-nav .esbs-logo-esbs {
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    height:
      62px !important;

    max-height:
      62px !important;
  }

  #survey-nav .esbs-logo-ecs {
    grid-column:
      1 !important;

    grid-row:
      2 !important;

    height:
      57px !important;

    max-height:
      57px !important;
  }

  #survey-nav .esbs-logo-esbs img {
    max-height:
      57px !important;
  }

  #survey-nav .esbs-logo-ecs img {
    max-height:
      51px !important;
  }

}