/*=============== Banner Slider ===============*/
    button {
        font-family: "Montserrat", sans-serif;
        text-transform: uppercase;
    }
    button {
        position: relative;
        border: none;
        font-size: 18px;
        transition: color 0.5s, transform 0.2s, background-color 0.2s;
        outline: none;
        border-radius: 3px;
        margin: 0 10px;
        padding: 13px 15px;
    }
    button:active {
        transform: translateY(3px);
    }
    button::after, button::before {
        border-radius: 3px;
    }
    .shrink-border {
        background-color: transparent;
        color: #ffffff;
    }
    .shrink-border:hover {
        background-color: #ff8f00;
        box-shadow: none;
        color: #e6e6e6;
    }
    .shrink-border::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid #ffffff;
        transition: opacity 0.3s, border 0.3s;
    }
    .shrink-border:hover::before {
        opacity: 0;
    }
    .shrink-border::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: 3px solid #e6e6e6;
        opacity: 0;
        z-index: -1;
        transform: scaleX(1.1) scaleY(1.3);
        transition: transform 0.3s, opacity 0.3s;
    }
    .shrink-border:hover::after {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
    }
    .btn-fill{
        background-color: #ff8f00;
        color: #ffffff;
    }
    .btn-fill:hover{
        background-color: transparent;
    }
    .btn-fill::before{
        border: 3px solid #ff8f00 !important;
    }


/*=============== Chart ===============*/
    .sidebar {
        background: #212529;
        color: white;
        padding: 20px;
        scrollbar-width: thin;
    }

    .sidebar ul {
        list-style: none;
        padding: 0;
        max-height: 80vh;
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    .sidebar ul::-webkit-scrollbar {
        width: 8px;
    }

    .sidebar ul::-webkit-scrollbar-thumb {
        background-color: #ff8d00;
        border-radius: 10px;
    }

    .sidebar ul::-webkit-scrollbar-track {
        background-color: #495057;
    }

    .sidebar ul li {
        padding: 10px;
        cursor: pointer;
        color: #adb5bd;
        border-radius: 5px;
    }

    .sidebar ul li:hover,
    .sidebar ul li.active {
        color: #ff8d00;
        background: #495057;
        font-weight: bold;
        padding-left: 15px;
        border-left: 3px solid #ff8d00;
    }

    .sidebar p {
        color: #adb5bd;
    }

    .table th {
        background-color: #ff8d00;
        color: white;
        text-transform: uppercase;
    }

    .table td, .table th {
        text-align: center;
        vertical-align: middle;
        padding: 10px;
    }

    .btn-success {
        background-color: #ff8d00;
        border: none;
    }

    .btn-success:hover {
        background-color: #e07c00;
    }

    #category-list {
        list-style: none;
        padding: 0;
        max-height: 80vh; 
        overflow-y: hidden; 
        scroll-behavior: smooth;
    }
    
    #category-list:hover {
        overflow-y: auto;
    }

    #category-list::-webkit-scrollbar {
        width: 8px; 
    }

    #category-list::-webkit-scrollbar-thumb {
        background-color: #ff8d00;
        border-radius: 10px;
    }

    #category-list::-webkit-scrollbar-track {
        background-color: #495057;
    }

    #table-sticky {
        max-height: 800px;
        overflow-y: auto;
        border: 1px solid #ddd;
    }

    #stock-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    #table-sticky {
        scroll-behavior: smooth;
    }

    #table-sticky::-webkit-scrollbar {
        width: 8px;
    }

    #table-sticky::-webkit-scrollbar-thumb {
        background-color: #ff8d00;
        border-radius: 10px;
    }

    #table-sticky::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

    @media (max-width: 768px) {
        .sidebar {
            height: auto;
            padding: 10px;
        }

        .sidebar ul li {
            padding: 8px;
            font-size: 0.9rem;
        }

        .table-container {
            padding: 10px;
        }

        .table th, .table td {
            padding: 8px;
            font-size: 0.9rem;
        }
    }

/*=============== Products Category Slider ===============*/
    .customer-logos .slide {
        position: relative;
        overflow: hidden;
    }
    .customer-logos img {
        width: 100%;
        display: block;
        transition: transform 0.3s ease;
    }
    .customer-logos .slide:hover img {
        transform: scale(1.1);
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(253, 161, 43, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .slide:hover .overlay {
        opacity: 1;
    }
    .overlay-text {
        color: #ffffff;
        font-size: 1.5em;
        font-size: 17px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
    }
    .slick-slide {
        margin: 0px 20px;
        border-radius: 50%;
    }
    .slick-slide img {
        width: 100%;
        border-radius: 50%;
    }
    .slick-next:before, 
    .slick-prev:before
    {
        color: transparent !important;
    }
    .slick-slider {
        position: relative;
        display: block;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
    }
    .slick-list {
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .slick-list:focus {
        outline: none;
    }
    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }
    .slick-slider .slick-track,
    .slick-slider .slick-list {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .slick-track {
        position: relative;
        top: 0;
        left: 0;
        display: block;
    }
    .slick-track:before,
    .slick-track:after {
        display: table;
        content: "";
    }
    .slick-track:after {
        clear: both;
    }
    .slick-loading .slick-track {
        visibility: hidden;
    }
    .slick-slide {
        display: none;
        float: left;
        height: 100%;
        min-height: 1px;
    }
    [dir="rtl"] .slick-slide {
        float: right;
    }
    .slick-slide img {
        display: block;
    }
    .slick-slide.slick-loading img {
        display: none;
    }
    .slick-slide.dragging img {
        pointer-events: none;
    }
    .slick-initialized .slick-slide {
        display: block;
    }
    .slick-loading .slick-slide {
        visibility: hidden;
    }
    .slick-vertical .slick-slide {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
    .slick-arrow.slick-hidden {
        display: none;
    }
    .slick-prev,
    .slick-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        font-size: 0;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        background: transparent;
        outline: none;
    }
    .slick-prev:before,
    .slick-next:before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        border: solid #444;
        border-width: 0 3px 3px 0;
        transform: rotate(-45deg);
    }
    .slick-prev:before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        border: solid #444;
        border-width: 0 3px 3px 0;
        transform: rotate(
        135deg
        );
    }
    @media screen and (max-width: 768px) {
        .slick-prev:before,
        .slick-next:before {
        width: 16px;
        height: 16px;
        border-width: 0 2px 2px 0;
        }
    
        .slick-prev {
        left: 10px;
        }
    
        .slick-next {
        right: 10px;
        }
    }
    @media screen and (max-width: 520px) {
        .slick-prev:before,
        .slick-next:before {
        width: 12px;
        height: 12px;
        border-width: 0 1px 1px 0;
        }
    
        .slick-prev {
        left: 5px;
        }
    
        .slick-next {
        right: 5px;
        }
    }
    .slick-prev {
        left: -40px;
    }
    .slick-next {
        right: -40px;
    }