.company-categories-and-companies {
    max-width: 1440px;
    padding: 0 10px;
    margin: auto;
    /*margin-top: 82px;*/
}

.company-categories {
    display: grid;
    grid-template-columns: repeat(11,1fr);
    column-gap: 20px;
}

.company-category {
    padding: 12px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    align-items: center;
    background: #FEFEFF;
    border: 1px solid #dedede !important;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    transition: .4s;
    min-width: 112.72px;
    user-select: none;
}

    .company-category svg path {
        transition: .4s;
    }

    .company-category.orange {
        border: 1px solid #FF7518 !important;
        transition: .4s;
    }

        .company-category.orange:hover {
            background: #FF7518 !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.orange:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

    .company-category.green {
        border: 1px solid #5F8B4C !important;
    }

        .company-category.green:hover {
            background: #5F8B4C !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.green:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

    .company-category.lightblue {
        border: 1px solid #60B5FF !important;
    }

        .company-category.lightblue:hover {
            background: #60B5FF !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.lightblue:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

    .company-category.pink {
        border: 1px solid #F7374F !important;
    }

        .company-category.pink:hover {
            background: #F7374F !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.pink:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

    .company-category.darkpurple {
        border: 1px solid #7C4585 !important;
    }

        .company-category.darkpurple:hover {
            background: #7C4585 !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.darkpurple:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

    .company-category.yellow {
        border: 1px solid #FFA725 !important;
    }

        .company-category.yellow:hover {
            background: #FFA725 !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.yellow:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

    .company-category.darkred {
        border: 1px solid #7D0A0A !important;
    }

        .company-category.darkred:hover {
            background: #7D0A0A !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.darkred:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

    .company-category.brown {
        border: 1px solid #443627 !important;
    }

        .company-category.brown:hover {
            background: #443627 !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.brown:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

    .company-category.blue {
        border: 1px solid #1B56FD !important;
    }

        .company-category.blue:hover {
            background: #1B56FD !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.blue:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

    .company-category.purple {
        border: 1px solid #640D5F !important;
    }

        .company-category.purple:hover {
            background: #640D5F !important;
            color: #fff;
            transition: .4s;
        }

            .company-category.purple:hover svg path {
                stroke: #fff;
                transition: .4s;
            }

.company-category-title {
    font-family: Inter;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.companies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    /* grid-template-columns: repeat(8,1fr); */
    gap: 22px;
    margin-top: 42px;
    padding-top: 42px;
    border-top: 1px solid #EEEEEE;
}

    .companies::-webkit-scrollbar {
        display: none;
    }

.company-card {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    width: 100%;
}

.company-card-image, .company-card-image img {
    aspect-ratio: 2/1.5;
    object-fit: contain;
    height: 110px;
}

    .company-card-image img {
        padding: 2px 0;
    }

.company-card-image {
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
}

.company-card-text-area {
    display: flex;
    justify-content: space-between;
}

.company-card-title {
    font-family: Inter;
    font-weight: 600;
    font-size: 13px;
    line-height: 21px;
    color: #404D56;
}

.company-card-button {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FF7518;
    border-radius: 50px;
    transition: .4s;
}

.company-card .company-card-button svg path {
    transition: .4s;
}

.company-card:hover .company-card-button {
    background: #FF7518;
    transition: .4s;
}

    .company-card:hover .company-card-button svg path {
        stroke: #fff;
        transition: .4s;
    }

.company-card-icon {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e6e6e6;
    background: #FFFFFF;
    border-radius: 50px;
}



.company-card.blue .company-card-image {
    border: 1px solid #1B56FD !important;
}

    .company-card.blue .company-card-image .company-card-icon {
        border: 1px solid #1B56FD !important;
    }

.company-card.yellow .company-card-image {
    border: 1px solid #FFA725 !important;
}

    .company-card.yellow .company-card-image .company-card-icon {
        border: 1px solid #FFA725 !important;
    }

.company-card.green .company-card-image {
    border: 1px solid #5F8B4C !important;
}

    .company-card.green .company-card-image .company-card-icon {
        border: 1px solid #5F8B4C !important;
    }

.company-card.darkred .company-card-image {
    border: 1px solid #7D0A0A !important;
}

    .company-card.darkred .company-card-image .company-card-icon {
        border: 1px solid #7D0A0A !important;
    }

.company-card.lightblue .company-card-image {
    border: 1px solid #60B5FF !important;
}

    .company-card.lightblue .company-card-image .company-card-icon {
        border: 1px solid #60B5FF !important;
    }

.company-card.pink .company-card-image {
    border: 1px solid #F7374F !important;
}

    .company-card.pink .company-card-image .company-card-icon {
        border: 1px solid #F7374F !important;
    }









.company-categories {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-behavior: smooth;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
}

    .company-categories.dragging {
        cursor: grabbing;
    }

    .company-categories::-webkit-scrollbar {
        height: 6px;
        display: none;
    }

    .company-categories::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }


.custom-scrollbar-area {
    width: 626.60px;
    margin: auto;
    height: 6px;
    background: #ececec;
    border-radius: 50px;
    margin-top: 24px;
}

.custom-scrollbar {
    height: 6px;
    background: #FF7518;
    width: 40px;
    border-radius: 50px;
}



.slogan-and-search {
    display: flex;
    flex-direction: column;
    row-gap: 18px;
    width: 700px;
    margin: auto;
    margin-bottom: 51px;
    margin-top: 41px;
}

.search-area {
    height: 64px;
    position: relative;
    z-index: 1;
}

    .slogan-and-search .search-input {
        position: relative;
        /* display: flex; */
        padding: 10px;
        box-shadow: 0 0 5px 0px #00000030;
        border-radius: 16px;
        background: #fff;
    }



        .slogan-and-search .search-input input {
            width: 100%;
            padding: 10px 16px;
            padding-right: 60px;
            font-family: Inter;
            font-weight: 500;
            font-size: 14px;
            line-height: 22px;
            border: 1px solid #ffffff;
            background: #ffffff;
            border-radius: 50px;
            box-shadow: none;
            outline: none;
        }

        .slogan-and-search .search-input button {
            position: absolute;
            top: 50%;
            right: 7px;
            transform: translate(0, -50%);
            width: 42px;
            height: 42px;
            border-radius: 50px;
            border: 1px solid #FF7518;
            background: #FF7518;
            outline: none;
            box-shadow: none;
            cursor: pointer;
        }

.search-input-area {
    width: 100%;
    position: relative;
}

.search-result ul li a {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 13px;
    line-height: 21px;
    font-weight: 500;
    font-family: 'Inter';
    color: #404d56;
    text-decoration: none;
}

    .search-result ul li a span {
        font-weight: 600;
        color: #ff7518;
    }

.search-result ul {
    padding: 0;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

    .search-result ul li:first-child a {
        margin-top: 20px;
    }

    .search-result ul li:last-child a {
        margin-bottom: 20px;
    }

.search-result {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    max-height: 430px;
    overflow: hidden;
    overflow-y: auto;
    width: calc(100% - 10px);
}

/* width */
    .search-result::-webkit-scrollbar {
        width: 4px;
    }

/* Track */
    .search-result::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

/* Handle */
    .search-result::-webkit-scrollbar-thumb {
        background: #FF7518;
    }

    /* Handle on hover */
        .search-result::-webkit-scrollbar-thumb:hover {
            background: #d35e11;
        }





    .search-result > div:first-child {
        margin-top: 20px;
    }

.search-result-title {
    padding: 0 16px;
    font-size: 13px;
    font-family: 'Inter';
    font-weight: 700;
    color: #ff7518;
}

    .slogan-and-search .slogan {
        font-family: Inter;
        font-weight: 600;
        font-size: 32px;
        line-height: 42px;
        color: #404D56;
        text-align: center;
        display: none;
    }

        .slogan-and-search .slogan span {
            color: #FF7518;
            font-weight: 700;
        }


.company-offcanvas {
    position: fixed;
    top: 0;
    right: -532px;
    width: 532px;
    height: 100%;
    background: #ffffff;
    z-index: 1;
    transition: .4s;
}

    .company-offcanvas.show {
        right: 0;
        transition: .4s;
    }

.company-offcanvas-top {
    position: relative;
}

.company-offcanvas-close {
    top: 12px;
    position: absolute;
    left: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000066;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

.company-offcanvas-logo, .company-offcanvas-logo img {
    aspect-ratio: 2/1;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-offcanvas-bottom {
    height: calc(100vh - 266px);
    padding: 56px;
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}
.company-offcanvas-links {
    height: calc(100% - 150px);
    overflow: hidden;
    overflow-y: auto;
    padding-right: 30px;
}

    /* width */
    .company-offcanvas-links::-webkit-scrollbar {
        width: 4px;
    }

    /* Track */
    .company-offcanvas-links::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    .company-offcanvas-links::-webkit-scrollbar-thumb {
        background: #FF7518;
    }

        /* Handle on hover */
        .company-offcanvas-links::-webkit-scrollbar-thumb:hover {
            background: #d35e11;
        }

.company-offcanvas-text-area {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.company-offcanvas-title {
    font-family: Inter;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    color: #404D56;
}

.company-offcanvas-description {
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #344054;
}

.company-offcanvas-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.company-offcanvas-link-logo-and-title {
    display: flex;
    column-gap: 20px;
    align-items: center;
}

.company-offcanvas-link-logo {
    border: 1px solid #E6E6E6;
    border-radius: 6px;
    overflow: hidden;
}

    .company-offcanvas-link-logo, .company-offcanvas-link-logo img {
        height: 68px;
        width: 68px;
        object-fit: contain;
    }

.company-offcanvas-link-title {
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 18.73px;
    color: #404D56;
}

.company-offcanvas-link-button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF7518;
    border-radius: 50px;
}

.company-offcanvas-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #E8E8E8;
}

.company-offcanvas-links .company-offcanvas-link:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.company-offcanvas-links a {
    text-decoration: none;
}

.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0000009E;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
    z-index: 1;
}

    .offcanvas-backdrop.show {
        visibility: visible;
        opacity: 1;
        transition: .4s;
    }




.add-store-offcanvas {
    position: fixed;
    top: 0;
    right: -532px;
    width: 532px;
    height: 100%;
    background: #ffffff;
    z-index: 1;
    transition: .4s;
}

    .add-store-offcanvas.show {
        right: 0;
        transition: .4s;
    }

.add-store-offcanvas-top {
    padding: 56px;
}

.add-store-offcanvas-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000066;
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

.add-store-offcanvas-bottom {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    padding: 20px 56px;
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 144px);
}



    /* width */
    .add-store-offcanvas-bottom::-webkit-scrollbar {
        width: 4px;
    }

    /* Track */
    .add-store-offcanvas-bottom::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    .add-store-offcanvas-bottom::-webkit-scrollbar-thumb {
        background: #FF7518;
    }

        /* Handle on hover */
        .add-store-offcanvas-bottom::-webkit-scrollbar-thumb:hover {
            background: #d35e11;
        }


.floating-label {
    position: relative;
}

    .floating-label input {
        width: 100%;
        padding: 12px;
        border: 1px solid #E3E3E3;
        font-family: Inter;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #1D2939;
        border-radius: 6px;
        box-shadow: none;
        outline: none;
    }

    .floating-label label {
        position: absolute;
        display: block;
        margin-bottom: 0;
        line-height: 1.5;
        color: #495057;
        pointer-events: none;
        cursor: text;
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;
        top: 50%;
        left: 12px;
        transform: translate(0, -50%);
    }

    .floating-label input::-webkit-input-placeholder {
        color: transparent;
    }

    .floating-label input::-moz-placeholder {
        color: transparent;
    }

    .floating-label input:-ms-input-placeholder {
        color: transparent;
    }

    .floating-label input::-ms-input-placeholder {
        color: transparent;
    }

    .floating-label input::placeholder {
        color: transparent;
    }

    .floating-label input:not(:-moz-placeholder-shown) {
        padding-top: 1.25rem;
        padding-bottom: .25rem;
    }

    .floating-label input:not(:-ms-input-placeholder) {
        padding-top: 1.25rem;
        padding-bottom: .25rem;
    }

    .floating-label input:not(:placeholder-shown) {
        padding-top: 1.25rem;
        padding-bottom: .25rem;
    }

    .floating-label input:not(:-moz-placeholder-shown) ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
    }

    .floating-label input:not(:-ms-input-placeholder) ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
    }

    .floating-label input:not(:placeholder-shown) ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
        top: 15px;
        transform: translate(0, -15px);
    }

.add-store-offcanvas-input-area .add-store-offcanvas-inputs {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.add-store-offcanvas-text {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.add-store-offcanvas-title {
    font-family: Inter;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    color: #000000;
}

.add-store-offcanvas-description {
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #344054;
}


.add-store-offcanvas-button-area {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

    .add-store-offcanvas-button-area button {
        font-family: Inter;
        font-weight: 700;
        font-size: 14px;
        line-height: 22px;
        color: #FFFFFF;
        padding: 18px 12px;
        border: 1px solid #FF7518;
        background: #FF7518;
        box-shadow: none;
        outline: none;
        border-radius: 6px;
    }

.add-store-offcanvas-input-area {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

@media only screen and (max-width: 991px) {
    .company-categories {
        flex-direction: column;
    }

    .custom-scrollbar-area {
        display: none;
    }

    .companies {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        /* grid-template-columns: repeat(8,1fr); */
        gap: 10px;
        margin-top: 0;
        padding-top: 0;
        border-top: 1px solid #EEEEEE;
        width: calc(100% - 132.72px);
    }


    .company-categories-and-companies {
        padding: 10px 10px;
        display: flex;
        column-gap: 20px;
        height: calc(100vh - 299px);
        overflow: hidden;
        margin-top: 26px;
    }

    .companies {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        margin-top: 0;
        padding-top: 0;
        border-top: 1px solid #EEEEEE;
        width: calc(100% - 132.72px);
        height: 100%;
        max-height: 100vh;
        overflow: hidden;
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    .company-category {
        min-width: 100%;
    }

    .slogan-and-search .slogan {
        display: flex;
        flex-direction: column;
    }

    .slogan-and-search {
        padding: 0 10px !important;
        width: unset;
        margin-top: 24px;
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 575px) {
    .company-offcanvas {
        width: 100%;
        right: -100%;
    }

    .company-offcanvas-bottom {
        padding: 20px;
        height: calc(100vh - 296px);
    }

    .company-offcanvas-logo, .company-offcanvas-logo img {
        height: 240px !important;
        width: 100%;
    }

    .add-store-offcanvas {
        width: 100%;
        right: -100%;
    }

    .add-store-offcanvas-bottom {
        padding: 20px 20px;
        height: calc(100vh - 72px);
    }

    .add-store-offcanvas-top {
        padding: 20px;
    }
}

@media only screen and (max-width: 475px) {
    .company-card-image, .company-card-image img {
        height: 80px;
    }

    .companies {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
        width: calc(100% - 100px);
    }
}