
.swiper-button-next.pdc_op_category {
    right: 0 !important;
    width: auto !important;
}

#clr_op_category .swiper-button-next:after,
.swiper-button-prev:after,
.swiper-button-next:after,
#hp_type_solusi .swiper-button-next:after {
    content: '' !important;
}

#clr_op_category .swiper-button-next {
    top: 21px;
}

#clr_op_products .swiper-pagination {
    position: static;
    margin-top: 2rem;
}

.clr_hp_tren_item_wrapper {
    opacity: 0;
    transform: translateX(0);
}

.clr_hp_tren_item_wrapper.left.animate {
    animation: slideInFromRight 1.2s ease-in-out forwards;
}

.clr_hp_tren_item_wrapper.right.animate {
    animation: slideInFromLeft 1.2s ease-in-out forwards;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.navbar_link_wrapper.product:hover .navbar_popup_hover_wrapper.product,
.navbar_link_wrapper.about:hover .navbar_popup_hover_wrapper.about,
.navbar_link_wrapper.relations:hover .navbar_popup_hover_wrapper.relations {
    opacity: 100%;
    max-height: calc(90vh - 7rem);
}

.navbar_popup_link.tatakelola:hover #popup_tatakelola {
    display: flex;
}

.button:hover .image.product.front,
.button.button-white-shadow:hover .image.product.front,
.button.product:hover .image.product.front {
    display: none;
    opacity: 0;
    transition: all 400ms;
}

.button:hover .image.product.behind,
.button.button-white-shadow:hover .image.product.behind,
.button.product:hover .image.product.behind {
    display: block;
    opacity: 1;
    transition: all 400ms;
}

.button .image.product.front {
    display: block;
    opacity: 1;
    transition: all 400ms;
}

.button .image.product.behind {
    display: none;
    opacity: 0;
    transition: all 400ms;
}

.dropdown.calculator .list,
.dropdown.calculator::after {
    margin-top: -6px;
}

.hi_tkp_bp_hero_wrapper img {
    height: 100%;
}

.hi_tkp_dk_item:hover .hi_tkp_dk_item_anim,
.abt_hp_personel_item:hover .hi_tkp_dk_item_anim {
    height: 100%;
    transition: all .4s;
}

.swiper-pagination-bullet-active {
    background-color: #00685F;
}

.swiper-pagination-bullet {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 8px;
}

.w-container {
    max-width: none !important;
}

.w-input,
.w-select {
    font-size: 18px;
}

.w-input:focus,
.w-select:focus {
    border-color: var(--footer-green-avian) !important;
}

.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
}

label.error {
    color: red;
    font-size: 12px;
    font-weight: 500;
    margin-top: 0px;
}

.w-input.error {
    border-color: red;
}

#target-select-list {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s, opacity 0.3s ease;
}

#target-select-list.open {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.nice-select {
    border: 0;
    border-bottom: 1px solid #0006;
    padding: .5rem 2rem .5rem .2rem;
    position: relative;
    text-align: left !important;
    transition: all 0.2s ease-in-out;
    user-select: none;
    white-space: nowrap;
    border-radius: 0;
}

.nice-select:hover {
    background: var(--white-avian) !important;
    border-color: #0006;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-bottom-color: var(--footer-green-avian);
}

.nice-select:after {
    border: 2px solid rgba(0, 0, 0, 0.4);
    border-width: 0 2px 2px 0;
    content: '';
    display: block;
    height: 7px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: rotate(45deg);
    transition: all 0.15s ease-in-out;
    width: 7px;
}

.nice-select.open:after {
    transform: rotate(-135deg);
}

.nice-select .list {
    background-color: var(--white-avian);
    color: var(--black-avian);
    border: 3px solid #ededed;
    border-radius: 5px;
    box-shadow: 0 7px 20px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    max-height: 200px;
    opacity: 0;
    overflow-y: auto;
    padding: var(--list-padding-top-bottom, 0.5rem) 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform: scale(0.75) translateY(-21px);
    transform-origin: 50% 0;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.nice-select .option {
    cursor: pointer;
    font-weight: 500;
    line-height: 1.5em;
    padding: .5rem 1rem;
    text-align: left;
    transition: all 0.2s;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: var(--light-green-avian);
    color: var(--black-avian);
}

.nice-select .option.selected {
    color: var(--white-avian);
    font-weight: 500;
}

.nice-select .option.disabled {
    color: #999;
    cursor: default;
}

@media only screen and (max-width: 767px) {
    .grid.news p:first-of-type {
        font-size: 16px;
    }

    .grid.news p:last-of-type {
        font-size: 12px;
    }

    .certif_ac_item_last p,
    .certif_iso_container .certif_iso_item div:nth-child(2) {
        margin-top: -.3rem;
    }

    .certif_iso_container .certif_iso_item.psd_map_list_item.child-2 {
        align-items: start;
    }

    .swiper-pagination-bullet {
        width: 1rem !important;
        height: 1rem !important;
    }

    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 4px !important;
    }
}

@media only screen and (max-width: 991px) {
    .w-input,
    .w-select {
        font-size: 16px;
    }

    .hi_tkp_dk_item_bg_wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media only screen and (min-width: 767px) {
    html.lenis {
        height: auto;
    }

    .lenis.lenis-smooth {
        scroll-behavior: auto;
    }

    .lenis.lenis-smooth [data-lenis-prevent] {
        overscroll-behavior: contain;
    }

    .lenis.lenis-stopped {
        overflow: hidden;
    }
}
