.elementor-1486 .elementor-element.elementor-element-c8c3781{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for shortcode, class: .elementor-element-a88a67a *//* =========================================
   CUSTOM PRODUCT DIRECTORY SYSTEM
   ========================================= */

.custom-product-directory-system-wrapper {

    width:100%;
    max-width:1400px;
    margin:0 auto;

    display:grid;

    grid-template-columns:
        300px
        minmax(0,1fr);

    gap:50px;

    align-items:start;

}


/* =========================================
   LEFT SIDEBAR
   ========================================= */

.custom-product-directory-system-sidebar {

    position:sticky;

    top:40px;

    min-width:0;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

}


/* =========================================
   SIDEBAR TITLE
   ========================================= */

.custom-product-directory-system-sidebar-title {

    margin:0 0 18px 0;

    padding:0 0 0 18px;

    background:transparent !important;

    border:0 !important;

}


.custom-product-directory-system-sidebar-title span {

    font-size:12px;

    line-height:1.4;

    font-weight:700;

    letter-spacing:1.5px;

    color:#999999;

}


/* =========================================
   SOLUTION LIST
   ========================================= */

.custom-product-directory-system-list {

    height:720px;

    overflow-y:auto;

    overflow-x:hidden;

    padding:0;

    margin:0;

    background:transparent !important;

    border:0 !important;

    scrollbar-width:thin;

}


/* =========================================
   SOLUTION ITEM
   ========================================= */

.custom-product-directory-system-item {

    position:relative;

    width:100%;

    min-height:48px;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:15px;

    padding:13px 8px 13px 18px;

    margin:0;

    border:0 !important;

    border-radius:0 !important;

    outline:none !important;

    box-shadow:none !important;

    background:transparent !important;

    text-align:left;

    cursor:pointer;

    font-family:inherit;

    appearance:none;

    -webkit-appearance:none;

    white-space:normal !important;

    transition:
        color .2s ease,
        padding-left .2s ease;

}


/* =========================================
   ACTIVE GREEN LINE
   ========================================= */

.custom-product-directory-system-item::before {

    content:"";

    position:absolute;

    left:0;

    top:9px;

    bottom:9px;

    width:3px;

    background:#34BC8C;

    border-radius:3px;

    opacity:0;

    transform:scaleY(.5);

    transition:
        opacity .2s ease,
        transform .2s ease;

}


/* =========================================
   ITEM TITLE
   ========================================= */

.custom-product-directory-system-item-title {

    flex:1;

    min-width:0;

    display:block;

    font-size:15px;

    line-height:1.5;

    font-weight:500;

    color:#333333;

    white-space:normal !important;

    overflow-wrap:anywhere;

    word-break:normal;

    transition:color .2s ease;

}


/* =========================================
   ARROW
   ========================================= */

.custom-product-directory-system-item-arrow {

    flex:0 0 20px;

    width:20px;

    height:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:1px;

    font-size:16px;

    line-height:1;

    color:#34BC8C;

    opacity:0;

    transform:translateX(-5px);

    transition:
        opacity .2s ease,
        transform .2s ease;

}


/* =========================================
   HOVER
   ========================================= */

.custom-product-directory-system-item:hover {

    background:transparent !important;

    padding-left:23px;

}


.custom-product-directory-system-item:hover
.custom-product-directory-system-item-title {

    color:#34BC8C;

}


.custom-product-directory-system-item:hover
.custom-product-directory-system-item-arrow {

    opacity:1;

    transform:translateX(0);

}


/* =========================================
   ACTIVE
   ========================================= */

.custom-product-directory-system-item.active {

    background:transparent !important;

    padding-left:23px;

}


.custom-product-directory-system-item.active::before {

    opacity:1;

    transform:scaleY(1);

}


.custom-product-directory-system-item.active
.custom-product-directory-system-item-title {

    color:#34BC8C;

    font-weight:600;

}


.custom-product-directory-system-item.active
.custom-product-directory-system-item-arrow {

    opacity:1;

    transform:translateX(0);

}


/* =========================================
   REMOVE BUTTON DEFAULT STYLES
   ========================================= */

.custom-product-directory-system-item:focus,
.custom-product-directory-system-item:focus-visible,
.custom-product-directory-system-item:active {

    outline:none !important;

    border:0 !important;

    box-shadow:none !important;

    background:transparent !important;

}


/* =========================================
   RIGHT DETAIL PANEL
   ========================================= */

.custom-product-directory-system-detail {

    min-width:0;

    height:720px;

    overflow-y:auto;

    overflow-x:hidden;

    background:#f7f8f8;

    border:1px solid #e8e8e8;

    border-radius:14px;

    box-sizing:border-box;

    scrollbar-width:thin;

}


/* =========================================
   DETAIL HEADER
   ========================================= */

.custom-product-directory-system-detail-header {

    padding:42px 48px 32px;

}


/* =========================================
   DETAIL TITLE
   ========================================= */

.custom-product-directory-system-detail-title {

    margin:0;

    padding:0;

    font-size:34px;

    line-height:1.25;

    font-weight:700;

    color:#222222;

}


/* =========================================
   DETAIL IMAGE
   ========================================= */

.custom-product-directory-system-detail-image {

    padding:0 48px;

}


.custom-product-directory-system-detail-image img {

    display:block;

    width:100%;

    max-height:400px;

    object-fit:contain;

    object-position:center;

    border-radius:10px;

}


/* =========================================
   DETAIL BODY
   ========================================= */

.custom-product-directory-system-detail-body {

    padding:40px 48px 50px;

    font-size:15px;

    line-height:1.8;

    color:#555555;

}


/* =========================================
   FIRST ELEMENT
   ========================================= */

.custom-product-directory-system-detail-body > *:first-child {

    margin-top:0;

}


/* =========================================
   HEADINGS
   ========================================= */

.custom-product-directory-system-detail-body h1,
.custom-product-directory-system-detail-body h2,
.custom-product-directory-system-detail-body h3,
.custom-product-directory-system-detail-body h4,
.custom-product-directory-system-detail-body h5,
.custom-product-directory-system-detail-body h6 {

    color:#222222;

    line-height:1.35;

}


.custom-product-directory-system-detail-body h1 {

    font-size:30px;

    margin-top:35px;

    margin-bottom:18px;

}


.custom-product-directory-system-detail-body h2 {

    font-size:25px;

    margin-top:38px;

    margin-bottom:18px;

}


.custom-product-directory-system-detail-body h3 {

    font-size:21px;

    margin-top:32px;

    margin-bottom:16px;

}


.custom-product-directory-system-detail-body h4 {

    font-size:18px;

    margin-top:28px;

    margin-bottom:14px;

}


/* =========================================
   PARAGRAPHS
   ========================================= */

.custom-product-directory-system-detail-body p {

    margin-top:0;

    margin-bottom:18px;

}


/* =========================================
   LISTS
   ========================================= */

.custom-product-directory-system-detail-body ul,
.custom-product-directory-system-detail-body ol {

    margin-top:0;

    margin-bottom:22px;

    padding-left:23px;

}


.custom-product-directory-system-detail-body li {

    margin-bottom:7px;

}


/* =========================================
   TABLE
   ========================================= */

.custom-product-directory-system-detail-body table {

    width:100%;

    border-collapse:collapse;

    margin:25px 0 30px;

    font-size:14px;

}


.custom-product-directory-system-detail-body th {

    padding:13px 15px;

    background:#f5f8f7;

    border:1px solid #e1e7e4;

    color:#333333;

    font-weight:600;

    text-align:left;

}


.custom-product-directory-system-detail-body td {

    padding:12px 15px;

    border:1px solid #e1e7e4;

    vertical-align:top;

}


/* =========================================
   LINKS
   ========================================= */

.custom-product-directory-system-detail-body a {

    color:#34BC8C;

    text-decoration:none;

}


.custom-product-directory-system-detail-body a:hover {

    text-decoration:underline;

}


/* =========================================
   IMAGES INSIDE CONTENT
   ========================================= */

.custom-product-directory-system-detail-body img {

    max-width:100%;

    height:auto;

    border-radius:8px;

}


/* =========================================
   LEFT LOADING
   ========================================= */

.custom-product-directory-system-loading {

    padding:20px 18px;

    font-size:13px;

    color:#999999;

}


/* =========================================
   RIGHT LOADING
   ========================================= */

.custom-product-directory-system-detail-loading {

    min-height:500px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:15px;

    color:#999999;

    font-size:13px;

}


/* =========================================
   LOADING SPINNER
   ========================================= */

.custom-product-directory-system-loading-spinner {

    width:30px;

    height:30px;

    border:3px solid #eeeeee;

    border-top-color:#34BC8C;

    border-radius:50%;

    animation:
        customProductDirectorySystemSpin
        .8s linear infinite;

}


@keyframes customProductDirectorySystemSpin {

    from {

        transform:rotate(0deg);

    }

    to {

        transform:rotate(360deg);

    }

}


/* =========================================
   ERROR
   ========================================= */

.custom-product-directory-system-error {

    padding:60px 30px;

    text-align:center;

    color:#999999;

}


/* =========================================
   DESKTOP / TABLET
   ========================================= */

@media (max-width:1024px) {

    .custom-product-directory-system-wrapper {

        grid-template-columns:
            250px
            minmax(0,1fr);

        gap:30px;

    }


    .custom-product-directory-system-list,
    .custom-product-directory-system-detail {

        height:680px;

    }


    .custom-product-directory-system-detail-header {

        padding:32px 32px 25px;

    }


    .custom-product-directory-system-detail-image {

        padding:0 32px;

    }


    .custom-product-directory-system-detail-body {

        padding:30px 32px 40px;

    }


    .custom-product-directory-system-detail-title {

        font-size:30px;

    }

}


/* =========================================
   MOBILE DRAWER
   ========================================= */

@media (max-width:767px) {

    /* ==============================
       MAIN WRAPPER
       ============================== */

    .custom-product-directory-system-wrapper {

        display:block;

        width:100%;

        max-width:none;

    }


    /* ==============================
       SIDEBAR
       ============================== */

    .custom-product-directory-system-sidebar {

        position:relative;

        top:auto;

        width:100%;

        margin:0 0 18px 0;

        z-index:20;

    }


    /* ==============================
       DRAWER TITLE
       ============================== */

    .custom-product-directory-system-sidebar-title {

        position:relative;

        display:flex;

        align-items:center;

        justify-content:space-between;

        width:100%;

        height:50px;

        margin:0;

        padding:0 16px;

        background:#f7f8f8 !important;

        border:1px solid #e8e8e8 !important;

        border-radius:10px !important;

        box-sizing:border-box;

        cursor:pointer;

        transition:
            border-radius .25s ease;

    }


    .custom-product-directory-system-sidebar-title span {

        font-size:12px;

        line-height:1;

        font-weight:700;

        letter-spacing:1.5px;

        color:#777777;

    }


    /* ==============================
       DRAWER ARROW
       ============================== */

    .custom-product-directory-system-sidebar-title::after {

        content:"⌄";

        display:flex;

        align-items:center;

        justify-content:center;

        width:22px;

        height:22px;

        font-size:17px;

        line-height:1;

        color:#34BC8C;

        transform:rotate(0deg);

        transition:
            transform .25s ease;

    }


    /* ==============================
       PRODUCT LIST
       ============================== */

    .custom-product-directory-system-list {

        height:auto;

        max-height:0;

        overflow:hidden;

        margin:0;

        padding:0;

        background:#ffffff !important;

        border:1px solid #e8e8e8 !important;

        border-top:0 !important;

        border-radius:0 0 10px 10px !important;

        box-sizing:border-box;

        opacity:0;

        transition:
            max-height .3s ease,
            opacity .2s ease;

    }


    /* ==============================
       OPEN DRAWER
       ============================== */

    .custom-product-directory-system-list.mobile-drawer-open {

        opacity:1;

    }


    .custom-product-directory-system-sidebar.drawer-open
    .custom-product-directory-system-sidebar-title {

        border-radius:10px 10px 0 0 !important;

    }


    .custom-product-directory-system-sidebar.drawer-open
    .custom-product-directory-system-sidebar-title::after {

        transform:rotate(180deg);

    }


    /* ==============================
       MOBILE PRODUCT ITEM
       ============================== */

    .custom-product-directory-system-item {

        width:100%;

        min-height:46px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:12px;

        padding:11px 16px !important;

        margin:0;

        border:0 !important;

        border-bottom:1px solid #eeeeee !important;

        border-radius:0 !important;

        background:#ffffff !important;

        box-sizing:border-box;

        text-align:left;

        cursor:pointer;

    }


    .custom-product-directory-system-item:last-child {

        border-bottom:0 !important;

    }


    /* ==============================
       MOBILE ITEM TITLE
       ============================== */

    .custom-product-directory-system-item-title {

        font-size:14px;

        line-height:1.45;

        font-weight:500;

        color:#333333;

        white-space:normal !important;

    }


    /* ==============================
       MOBILE ARROW
       ============================== */

    .custom-product-directory-system-item-arrow {

        display:flex;

        flex:0 0 20px;

        width:20px;

        height:20px;

        opacity:1;

        transform:none;

        margin-top:0;

        font-size:15px;

        color:#34BC8C;

    }


    /* ==============================
       REMOVE DESKTOP HOVER
       ============================== */

    .custom-product-directory-system-item:hover {

        padding-left:16px !important;

        background:#ffffff !important;

    }


    .custom-product-directory-system-item:hover
    .custom-product-directory-system-item-title {

        color:#333333;

    }


    /* ==============================
       ACTIVE ITEM
       ============================== */

    .custom-product-directory-system-item.active {

        padding-left:16px !important;

        background:#f7fbf9 !important;

    }


    .custom-product-directory-system-item.active::before {

        display:block;

        left:0;

        top:7px;

        bottom:7px;

        width:3px;

        background:#34BC8C;

        opacity:1;

        transform:scaleY(1);

    }


    .custom-product-directory-system-item.active
    .custom-product-directory-system-item-title {

        color:#34BC8C;

        font-weight:600;

    }


    /* ==============================
       DETAIL PANEL
       ============================== */

    .custom-product-directory-system-detail {

        width:100%;

        height:auto;

        max-height:none;

        overflow:visible;

        border-radius:10px;

        box-sizing:border-box;

    }


    /* ==============================
       DETAIL HEADER
       ============================== */

    .custom-product-directory-system-detail-header {

        padding:22px 20px 16px;

    }


    /* ==============================
       MOBILE PRODUCT TITLE
       ============================== */

    .custom-product-directory-system-detail-title {

        font-size:20px !important;

        line-height:1.3;

        font-weight:700;

        margin:0;

    }


    /* ==============================
       DETAIL IMAGE
       ============================== */

    .custom-product-directory-system-detail-image {

        padding:0 20px;

    }


    .custom-product-directory-system-detail-image img {

        max-height:260px;

        border-radius:8px;

    }


    /* ==============================
       DETAIL BODY
       ============================== */

    .custom-product-directory-system-detail-body {

        padding:24px 20px 30px;

        font-size:14px;

        line-height:1.75;

    }


    /* ==============================
       TABLE
       ============================== */

    .custom-product-directory-system-detail-body table {

        display:block;

        width:100%;

        overflow-x:auto;

        white-space:nowrap;

    }

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width:480px) {

    .custom-product-directory-system-sidebar-title {

        height:48px;

        padding:0 15px;

    }


    .custom-product-directory-system-item {

        min-height:44px;

        padding:10px 15px !important;

    }


    .custom-product-directory-system-item-title {

        font-size:14px;

    }


    .custom-product-directory-system-detail-header {

        padding:20px 18px 15px;

    }


    .custom-product-directory-system-detail-title {

        font-size:18px !important;

        line-height:1.3;

    }


    .custom-product-directory-system-detail-image {

        padding:0 18px;

    }


    .custom-product-directory-system-detail-image img {

        max-height:230px;

    }


    .custom-product-directory-system-detail-body {

        padding:22px 18px 28px;

        font-size:14px;

    }

}





/* =========================================================
   PRODUCT DIRECTORY SPECIAL LINK STYLE
   ========================================================= */

/* =========================
   ACTIVE
   ========================= */

body a.custom-product-directory-system-item.active,
body a.custom-product-directory-system-item.active:hover,
body a.custom-product-directory-system-item.active:focus,
body a.custom-product-directory-system-item.active:active {

    color: #34BC8C !important;
    -webkit-text-fill-color: #34BC8C !important;

    background: none !important;
    background-image: none !important;

    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;

    animation: none !important;
}


/* =========================
   HOVER
   ========================= */

body a.custom-product-directory-system-item:hover,
body a.custom-product-directory-system-item:focus,
body a.custom-product-directory-system-item:active {

    color: #34BC8C !important;

    background: linear-gradient(
        90deg,
        #34BC8C 0%,
        #34BC8C 40%,
        #8BE8C8 50%,
        #34BC8C 60%,
        #34BC8C 100%
    ) !important;

    background-image: linear-gradient(
        90deg,
        #34BC8C 0%,
        #34BC8C 40%,
        #8BE8C8 50%,
        #34BC8C 60%,
        #34BC8C 100%
    ) !important;

    background-size: 300% 100% !important;
    background-position: 100% 0 !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    animation: customProductDirectoryGreenSweep 1.2s ease forwards !important;
}


/* =========================
   TEXT INSIDE
   ========================= */

body a.custom-product-directory-system-item:hover
.custom-product-directory-system-item-title {

    color: #34BC8C !important;
    -webkit-text-fill-color: transparent !important;

    background: linear-gradient(
        90deg,
        #34BC8C 0%,
        #34BC8C 40%,
        #8BE8C8 50%,
        #34BC8C 60%,
        #34BC8C 100%
    ) !important;

    background-size: 300% 100% !important;
    background-position: 100% 0 !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
}


/* =========================
   GREEN SWEEP
   ========================= */

@keyframes customProductDirectoryGreenSweep {

    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0% 0;
    }

}/* End custom CSS */