.checkboxMainContainer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; } .checkboxContainer { display: flex; align-items: flex-start; align-self: stretch; } .checkbox { display: flex; padding: 10px 12px; align-items: flex-start; gap: 16px; flex: 1 0 0; border-radius: 8px; background: #1d1e2a; } .check { display: flex; padding-top: 4px; align-items: flex-start; gap: 10px; } .hiddenCheckbox { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; } .hiddenCheckbox:checked { border-radius: 4px; border: 1px solid #0067fd; background: #0067fd; } .hiddenCheckbox::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; opacity: 0; } .hiddenCheckbox:checked::after { opacity: 1; } .list { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 0 0; } .placeholderTxt { align-self: stretch; color: #d2d3e1; font-family: Inter; font-size: 1rem; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: 0.08px; } .secondaryTxt { align-self: stretch; color: #697281; font-family: Inter; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: 20px; letter-spacing: 0.07px; }