/* General Styles */
html, body {
    margin: 0;
    padding: 0;
    background-color: #f6f6f6;
    font-family: "Rubik", sans-serif;
    display: flex;
    flex-direction: column;
    letter-spacing: -0.8px;
}

body {
    overflow-y: auto;
}

body.no-scroll {
    overflow-y: hidden;
}

.container {
    max-width: 400px;
    min-height: 800px;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 20px auto;
    position: relative;
    flex-grow: 1;
}

.container.grey {
    background-color: #f6f6f6;
}

@media (max-width: 767px) {
    html, body {
        height: 100%;
    }

    .container {
        margin: 0;
        max-width: 100%;
        min-height: fit-content;
        height: auto;
        box-shadow: none;
        border-radius: 0;
    }
}

@media (max-height: 700px) {
    body {
        align-items: flex-start;
    }
}

.d-flex {
    display: flex;
    gap: 8px;
}

.align-center {
    justify-content: center;
    align-items: center;
}

.column {
    flex-direction: column;
    align-items: center !important;
}

.main--wrapper{
    padding: 0 24px;
}

.main--wrapper.sub--wrapper{
    padding: 24px;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px 0 8px;
    background: white;
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 70px;
}

.header__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header__back-button a {
    outline: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    line-height: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.header__user {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 160px;
    padding-left: 8px;
}

.header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 160px;
    font-weight: 500;
    font-size: 18px;
}

.icon {
    display: inline-block;
}

