/*Components styles*/
.filter_active .tittle-filter {
    color: #002DF5 !important;
}

.filter_active .rounded-pill {
    background: #002DF5 !important;
    color: white !important;
}

.filter_active .filter-underline {
    background: #002DF5 !important;
}

.design-filter-button {
    border-radius: 5px;
    padding: 3px 0;
    user-select: none;
    min-width: max-content !important;
}

.design-filter-button:hover {
    filter: brightness(0.9);
    background: rgba(224, 232, 241, 0.21);

}

.btn_design_table_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;

    background: #F2F5F8;
    border-radius: 8px;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 600!important;
    font-size: 14px;
    line-height: 16px;
    color: #788696;
}

.btn_design_table_view:hover {
    filter: brightness(0.9);
    transition: all .15s ease-in-out;
}

.btn_design_table_view.active {
    background: #030C17;
    color: #FFFFFF!important;
}

.btn_design_table_view.active:hover {
    filter: brightness(1);
    background: #1b1e21;
    transition: all .15s ease-in-out;
}

.design-btn-square-white {
    box-sizing: border-box;
    background: #f8fafc;

    border: 1px solid #002DF5;
    border-radius: 8px;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    text-decoration: none;
    letter-spacing: -0.01em;
    color: #002DF5;
}

.design-btn-square-white[disabled] {
    border-color: lightgrey !important;
    cursor: default !important;
    color: lightgrey;
}

.design-btn-square-white[disabled]:hover {
    box-shadow: None !important;
    background: #f8fafc !important;
}

.design-btn-square-white:hover {
    box-shadow: 0 8px 16px rgba(54, 60, 75, 0.1);
    background: #ffffff !important;
    transition: all .15s ease-in-out;
}

.design-btn-cv-hover:hover {
    box-shadow: none !important;
}

.select-design-filters {

    background-color: transparent !important;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 8px;

    min-width: max-content !important;

    border: 1px solid #788696;
    border-radius: 16px;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 600!important;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #788696;
}

.design-detail-general-data-item {
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 12px 5px 8px;
    gap: 6px;

    border: 1px solid #FFFFFF;
    border-radius: 10px;

    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;

    color: #788696;
}

.design-charge-item-list {
    background: #F2F5F8;
    border: 1px solid #E0E8F1;
    border-radius: 24px;
    overflow: hidden;
}

.design-micro-detail-grey {
    background: #E0E8F1;
    border-radius: 200px;
    padding: 2px 8px;
    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    color: #030C17;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.design-micro-detail-green {
    background: #B7CD97;
    border-radius: 200px;
    padding: 2px 8px;
    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    color: #030C17;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.design-micro-detail-fuchsia {
    background: #FCDDEC;
    border-radius: 200px;
    padding: 2px 8px;
    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    color: #030C17;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.design-micro-detail-white {
    border-radius: 16px;

    user-select: none;

    background: white;
    padding: 4px 8px;
    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #788696;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.design-micro-detail-yellow {
    background: #FFC727;
    border-radius: 200px;
    padding: 2px 8px;
    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    color: #030C17;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.cv-design-subfilter-white {
    margin-top: 8px !important;
    padding: 14px 16px !important;

    background: #FFFFFF !important;

    box-shadow: 0px 16px 32px rgba(54, 60, 75, 0.1) !important;
    border: none !important;
    border-radius: 24px !important;
}

.design-form-check-item {
    background: #FFFFFF;
    user-select: none;
    border-radius: 8px;
    min-width: 250px;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;

    cursor: pointer;

    color: #788696;
}

.design-form-check-item p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.design-form-check-item:hover {
    background: #F2F5F8;
    transition: all .15s ease-in-out;
}

.design-form-check-item.active {
    background: #F2F5F8;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;

    color: #030C17;
}

.design-radio-buttons {
    accent-color: #323232;
}

