@layer theme, base, components, utilities;

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap');

:root {
	/* COLORS */
	--caction-red                  : #E0386A;
	--caction-red-hover            : color-mix(in srgb, var(--caction-red) 70%, white 30%);
	--caction-red-normal           : #D11934;
	--caction-red-light            : #FDECEE;
	--caction-green                : #287932;
	--caction-green-light          : #E9FFE9;
	--caction-yellow               : #8C7100;
	--caction-yellow-light         : #FEF7CE;
	--caction-pink                 : #D94176;
	--caction-pink-light           : #FFF0F9;
	--caction-brown                : #A35100;
	--caction-brown-light          : #F7EDEB;
	--caction-turquoise            : #26867D;
	--caction-turquoise-light      : #D9FFFA;
	--caction-orange               : #E64500;
	--caction-orange-light         : #FFEEE9;
	--caction-purple               : #803790;
	--caction-purple-light         : #FBECFB;
	--caction-gray                 : #D9D9D9;
    --caction-gray-line            : var(--caction-gray);
	--caction-gray-light           : #EAEBEB;
	--caction-gray-lightest        : #F8F9FA;
	--caction-gray-platinum        : #F5F5F5;
	--caction-black                : #333333;
	--caction-seasonal-black       : #1B2E45;
	--caction-blue                 : #243D5C;
	--caction-blue-hover           : color-mix(in srgb, #243D5C 70%, white 30%);
	--caction-blue-normal          : #31547E;
	--caction-blue-steel           : #566C80;
	--caction-blue-sky             : #A7A7A7;
	--caction-blue-light           : #ECF7FF;
	--caction-blue-accent          : #107BD5;
	--caction-white                : #FDFDFD;
	--caction-white-pure           : #FFFFFF;
	--caction-primary-color        : var(--caction-red);
	--caction-primary-color-hover  : color-mix(in srgb, var(--caction-primary-color) 70%, white 30%);
	--caction-secondary-color      : var(--caction-blue);
	--caction-secondary-color-hover: color-mix(in srgb, var(--caction-secondary-color) 70%, white 30%);
	--caction-primary-font         : var(--caction-black);
	--caction-secondary-font       : var(--caction-blue-steel);

    /* Gradient Colors */
    --caction-gradient-red-blue: linear-gradient(219.08deg, #FF004D 16.67%, #243D5C 78.12%);


    /* TEXT */
	--caction-text-size-default: 16px;

	/* CONTACT */
    --caction-category-contact      : #38741A;
    --caction-category-contact-light: color-mix(in srgb, #38741A 10%, white 90%);
    --caction-category-contact-hover: color-mix(in srgb, #38741A 10%, white 30%);

	/* JOB */
	--caction-category-job            : #3E6958;
	--caction-category-job-light      : color-mix(in srgb, #3E6958 10%, white 90%);

	/* PF */
    --caction-category-pf: #E55D4D;

	/* CUSTOMER */
    --caction-category-customer      : #C32454;
    --caction-category-customer-light: color-mix(in srgb, #C32454 10%, white 90%);

	/* DF */
    --caction-category-df: #6B3E75;
    --caction-category-df-light: color-mix(in srgb, #6B3E75 10%, white 90%);

	/* PRODUCT */
    --caction-category-product      : #007899;
    --caction-category-product-light: color-mix(in srgb, #007899 10%, white 90%);

	/* USER */
    --caction-category-user: #005280;

	/* WAREHOUSE */
    --caction-category-warehouse: #7E6847;

	/* PROJECT */
    --caction-category-project      : #CC8F15;
    --caction-category-project-light: color-mix(in srgb, #CC8F15 10%, white 90%);

	/* ASSET */
    --caction-category-asset      : #66352E;
    --caction-category-asset-light: color-mix(in srgb, #66352E 10%, white 90%);
    --caction-category-asset-hover: color-mix(in srgb, #66352E 10%, white 30%);

    /* Live Chat Container Custom Right */
    --live-chat-container-custom-right: 9px;
    --live-chat-container-custom-bottom: 5px;
}

/* BASE */
html, body {
    height             : 100%;
    font-family        : "Baloo 2", sans-serif !important;
    overscroll-behavior: auto;
}
body {
    background-color: var(--caction-white);
}
*:focus-visible {
    outline: none;
}

.p-overlaypanel:after,
.p-overlaypanel:before {
    border-color: transparent !important;
}

.caction-title {
    color: var(--caction-secondary-color);
    font-weight: 700;
}
.caction-label {
    color: var(--caction-secondary-color);
    font-weight: 500;
}
.p-button.caction-border-round, .caction-border-round {
    border-radius: 20px !important;
}

/* Tab */
.caction-domain-tab {
	color: var(--caction-blue-steel);
}
.caction-domain-tab.active {
	border-bottom: solid 4px var(--caction-secondary-color);
	color: var(--caction-secondary-color);
    font-weight: 600;
}
.nav-tabs > li > a:before {
    border-bottom: 4px solid var(--caction-secondary-color);
}
.caction-nav-tabs.nav-tabs li.active a {
    color: var(--caction-secondary-color);
}
.caction-nav-tabs.nav-tabs > li {
    background-color: transparent;
    border: none !important;
}
.caction-nav-tabs.nav-tabs > li > a {
    background-color: transparent;
    color: var(--caction-blue-steel);
}
.caction-nav-tabs.nav-tabs li.active a:focus, .caction-nav-tabs.nav-tabs a:hover {
    background-color: white;
    color: var(--caction-secondary-color);
}

/* Colours */
.caction-text-blue {
    color: var(--caction-blue);
}
.caction-text-status-red{
    color: var(--caction-red-normal)!important;
}
.hover\:caction-text-blue:hover {
    color: var(--caction-blue);
}
.caction-border-blue {
    border-color: var(--caction-blue)!important;
}
.hover\:caction-border-blue:hover {
    border-color: var(--caction-blue) !important;
}

.caction-text-blue-steel {
    color: var(--caction-blue-steel);
}
.hover\:caction-text-blue-steel:hover {
    color: var(--caction-blue-steel);
}
.caction-text-red{
    color: var(--caction-red) !important;
}
.caction-text-green {
    color: var(--caction-green) !important;
}
.caction-text-green-light {
    color: var(--caction-green-light);
}
.caction-text-gray{
    color: var(--caction-gray)!important;
}
.caction-text-blue-sky {
    color: var(--caction-blue-sky)!important;
}
.hover\:caction-text-blue-sky:hover {
    color: var(--caction-blue-sky);
}
.caction-text-yellow{
    color: var(--caction-yellow)!important;
}
.caction-text-pink{
    color: var(--caction-pink)!important;
}

.caction-border-blue-steel{
    border: var(--caction-blue-steel) 2px solid;
}

.caction-border-blue-sky{
    border: var(--caction-blue-sky) 2px solid;
}

.caction-job-report-monthly {
    background: var(--caction-turquoise);
}

.caction-job-report-monthly:hover {
    background: color-mix(in srgb, var(--caction-turquoise) 80%, white 20%);
}

.caction-text-primary {
    color: var(--caction-primary-color) !important;
}
.caction-text-secondary {
    color: var(--caction-secondary-font) !important;
}

.caction-text-black {
    color: var(--caction-black) !important;
}
.caction-text-platinum {
    color: var(--caction-gray-platinum) !important;
}

.caction-text-gradient-red-blue {
    background-image: var(--caction-gradient-red-blue);
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-clip: text!important;
    color: transparent!important;
}

button.caction-text-gradient-red-blue:hover {
    color: var(--caction-red)!important;
}

.caction-bg-blue {
    background-color: var(--caction-blue);
}
.hover\:caction-bg-blue-hover:hover {
    background-color: color-mix(in srgb, var(--caction-blue) 70%, white 30%);
}
.caction-bg-blue-light {
    background-color: var(--caction-blue-light)!important;
}
.caction-bg-primary {
    background-color: var(--caction-primary-color);
}
.caction-bg-primary-10 {
    background-color: color-mix(in srgb, var(--caction-primary-color) 10%, white 90%);
}
.hover\:caction-bg-primary:hover {
    background-color: var(--caction-primary-color-hover);
}
.caction-bg-pink-light{
    background-color: var(--caction-pink-light);
}

.caction-bg-secondary {
    background-color: var(--caction-secondary-color);
}
.caction-bg-secondary-10 {
    background-color: color-mix(in srgb, var(--caction-secondary-color) 10%, white 90%);;
}
.hover\:caction-bg-secondary:hover {
    background-color: var(--caction-secondary-color-hover) !important;
}
.hover\:caction-bg-blue:hover {
    background-color: var(--caction-secondary-color);
}

.caction-bg-green {
    background-color: var(--caction-green)!important;
    color: white !important;
}

.caction-bg-green:hover {
    background-color: color-mix(in srgb, var(--caction-green) 80%, white 20%) !important;
}

.caction-bg-platinum {
    background-color: var(--caction-gray-platinum);
}
.caction-bg-platinum:hover {
    background-color: color-mix(in srgb, var(--caction-gray-platinum) 70%, white 30%);
}

/* Light Background Color */
.caction-bg-blue-light:hover {
    background-color: color-mix(in srgb, var(--caction-blue-light) 70%, white 30%)!important;
}
.caction-bg-green-light {
    background-color: var(--caction-green-light)!important;
}
.caction-bg-green-light:hover {
    background-color: color-mix(in srgb, var(--caction-green-light) 70%, white 30%)!important;
}
.caction-bg-yellow-light {
    background-color: var(--caction-yellow-light)!important;
}
.caction-bg-yellow-light:hover {
    background-color: color-mix(in srgb, var(--caction-yellow-light) 70%, white 30%)!important;
}
.caction-bg-red-light {
    background-color: var(--caction-red-light)!important;
}
.caction-bg-red-light:hover {
    background-color: color-mix(in srgb, var(--caction-red-light) 70%, white 30%)!important;
}

.caction-pf-banner-active {
    background-color: var(--caction-secondary-color);
    color: white !important;
}

.caction-pf-banner-active:focus {
    background-color: var(--caction-secondary-color) !important;
    color: white !important;
}

.hover\:caction-pf-banner:hover {
    background-color: var(--caction-secondary-color-hover) !important;
    color: white !important;
}

.caction-customer-text {
    color: var(--caction-category-customer) !important;
}

.caction-customer-bg {
    background-color: var(--caction-category-customer-light) !important;
}
.caction-project-text {
    color: var(--caction-category-project) !important;
}

.caction-job-bg-gradient {
    background: radial-gradient(55.81% 130.91% at 50% 0%, rgba(137, 237, 152, 0.50) 0%, rgba(137, 237, 152, 0.00) 100%);
}

.caction-job-btn-new {
	background-color: #00B13B;
	border-color    : #00B13B;

	&:hover {
		background-color: #00B13B !important;
		border-color    : #00B13B !important;
	}
}

.caction-project-bg {
    background-color: var(--caction-category-project-light) !important;
}

.caction-project-bg-gradient {
    background: radial-gradient(55.81% 130.91% at 50% 0%, rgba(204, 143, 21, 0.3) 0%, rgba(204, 143, 21, 0) 100%);
}

.caction-customer-bg-gradient {
    background: radial-gradient(55.81% 130.91% at 50% 0%, rgba(195, 36, 84, 0.3) 0%, rgba(195, 36, 84, 0) 100%);
}

/* UOM Flag Settings toggle */
.toggle-group .btn.btn-primary {
    background: var(--caction-secondary-color) !important;
}

/* Category List */
.active-list {
    border-left: solid 4px var(--caction-secondary-color) !important;
}

/* Button  */
.p-button.caction-btn-secondary,
.p-button.caction-btn-secondary-alt,
.p-button.caction-btn-primary,
.p-button.caction-btn-default,
.btn:not(.btn-link):not(.btn-circle).caction-btn-secondary,
.btn:not(.btn-link):not(.btn-circle).caction-btn-secondary-alt,
.btn:not(.btn-link):not(.btn-circle).caction-btn-primary,
.btn:not(.btn-link):not(.btn-circle).caction-btn-default,
.caction-btn-secondary,
.caction-btn-secondary-alt,
.caction-btn-save,
.caction-btn-primary
.caction-btn-default {
    border-radius: 20px;
}
.p-button.caction-btn-primary,
.p-button.p-button-info.caction-btn-primary,
.caction-btn-primary {
  background: var(--caction-primary-color);
  border-color: var(--caction-primary-color);
  color: white;
}
.p-button.caction-btn-primary:hover,
.p-button.p-button-info:enabled.caction-btn-primary:hover,
.caction-btn-primary:hover,
.btn.caction-btn-primary:hover,
.caction-btn-primary.p-button:enabled:hover {
  background: var(--caction-primary-color-hover);
  border-color: var(--caction-primary-color-hover);
  color: white;
}
.btn.caction-btn-primary:hover b{
    color: white;
}
.p-button.caction-btn-primary:focus,
.p-button.p-button-info:enabled.caction-btn-primary:focus,
.btn.caction-btn-primary:focus,
.btn.caction-btn-primary.focus,
.btn.caction-btn-primary:active,
.btn.caction-btn-primary.active,
.caction-btn-primary:focus,
.caction-btn-primary:active {
  background: var(--caction-primary-color);
  border-color: var(--caction-primary-color);
  color: white;
}
.caction-btn-save {
	background: var(--caction-primary-color-hover);
  	border-color: var(--caction-primary-color-hover);
}
.p-button.caction-btn-secondary,
.btn.fc-button.caction-btn-secondary,
.btn.caction-btn-secondary,
.caction-btn-secondary {
    &:not(.p-button-text) {
        border: 2px solid !important;
        border-color: var(--caction-secondary-color);
    }

	color: var(--caction-secondary-color);
	background: #FFF;

    &:hover {
        background-color: var(--caction-blue-light);
	    color: var(--caction-secondary-color);
	    border-color: var(--caction-secondary-color);
    }
}
.p-button.caction-btn-secondary-alt,
.p-button.p-button-info.caction-btn-secondary-alt,
.caction-btn-secondary-alt {
	background: var(--caction-secondary-color);
	border-color: var(--caction-secondary-color);
	color: white;
}
.p-button.caction-btn-default,
.p-button.p-button-text.caction-btn-default,
.p-button.p-button-info.caction-btn-default,
.caction-btn-default {
	background: white;
	color: var(--caction-secondary-color);
    border: none;
}
.caction-btn-default:hover,
.btn.caction-btn-default:hover,
.p-button:enabled.caction-btn-default:hover,
.p-button.p-button-info:enabled.caction-btn-default:hover {
    background-color: var(--caction-secondary-color);
    color: white;
    border: none;
}

.caction-btn-default.btn-shadow-none {
    box-shadow: none;
}
.caction-btn-default:hover .pi {
    color: white;
}

.caction-btn-whatsapp {
    color: var(--caction-green);
    cursor: pointer;
}

.caction-btn-danger,
.p-button.caction-btn-danger {
	background: white;
	color: var(--caction-primary-color);
    border: none;
}
.caction-btn-danger:hover,
.p-button:enabled.caction-btn-danger:hover {
    background-color: var(--caction-primary-color-hover);
    color: white
}
/* .caction-lever {
    .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{
        background: var(--caction-primary-color);
    }

    .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
        background: var(--caction-primary-color-hover);
    }
} */
.p-inputswitch-slider {
	background: var(--caction-secondary-color-hover);
}
.switch label input[type=checkbox]:checked + .lever {
	background-color: var(--caction-secondary-color-hover);
}
.switch label input[type=checkbox]:checked + .lever:after {
	background-color: var(--caction-secondary-color);
	left: 24px;
}

/* Checkbox */
[type="checkbox"].filled-in:checked.caction-chk-col-blue + label:after {
    border: 2px solid var(--caction-secondary-color);
    background-color: var(--caction-secondary-color);
}

.caction-checkbox[type="checkbox"].filled-in:checked + label:after,
[type="checkbox"].filled-in:checked + label:after{
    top: 0;
    width: 20px;
    height: 20px;
    z-index: 0;
	background-color: var(--caction-secondary-color);
	border: 2px solid var(--caction-secondary-color);
}
.caction-checkbox .p-checkbox-box.p-highlight, .p-checkbox-box.p-highlight{
    border: 2px solid var(--caction-secondary-color);
    border-color: var(--caction-secondary-color);
    background: var(--caction-secondary-color);
}
.caction-checkbox.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover,
.caction-checkbox.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight
{
    background: var(--caction-secondary-color);
    border: 2px solid var(--caction-secondary-color);
}
.caction-checkbox.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover
{
    border-color: var(--caction-secondary-color);
}
[type="checkbox"].filled-in:checked.chk-col-teal + label:after {
    background-color: var(--caction-secondary-color);
    border: 2px solid var(--caction-secondary-color);
}

/* Icons */
.sc-noti-popwrapper .caction-icon,
.material-icons.caction-icon,
.scform-main-wrapper .material-icons,
.material-icons:not(.flatpickr-clear .material-icons),
.caction-icon,
.material-symbols-outlined,
.pi:not(.p-button-loading-icon),
.pi:not(.pi-whatsapp) {
  color: var(--caction-secondary-color);
}

.sidebar .menu .list .menu-toggle:before {
    /* sidebar '+' icon */
    color: var(--caction-secondary-color);
}

/* Navbar */
.sc-topnav-bar .span-clickable.caction-navbar-titles header, .caction-navbar-titles {
  color: var(--caction-secondary-color);
  border-radius: 20px;
}
.caction-navbar-titles {
    color: var(--caction-secondary-color);
}

/* Options */
.caction-export-options {
  border: solid var(--caction-secondary-color);
  color: var(--caction-secondary-color);
  background: #FFF;
}

/* Label */
.field-label.caction-label,
.caction-label {
    color: var(--caction-blue-steel);
    font-weight: 500;
}
.caction-tag {
    background-color: var(--caction-secondary-color);
    padding: 1px 4px;
    color: white !important;
    border-radius: 0.375rem;
}

/* Radiobox */
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after,
.caction-radiobox
{
    background-color: var(--caction-secondary-color);
    z-index:0;
}
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after,
.caction-radiobox  {
    border: 2px solid var(--caction-secondary-color);
}
.caction-radiobox-vue.p-radiobutton .p-radiobutton-box.p-highlight,
.caction-radiobox-vue.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover{
    background: white;
    border-color: var(--caction-secondary-color);
}

.p-radiobutton-box.p-focus  .p-radiobutton-icon{
	transform: translateZ(0) scale(1, 1) !important;
    visibility: visible !important;
}

/* calendar */
.p-datepicker table td > span:focus {
    box-shadow: none;
}
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
    box-shadow: none;
}


/* chips */
.scform-main-wrapper {
    .sc-chip.clickable-indicator  {
        --avcolor: var(--caction-secondary-color);
        border: 2px solid var(--caction-secondary-color);

        p {
            font-weight: 500;
            padding: 0;
        }
    }
}


/* datatable */
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even), .caction-table > tbody > tr:nth-of-type(even) {
    background: var(--caction-gray-lightest);
}
.p-datatable .p-datatable-tbody > tr > td {
    border: 1px solid #e2e8f0;
}
.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

/* link */
.caction-link {
    color: var(--caction-blue-steel);
    text-decoration-line: underline;
    font-weight: normal;
    background-color: transparent;
    text-underline-offset: 4px;

    &:hover {
        color: var(--caction-blue);
    }
}
.nav-tabs li.active  {
    a {
        color: var(--caction-primary-color);

        &:focus {
            color: var(--caction-primary-color);
        }
    }
}

/* box */
.caction-custom-box {
    background-color: white;
    border-radius: 20px;
}

.dropdown-menu > .active > a.caction-order-option {
    background-color: var(--caction-secondary-color);
}

/* Loader */
.caction-loader {
    background: url('../img/gif/loading.gif') center center no-repeat;
    background-size: cover;
}

/* Sweet alert */
.sweet-alert {
    border-radius: 5px !important;
}

/* Input Warning */
.input-warning-color {
    border: 1px solid var(--red-500)!important;
}
.otherInputWarning {
    color: var(--red-500)!important;
    position: absolute;
    bottom: -15px;
    left: 0;
}

/* Draggable UI */
.sortable-drag {
    background: rgba(0, 0, 0, 0.1) !important;

    * {
        opacity: 0.5;
    }
}

/* utils */
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.truncate {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Limits to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: normal;
}

.truncated-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limits to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.absolute-x-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.absolute-y-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrap-text {
    text-wrap: wrap;
    overflow-wrap: anywhere;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.mac-scroller {
    &::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    &::-webkit-scrollbar {
        width: 10px;
		height:8px;
        background-color: #fff;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #c7c7c7;
        border: 2px solid white;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: #999999;
    }
}

.thin-mac-scroller {
    &::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    &::-webkit-scrollbar {
        width: 5px;
        height: 8px;
        background-color: #fff;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #c7c7c7;
        border: 2px solid white;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: #999999;
    }
}
/* primevue multiselect & dropdown option text overflow */
.p-multiselect-panel.p-component.p-ripple-disabled,
.p-dropdown-panel.p-component.p-ripple-disabled{
    max-width: 45rch;
}

.p-multiselect-items,
.p-dropdown-items {
    width: 100%;
}

.p-multiselect-item span,
.p-dropdown-items .p-dropdown-item {
    text-wrap: wrap;
    overflow-wrap: anywhere;
}

.custom-ping-wave {
	position: absolute;
    display: inline-flex;
	width: 12px;
	height: 12px;
    border-radius: 9999px;
    background-color: var(--caction-primary-color);
    opacity: 0.75;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.custom-ping {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius:50%;
    background-color: var(--caction-primary-color);
}

.h-line-caction-sky-blue{
    border-bottom: 1px var(--caction-blue-sky) solid;
    line-height: 0px;
}

.caction-platinum-border{
    /* background-color: var(--caction-gray-platinum); */
    border: 2px var(--caction-gray-platinum) solid ;
}

.on-top{
    z-index: 1001 !important;
}

@layer utilities {
    /* Premium Button */
.premium-btn {
    position: relative;
    background-color: var(--caction-gray-platinum) !important; /* gray background */
    color: var(--caction-blue-sky) !important;
    border-color: var(--caction-gray-platinum) !important;
    overflow: visible !important;

    .material-icons, .material-symbols-outlined, .pi {
        color: var(--caction-blue-sky) !important;
    }

    * {
        color: var(--caction-blue-sky) !important;
    }

    &:hover {
        background-color: var(--caction-gray-platinum) !important;
        color: var(--caction-blue-sky) !important;

        .material-icons, .material-symbols-outlined, .pi {
            color: var(--caction-blue-sky) !important;
        }

        * {
            color: var(--caction-blue-sky) !important;
        }
    }

    &::after {
        content: "diamond"; /* for Material Symbols */
        font-family: 'Material Symbols Outlined';
        font-size: 14px;
        color: var(--caction-red);

        position: absolute;
        top: -8px;
        right: -8px;

        background: var(--caction-white);
        border-radius: 50%;
        width: 20px;
        height: 20px;

        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Premium Menu Item */
.premium-menu-item {
    color: var(--caction-blue-sky) !important;

    &:hover {
        color: var(--caction-blue-sky) !important;
    }

    &::after {
        content: "diamond";
        font-family: 'Material Symbols Outlined';
        font-size: 16px;
        color: var(--caction-red) !important;
        margin-left: 10px;
        vertical-align: middle;
        align-self: center;
    }
}
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.left-side-bar-shadow{
    box-shadow: 4px 20px 20px 4px #0000001A;
}

.button-shadow{
    box-shadow: 3px 4px 6.8px 0px #00000040;
}

/* Live Chat Container Custom Right */
#chat-widget-container {
    right: var(--live-chat-container-custom-right) !important;
    transition: right 0.2s ease !important;
}
.create-activity-button-custom-right {
    right: calc(var(--live-chat-container-custom-right) + 14px) !important;
}

/* To Prevent Driver.js Overlay from blocking interaction of other UI */
.driver-active .driver-overlay, .driver-active * {
    pointer-events: auto !important;
}

/* ANIMATIONS */
/* Slide down transition for container */
.slide-down-enter-active, .slide-down-leave-active {
	transition: all 0.2s ease-out;
}

.slide-down-enter-from {
	opacity   : 0;
	transform : translateY(-20px);
	max-height: 0;
}

.slide-down-leave-to {
	opacity   : 0;
	transform : translateY(-10px);
	max-height: 0;
}

.slide-down-leave-from {
	max-height: 100%;
}
a.p-tabview-nav-link:hover,
a.p-tabview-nav-link:focus {
	text-decoration: none!important;
}

.caction-tag.p-tag {
	.p-tag-value {
		line-height: 1;
	}
}

.p-button-loading-icon.pi {
	color: white !important;
}

.custom-p {
	margin: 0 !important;
}

.active-tab {
    color: var(--blue-600) !important;
    font-weight: 600 !important;
	background-color: var(--tw-color-blue-50) !important;
}

.caction-field-input {
	border-color: var(--caction-gray);
	background-color: var(--caction-gray-platinum);
}

.caction-tag.p-tag {
	border-radius   : 20px !important;
}

.caction-tag-info.p-tag {
	background-color: var(--tw-color-blue-50) !important;
	color           : var(--tw-color-blue-800) !important;
	border          : 1px solid var(--tw-color-blue-800) !important;
}

.caction-tag-purple.p-tag {
	background-color: var(--tw-color-purple-50) !important;
	color           : var(--tw-color-purple-800) !important;
	border          : 1px solid var(--tw-color-purple-800) !important;
}

.caction-tag-orange.p-tag {
	background-color: var(--tw-color-orange-50) !important;
	color           : var(--tw-color-orange-800) !important;
	border          : 1px solid var(--tw-color-orange-800) !important;
}

.caction-separator {
	border          : 0 !important;
	width           : 100%;
	height          : 1px;
	background-color: var(--tw-color-gray-200) !important;
	margin          : 0 !important;
}

.scrollbar-hide {
	&::-webkit-scrollbar {
		display: none;
	}

	scrollbar-width: none;
	-ms-overflow-style: none;
}

.custom-fade {
	animation: fadeIn 0.5s ease forwards;
	opacity  : 0;
}

.fade-infinite {
  /* name | duration | timing-function | delay | iteration-count | direction */
  animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes progress {
	0%   { transform: translateX(-100%); width: 40%; }
	50%  { transform: translateX(100%);  width: 70%; }
	100% { transform: translateX(300%);  width: 40%; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}