:root,
[data-bs-theme=light] 
{
	--ph-font-size: 14px;
	--ph-body-color: #212529;

	--ph-body-bg: #FFFFFF;
	--ph-body-color-rgb: rgba(255, 255, 255, 1);

	--ph-content-color: #000000;
	--ph-content-bg: #FFFFFF;

	--ph-pagination-color: #FFFFFF;

	/* Primary Color */

	--ph-primary: #1FA675;
	--ph-primary-rgb: rgba(31, 166, 117, 1);

	--ph-primary-link: #024023;

	--ph-primary-color-subtle: #024023;
	--ph-primary-color-subtle-2: #024023;

	--ph-primary-bg-subtle: color-mix(in srgb, var(--ph-primary) 20%, var(--ph-primary) 0%);
	--ph-primary-bg-subtle-2: color-mix(in srgb, var(--ph-primary) 10%, var(--ph-primary) 0%);

	--ph-primary-bg-subtle-color-mix: color-mix(in srgb, var(--ph-primary) 20%, transparent);
	--ph-primary-bg-subtle-2-color-mix: color-mix(in srgb, var(--ph-primary) 10%, transparent);

	--ph-primary-border-subtle: color-mix(in srgb, var(--ph-primary) 20%, var(--ph-primary) 0%);
	--ph-primary-border-subtle: color-mix(in srgb, var(--ph-primary) 10%, var(--ph-primary) 0%);

	--ph-primary-text-emphasis: #FFFFFF;

	--ph-primary-hover-bg: #1A8961;
	--ph-primary-hover-text: #FFFFFF;
	--ph-primary-hover-border: #1A8961;

	--ph-primary-focus-shadow-rgb: rgba(210, 237, 227, 1);

	--ph-primary-active-bg: #1FA675;
	--ph-primary-active-text: #FFFFFF;
	--ph-primary-active-border: #1FA675;
	--ph-primary-active-shadow: #D2EDE3;

	--ph-primary-disable-bg: #6DC5A5;
	--ph-primary-disable-text: #FFFFFF;
	--ph-primary-disable-border: #6DC5A5;

	/* Secondary Color  */

	--ph-secondary: #024023;
	--ph-secondary-rgb: rgba(2, 64, 35, 1);

	--ph-secondary-color-subtle: #1FA675;
	--ph-secondary-color-subtle-2: #1FA675;

	--ph-secondary-bg-subtle: color-mix(in srgb, var(--ph-secondary) 20%, var(--ph-secondary) 0%);
	--ph-secondary-bg-subtle-2: color-mix(in srgb, var(--ph-secondary) 10%, var(--ph-secondary) 0%);

	--ph-secondary-bg-subtle-color-mix: color-mix(in srgb, var(--ph-secondary) 20%, transparent);
	--ph-secondary-bg-subtle-2-color-mix: color-mix(in srgb, var(--ph-secondary) 10%, transparent);
	
	--ph-secondary-border-subtle: color-mix(in srgb, var(--ph-secondary) 20%, var(--ph-secondary) 0%);
	--ph-secondary-border-subtle-2: color-mix(in srgb, var(--ph-secondary) 10%, var(--ph-secondary) 0%);
	
	--ph-secondary-text-emphasis: #FFFFFF;

	--ph-secondary-hover-bg: #2E614A;
	--ph-secondary-hover-text: #FFFFFF;
	--ph-secondary-hover-border: #2E614A;

	--ph-secondary-focus-shadow-rgb: rgba(242, 250, 252, 1);

	--ph-secondary-active-bg: #024023;
	--ph-secondary-active-text: #FFFFFF;
	--ph-secondary-active-border: #024023;
	--ph-secondary-active-shadow: #F2FAFC;

	--ph-secondary-disable-bg: #5A8370;
	--ph-secondary-disable-text: #FFFFFF;
	--ph-secondary-disable-border: #5A8370;

	/* Callout Toast */

	--ph-callout-bg: #FFFFFF;
	--ph-callout-color: #000000;

	--ph-callout-success-color: #04BB7B;
	--ph-callout-danger-color: #DC3545;
	--ph-callout-info-color: #0DCAF0;
	--ph-callout-warning-color: #FFC107;

	/* Default Modal CRUD  */

	--ph-modal-create-width: 500px;
	--ph-modal-read-width: 500px;
	--ph-modal-update-width: 500px;
	--ph-modal-delete-width: 425px;

	/* Toast */

	--ph-toast-success: #04bb7b;
	--ph-toast-success-rgb: 4, 187, 123;
	--ph-toast-danger: #dc3545;
	--ph-toast-danger-rgb: 220, 53, 69;
	--ph-toast-info: #0dcaf0;
	--ph-toast-info-rgb: 13, 202, 240;
	--ph-toast-warning: #ffc107;
	--ph-toast-warning-rgb: 255, 193, 7;

	/* Other Variable CSS */

	--vs-selected-bg: #F0F0F0;
	--vs-controls-color: rgba(60, 60, 60, 0.5);

	--vs-dropdown-bg: #FFFFFF;
	--vs-dropdown-color: #000000;
	--vs-dropdown-option-color: #000000;

	--vs-dropdown-option--active-bg: #E01D24;
	--vs-dropdown-option--active-color: #EEEEEE;
}

