.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;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.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-top: 0px;
     border-left: 0px;
     border-right: 0px;
     border-bottom: 1px solid #0006;
     -webkit-tap-highlight-color: transparent;
     line-height: 150%;
     box-sizing: border-box;
     clear: both;
     padding: .5rem 2rem .5rem .2rem;
     position: relative;
     text-align: left !important;
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     white-space: nowrap;
     border-radius: 0px;
     background: white;
 }

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

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

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

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

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

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

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

.nice-select .list:hover .option:not(:hover) {
    background: var(--white-avian);
    color: var(--black-avian);
}

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

.nice-select .option:first-child {
    /*display: none;*/
}

span.current {
    color: var(--black-avian);
    font-weight: 500;
}

.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:hover {
    color: var(--black-avian);
}

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

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

.pii_ahi_select {
    border-radius: 5px;
    padding-left: 1rem;
    padding-right: 4rem;
}

.pii_ahi_select:hover {
    background-color: #e0e6df !important;
}

.pii_ahi_select .option:hover,
.pii_ahi_select .option.focus,
.pii_ahi_select .option.selected.focus {
    background-color: var(--white-avian);
    color: var(--light-green-avian);
}

.pii_ahi_select::before {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    background-color: var(--footer-green-avian);
    content: '';
    display: block;
    height: 38px;
    margin-top: 0px;
    pointer-events: none;
    position: absolute;
    right: 0;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 42px;
}

.pii_ahi_select::after {
    border-bottom: 2px solid var(--white-avian) !important;
    border-right: 2px solid var(--white-avian) !important;
    right: 17px !important;
    margin-top: -5.5px;
}

.kar_tp_order span.current,
.pii_ahi_select span.current {
    display: inline-block;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kar_tp_order .option:hover,
.kar_tp_order .option.focus,
.kar_tp_order .option.selected.focus,
.kar_tp_select .option:hover,
.kar_tp_select .option.focus,
.kar_tp_select .option.selected.focus {
    background-color: var(--white-avian);
    color: var(--light-green-avian);
}

.kar_tp_select {
    padding: .5rem 2rem .5rem 3rem;
    height: 100% !important;
}

.kar_tp_select::before {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.kar_tp_select::after {
    top: 49% !important;
    right: 17px !important;
}

.kar_tp_select.kar_bp::before {
    background-image: url('https://cdn.prod.website-files.com/67ca9fcedad121f487cfe4cd/681b2394d211e01fdf571663_Icon%20Perusahaan(1).png');
}

.kar_tp_select.kar_posisi::before {
    background-image: url('https://cdn.prod.website-files.com/67ca9fcedad121f487cfe4cd/681b23949b9ce253c9406bf0_Icon%20Posisi.png');
}

.kar_tp_select.kar_lokasi::before {
    background-image: url('https://cdn.prod.website-files.com/67ca9fcedad121f487cfe4cd/681b2394eb0f79da8ddbbcab_Icon%20Lokasi.png');
}

.kar_tp_select.kar_perusahaan::before {
    background-image: url('https://cdn.prod.website-files.com/67ca9fcedad121f487cfe4cd/681b23944849620e339a7405_Icon%20Perusahaan.png');
}

.kar_tp_select .current {
    line-height: 165%;
}

.kar_tp_order::after {
    top: 7px !important;
}

.kar_tp_order {
    line-height: 135%;
}

.hi_tkp_dk_item_img {
    object-position: center top;
    aspect-ratio: 443 / 477;
    width: 100%;
    margin-top: -2.3rem;
    display: flex;
    position: relative;
    overflow: hidden;
}

.hi_tkp_dk_item_bg_wrapper {
    display: flex;
    position: relative;
    padding-left: .5rem;
    padding-right: .5rem;
}

.hi_tkp_dk_item_img img {
    object-position: center top;
}

.hi_tkp_sticky {
    box-shadow: 0 16px 8px #0002;
}

.objectfit_contain {
    object-fit: contain !important;
}

.psd_map_list_item.is-active .certif_ac_chevron {
    transform: rotate(90deg);
}
.psd_map_list_item.is-active .certif_folder_icon.front {
    opacity: 0;
}
.psd_map_list_item.is-active .certif_folder_icon.back {
    opacity: 1;
}

.hi_tkp_dk_item_img.personel {
    max-width: 15rem;
    width: 100%;
    margin-top: 0;
}

.hi_tkp_dk_item_img img {
    object-position: center top;
}

@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;
    }
}