.icon--arrow-left {
    background-image: url('data:image/svg+xml,<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.14154 7.28321L8.20509 0.219665C8.44589 -0.0211382 8.88736 -0.0211382 9.12816 0.219665C9.36897 0.460467 9.36897 0.901939 9.12816 1.14274L3.14823 7.08254H18.3188C18.6399 7.08254 18.9609 7.40361 18.9609 7.72468C18.9609 8.08589 18.6399 8.36682 18.3188 8.36682H3.14823L9.12816 14.3468C9.36897 14.5876 9.36897 15.029 9.12816 15.2698C8.88736 15.5106 8.44589 15.5106 8.20509 15.2698L1.14154 8.20629C0.900737 7.96548 0.900737 7.52401 1.14154 7.28321Z" fill="black"/></svg>');
    width: 19px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

.icon--cross {
    background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.1289 2.06641L6.91016 6.28516L11.0938 10.4688C11.4453 10.7852 11.4453 11.3125 11.0938 11.6289C10.7773 11.9805 10.25 11.9805 9.93359 11.6289L5.71484 7.44531L1.53125 11.6289C1.21484 11.9805 0.6875 11.9805 0.371094 11.6289C0.0195312 11.3125 0.0195312 10.7852 0.371094 10.4336L4.55469 6.25L0.371094 2.06641C0.0195312 1.75 0.0195312 1.22266 0.371094 0.871094C0.6875 0.554688 1.21484 0.554688 1.56641 0.871094L5.75 5.08984L9.93359 0.90625C10.25 0.554688 10.7773 0.554688 11.1289 0.90625C11.4453 1.22266 11.4453 1.75 11.1289 2.06641Z" fill="%23E74C3C"/></svg>');
    width: 12px;
    height: 12px;
}

.icon--remove {
    background-image: url('data:image/svg+xml,<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.83984 2.0625C4.75781 2.0625 4.70312 2.11719 4.64844 2.17188L4.12891 2.9375H8.09375L7.57422 2.17188C7.54688 2.11719 7.46484 2.0625 7.38281 2.0625H4.83984ZM9.67969 2.9375H10.0352H11.375H11.5938C11.9492 2.9375 12.25 3.23828 12.25 3.59375C12.25 3.97656 11.9492 4.25 11.5938 4.25H11.2656L10.6094 13.1367C10.5273 14.0664 9.78906 14.75 8.85938 14.75H3.36328C2.43359 14.75 1.69531 14.0664 1.61328 13.1367L0.957031 4.25H0.65625C0.273438 4.25 0 3.97656 0 3.59375C0 3.23828 0.273438 2.9375 0.65625 2.9375H0.875H2.1875H2.54297L3.55469 1.43359C3.82812 1.02344 4.32031 0.75 4.83984 0.75H7.38281C7.90234 0.75 8.39453 1.02344 8.66797 1.43359L9.67969 2.9375ZM9.95312 4.25H2.26953L2.92578 13.0547C2.95312 13.2734 3.14453 13.4375 3.36328 13.4375H8.85938C9.07812 13.4375 9.26953 13.2734 9.29688 13.0547L9.95312 4.25Z" fill="%23AAAAAA"/></svg>');
    width: 13px;
    height: 15px;
}

.icon--pencil {
    background: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.98274 10.1408C2.09222 9.75756 2.31119 9.40174 2.58491 9.12802L10.9058 0.807157C11.5901 0.122875 12.7123 0.122875 13.3966 0.807157L14.464 1.87464C14.5462 1.95675 14.6283 2.06624 14.683 2.14835C15.1483 2.83263 15.0662 3.76325 14.464 4.36542L6.14317 12.6863C6.1158 12.7137 6.06106 12.741 6.03369 12.7958C5.75998 13.0147 5.45889 13.179 5.13044 13.2885L2.99548 13.918L1.81851 14.2738C1.59954 14.3286 1.3532 14.2738 1.18897 14.0822C0.997373 13.918 0.94263 13.6717 1.02474 13.4527L1.3532 12.2757L1.98274 10.1408ZM3.24182 10.524L3.05022 11.1535L2.61228 12.6589L4.1177 12.221L4.74724 12.0294C4.93884 11.9746 5.07569 11.8925 5.21255 11.7557L11.4806 5.48765L9.78355 3.79063L3.51553 10.0586C3.48816 10.0586 3.48816 10.086 3.46079 10.1134C3.3513 10.2229 3.29656 10.3597 3.24182 10.524Z" fill="%2300BBA0"/></svg>');
    width: 15px;
    height: 15px;
    display: flex;
    position: relative;
    left: -1px;
}

.icon--successful {
    background-image: url('data:image/svg+xml,<svg width="129" height="128" viewBox="0 0 129 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M65 4C43.5 4 23.75 15.5 13 34C2.25 52.75 2.25 75.5 13 94C23.75 112.75 43.5 124 65 124C86.25 124 106 112.75 116.75 94C127.5 75.5 127.5 52.75 116.75 34C106 15.5 86.25 4 65 4ZM65 128C42 128 21 116 9.5 96C-2 76.25 -2 52 9.5 32C21 12.25 42 0 65 0C87.75 0 108.75 12.25 120.25 32C131.75 52 131.75 76.25 120.25 96C108.75 116 87.75 128 65 128ZM90.25 49.5L58.25 81.5C57.5 82.25 56.25 82.25 55.5 81.5L39.5 65.5C38.75 64.75 38.75 63.5 39.5 62.75C40.25 62 41.5 62 42.25 62.75L57 77.25L87.5 46.75C88.25 46 89.5 46 90.25 46.75C91 47.5 91 48.75 90.25 49.5Z" fill="%2300BBA0"/></svg>');
    width: 129px;
    height: 128px;
}

.icon--barcode {
    background-image: url('data:image/svg+xml,<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.64062 1.40625C1.49414 1.40625 1.40625 1.52344 1.40625 1.64062V3.98438C1.40625 4.39453 1.08398 4.6875 0.703125 4.6875C0.292969 4.6875 0 4.39453 0 3.98438V1.64062C0 0.761719 0.732422 0 1.64062 0H3.98438C4.36523 0 4.6875 0.322266 4.6875 0.703125C4.6875 1.11328 4.36523 1.40625 3.98438 1.40625H1.64062ZM3.51562 3.75C3.89648 3.75 4.21875 4.07227 4.21875 4.45312V10.5469C4.21875 10.957 3.89648 11.25 3.51562 11.25C3.10547 11.25 2.8125 10.957 2.8125 10.5469V4.45312C2.8125 4.07227 3.10547 3.75 3.51562 3.75ZM5.15625 4.21875C5.15625 3.98438 5.36133 3.75 5.625 3.75C5.85938 3.75 6.09375 3.98438 6.09375 4.21875V10.7812C6.09375 11.0449 5.85938 11.25 5.625 11.25C5.36133 11.25 5.15625 11.0449 5.15625 10.7812V4.21875ZM13.125 4.21875C13.125 3.98438 13.3301 3.75 13.5938 3.75C13.8281 3.75 14.0625 3.98438 14.0625 4.21875V10.7812C14.0625 11.0449 13.8281 11.25 13.5938 11.25C13.3301 11.25 13.125 11.0449 13.125 10.7812V4.21875ZM7.03125 4.45312C7.03125 4.07227 7.32422 3.75 7.73438 3.75C8.11523 3.75 8.4375 4.07227 8.4375 4.45312V10.5469C8.4375 10.957 8.11523 11.25 7.73438 11.25C7.32422 11.25 7.03125 10.957 7.03125 10.5469V4.45312ZM11.4844 3.75C11.8652 3.75 12.1875 4.07227 12.1875 4.45312V10.5469C12.1875 10.957 11.8652 11.25 11.4844 11.25C11.0742 11.25 10.7812 10.957 10.7812 10.5469V4.45312C10.7812 4.07227 11.0742 3.75 11.4844 3.75ZM15.4688 1.64062C15.4688 1.52344 15.3516 1.40625 15.2344 1.40625H12.8906C12.4805 1.40625 12.1875 1.11328 12.1875 0.703125C12.1875 0.322266 12.4805 0 12.8906 0H15.2344C16.1133 0 16.875 0.761719 16.875 1.64062V3.98438C16.875 4.39453 16.5527 4.6875 16.1719 4.6875C15.7617 4.6875 15.4688 4.39453 15.4688 3.98438V1.64062ZM1.64062 13.5938H3.98438C4.36523 13.5938 4.6875 13.916 4.6875 14.2969C4.6875 14.707 4.36523 15 3.98438 15H1.64062C0.732422 15 0 14.2676 0 13.3594V11.0156C0 10.6348 0.292969 10.3125 0.703125 10.3125C1.08398 10.3125 1.40625 10.6348 1.40625 11.0156V13.3594C1.40625 13.5059 1.49414 13.5938 1.64062 13.5938ZM15.4688 13.3594V11.0156C15.4688 10.6348 15.7617 10.3125 16.1719 10.3125C16.5527 10.3125 16.875 10.6348 16.875 11.0156V13.3594C16.875 14.2676 16.1133 15 15.2344 15H12.8906C12.4805 15 12.1875 14.707 12.1875 14.2969C12.1875 13.916 12.4805 13.5938 12.8906 13.5938H15.2344C15.3516 13.5938 15.4688 13.5059 15.4688 13.3594Z" fill="%2300BBA0"/></svg>');
    width: 17px;
    height: 15px;
}

.header__logo img {
    width: 90px;
}

/* Subheader */
.subheader {
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    font-size: 12px;
}

/* Selection */
.project{
    background: white;
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
}

.selection {

}

.selection__project {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.selection__project .selection__item {
    width: 100%;
}

label {
    padding: 8px 0 16px;
    display: inline-block;
    font-weight: 600
}

.selection__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px 12px;
}

.selection__title .selection__subtext {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.selection__title .selection__subtext span {
    color: #999999;
    font-size: 14px
}

.selection__title-steps {
    background: #eee;
    padding: 5px;
    font-size: 14px;
    border-radius: 6px;
    color: #aaa;
    min-width: 30px;
    text-align: center;
}

.selection__title h2 {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 18px;
    padding: 0;
    margin: 0;
    min-height: 27px;
}

.selection__content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
}

.selection__list {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.selection__container {
    position: relative;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
    border-radius: 8px;
    margin: 16px 0 4px;
}

.selection__container.closed {
    background: transparent;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    margin: 4px 0 4px;
}

.selection__container.closed .selection__headline {
    padding: 0;
}

.selection__container.closed .selection__actions{
    padding: 0;
}

.selection__actions {
    display: flex;
    gap: 8px;
    position: absolute;
    right: 0;
    min-height: 50px;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    top: 0;
}

.selection__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 12px 12px;
}

.selection__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    min-height: 50px;
    width: 100%;
}