[data-bs-theme=dark] 
{
	--ph-body-color: #FFFFFF;

	--ph-body-bg: #212529;
	--ph-body-color-rgb: rgba(33, 37, 41, 1);

	--ph-content-color: #FFFFFF;
	--ph-content-bg: #36393D;

	--ph-pagination-color: #FFFFFF;

	/* Primary Color  */

	--ph-primary: #1FA675;
	--ph-primary-rgb: rgba(31, 166, 117, 1);

	--ph-primary-link: #1FA675;

	--ph-primary-color-subtle: #1FA675;
	--ph-primary-color-subtle-2: #1FA675;

	--ph-primary-bg-subtle: color-mix(in srgb, var(--ph-primary) 20%, var(--ph-primary) 0%);
	--ph-primary-bg-subtle-2: color-mix(in srgb, var(--ph-primary) 10%, var(--ph-primary) 0%);

	--ph-primary-bg-subtle-color-mix: background-color: color-mix(in srgb, var(--ph-primary) 20%, var(--ph-primary) 0%);
	--ph-primary-bg-subtle-2-color-mix: background-color: color-mix(in srgb, var(--ph-primary) 10%, var(--ph-primary) 0%);

	--ph-primary-border-subtle: color-mix(in srgb, var(--ph-primary) 20%, var(--ph-primary) 0%);
	--ph-primary-border-subtle: color-mix(in srgb, var(--ph-primary) 10%, var(--ph-primary) 0%);

	--ph-primary-text-emphasis: #FFFFFF;

	--ph-primary-hover-bg: #1A8961;
	--ph-primary-hover-text: #FFFFFF;
	--ph-primary-hover-border: #1A8961;

	--ph-primary-focus-shadow-rgb: rgba(210, 237, 227, 1);

	--ph-primary-active-bg: #1FA675;
	--ph-primary-active-text: #FFFFFF;
	--ph-primary-active-border: #1FA675;
	--ph-primary-active-shadow: #D2EDE3;

	--ph-primary-disable-bg: #6DC5A5;
	--ph-primary-disable-text: #FFFFFF;
	--ph-primary-disable-border: #6DC5A5;

	/* Secondary Color  */

	--ph-secondary: #024023;
	--ph-secondary-rgb: rgba(2, 64, 35, 1);

	--ph-secondary-color-subtle: #1FA675;
	--ph-secondary-color-subtle-2: #1FA675;

	--ph-secondary-bg-subtle: color-mix(in srgb, var(--ph-secondary) 20%, var(--ph-secondary) 0%);
	--ph-secondary-bg-subtle-2: color-mix(in srgb, var(--ph-secondary) 10%, var(--ph-secondary) 0%);

	--ph-secondary-bg-subtle-color-mix: color-mix(in srgb, var(--ph-secondary) 20%, transparent);
	--ph-secondary-bg-subtle-2-color-mix: color-mix(in srgb, var(--ph-secondary) 10%, transparent);
	
	--ph-secondary-border-subtle: color-mix(in srgb, var(--ph-secondary) 20%, var(--ph-secondary) 0%);
	--ph-secondary-border-subtle-2: color-mix(in srgb, var(--ph-secondary) 10%, var(--ph-secondary) 0%);
	
	--ph-secondary-text-emphasis: #FFFFFF;

	--ph-secondary-hover-bg: #2E614A;
	--ph-secondary-hover-text: #FFFFFF;
	--ph-secondary-hover-border: #2E614A;

	--ph-secondary-focus-shadow-rgb: rgba(242, 250, 252, 1);

	--ph-secondary-active-bg: #024023;
	--ph-secondary-active-text: #FFFFFF;
	--ph-secondary-active-border: #024023;
	--ph-secondary-active-shadow: #F2FAFC;

	--ph-secondary-disable-bg: #5A8370;
	--ph-secondary-disable-text: #FFFFFF;
	--ph-secondary-disable-border: #5A8370;

	/* Callout Toast */

	--ph-callout-bg: #000000;
	--ph-callout-color: #FFFFFF;

	--ph-callout-success-color: #04BB7B;
	--ph-callout-danger-color: #DC3545;
	--ph-callout-info-color: #0DCAF0;
	--ph-callout-warning-color: #FFC107;

	/* Toast */

	--ph-toast-success: #04bb7b;
	--ph-toast-success-rgb: 4, 187, 123;
	--ph-toast-danger: #dc3545;
	--ph-toast-danger-rgb: 220, 53, 69;
	--ph-toast-info: #0dcaf0;
	--ph-toast-info-rgb: 13, 202, 240;
	--ph-toast-warning: #ffc107;
	--ph-toast-warning-rgb: 255, 193, 7;

	/* Other Variable CSS */

	--vs-selected-bg: #676767;
	--vs-controls-color: rgba(255, 255, 255, 0.5);

	--vs-dropdown-bg: #282C34;
	--vs-dropdown-color: #FFFFFF;
	--vs-dropdown-option-color: #FFFFFF;

	--vs-dropdown-option--active-bg: #E01D24;
	--vs-dropdown-option--active-color: #EEEEEE;
}