.preferences-list { max-height: 75vh; overflow-y: auto; background: #fff; width: 100%; scrollbar-width: thin; scroll-behavior: smooth; border-radius: 12px; padding-bottom: 3rem; .preference-headers { font-size: 1.2rem; font-weight: 600; margin-top: 0; margin-bottom: 1rem; border-bottom: 1px solid #e0e0e0; padding-bottom: 0.5rem; color: #1890ff; // Ant Design blue } .ant-form-item-label > label { font-weight: 500; color: #000000; font-size: 16px; } .ant-checkbox-group, .ant-radio-group { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; } .ant-checkbox-wrapper { color: #000000; } .ant-checkbox { color: #000000; } .ant-form-item { margin-bottom: 1rem; } .ant-checkbox-wrapper, .ant-radio-wrapper { margin-right: 1rem; } // Optional: Scrollbar for long modals &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 3px; } .submitButton { position: unset; > button { width: max-content; bottom: 30px; } } } .formAddNewOld { flex: 1; } .menu-and-preferences { display: flex; align-items: flex-start; width: 100%; gap: 1.5rem; } .menu-section { padding: 10px 0; > div { font-family: "Poppins"; font-weight: 400; font-size: 14px; margin: 4px 0; background-color: #e1e7ff; padding: 8px 10px; border-radius: 4px; color: #1890ff; cursor: pointer; white-space: nowrap; -webkit-text-stroke-width: 0.1px; &:hover { background-color: #c0cbf8; } } } @media (max-width: 500px) { .menu-and-preferences { flex-direction: column; position: fixed; gap: 0; width: 80%; } .preferences-list { max-height: 80vh; width: 95%; .preference-headers { font-size: 1rem; } .ant-form-item-label > label { font-size: 14px; } .ant-checkbox-wrapper { font-size: 13px; } } .formAddNewOld { height: 50vh; } .menu-section { display: flex; flex-direction: row; gap: 2px; white-space: nowrap; width: 75vw; overflow: hidden; margin: 0; text-decoration: underline; > div { font-size: 12px; margin: 0; background-color: unset; border-radius: unset; &:hover { background-color: unset; } } } } .PreferencesBTN { display: flex; align-items: flex-start; justify-content: flex-end; width: 100%; margin-top: 1rem; .primary_Button { width: 200px !important; } }