.Filter.course-filter-chips-enabled { display: flex; flex-wrap: wrap; } .course-filter-chip-row { display: flex; flex: 0 0 100%; width: 100%; align-items: flex-start; justify-content: space-between; gap: 12px; /* margin-top: 12px; */ } .course-filter-chip-row.d-none { display: none !important; } .course-filter-chip-list { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; } .course-filter-chip { max-width: 100%; white-space: nowrap; border-radius: 500px; border: 1px solid var(--Text-Grey-300, #D0D5DD); background: var(--Theme-Blue-50, #EBEEFD); display: flex; padding: 4px 8px 4px 12px; align-items: center; gap: 10px; color: var(--Text-Grey-900, #101828); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; } .course-filter-chip:hover, .course-filter-chip:focus { border-color: #bcc7e5; background: #e6ecff; } .course-filter-chip-label { display: block; overflow: hidden; max-width: 220px; text-overflow: ellipsis; } .course-filter-chip-remove { position: relative; display: inline-flex; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: #1f2937; } .course-filter-chip-remove::before, .course-filter-chip-remove::after { position: absolute; top: 8px; left: 4px; width: 10px; height: 2px; border-radius: 2px; background: #ffffff; content: ""; } .course-filter-chip-remove::before { transform: rotate(45deg); } .course-filter-chip-remove::after { transform: rotate(-45deg); } .course-filter-clear-all { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 28px; padding: 0; border: 0; background: transparent; color: #2447ff; font-family: Inter, sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-decoration: none; } .course-filter-clear-all:hover, .course-filter-clear-all:focus { color: #182878; text-decoration: none; } .course-filter-chips-enabled .Clear_btn { display: none !important; } @media (max-width: 767px) { .course-filter-chip-row { flex-direction: column; gap: 8px; } .course-filter-chip-list { width: 100%; gap: 6px; } .course-filter-chip { min-height: 26px; padding: 2px 5px 2px 10px; font-size: 13px; line-height: 18px; } .course-filter-chip-label { max-width: calc(100vw - 110px); } .course-filter-chip-remove { flex-basis: 16px; width: 16px; height: 16px; } .course-filter-chip-remove::before, .course-filter-chip-remove::after { top: 7px; left: 3px; width: 10px; } .course-filter-clear-all { align-self: flex-end; min-height: 24px; font-size: 14px; line-height: 20px; } } .dropdown-menu.bs-has-apply-footer:has(.bs-apply-footer) .inner.show { padding-bottom: 14px; } .Input_Box .filter-selection.form-floating .dropdown .dropdown-menu .bs-apply-footer { position: absolute; bottom: 0px; transform: translateX(-50%); left: 50%; width: calc(100% - 0px); } .Input_Box .filter-selection.form-floating .dropdown .dropdown-menu .bs-apply-footer .btn { width: 100%; background: #3A58EF; color: #fff; border: 0; border-radius: 6px; font-weight: 600; padding: 3px 12px; height: 30px; font-size: 14px; } .filter-selection.form-floating.Topics { padding: 0; border: 0; }