.knw-dc {
box-sizing: border-box;
margin: 20px 0;
padding: 20px;
border: 1px solid #d6d6d6;
border-radius: 8px;
background: #fff;
}
.knw-dc *, .knw-dc *::before, .knw-dc *::after { box-sizing: border-box; }
.knw-dc__intro h3 { margin-top: 0; }
.knw-dc__privacy-note {
margin: 12px 0 18px;
padding: 12px 14px;
border-left: 4px solid #0c71c3;
background: #eef5fb;
}
.knw-dc__controls {
display: grid;
gap: 14px;
}
.knw-dc__controls label {
display: grid;
gap: 6px;
}
.knw-dc select {
width: 100%;
max-width: 620px;
padding: 8px 10px;
}
.knw-dc__buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.knw-dc button {
appearance: none;
border: 0;
border-radius: 5px;
padding: 10px 18px;
background: #0c71c3;
color: #fff;
font-weight: 600;
cursor: pointer;
}
.knw-dc button:hover, .knw-dc button:focus { filter: brightness(.92); }
.knw-dc__reset { background: #555; }
.knw-dc__progress { margin-top: 15px; }
.knw-dc__progress-track {
width: 100%;
height: 10px;
margin-top: 6px;
overflow: hidden;
border-radius: 4px;
background: #eee;
}
.knw-dc__progress-fill {
width: 0;
height: 100%;
background: #0c71c3;
transition: width .15s ease;
}
.knw-dc__results { margin-top: 18px; }
.knw-dc__score {
margin-bottom: 20px;
padding: 16px;
border: 1px solid #d6d6d6;
border-radius: 6px;
background: #fafafa;
}
.knw-dc__details section {
margin: 22px 0;
}
.knw-dc__details h5 {
margin-bottom: 4px;
font-size: 1.05em;
}
.knw-dc__feature {
margin: 10px 0;
padding: 12px 14px;
border: 1px solid #e3e3e3;
border-radius: 6px;
background: #fff;
}
.knw-dc__feature > div + div { margin-top: 5px; }
.knw-dc__feature-points {
font-size: .92em;
opacity: .8;
}
.knw-dc__closing { margin-top: 20px; }
.knw-dc--compact {
padding: 15px;
}
.knw-dc--compact .knw-dc__feature {
padding: 10px 12px;
}
@media (max-width: 767px) {
.knw-dc { padding: 15px; }
.knw-dc__buttons { flex-direction: column; }
.knw-dc button { width: 100%; }
}