/* static/css/inputs.css */

.inputs-split {
  display:flex;
  gap:10px;
  min-height:60vh;
  margin:10px auto;
  max-width:1100px;}

.inputs-split .split{
  flex:1;
  background:rgba(var(--white2),var(--trans));
  border-radius:var(--smallcorner);
  box-shadow:0 2px 10px rgba(var(--black),.06);
  padding:14px;
  display:flex;
  flex-direction:column}

.split-btn{
  font-size:1.1rem;
  padding:10px 12px;
  border-radius:var(--smallcorner);
  border:0;
  background:var(--lightcolor);
  cursor:pointer}

.survey-list{
  margin:12px 0 0 0;
  padding:0;list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px}

.survey-list .card .card-link{
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:inherit}

.survey-list .card .thumb{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:var(--smallcorner)}

.survey-list .title{
  font-weight:600}

.survey-list .meta{
  opacity:.7;
  font-size:.9rem}

.question-heading { 
  font-family: var(--font2);
  color: var(--darkcolor);
  font-weight: 700;
}

#questionText{ 
  font-size: 1.8rem; 
  font-family: var(--font1);
  font-weight: 300; line-height: 1.3; 
  margin: 50px 50px 12px; }

.text-answer-input { 
  width: 100%; 
  padding: 10px; 
  border: 0px solid #ccc; 
  border-radius: var(--smallcorner); 
  box-sizing: border-box; 
  resize: vertical;
}

.hidden {
  display: none;
}

.submit-page {
  display:none;
  text-align: center;
}

.primary-btn{
  font-size:1.05rem; 
  padding:10px 14px; 
  border:0; 
  border-radius:var(--smallcorner);
  background:var(--lightcolor); 
  color:rgb(var(--black)); 
  cursor:pointer;}

.primary-btn:hover{
   filter:brightness(0.95); }

#questionData + .card{
  min-height: calc(100vh - 210px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 18px;
  
}

#questionData + .card .gallery{
  flex: 1;
  display: flex;
  align-items: center;  }

.question-heading {
  margin-bottom: 1rem; }

@media (max-width:768px){
  #questionData + .card{ min-height: calc(100vh - 180px); }
}

@media (max-width:768px){.inputs-split{flex-direction:column}}