.design-number-pagination {
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;

    width: 32px;
    height: 32px;

    background: #FFFFFF;
    border: 1px solid #F1F1F1;
    border-radius: 8px;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 600!important;
    font-size: 14px;
    line-height: 16px;

    color: #333333;
}

.design-number-pagination:hover {
    background: #F2F5F8 !important;
    transition: all .15s ease-in-out;
}

.design-number-pagination.active {
    background: #002DF5 !important;
    border: none !important;
    color: #FFFFFF !important;
}

.design-number-pagination.active:hover {
    background: #0223b6 !important;
    transition: all .15s ease-in-out;
}

.design-number-pagination.disabled {
    background: #F2F5F8 !important;
    color: #788696;
}

.design-container-company-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0px;
    min-width: 310px;
    box-shadow: 0px -16px 32px rgba(6, 42, 88, 0.1);
    border-radius: 16px;

}

.design-container-company-card-footer {
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    height: 52px;
    background: #FFFFFF;

    border: 1px solid #E0E8F1;
    border-radius: 0 0 16px 16px;

}

.design-filter-invitation {
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;

    background: #FFFFFF;

    border-radius: 16px;
    border: 1px solid #030C17;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;

    color: #030C17;
}

.design-filter-invitation p {
    width: max-content;
}

.design-filter-invitation.active {
    background: #F69431;
    border: 1px solid #F79431;

}

.design-filter-invitation:hover {
    background: #F2F5F8;
}

.design-filter-invitation.active:hover {
    background: #F69431;
}

.design-invitation-item {
    width: 310px;
    background: #F2F5F8;
    border-radius: 16px;
}

.design-invitation-item.received {
    background: #E1F5FE;
}

.design-invitation-item-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 8px;
    gap: 4px;
    border-radius: 24px;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF!important;

}

.design-invitation-item-status.connected {
    background: #A8CD72;
}

.design-invitation-item-status.rejected {
    background: #788696;
}

.design-invitation-item-status.pending {
    background: #5D5FEF;
}


.design-invitation-item.receiver .design-invitation-item-footer-divisor {
    border: 1px solid #FFFFFF;
}

.design-invitation-item .design-invitation-item-footer-divisor {
    border: 1px solid #E0E8F1;
}

.design-invitation-item-footer-option {
    cursor: pointer;
    user-select: none;
    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 600!important;
    font-size: 14px;
    line-height: 16px;
    color: #002DF5;
}

.design-invitation-item-footer-option.disabled {
    cursor: default;
    color: #788696;
}

.design-email-item-notify-list {
    cursor: pointer;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #788696;
    background: #F2F5F8;

    padding: 12px;
    border-radius: 16px;
}

.design-email-item-notify-list:hover {
    background: white;
    box-shadow: 0 2px 16px rgba(54, 60, 75, 0.1);
    transition: all .15s ease-in-out;
}