.selection__headline {
    border-radius: 6px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    gap: 4px;
    min-height: 50px;
    width: 100%;
    padding: 0 16px;
}

.selection__total {
    border-radius: 6px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    gap: 4px;
    min-height: 50px;
    background-color: #f0f9f8;
    border: 1px solid #e2f3f1;
    padding: 0 16px;
    margin: 24px 0 0;
}

.selection__new-block {
    font-weight: 500;
}

.selection__selected {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.selection__selected.show{
    display: flex;
}

.selection__selected span.first {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.selection__selected span.second {
    font-weight: 400;
    color: #999999;
    margin-left: 4px;
}

.selection__container.closed .selection__new-block {
    display: none;
}

.selection__container.closed .selection__selected {
    display: flex;
}

.selection__item {
    position: relative;
    margin-bottom: 0;
}

.selection__item--group {
    display: flex;
    align-items: center;
}

.selection__item--group label {
    width: 100%;
}

.selection__item--hours .selection__input {
    padding: 15px;
}

.selection__symbol {
    position: absolute;
    right: 10px;
    top: 9px;
    background: #e4f5f3;
    color: #0bbba0;
    border-radius: 6px;
    min-width: 33px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
}

button.selection__symbol {
    outline: 0;
    border: 0;
    cursor: pointer;
}

button.selection__symbol:hover {
    opacity: 0.7;
}

.selection__symbol.text {
    padding: 0 6px;
}

.selection__container .selection__dropdown,
.selection__container .selection__textarea,
.selection__container .selection__input {
    border: 1px solid #bbdbd7;
}

.selection__dropdown,
.selection__textarea,
.selection__input {
    width: 100%;
    padding: 15px 40px 15px 15px;
    font-size: 16px;
    font-weight: 400;
    border: 2px solid #DCDFE1 !important;
    border-radius: 12px;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
    background: #fff;
}

.selection__dropdown:hover, .selection__textarea:hover, .selection__input:hover,
.selection__dropdown:focus, .selection__textarea:focus, .selection__input:focus,
.selection__dropdown:focus-visible, .selection__textarea:focus-visible, .selection__input:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(11, 187, 160, .25);
    border-color: #0bbba0 !important;
    outline: 0;
}

.selection__dropdown {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" width="14" height="8"%3E%3Cpath d="M6.461 7.75.243 1.357a.711.711 0 0 1 0-1.132.973.973 0 0 1 1.101 0L7.012 6.085l5.668-5.827a.973.973 0 0 1 1.101 0c.293.3.293.8 0 1.1L7.53 7.75a.709.709 0 0 1-1.068 0Z" fill="%23939598"%2F%3E%3C%2Fsvg%3E') no-repeat right #fff;
    appearance: none;
    -webkit-appearance: none;
    background-position-x: calc(100% - 15px);
}

.selection__dropdown:disabled {
    background-color: #eee;
}

.selection__textarea {
    min-height: 100px;
    resize: none;
    margin-bottom: -5px;
}

/* Actions */
.actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.actions.projects{
    padding: 0;
}

.actions.add-block{
    padding: 24px 0 0;
}
.actions.add-block .btn--primary{
    border-radius: 14px;
}

@media (max-width: 767px) {
    .actions.fixed {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}

.actions__buttons {
    display: flex;
    gap: 16px;
    padding: 24px 0;
}


.actions__buttons.column {
    flex-direction: column;
}

textarea {
    resize: none;
}

/*Buttons*/
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn:disabled {
    background-color: #d9d9d9;
    border: 2px solid #d9d9d9;
}

/* Outline Modifier */
.btn--outline {
    background-color: transparent;
    border: 2px solid #0bbba0;
    color: #0bbba0;
}

.btn--outline:hover {
    opacity: 0.6;
}

/* Primary Modifier */
.btn--primary {
    background-color: #0bbba0;
    border: none;
    color: white;
    border: 2px solid #0bbba0;
}

.btn--primary:hover {
    opacity: 0.8;
}

.btn--grey-plain {
    background-color: transparent;;
    border: 2px solid transparent;
    color: #999999;
    font-weight: 400;
}

/* Size Modifiers */
.btn--large {
    width: 100%;
    height: 50px;
    max-height: 50px;
}

.btn--small {
    width: auto;
    height: 34px;
    border-radius: 2rem;
    font-weight: 400;
    padding: 0 12px;
    gap: 4px;
    font-size: 14px;
}

.btn--counter {
    position: absolute;
    left: -11px;
    z-index: 3;
    top: -14px;
}

.btn--remove {
    color: #aaa;
    border: 0;
}

/* Navigation */
.navigation {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.navigation__buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.btn--navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: #f0f9f8;
    border: 1px solid #e2f3f1;
    border-bottom: 2px solid #e2f3f1;
    color: #0bbba0;
    border-radius: 14px;
    padding: 16px;
    gap: 4px;
    position: relative;

}

.btn--navigation::after {
    content: '';
    background-image: url('data:image/svg+xml,<svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.42969 7.07031C7.66406 7.30469 7.66406 7.73438 7.42969 7.96875L1.17969 14.2188C0.945312 14.4531 0.515625 14.4531 0.28125 14.2188C0.046875 13.9844 0.046875 13.5547 0.28125 13.3203L6.10156 7.5L0.28125 1.71875C0.046875 1.48438 0.046875 1.05469 0.28125 0.820312C0.515625 0.585938 0.945312 0.585938 1.17969 0.820312L7.42969 7.07031Z" fill="%230BBBA0"/></svg>');
    width: 8px;
    height: 15px;
    position: absolute;
    right: 24px;
}

.navigation__title {
    color: #0bbba0;
    font-weight: 500;
}

.navigation__subtext {
    font-size: 12px;
    font-weight: 400;
    color: black;
}

/*Table*/
.product__container {
    position: relative;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}

.product__list {
    width: 100%;
    display: flex;
}

.product__container .product__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
}

.product__container .product__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product__container .product__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.product__container .product__title {
    font-weight: 500;
}

.product__container .product__qty {
    color: #999;
}

.product__container .product__status {
    width: 100%;
}

.product__container .product__status label {
    font-weight: 400;
    padding-bottom: 8px;
}

.product__container .product__status.missing {
    width: 100%;
}

.product__status-box {
    background-color: #e2f3f1;
    padding: 12px;
    border-radius: 6px;
}

/*Custom Select*/
.custom-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.dropdown-button {
    width: 100%;
    padding: 15px 40px 15px 15px;
    font-size: 16px;
    font-weight: 400;
    border: 2px solid #DCDFE1;
    border-radius: 12px;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
    background: #fff;
    text-align: left;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" width="14" height="8"%3E%3Cpath d="M6.461 7.75.243 1.357a.711.711 0 0 1 0-1.132.973.973 0 0 1 1.101 0L7.012 6.085l5.668-5.827a.973.973 0 0 1 1.101 0c.293.3.293.8 0 1.1L7.53 7.75a.709.709 0 0 1-1.068 0Z" fill="%23939598"%2F%3E%3C%2Fsvg%3E') no-repeat right #fff;
    appearance: none;
    -webkit-appearance: none;
    background-position-x: calc(100% - 15px);
}

.dropdown-button:hover,
.dropdown-button:focus,
.dropdown-button:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(11, 187, 160, .25);
    border-color: #0bbba0 !important;
    outline: 0;
}

