/* Container Pickr interaction */
.pcr-interaction {
    display: flex !important;
    gap: 2px;
    /* jarak antara input dan tombol */
    align-items: center !important;
    /* menengahkan vertikal */
    justify-content: center !important;
    /* menengahkan horizontal */
}

/* Input di panel Pickr (nano) */
.pcr-interaction .pcr-result {
    flex: 1 1 auto !important;
    /* ambil seluruh sisa ruang */
    min-width: 0 !important;
    /* agar flex shrink bekerja */
    box-sizing: border-box;
    font-size: 14px !important;
    padding: 4px 8px !important;
    margin-bottom: 5px !important;
}

/* Tombol Save & Cancel proporsional, teks di tengah */
.pcr-interaction .pcr-save,
.pcr-interaction .pcr-cancel {
    text-transform: uppercase !important;
    flex: 1 1 0% !important;
    /* bagi lebar sama rata */
    min-width: 0 !important;
    /* agar flex shrink bekerja */
    height: 28px !important;
    font-size: 13px !important;
    border-radius: 3px !important;
    padding: 0 5px !important;
    margin: 0 2px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* posisi teks di tengah */
    line-height: normal !important;
    /* hindari line-height membesar */
    box-sizing: border-box;
    /* padding termasuk dalam perhitungan lebar */
}

.pcr-interaction .pcr-save {
    background-color: rgba(88, 41, 187, 0.75) !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.pcr-interaction .pcr-save:hover {
    background-color: rgba(88, 41, 187, 0.5) !important;
    color: #ffffff !important;
    border: 1px solid rgba(88, 41, 187, 0.5) !important;
}

.pcr-interaction .pcr-cancel {
    background-color: rgba(231, 76, 60, 0.5) !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}


.pcr-interaction .pcr-cancel:hover {
    background-color: rgba(231, 76, 60, 0.85) !important;
    color: #ffffff !important;
    border: 1px solid rgba(231, 76, 60, 0.85) !important;
}