@media (max-width: 1439px) {

    .design-charge-item-company-info {
        width: 100% !important;
        border-bottom: 2px solid #E0E8F1;
        padding-bottom: 16px !important;
    }

    .design-charge-item-company-info > div,
    .design-charge-item-company-info > div > div {
        flex-direction: row !important;
    }

    .design-charge-item-company-info > div > div {
        align-items: center !important;
    }

    .design-charge-item-company-info-divisor {
        display: none;
    }

    .design-item-body {
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
}

.item-selected-subfilter {

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;

    width: fit-content;


    background: #C7EBFD;

    border: 1px solid #C7EBFD;
    border-radius: 16px;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;

    color: #030C17;

}

.design-filter-secondary {
    cursor: pointer;
    user-select: none;
    min-width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 4px;
    background: #F2F5F8;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 600!important;
    font-size: 12px;
    line-height: 125%;
    color: #030C17;
    width: 100%
}

.design-filter-secondary:hover {
    background: #e0e2e5 !important;
}

.design-filter-secondary.active {
    background: #E8E7FF;
}

.design-filter-secondary.active:hover {
    background: #cfceec !important;
}

.design-drawer-filter-secondary {
    cursor: pointer;
    user-select: none;
    min-width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 4px;
    background: #E0E8F1;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 600!important;
    font-size: 12px;
    line-height: 125%;
    color: #030C17;
    width: 100%
}

.design-drawer-filter-secondary:hover {
    background: #c7ced7 !important;
}

.design-drawer-filter-secondary.active {
    background: #d7d6ee;
}

.design-drawer-filter-secondary.active:hover {
    background: #cfceec !important;
}

/*.design-btn-white {*/
/*    box-sizing: border-box;*/

/*    z-index: 20;*/

/*    display: flex;*/
/*    flex-direction: row;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    padding: 10px 44px!important;*/
/*    background: #f8fafc;*/
/*    gap: 10px;*/

/*    border: 1px solid #002DF5;*/
/*    border-radius: 50rem !important;*/

/*    font-family: 'Roboto', sans-serif!important;*/
/*    font-style: normal;*/
/*    font-weight: 600!important;*/
/*    font-size: 16px;*/
/*    line-height: 19px!important;*/
/*    text-decoration: none;*/

/*    color: #002DF5;*/
/*}*/

/*.design-btn-white[disabled] {*/
/*    border-color: lightgrey !important;*/
/*    cursor: default !important;*/
/*    color: lightgrey;*/
/*}*/

/*.design-btn-white[disabled]:hover {*/
/*    box-shadow: None !important;*/
/*    background: #f8fafc !important;*/
/*}*/

/*.design-btn-white:hover {*/
/*    box-shadow: 0px 8px 16px rgba(54, 60, 75, 0.1);*/
/*    background: #ffffff !important;*/
/*    transition: all .15s ease-in-out;*/
/*}*/

/*.design-btn-blue {*/
/*    user-select: none;*/
/*    cursor: pointer;*/
/*    z-index: 20;*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    padding: 10px 44px!important;*/
/*    gap: 10px;*/
/*    background: #002DF5!important;*/
/*    border: 1px solid #002DF5;*/
/*    border-radius: 50rem;*/

/*    font-family: 'Roboto', sans-serif!important;*/
/*    font-style: normal;*/
/*    font-weight: 600!important;*/
/*    font-size: 16px;*/
/*    line-height: 19px!important;*/
/*    text-decoration: none;*/
/*    color: #FFFFFF!important;*/
/*}*/

/*.design-btn-blue[disabled] {*/
/*    background-color: lightgray !important;*/
/*    border-color: lightgrey !important;*/
/*    cursor: default;*/
/*}*/

/*.design-btn-blue[disabled]:hover {*/
/*    box-shadow: None !important;*/
/*    background: lightgray !important;*/
/*}*/


/*.design-btn-blue:hover {*/
/*    box-shadow: 0 8px 16px rgba(54, 60, 75, 0.1);*/
/*    color: white;*/
/*    background: #1540fd!important;*/
/*    transition: all .15s ease-in-out;*/
/*}*/

/*.xl {*/
/*    padding: 17px 32px 16px 32px !important;*/
/*    font-weight: 600 !important;*/
/*    font-size: 16px !important;*/
/*    line-height: 19px !important;*/
/*}*/

.design-modal {
    font-family: 'Roboto', sans-serif !important;
}

.design-modal .modal-content {
    border-radius: 24px !important;
}

.design-modal .modal-header, .design-modal .modal-footer {
    border: none;
    font-family: 'Roboto', sans-serif !important;
}

.design-container-right-drawer {
    z-index: -1;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    width: 0;
    max-width: 400px;
    height: 100vh;
    box-shadow: none;
    transition: width 0.15s ease-in-out, z-index 0.18s ease-in-out;
}

.design-container-right-drawer.show {
    z-index: 1000 !important;
    width: 100vw;
    box-shadow: 0 40px 40px rgba(3, 12, 23, 0.1) !important;


    transition: box-shadow 0.1s ease-out 0.15s, width 0.15s ease-in-out;
}


.design-right-drawer {
    z-index: 10000 !important;
    position: absolute;
    overflow: auto;
    top: 0;
    right: -400px;
    width: 100vw;
    max-width: 400px;
    height: 100vh;
    background: #F2F5F8;
    padding: 40px 32px;

    transition: right 0.15s ease-in-out;
}

.design-right-drawer.show {
    right: 0;
    transition: right 0.15s ease-in-out;
}

.design-btn-clean {
    color: #030C17 !important;
    transition: all .15s ease-in-out;
}

.design-btn-clean:hover {
    color: #788696 !important;
    transition: all .15s ease-in-out;
}

.design-title-dreawer {

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600!important;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #030C17;
}

.design-item-info-drawer {
    background: #FFFFFF;
    padding: 16px;
    box-shadow: 0px 20px 50px rgba(220, 224, 249, 0.5);
    border-radius: 24px;
}

.design-item-info-orange {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    gap: 4px;

    background: #F79431;
    border-radius: 16px;
}

.btn-subfilters {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;

    background: #E0E8F1;
    border-radius: 16px;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #030C17;
}

.design-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    font-family: 'Roboto', sans-serif!important;
    font-style: normal;
    font-weight: 600!important;
    font-size: 16px;
    line-height: 19px!important;
    color: #002DF5;
    user-select: none


}