.dropdown-options {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 350px;
    z-index: 1000;
    box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
    margin-top: 8px;
    border-radius: 6px;
    position: absolute;
    overflow: hidden;
}

@media (max-width: 767px) {
    .dropdown-options {
        position: fixed;
        bottom: 0;
        left: 0;
        margin-top: 0;
        border-radius: 0;
    }
}

.dropdown-options ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.dropdown-bg {
    display: none;
}

@media (max-width: 767px) {
    .dropdown-bg {
        display: block;
        position: fixed;
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 99;
        overflow: hidden;
    }
}

.dropdown-options li {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.dropdown-options li:hover,
.dropdown-options li.selected
{
    background: #e2f3f1;
}

.dropdown-options .empty {
    font-size: 16px;
    color: #999;
}

.search-input-item {
    width: 100%;
    position: sticky;
    top: 0;
    padding: 0 !important;
}

.dropdown-options input {
    height: 50px;
    width: 100%;
    border: 0;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
}

.dropdown-options input:hover,
.dropdown-options input:focus,
.dropdown-options input:focus-visible {
    outline: none;
}

/*Alert/
 */
.alert{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.alert .alert__message{
    background-color: #e74c3c;
    text-align: center;
    color: white;
    font-size: 14px;
    padding: 16px;

}