:root { --bar-bg: #ccc; --bar-fill: var(--green, #4caf50); } .progress-container { position: absolute; top: 20vh; left: 0; width: 100%; background: var(--green); height: 10px; } .content { margin-top: calc(20vh + 30px); display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 20px; max-width: 90vw; margin-left: auto; margin-right: auto; } .section:hover { background: var(--red); color: var(--tan); } .section:hover .status { color: var(--tan); } .section h2 { margin: 0 0 10px; } .status { font-weight: bold; color: red; } /* Questionnaire Pages */ .form-container { max-width: 800px; margin: 2rem auto; padding: 2rem; /* background: rgba(255, 255, 255, 0.9); */ } .form-container input { background: var(--tan); border: 1px solid var(--brown); } .form-container select { background: var(--tan); border: 1px solid var(--brown); } .form-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; font-weight: bold; } .form-control { width: 100%; padding: 0.5rem; border-radius: 4px; } textarea { background: var(--tan); border: 1px solid var(--brown) } textarea.form-control { min-height: 120px; resize: vertical; } .btn { background-color: var(--green); color: #fff; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; } .btn:hover { background-color: var(--dark-green); } .btn-outline { background: none; border: 1px solid var(--green); color: var(--green); } .radio-row { margin: 0.25rem 0; } .note { color: #444; margin: 0.5rem 0 0 0; } /* Grid/option helpers used by ancestry */ .ancestry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .ancestry-option { border: 1px solid var(--brown); padding: 1rem; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .ancestry-option:hover { border-color: var(--green); background-color: rgba(76, 175, 80, 0.1); } .ancestry-option input[type="checkbox"] { margin-right: 0.5rem; }