.design-link:hover {
    color: #0323b2;
}

.design-title-page {

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600!important;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #030C17;
}

.text_search_input {

    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 24px;
    gap: 8px;

    width: 400px;
    height: 56px;

    background: #F2F5F8;

    border: 1px solid #E0E8F1;
    border-radius: 32px;

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.design-background-loading-item {
    background: #ffffff;
    background-image: linear-gradient(to left, transparent, #dedfe1, transparent),
    linear-gradient(to right, rgba(222, 223, 225, 1), transparent, rgba(222, 223, 225, 1));
    background-size: 100%, 50%;
    animation: move 1s infinite!important;
    border-radius: 8px;
    border-color: transparent!important;
    color: transparent !important;
    user-select: none!important;
    cursor: default!important;
}

@keyframes move {
    from {
        background-position: left;
    }
    to {
        background-position: right;
    }
}


@media (max-width: 1140px) {
    .design-btn-header-2 {
        padding: 17px !important;
        height: 52px !important;
        width: 52px !important;
    }

    .design-text-button-2 {
        display: none;
    }

    .design-search-input {
        width: auto !important;
    }
}


@media (max-width: 1270px) {
    .design-btn-header-1 {
        padding: 17px !important;
        height: 52px !important;
        width: 52px !important;
    }

    .design-text-button-1 {
        display: none;
    }
}


@media (max-width: 750px) {
    .flex-price-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
    }


    .design-container-item-buttons {
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: wrap;
        width: 100% !important;
    }

    .design-direction-arrow {
        display: none !important;
    }

    .design-directions {
        flex-wrap: wrap !important;
    }

    .design-direction {
        width: 100% !important;
    }

    .icon-orifin-delivery {
        display: flex !important;
    }

    .design-icon-origin {
        display: none;
    }

    .design-icon-delivery {
        display: none;
    }

    .design-item-container {
        flex-wrap: wrap !important;
    }

    .design-item-price-info {
        height: auto !important;
        width: 100% !important;
        min-height: auto !important;
        flex-basis: auto !important;
    }

    .design-item-price-info div {
        justify-content: space-between !important;
    }
}

@media (max-width: 591px) {
    .design-item-charge-btn {
        width: 100% !important;
    }

    .design-btn-sm-w-100 {
        width: 100% !important;
    }

    .design-body-scroll {
        padding-bottom: 57px !important;
    }
}

@media (max-width: 370px) {
    .design-search-input {
        width: 240px !important;
    }
}