/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

@font-face {
  font-family: 'Noto Sans min';
  font-weight: 300;
  font-style: normal;
  src: url('../fonts/notosans-regular-webfont.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans min';
  font-weight: 600;
  font-style: normal;
  src: url('../fonts/notosans-bold-webfont.woff2') format('woff2');
}

body {
  font-family: "Noto Sans min", sans-serif !important;
}

a{
    text-decoration: underline;
}

.asterisk {
    display: none;
}

.ls-label-question table {
    width: 100%;
    border: 1px solid;
}

.question-preambule td {
  background-color: white;
  color: black;
  width: 33%;
  font-size: 150%;
  vertical-align: middle;
  text-align: center;
  border: 1px solid;
}

.anchor{
    position: relative;
    padding-top: 220px;
}

.question-pikt-1 {
  background-color: #cc3232 !important;
}

.question-pikt-2 {
  background-color: #db7b2b !important;
}

.question-pikt-3 {
  background-color: #e7b416 !important;
}

.question-pikt-4 {
  background-color: #99c140 !important;
}

.question-pikt-5 {
  background-color: #2dc937 !important;
}

.link-bright {
  color: #ffff00;
}

.group-description table {
    width: 50%;
}

.question-list table {
  border: 1px solid black;
}

.question-list td, th {
  vertical-align: middle;
  text-align: center;
  border: 1px solid black;
}

.question-list td:first-child + td {
    text-align: left;
    padding: 4px;
}

/*
 * Custom navigation bar tweaks
 *
 * The SSKB 2024 header sits on top of a full‑width yellow band.  By
 * default Bootstrap adds borders and shadows to navbars, which
 * generated an unwanted dark line above the header in LimeSurvey 6.
 * These rules remove those borders and shadows and ensure the
 * background image fills the bar.
 */
#survey-nav.navbar {
  border: none !important;
  box-shadow: none !important;
}
/*
 * Override the default navbar background behaviour.  The SSKB theme uses
 * a one‑pixel‑wide image (`pruh.jpg`) as its background to create the
 * distinctive white/yellow band.  We do not want the background to be
 * stretched or limited to a single repetition.  By setting
 * `background-size` to `auto` and allowing the image to repeat, the
 * browser will tile the strip horizontally and vertically as needed,
 * preserving the original look from LimeSurvey 3.
 */
#survey-nav {
  background-size: auto;
  background-repeat: repeat;
  /* Add a subtle shadow beneath the yellow header band to match
   * the original LimeSurvey 3 theme.  The shadow is created by
   * offsetting a blurred box below the navbar. */
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3);
}

/* Remove default navbar paddings to ensure the header image sits flush
 * against the yellow band on all devices.  Also reset margins on
 * header blocks to prevent vertical gaps above or below the logo. */
#survey-nav {
  padding: 0 !important;
}
#survey-nav .header-logo,
#survey-nav .header-links {
  margin: 0;
  padding: 0;
}

/*
 * Fine‑tune the vertical alignment of the header logo.  Without this
 * adjustment the image tends to sit a few pixels lower than desired due
 * to the default padding on Bootstrap's navbar component.  Pull the
 * logo up slightly so that it appears visually centred within the
 * yellow band.
 */
#survey-nav .header-logo {
  margin-top: 0;
}

/* Make the “continue later” link (and similar header links) appear
 * grey instead of the default blue.  Use !important to override
 * Bootstrap’s link styles. */
#survey-nav .header-links a {
  color: #666 !important;
}

/*
 * Customise the appearance of the registration page to match the
 * provided design.  These styles target only the registration
 * form via its unique ID (“registration-form”) defined in
 * register_form.twig.  They ensure the text is centred, form
 * fields are neatly styled and the submit button stands out.
 */
#registration-form {
  /* Centre the entire form container.  We do not restrict the maximum
   * width so that the text fields can occupy more space on larger
   * screens.  The width will be controlled by the grid classes on the
   * surrounding div (defined in register_form.twig).  On mobile
   * devices the form still spans most of the viewport. */
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

