:root {
  --engage-blue: #0049AC;
  --engage-blue-bright: #0000FF;
  --engage-magenta: #CC007C;
  --engage-coral: #EB7A7A;
  --engage-orange: #FEA51C;
  --engage-orange-light: #FEBD58;
}


/* ------------------------
1. Survey background & center
------------------------ */

body,
html {
    background-color: #f2f5f8 !important; /* light gray, or any color you want */
    min-height: 100vh; /* ensure it fills the viewport */
    margin: 0;
    padding: 0;
}

#limesurvey {
    background-color: #f2f5f8; /* light gray background */
}

#survey-content {
    max-width: 700px;
    margin: 40px auto; /* center and add top/bottom spacing */
    padding: 0 20px;
   
}

/* ------------------------
2. Question cards
------------------------ */
.question-container {
  color: #323232  !important;
  background-color: #fff  !important;
  border: 2px solid #323232 !important;
  box-shadow: 2px 2px #323232 !important;
  border-radius: 12px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
 
}

/* Hover effect to make cards pop */
.question-container:hover {
    transform: translateY(-3px);
    box-shadow: 6px 6px #323232  !important;
}

.answer-container
{
    font-size:14px;
}

/* ------------------------
3. Question Text
------------------------ */
.group-title{
    font-weight:bold;
    font-size:32px;
}

.question-text{
    font-weight:bold;
    font-size:22px;
    color: #2C3E50;
}


.survey-name
{
 
  background-color: #fff  !important;
  border: 2px solid #323232 !important;
  box-shadow: 2px 2px #323232 !important;
  border-radius: 12px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
}


.survey-welcome
{
  
  background-color: #fff  !important;
  border: 2px solid #323232 !important;
  box-shadow: 2px 2px #323232 !important;
  border-radius: 12px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
}

/* Limit width and center the progress bar */
.progress {
    max-width: 600px;   /* adjust width to taste */
    margin: 20px auto;  /* centers it horizontally */
    border: 2px solid #323232 !important;
  box-shadow: 2px 2px #323232 !important;
  border-radius: 12px !important;
}

.progress-bar {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.2) 50%,
        rgba(255,255,255,.2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px;
    animation: progress-stripes 1s linear infinite;
   font-size:0px;
    
}

@keyframes progress-stripes {
    from { background-position: 40px 0; }
    to { background-position: 0 0; }
}

.logo{
    max-height: 85px !important;
}

.surveys-list.list-unstyled li
{
    border: 1px solid #e5e5e5;
    border-left: 5px solid var(--engage-orange);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 15px;
    transition: all 0.2s ease;
    font-weight:bold;
    background: white;
   
}

.surveys-list.list-unstyled li a {
  
}