.mantine-Modal-inner { z-index: 9999; .error{ margin-top:16px; padding:18px; background-color:#FFF0F1; color:#D7363B; } } .spinner { min-height: 150px; position: relative; margin-top: 70px; } .no-options { font-family: 'Roboto', 'Roboto Fallback'; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: 0.00em; span { line-height: 140%; } padding: 32px; text-align: center; } .delay-case-option-content { margin-top: 12px; .delay-case-option-header { display: flex; align-items: center; margin-top: 12px; gap: 12px; font-family: 'Roboto', 'Roboto Fallback'; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: 0.00em; span { line-height: 140%; } .delay-caseoption-week { font-weight: 700; } } .delay-case-selected-option { flex: 1; .mantine-Menu-dropdown { max-height: 200px; overflow-y: scroll; padding: 0.75rem; margin-top: -9px; border-color: #767676; .mantine-Menu-itemLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } .delay-caseoption-container { display: flex; align-items: center; border: 1px solid #767676; cursor: pointer; padding: 8px; justify-content: space-between; .delay-caseoption-details { flex: 1; } .delay-caseoption-checkmark { margin-right: 8px; color: green; } } .delay-caseoption-menu { display: flex; align-items: center; gap: 8px; cursor: pointer; justify-content: space-between; .delay-caseoption-menu-details { flex: 1; } .delay-caseoption-menu-checkmark { margin-right: 8px; color: green; } } } .choose-date-option-content { margin-top: 12px; .choose-date-option-title { display: flex; align-items: center; margin-top: 12px; gap: 12px; font-family: 'Roboto', 'Roboto Fallback'; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: 0.00em; span { line-height: 140%; } .choose-date-date { font-weight: 700; } } .choose-date-option-subtitle { margin-top: 12px; color: #222222; font-family: 'Roboto', 'Roboto Fallback'; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: 0.00em; span { line-height: 140%; } .choose-date-date { padding-left: 8px; } } .choose-date-calendar { .mantine-MonthLevel-monthLevel { margin: auto; } .mantine-Day-day.weekend { color: #FBE6F1; } margin-top: 12px; } } .send-now-option-content { display: flex; align-items: center; margin-top: 12px; gap: 12px; font-family: 'Roboto', 'Roboto Fallback'; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: 0.00em; span { line-height: 140%; } .send-now-date { font-weight: 700; } } .mantine-Modal-content { position: fixed; top: 0; left: 0; width: 100%; border-radius: 0; @media (min-width: 768px) { border-radius: 12px; position: static; } & .mantine-Modal-body { padding: 0rem 24px; } } .modal-content { position: relative; display: flex; flex-direction: column; @media (min-width: 768px) { padding: 0 16px; display: block; height: 520px; } } .delivery-content { position: relative; flex: 1; } .title-content { display: flex; justify-content: space-between; background: #FFF; padding-top: 32px; z-index: 100; align-items: center; position: sticky; top: 0; width: 100%; & i { margin-bottom: 16px; cursor: pointer; } } .subtitle { font-family: 'Roboto', 'Roboto Fallback'; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: 0.00em; span { line-height: 140%; } span { font-weight: 700; } } .option { padding: 16px; border: 1px solid #767676; margin: 16px 0; display: flex; align-items: flex-start; label { font-family: 'Roboto', 'Roboto Fallback'; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: 0.00em; span { line-height: 140%; } cursor: pointer; display: inline-block; width: 100%; } input { appearance:none; background-image: url('data:image/svg+xml,'); background-size: 16px; width: 16px; height: 16px; position: relative; top: 3px; &:checked { background-image: url('data:image/svg+xml,'); } /* Green color for "Choose a specific day" radio button */ &#deliveryDate:checked { background-image: url('data:image/svg+xml,'); } } &.active{ border: 1px solid #222222; label { font-weight: 700; } } } .option-details { margin-left: 16px; flex: 1; } .button-container { text-align: right; padding: 16px 0; background: #FFF; z-index: 100; align-items: center; position: sticky; bottom: 0; width: 100%; & button { cursor: pointer; } .cancel-button { background: transparent; color: #222222; border: none; border-radius: 0; padding: 0 16px; display: none; span { border-bottom: 1px solid #222222; font-family: 'Roboto', 'Roboto Fallback'; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: 0.00em; span { line-height: 140%; } } @media (min-width: 768px) { display: inline-block; } } .submit-button { width: 100%; padding: 16px; text-transform: uppercase; background: #203C5D; @media (min-width: 768px) { width: 180px; margin-left: 16px; } .mantine-Button-icon { width: 16px; } &:disabled{ background-color: #EDEDED; color: #494949; } } }

Mix And Match