#registration-form .form-group {
  margin-bottom: 1.25rem;
}

#registration-form .form-control {
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 0.5rem 0.75rem;
}

#registration-form label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

#registration-form button {
  background-color: #ffffff;
  border: 2px solid #007bff;
  color: #007bff;
  padding: 0.5rem 1.5rem;
  transition: all 0.2s ease-in-out;
}

#registration-form button:hover {
  background-color: #007bff;
  color: #ffffff;
}

/*
 * Remove grey panels around the registration page.  LimeSurvey wraps
 * pages (including registration) in Bootstrap card components with a
 * light grey background and border.  To match the supplied design,
 * eliminate these backgrounds and borders.  As LimeSurvey does not
 * provide a unique class for the registration page, we apply these
 * rules globally; they mainly affect the registration view.
 */
.card,
.bg-light {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.list-unstyled {
  margin-bottom: 0 !important;
}

.question-container {
  padding-inline: 0.5rem;
  margin-inline: 1rem;
}

.radio-item {
  margin-right: 0 !important;
  width: fit-content;
}

.radio-label:hover {
  text-decoration: underline;
}

#survey-nav {
  background: transparent !important;
}

.header-logo {
  background: linear-gradient(to bottom, white 43%, #f5e60f 40%) !important;
  background-repeat: repeat;
  width: 100%;
  display: flex;
  justify-content: center;
}

.nav-link {
  background-color: white;
}

.loader-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-sizing: border-box;
  animation: spin 0.8s linear infinite;
  border-bottom-color: transparent;
  margin-inline: auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#ls-button-submit {
  min-width: 70px !important;
  margin-right: 1.5rem;
}

.input-error {
  box-shadow: 0 1px 10px rgba(169, 68, 66, .9) !important;
}

.well {
  border-radius: 0px !important;
}

.group-description {
  margin-inline: 1rem;
}

.answer-item.radio-item:hover .control-label.radio-label,
.answer-item.radio-item input[type="radio"]:hover + .control-label.radio-label,
.answer-item.radio-item .control-label.radio-label:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.modal-body {
  padding-top: 2rem !important;
}

.brand-logos {
  max-width: 520px;
  height: auto;
}

.ujep-logo {
  max-width: 140px;
  height: auto;
}

/*
 * Ensure the Corpus Solutions logo added to the footer aligns visually with the
 * existing UJEP logo.  Use the same sizing rules as the UJEP logo so that the
 * two images stack neatly when displayed together.  Additional responsive
 * adjustments follow the same breakpoints as defined for the UJEP logo.
 */
.corpus-logo {
  max-width: 140px;
  height: auto;
}

@media (max-width: 992px) {
  .brand-logos {
    max-width: 420px;
  }
  .ujep-logo {
    max-width: 120px;
  }
  .corpus-logo {
    max-width: 120px;
  }
}

@media (max-width: 768px) {
  .brand-logos {
    max-width: 420px;
  }
  .ujep-logo {
    max-width: 100px;
  }
  .prep-wrap .prep-text {
    display: none;
  }
  .corpus-logo {
    max-width: 100px;
  }
}

@media (max-width: 574px) {
  .brand-logos {
    max-width: 240px;
  }
  .ujep-logo {
    max-width: 120px;
  }
  .prep-wrap .prep-text {
    display: none;
  }
  .corpus-logo {
    max-width: 120px;
  }
}

@media (max-width: 376px) {
  .brand-logos {
    max-width: 260px;
  }
  .ujep-logo {
    max-width: 90px;
  }
  .prep-wrap .prep-text {
    display: none;
  }
  .corpus-logo {
    max-width: 90px;
  }
}

@media (min-width: 768px) {
  .offset-md-7 {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .register-jumbotron {
    padding: 1rem !important;
  }
}

@media (max-height: 900px) {
  body {
	padding-top: 15vh !important;
  }
  
  .header-logo > img {
	height: 15vh !important;
    width: auto;
  }
}