@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..900&display=swap');
:root {
    --primary-color: #3886C9;
	--primary-color-rgb: 56, 134, 201;
    --secondary-color: #76C893;
    --secondary-color-rgb: 179, 198, 63;
    --text-color: #0C1018;
    --text-color-rgb: 12, 16, 24;
	--title-color: #012363;
    --muted-color: #98999E;
    --muted-color-rgb: 152, 153, 158;
    --background-color: #f7f8fc;
    --main-font: "Inter", sans-serif;
	--border-radius: 0.6rem;
	--box-shadow: 0 0 3px #9899a799;
	--box-shadow-spread: 0 0 18px #9899a75c;
	--success-color: #009f26;
	--danger-color: #f00043;
	--warning-color: #f2c200;
	--info-color: #0094a7;
	--yellow-color-rgb: 248, 215, 5;
	--orange-color-rgb: 243, 80, 13;
	--violet-color-rgb: 143, 83, 176;
	--blue-color-rgb: 30, 136, 161;
	--green-color-rgb: 9, 208, 70;

	--toast-success: #DFF0D8;
	--toast-danger: #F2DEDE;
	--toast-warning: #FCF8E3;
	--toast-info: #D9EDF7;

	--active-color-rgb: 0, 163, 188;
	--ready-color-rgb: 100, 68, 119;
	--attended-color-rgb: 8, 74, 145;
	--in-faith-color-rgb: 8, 135, 43;
	--negative-color-rgb: 225, 76, 50;
	--in-active-color-rgb: 255, 144, 64;
	--service-support-color-rgb: 197, 190, 47;
}

/* -----------------------------------------------------------------------------------
	1. Basic Initialization
		1.1 Common Html Tags
		1.2 Basic Class
		1.3 Basic Input Class
		1.4 Basic Button Class
		1.5 Commonly Used Class
		1.6 Navbar Class
		1.7 Footerbar Class
		1.8 Custom Modal Class
		1.9 Custom Confirm Popup Class
	3. Common Pages
		3.1 Login Page Css
		3.2 Start Page Css
		3.3 Submit Report Page Css
		3.4 Contact Card Css
		3.5 Contact Popup Css
		3.6 Contact Popup Actions Css
		3.7 Dashboard Css
		3.8 Report Css
	8. Replacement Css
		8.1 Select2 Replacement
		8.2 Dropdown Replacement
		8.3 Toastify Replacement.toastify
	9. Animation Css
		9.1 Common Animations
----------------------------------------------------------------------------------- */

/*--------- 1. Basic Initialization ---------*/

	/* 1.1 Common Html Tags */

		body {
			font-size: 1rem;
			font-family: var(--main-font);
			color: var(--text-color);
			background-color: var(--background-color);
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}

		body.body--login {
			min-height: 100dvh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		body.body--navbar {
            padding-top: 86px;
            padding-bottom: 90px;
		}

		::placeholder {
			color: rgba(var(--muted-color-rgb), 0.65);
		}

		::-ms-input-placeholder {
			color: rgba(var(--muted-color-rgb), 0.65);
		}

		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		input[type=number] {
			-moz-appearance: textfield;
		}

	/* 1.2 Basic Class */

		.height--100vh {
			height: 100vh!important;
		}

		.bg--color {
			background-color: var(--background-color);
		}

		.mt-2rem {
			margin-top: 2rem;
		}

		.mt-1rem {
			margin-top: 1rem;
		}

		.mb-1rem {
			margin-bottom: 1rem;
		}

		.mb-2rem {
			margin-bottom: 2rem;
		}

		.red--text {
			color: rgb(var(--red-color-rgb));
		}

		.muted--text {
			color: rgb(var(--text-color-rgb), 0.8);
		}

		.fw--500 {
			font-weight: 500;
		}

		.fw--600 {
			font-weight: 600;
		}

	/* 1.3 Basic Input Class */

		.form--input {
			display: block;
			text-align: left;
			color: rgba(var(--text-color-rgb), .65);
			font-size: 1rem;
		}

		.form--input label {
			margin-bottom: 0.5rem;
			font-weight: 500;
		}

		.form--input .input--text {
			height: 3rem;
			max-height: 3rem;
			font-size: 0.9rem;
			width: 100%;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			border: none;
			outline: none;
			margin-bottom: 0.8rem;
			padding: 1rem 1rem 1rem 2.5rem;
		}

		.form--input .input--text.no--ic {
			padding: 1rem;
		}

		.form--input .input--select {
			height: 3rem;
			font-size: 0.9rem;
			width: 100%;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			border: none;
			outline: none;
			margin-bottom: 0.8rem;
			padding: 0 1rem;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%239d9d9d"><path d="M5 7l5 5 5-5H5z"/></svg>') no-repeat right 10px center;
			background-color: #FFF;
			background-size: 1.5rem;
			padding-right: 30px;
		}

		.form--input .input--select::after {
			content: "\25BC";
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			pointer-events: none;
			font-size: 16px;
			color: var(--muted-color);
		}

		.form--input svg {
			position: absolute;
			top: 0.7rem;
			left: 0.7rem;
			width: 1.4rem;
			height: 1.4rem;
			stroke: var(--secondary-color);
		}

		.input--required:after {
			content: '*';
			color: #ff5454;
			position: absolute;
			margin-left: 0.2rem;
		}

		.input--checkbox-parent {
			position: relative;
			margin: 1rem 0;
		}

		.input--checkbox-parent .input--checkbox {
			--bg: #fff;
			--brdr: #d1d6ee;
			--brdr-actv: var(--secondary-color);
			--brdr-hovr: var(--primary-color);
			--dur: calc((var(--size, 2)/2) * 0.6s);
			display: inline-block;
			width: calc(var(--size, 1) * 22px);
			position: relative;
			color: var(--secondary-color);
		}

		.input--checkbox-parent .input--checkbox:after {
			content: "";
			width: 100%;
			padding-top: 100%;
			display: block;
		}

		.input--checkbox-parent .input--checkbox > * {
			position: absolute;
		}

		.input--checkbox-parent .input--checkbox input {
			-webkit-appearance: none;
			-moz-appearance: none;
			box-shadow: 0 0 3px #9899a799;
			-webkit-tap-highlight-color: transparent;
			cursor: pointer;
			background-color: var(--bg);
			border-radius: calc(var(--size, 1) * 4px);
			border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
			color: var(--newBrdrClr, var(--brdr));
			outline: none;
			margin: 0;
			padding: 0;
			transition: all calc(var(--dur) / 3) linear;
		}

		.input--checkbox-parent .input--checkbox input:hover,
		.input--checkbox-parent .input--checkbox input:checked {
			--newBrdr: calc(var(--size, 1) * 2);
		}

		.input--checkbox-parent .input--checkbox input:hover {
			--newBrdrClr: var(--brdr-hovr);
		}

		.input--checkbox-parent .input--checkbox input:checked {
			--newBrdrClr: var(--brdr-actv);
			transition-delay: calc(var(--dur) /1.3);
		}

		.input--checkbox-parent .input--checkbox input:checked + svg {
			--dashArray: 16 93;
			--dashOffset: 109;
		}

		.input--checkbox-parent .input--checkbox svg {
			fill: none;
			left: 0;
			pointer-events: none;
			stroke: var(--stroke, var(--border-active));
			stroke-dasharray: var(--dashArray, 93);
			stroke-dashoffset: var(--dashOffset, 94);
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-width: 2px;
			top: 0;
			transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
		}

		.input--checkbox-parent .input--checkbox svg,
		.input--checkbox-parent .input--checkbox input {
			display: block;
			height: 100%;
			width: 100%;
		}

		.input--checkbox-parent label {
			position: absolute;
			left: 2rem;
			top: 0;
		}

		.input--radio-label {
			color: rgba(var(--text-color-rgb), .65);
			font-weight: 500;
			font-size: 1rem;
		}

		.input--radio-container {
			margin: auto;
			margin-top: 1.1rem;
		}

		.input--radio {
			cursor: pointer;
			display: inline-block;
			float: left;
			-webkit-user-select: none;
			user-select: none;
		}

		.input--radio:not(:first-child) {
			margin-left: 20px;
		}

		.input--radio svg {
			fill: none;
			vertical-align: middle;
			filter: drop-shadow(var(--box-shadow));
		}

		.input--radio svg circle {
			stroke-width: 2;
			stroke: rgba(var(--muted-color-rgb), 0.4);
		}

		.input--radio svg path {
			stroke: var(--secondary-color);
		}

		.input--radio svg path.input--radio-inner {
			stroke-width: 6;
			stroke-dasharray: 19;
			stroke-dashoffset: 19;
		}

		.input--radio svg path.input--radio-outer {
			stroke-width: 2;
			stroke-dasharray: 57;
			stroke-dashoffset: 57;
		}

		.input--radio input {
			display: none;
		}

		.input--radio input:checked+svg path {
			transition: all 0.4s ease;
		}

		.input--radio input:checked+svg path.input--radio-inner {
			stroke-dashoffset: 38;
			transition-delay: 0.3s;
		}

		.input--radio input:checked+svg path.input--radio-outer {
			stroke-dashoffset: 0;
		}

		.input--radio span {
			display: inline-block;
			vertical-align: middle;
			font-weight: 500;
			color: rgba(var(--text-color-rgb), .65);
			font-size: 1rem;
		}

		.mobile--select .select2-container--default .select2-selection--single {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		.mobile--field {
			border-top-left-radius: 0!important;
			border-bottom-left-radius: 0!important;
		}

	/* 1.4 Basic Button Class */

		.button {
			color: white;
			height: 3rem;
			outline: none;
			border: none;
			border-radius: var(--border-radius);
			font-weight: 600;
			font-size: 1rem;
			padding: 0 2.5rem;
			width: auto;
			box-shadow: var(--box-shadow);
		}

		.button:disabled {
			opacity: 0.3;
			filter: grayscale(1);
		}

		.button--primary {
			background-color: var(--primary-color);
		}

		.button--secondary {
			background-color: var(--secondary-color);
		}

		.button--100 {
			width: 100%;
			max-width: 400px;
		}

		.button--add-rp {
			margin: 0.9rem 0;
			background-color: rgba(var(--secondary-color-rgb), .15);
			color: var(--secondary-color);
			border: none;
			outline: none;
			border-radius: var(--border-radius);
			font-weight: 700;
			font-size: 0.9rem;
			padding: 0.4rem 0.9rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.button--add-rp>svg {
			width: 1rem;
			height: 1rem;
		}

		.button--delete-rp {
			margin: 0.3rem 0;
			color: rgba(var(--text-color-rgb), 0.4);
			background-color: rgba(var(--text-color-rgb), 0.05);
			border: none;
			outline: none;
			border-radius: var(--border-radius);
			font-weight: 700;
			padding: 0.6rem 0.6rem;
			display: flex;
			justify-content: center;
			align-items: center;
			width: auto;
			box-shadow: var(--box-shadow);
		}

		.button--delete-rp>svg {
			width: 1.3rem;
			height: 1.3rem;
		}

		.button--add-ct {
			position: fixed;
			right: 2rem;
			bottom: 6rem;
			margin: 0.3rem 0;
			background-color: var(--secondary-color);
			color: #FFF;
			border: none;
			outline: none;
			border-radius: var(--border-radius);
			box-shadow: 0 0 30px rgba(var(--muted-color-rgb), 0.75);
			font-weight: 700;
			font-size: 1.3rem;
			padding: 0.4rem;
			display: flex;
			justify-content: center;
			align-items: center;
			width: auto;
			z-index: 4;
		}

		.button--add-ct svg {
			width: 2rem;
			height: 2rem;
		}

		@media only screen and (min-width: 768px) {
			.button--add-ct {
				bottom: 2.5rem;
			}
		}

		@media only screen and (max-width: 768px) {
			.button--mb-100 {
				width: 100%;
				margin-top: 0.5rem;
			}
		}

	/* 1.5 Commonly Used Class */

		.loader--overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgb(0 0 0);
			z-index: 9999;
			display: none;
			align-items: center;
			justify-content: center;
		}

		.error--input-txt {
			position: relative;
			color: var(--danger-color);
			font-weight: 600;
			font-size: 1rem;
			margin: 0.5rem 0;
		}

		.info--txt {
			color: var(--info-color);
		}

		.report--msg {
			position: relative;
			font-weight: 500;
			font-size: 0.85rem;
			margin-bottom: 0.15rem;
		}

		.report--msg-s {
			color: var(--success-color);
		}

		.report--msg-d {
			color: var(--danger-color);
		}

		.report--msg-w {
			color: var(--warning-color);
		}

		.report--msg-i {
			color: var(--info-color);
		}

		.main--title {
			color: var(--title-color);
			font-weight: 600;
			font-size: 1.4rem;
			margin: 0.9rem 0;
		}

		.main--title-small {
			color: var(--title-color);
			font-weight: 600;
			font-size: 1.1rem;
			margin: 0.9rem 0;
		}

		.sub--title {
			color: var(--title-color);
			font-weight: 600;
			font-size: 1.1rem;
			margin: 0.9rem 0;
		}

	/* 1.6 Navbar Class */

		.navbar--top {
            position: fixed;
            top: 0;
            width: 100%;
			min-height: 4rem;
            z-index: 1000;
			background-color: #FFF;
			box-shadow: var(--box-shadow);
        }

		.navbar--end-ic {
			outline: none;
			border: none;
			background-color: transparent;
			margin: 0 0.2rem;
		}

		.navbar--end-ic>svg {
			width: 1.6rem;
			height: 1.6rem;
			stroke: rgba(var(--text-color-rgb), 0.8);
		}

		.navbar--end-ic:hover>svg {
			stroke: var(--secondary-color);
		}

		.navbar--links-pc {
			padding: 0;
			margin: 0 0.4rem;
			height: 3rem;
		}

		.navbar--title-container {
			text-align: left;
		}

		.navbar--title {
			font-size: 1.1rem;
			color: rgba(var(--text-color-rgb), 0.85);
			font-weight: 600;
			margin: 0 0.4rem;
			margin-bottom: 0.2rem;
			text-align: left;
		}

		.navbar--role {
			font-size: 0.8rem;
			font-weight: 500;
			margin-left: 0.4rem;
			color: var(--primary-color)!important;
			text-align: left;
		}

		.navbar--links-pc a {
			font-weight: 500;
			font-size: 1rem;
			color: var(--text-color);
			margin-right: 0.4rem;
		}

		.navbar--links-pc a {
			position: relative;
			text-decoration: none;
		}

		.navbar--links-pc a:hover, .navbar--links-pc li.active a {
			color: var(--primary-color)!important;
		}

		.navbar--links-pc a::after {
			content: "";
			position: absolute;
			left: 50%;
			bottom: -3px;
			width: 0;
			height: 2px;
			background-color: var(--primary-color)!important;
			transition: width 0.4s ease, left 0.4s ease;
		}

		.navbar--links-pc a:hover::after, .navbar--links-pc li.active a::after {
			width: 100%;
			left: 0;
		}

		.navbar--role {
		  position: relative;
		  min-width: 150px;
		  height: 25px;
		  perspective: 600px;
		  overflow: hidden;
		}

		.navbar--role span {
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  text-align: left;
		  line-height: 25px;
		  backface-visibility: hidden;
		  transform-style: preserve-3d;
		}

		.navbar--role .mb--name {
			animation: flipTxFst 10s infinite;
		}

		.navbar--role .mb--role {
			animation: flipTxScd 10s infinite;
		}

		@keyframes flipTxFst {
			0%, 45% {transform: rotateX(0deg); opacity: 1;}
			50%, 100% {transform: rotateX(180deg); opacity: 0;}
		}

		@keyframes flipTxScd {
			0%, 45% {transform: rotateX(-180deg); opacity: 0;}
			50%, 95% {transform: rotateX(0deg); opacity: 1;}
			100% {transform: rotateX(180deg); opacity: 0;}
		}

		/* 1.7 Footerbar Class */

		.bottom--nav {
			position: fixed;
			bottom: -0.5rem;
			padding: 0 0.6rem;
			width: 100%;
			overflow: hidden;
		}

		.bottom--nav nav {
			background: #FFF;
			border-radius: var(--border-radius);
			box-shadow: 2px 0px 3px rgba(var(--muted-color-rgb), .35);
			margin-top: 4px;
		}

		.bottom--nav ul {
			display: flex;
			width: 100%;
			text-align: center;
			align-items: center;
			list-style: none;
			position: relative;
			padding: 0px;
			height: 4.6rem;
		}

		.bottom--nav ul>li {
			position: relative;
			flex: 1;
			width: 100%;
			height: 4.6rem;
			box-sizing: border-box;
		}

		.bottom--nav-link {
			color: rgba(var(--text-color-rgb), 0.5);
			stroke: rgba(var(--text-color-rgb), 0.5);
			text-decoration: none;
			font-weight: 600;
			font-size: 0.8rem;
		}

		.bottom--nav-link>svg {
			margin-top: 0.8rem;
		}

		.bottom--nav-link:hover {
			color: var(--secondary-color);
			stroke: var(--secondary-color);
		}

		.bottom--nav ul>li.active .bottom--nav-link {
			color: var(--primary-color);
		}

		.bottom--nav-link svg {
			height: 1.5rem;
			width: 1.5rem;
			transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

		.bottom--nav-link p {
			transform: translateY(5px);
		}

		@media only screen and (min-width: 768px) {
			.bottom--nav {
				display: none;
			}
		}

		/* 1.8 Custom Modal Class */

		.modal--custom-top-offset {
			margin-top: 4.1rem;
		}

		.modal--custom-top-offset .modal-dialog {
			pointer-events: auto;
			background-color: var(--background-color);
		}

		.modal--custom-top-offset .modal-content {
			overflow-y: auto;
		}

		.modal--custom-top-offset .modal-body {
			background-color: var(--background-color);
		}

	/* 1.9 Custom Confirm Popup Class */

		.confirm--overlay {
			position: fixed;
			inset: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1055;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease;
		}

		.confirm--overlay.show {
			opacity: 1;
			visibility: visible;
		}

		.confirm--prompt {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 1055;
			background-color: #fff;
			box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
			padding: 1rem;
			transform: translateY(100%);
			transition: transform 0.4s ease;
		}

		.confirm--prompt.show {
			transform: translateY(0%);
		}

		.confirm--prompt-confirm, .confirm--prompt-cancel {
			padding: 0.5rem 1.6rem;
			border: none;
			font-size: 1.2rem;
			color: #FFF;
		}

		.confirm--prompt-confirm {
			background-color: var(--primary-color);
		}

		.confirm--prompt-cancel {
			background-color: var(--muted-color);
		}

/* --------- 3. Common Pages --------- */

	/* 3.1 Login Page Css */

		.login--container {
			max-width: 400px;
			width: 100%;
			text-align: center;
		}

		.login--container .login--logo {
			width: 4rem;
			margin-bottom: 1rem;
		}

		.login--title {
			font-size: 1.5rem;
			font-weight: 600;
			color: rgba(var(--text-color-rgb), 0.6);
			margin-bottom: 1.5rem;
		}

		.login--sub {
			font-size: 1rem;
			color: var(--muted-color);
			font-weight: 500;
		}

		@media only screen and (max-width: 768px) {
			.login--container {
				padding: 1.7rem;
			}
		}

	/* 3.2 Start Page Css */

		.sp--out-box {
            height: 100dvh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .sp--in-box {
            display: inline-flex;
			width: 100%;
            flex-direction: column;
            text-align: center;
            padding: 20px;
            justify-content: center;
        }

		.sp--role-box {
			width: 100%;
			margin-bottom: 1rem;
		}

        .sp--role-box .role--radio-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: 0.3s;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
            position: relative;
			height: 5rem;
			padding: 0 1.4rem 0 1.4rem;
            color: var(--secondary-color);
			font-weight: 600;
			width: 100%;
			outline: none;
			border: none;
			background-color: transparent;
        }

        .sp--role-box .role--radio-label:hover {
            border: 1px solid var(--secondary-color);
        }

        .sp--role-box .role--radio-label h4 {
			text-align: left;
            margin: 0;
			font-weight: 700;
            font-size: 1.2rem;
			color: var(--title-color);
        }

        .sp--role-box input[type="radio"]:checked + .role--radio-label h4 {
			color: #FFF;
		}

        .sp--role-box .role--radio-label p {
            margin: 0.4rem 0 0;
            font-size: 0.9rem;
			text-align: left;
        }

        .sp--role-box .role--check-icon {
            display: none;
            height: 2rem;
            width: 2rem;
            color: #007bff;
        }

        .sp--role-box input[type="radio"] {
            display: none;
        }

        .sp--role-box input[type="radio"]:checked + .role--radio-label {
			background-color: var(--secondary-color);
			color: #FFF;
        }

        .sp--role-box input[type="radio"]:checked + .role--radio-label .role--check-icon {
            display: block;
			font-size: 2.7rem;
			color: #FFFF;
        }

		@media only screen and (max-width: 768px) {
			@media (orientation: landscape) {
				.sp--out-box {
					height: 100%;
				}

			}
		}

	/* 3.3 Submit Report Page Css */
		.nbbk--parent {
			display: grid;
			grid-template-columns: 1fr 7rem 2.5rem;
			width: 100%;
			gap: 1rem;
		}

		.nbbk--1 {
			flex: 0 0 60%;
		}

		.nbbk--2 {
			flex: 0 0 25%;
		}

		/* 3.4 Contact Card Css */

		.contact--card {
			position: relative;
			width: 100%;
			height: 100%;
			min-height: 100px;
			background: #FFF;
			padding: 1rem 1rem 1rem 1.4rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow-spread);
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.contact--card::before {
			content: '';
			position: absolute;
			left: 0;
			width: 0.5rem;
			height: 100%;
			top: 0;
			border-top-left-radius: var(--border-radius);
			border-bottom-left-radius: var(--border-radius);
		}

		.contact--yellow::before {
			background-color: rgb(var(--yellow-color-rgb));
		}

		.contact--active::before {
			background-color: rgb(var(--active-color-rgb));
		}

		.contact--orange::before {
			background-color: rgb(var(--orange-color-rgb));
		}

		.contact--violet::before {
			background-color: rgb(var(--violet-color-rgb));
		}

		.contact--attended::before {
			background-color: rgb(var(--attended-color-rgb));
		}

		.contact--blue::before {
			background-color: rgb(var(--blue-color-rgb));
		}

		.contact--in-faith::before {
			background-color: rgb(var(--in-faith-color-rgb));
		}

		.contact--green::before {
			background-color: rgb(var(--green-color-rgb));
		}

		.contact--ready::before {
			background-color: rgb(var(--ready-color-rgb));
		}

		.contact--grey::before {
			background-color: rgb(var(--grey-color-rgb));
		}

		.contact--in-active::before {
			background-color: rgb(var(--in-active-color-rgb));
		}

		.contact--red::before {
			background-color: rgb(var(--red-color-rgb));
		}

		.contact--negative::before {
			background-color: rgb(var(--negative-color-rgb));
		}

		.contact--yellow-badge {
			background-color: rgba(var(--yellow-color-rgb), 0.15)!important;
			color: rgb(var(--yellow-color-rgb))!important;
		}

		.contact--active-badge {
			background-color: rgba(var(--active-color-rgb), 0.15)!important;
			color: rgb(var(--active-color-rgb))!important;
		}

		.contact--orange-badge {
			background-color: rgba(var(--orange-color-rgb), 0.15)!important;
			color: rgb(var(--orange-color-rgb))!important;
		}

		.contact--violet-badge {
			background-color: rgba(var(--violet-color-rgb), 0.15)!important;
			color: rgb(var(--violet-color-rgb))!important;
		}

		.contact--attended-badge {
			background-color: rgba(var(--attended-color-rgb), 0.15)!important;
			color: rgb(var(--attended-color-rgb))!important;
		}

		.contact--blue-badge {
			background-color: rgba(var(--blue-color-rgb), 0.15)!important;
			color: rgb(var(--blue-color-rgb))!important;
		}

		.contact--in-faith-badge {
			background-color: rgba(var(--in-faith-color-rgb), 0.15)!important;
			color: rgb(var(--in-faith-color-rgb))!important;
		}

		.contact--green-badge {
			background-color: rgba(var(--green-color-rgb), 0.15)!important;
			color: rgb(var(--green-color-rgb))!important;
		}

		.contact--ready-badge {
			background-color: rgba(var(--ready-color-rgb), 0.15)!important;
			color: rgb(var(--ready-color-rgb))!important;
		}

		.contact--grey-badge {
			background-color: rgba(var(--grey-color-rgb), 0.15)!important;
			color: rgb(var(--grey-color-rgb))!important;
		}

		.contact--in-active-badge {
			background-color: rgba(var(--in-active-color-rgb), 0.15)!important;
			color: rgb(var(--in-active-color-rgb))!important;
		}

		.contact--red-badge {
			background-color: rgba(var(--red-color-rgb), 0.15)!important;
			color: rgb(var(--red-color-rgb))!important;
		}

		.contact--negative-badge {
			background-color: rgba(var(--negative-color-rgb), 0.15)!important;
			color: rgb(var(--negative-color-rgb))!important;
		}

		.contact--header, .contact--footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 5px;
		}

		.contact--title {
			flex: 1;
			margin: 0;
			font-size: 1.15rem;
			font-weight: 600;
			color: var(--title-color);
			overflow: hidden;
			min-width: 0;
			white-space: nowrap;
			cursor: pointer;
			text-overflow: ellipsis;
		}

		.contact--badge {
			flex-shrink: 0;
			white-space: nowrap;
			background-color: rgba(var(--secondary-color-rgb), .25);
			color: var(--secondary-color);
			padding: 0.2rem 0.8rem;
			border-radius: var(--border-radius);
			font-size: 0.8rem;
			font-weight: 600;
		}

		.contact--list {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			gap: 15px;
		}

		.contact--list li {
			font-size: 0.9rem;
			padding-right: 0.5rem;
			border-right: 1px solid rgba(var(--text-color-rgb), 0.1);
			color: rgba(var(--text-color-rgb), 0.6);
			font-weight: 500;
		}

		.contact--list li>span {
			font-weight: 600;
			color: rgba(var(--text-color-rgb), 0.8);
		}

		.contact--list li>span.popup--present {
			cursor: pointer;
		}

		.contact--list li:last-child {
			border-right: none;
			margin-right: 0;
			padding-right: 0;
		}

		.contact--menu-icon svg {
			width: 2rem;
			height: 2rem;
			color: rgba(var(--text-color-rgb), 0.5);
			cursor: pointer;
			background-color: rgba(var(--text-color-rgb), 0.025);
			border-radius: 50%;
			padding: 0.3rem;
		}

		/* 3.5 Contact Popup Css */

		.action--tabs .nav-tabs {
			border-bottom: 2px solid #e9ecef;
		}

		.action--tabs .nav-link {
			border: none;
			border-bottom: 0.25rem solid transparent;
			padding: 1rem 1.5rem;
			margin-bottom: -2px;
			font-weight: 500;
			color: #6c757d;
			transition: all 0.3s ease;
		}

		.action--tabs .nav-link:hover {
			border-bottom-color: #0d6efd50;
			color: #0d6efd;
		}

		.action--tabs .nav-link.active {
			border-bottom-color: var(--secondary-color);
			color: var(--secondary-color);
			font-weight: 600;
		}

		.tab-pane.fade {
			transition: all 0.2s ease-out;
		}

		.tab-pane.fade.show {
			animation: fadeInACT 0.5s ease-out;
		}

		@keyframes fadeInACT {
			from {
				opacity: 0;
				transform: translateY(10px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* 3.6 Contact Popup Actions Css */

		.action--card {
			position: relative;
			border-radius: var(--border-radius);
			margin-top: 65px;
		}

		.action--header {
			background-color: var(--secondary-color);
			width: 100%;
			border-top-left-radius: var(--border-radius);
			border-top-right-radius: var(--border-radius);
			text-align: center;
			padding-bottom: 0.05rem;
			box-shadow: var(--box-shadow-spread);
		}

		.action--header-active {
			background-color: rgb(var(--active-color-rgb));
		}

		.action--header-ready {
			background-color: rgb(var(--ready-color-rgb));
		}

		.action--header-attended {
			background-color: rgb(var(--attended-color-rgb));
		}

		.action--header-in-faith {
			background-color: rgb(var(--in-faith-color-rgb));
		}

		.action--header-in-active {
			background-color: rgb(var(--in-active-color-rgb));
		}

		.action--header-negative {
			background-color: rgb(var(--negative-color-rgb));
		}

		.action--header>.action--avatar>img {
			position: absolute;
			top: -48px;
			left: calc(calc(100% - 96px) / 2);
			border-radius: 50%;
			width: 96px;
			height: 96px;
			padding: 10px;
			background-color: #FFF;
			box-shadow: var(--box-shadow);
		}

		.action--avatar {
			padding-bottom: 56px;
		}

		.action--header>h5 {
			display: block;
			color: #DADADA;
			font-weight: 600;
		}

		.action--header>ul {
			list-style: none;
			color: #FFF;
			padding: 0;
		}

		.action--header>ul>li {
			display: inline-block;
			font-size: 0.8rem;
			border-right: 1px solid #FFF;
			padding: 0 0.7rem 0 0.7rem;
		}

		.action--header>ul>li:last-child {
			border-right: none;
		}

		.action--header>ul>li>span {
			font-size: 0.9rem;
			font-weight: 500;
		}

		.action--tabs {
			background-color: #FFF;
		}

		.action--body {
			padding: 1rem;
			background-color: #FFF;
		}

		.action--button {
			width: 100%;
			font-weight: 500;
			font-size: 1.1rem;
			border-radius: var(--border-radius);
			padding: 0.65rem 0.8rem;
			border: none;
			outline: none;
			margin-bottom: 0.75rem;
			position: relative;
			color: rgba(var(--muted-color-rgb), 0.7);
			border: 1px solid rgba(var(--muted-color-rgb), 0.7);
			background-color: #FFF;
		}

		.action--button.done {
			border: 2px solid var(--secondary-color);
			color: var(--secondary-color);
			background-color: #FFF;
			font-weight: 600;
		}

		.action--button>span:first-child {
			float: left;
		}

		.action--button>span:nth-child(2) {
			float: right;
		}

		.action--button>span>i, .action--button>span>svg {
			display: none;
		}

		.action--button>svg {
			width: 20px;
			height: 20px;
		}

		.action--button.disable {
			pointer-events: none;
			cursor: not-allowed;
			color: rgba(var(--muted-color-rgb), 0.7);
			border: 1px solid rgba(var(--muted-color-rgb), 0.7);
			background-color: #FFF;
		}

		.action--button span.show--icon {
			color: var(--secondary-color);
		}

		.action--button.done span>i, .action--button.done span>svg, .action--button span.show--icon>svg {
			display: inline-block;
		}

		.action--button-inactive {
			background-color: #FFF;
			color: rgb(var(--in-active-color-rgb));
			border: 1px solid rgb(var(--in-active-color-rgb));
			font-size: 1rem;
			padding: 0.55rem 0.8rem;
			margin-right: 0.5rem;
			min-width: 120px;
		}

		.action--button-negative {
			background-color: #FFF;
			color: rgb(var(--negative-color-rgb));
			border: 1px solid rgb(var(--negative-color-rgb));
			font-size: 1rem;
			padding: 0.55rem 0.8rem;
			min-width: 7rem;
			text-align: center;
			min-width: 120px;
		}

		.action--button-reactivate {
			background-color: #FFF;
			color: rgb(var(--green-color-rgb));
			border: 1px solid rgb(var(--green-color-rgb));
			font-size: 1rem;
			padding: 0.55rem 0.8rem;
			min-width: 7rem;
			text-align: center;
			margin-right: 0.5rem;
			min-width: 120px;
		}

		.action--button-negative>span, .action--button-inactive>span, .action--button-reactivate>span {
			float: none!important;
		}

		.actions--label {
			font-weight: 500;
			color: var(--text-color);
		}

		.action--tabs-report {
			background-color: #FFF;
			box-shadow: 0px 9px 18px #9899a75c;
			border-bottom-left-radius: var(--border-radius);
			border-bottom-right-radius: var(--border-radius);
			padding: 1.5rem;
		}

		@media only screen and (max-width: 768px) {
			.action--body .input--checkbox-parent {
				margin-top: 0.5rem;
				margin-bottom: 0.5rem;
			}
		}

		/* 3.7 Dashboard Css */

		.dbd--6fld-container {
			background-color: #FFF;
			color: var(--text-color);
			padding: 1rem;
			border-radius: var(--border-radius);
			font-family: 'Outfit', sans-serif;
			max-width: 100%;
			transition: box-shadow 0.3s ease;
			box-shadow: var(--box-shadow-spread);
			margin-bottom: 0.7rem;
		}

		.dbd--6fld-title {
			font-size: 0.9rem;
			color: rgba(var(--text-color-rgb), 0.8);
			font-weight: 600;
			flex: 1;
			margin-bottom: 0.4rem;
		}

		.dbd--6fld-value {
			font-size: 1.571rem;
			font-weight: 700;
		}

		.dbd--6fld-tdy {
			font-size: 0.9rem;
			font-weight: 600;
			border-radius: 0.2rem;
			padding: 0.3rem 0.4rem;
			margin-left: 0.3rem;
			white-space: nowrap;
		}

		.dbd--6fld-tdy i {
			font-style: normal;
			color: var(--muted-color);
			font-weight: 500;
			font-size: 0.8rem;
			margin-left: 0.15rem;
		}

		.txt--yellow-100 {
			color: rgb(var(--yellow-color-rgb));
		}

		.txt--yellow-100 .dbd--6fld-tdy {
			background-color: rgba(var(--yellow-color-rgb), 0.1);
		}

		.txt--active-100 {
			color: rgb(var(--active-color-rgb));
		}

		.txt--active-100 .dbd--6fld-tdy {
			background-color: rgba(var(--active-color-rgb), 0.1);
		}

		.txt--orange-100 {
			color: rgb(var(--orange-color-rgb));
		}

		.txt--orange-100 .dbd--6fld-tdy {
			background-color: rgba(var(--orange-color-rgb), 0.1);
		}

		.txt--violet-100 {
			color: rgb(var(--violet-color-rgb));
		}

		.txt--violet-100 .dbd--6fld-tdy {
			background-color: rgba(var(--violet-color-rgb), 0.1);
		}

		.txt--attended-100 {
			color: rgb(var(--attended-color-rgb));
		}

		.txt--attended-100 .dbd--6fld-tdy {
			background-color: rgba(var(--attended-color-rgb), 0.1);
		}

		.txt--blue-100 {
			color: rgb(var(--blue-color-rgb));
		}

		.txt--blue-100 .dbd--6fld-tdy {
			background-color: rgba(var(--blue-color-rgb), 0.1);
		}

		.txt--green-100 {
			color: rgb(var(--green-color-rgb));
		}

		.txt--green-100 .dbd--6fld-tdy {
			background-color: rgba(var(--green-color-rgb), 0.1);
		}

		.txt--ready-100 {
			color: rgb(var(--ready-color-rgb));
		}

		.txt--ready-100 .dbd--6fld-tdy {
			background-color: rgba(var(--ready-color-rgb), 0.1);
		}

		.txt--grey-100 {
			color: rgb(var(--grey-color-rgb));
		}

		.txt--grey-100 .dbd--6fld-tdy {
			background-color: rgba(var(--grey-color-rgb), 0.1);
		}

		.txt--in-active-100 {
			color: rgb(var(--in-active-color-rgb));
		}

		.txt--in-active-100 .dbd--6fld-tdy {
			background-color: rgba(var(--in-active-color-rgb), 0.1);
		}

		.txt--red-100 {
			color: rgb(var(--red-color-rgb));
		}

		.txt--red-100 .dbd--6fld-tdy {
			background-color: rgba(var(--red-color-rgb), 0.1);
		}

		.txt--negative-100 {
			color: rgb(var(--negative-color-rgb));
		}

		.txt--negative-100 .dbd--6fld-tdy {
			background-color: rgba(var(--negative-color-rgb), 0.1);
		}

		.txt--in-faith-100 {
			color: rgb(var(--in-faith-color-rgb));
		}

		.txt--in-faith-100 .dbd--6fld-tdy {
			background-color: rgba(var(--in-faith-color-rgb), 0.1);
		}

		.txt--service-support-100 {
			color: rgb(var(--service-support-color-rgb));
		}

		.txt--service-support-100 .dbd--6fld-tdy {
			background-color: rgba(var(--service-support-color-rgb), 0.1);
		}

		/* 3.8 Report Css */

		.report--card {
			position: relative;
			background-color: #FFF;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			padding: 0.8rem;
			margin-bottom: 1rem;
		}
		
		.report--header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.report--title {
			font-size: 1.1rem;
			font-weight: 700;
			color: var(--text-color);
		}

		.report--active-container {
			display: flex;
			align-items: center;
			gap: 0;
		}

		.report--active-item {
			font-size: 0.8rem;
			color: var(--muted-color);
			padding-right: 0.4rem;
			margin-right: 0.4rem;
			border-right: 1px solid #ccc;
		}

		.report--active-item>i {
			font-size: 0.9rem;
			font-weight: 600;
			font-style: normal;
			color: rgba(var(--text-color-rgb), 0.6);
		}

		.report--active-container .report--active-item:last-child {
			border-right: none;
		}

		.report--body {
			display: grid;
			grid-template-columns: 30% 30% 40%;
			width: 100%;
			margin-top: 0.3rem;
		}

		.report--block {
			flex: 1;
			color: rgba(var(--text-color-rgb), 0.6);
			margin: 0.4rem 0.2rem;
			border-radius: var(--border-radius);
			padding: 0.5rem 0.6rem;
		}

		.report--block>h4 {
			font-weight: 600;
			font-size: 1.9rem;
		}

		.report--block-active {
			color: rgb(var(--active-color-rgb));
			background-color: rgb(var(--active-color-rgb), 0.1);
		}

		.report--block-ready {
			color: rgb(var(--ready-color-rgb));
			background-color: rgba(var(--ready-color-rgb), 0.1);
		}

		.report--split-block {
			display: flex;
			flex-direction: column;
			margin: 0.25rem 0.2rem;
		}

		.report--half {
			flex: 1;
			padding: 0.5rem 0.7rem;
			border-radius: var(--border-radius);
			font-size: 0.8rem;
			width: 100%;
		}

		.report--half>i {
			font-weight: 600;
			font-style: normal;
			font-size: 0.9rem;
		}

		.report--attended {
			color: rgb(var(--attended-color-rgb));
			background-color: rgba(var(--attended-color-rgb), 0.1);
		}

		.report--infaith {
			margin-top: 0.4rem;
			color: rgb(var(--in-faith-color-rgb));
			background-color: rgba(var(--in-faith-color-rgb), 0.1);
		}

/*--------- 8. Replacement Css ---------*/

		/* 8.1 Select2 Replacement */

		.select2-container--default .select2-selection--single {
			height: 3rem;
			font-size: 0.9rem;
			width: 100%;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			border: none;
			outline: none;
			margin-bottom: 0.8rem;
			padding: 0 1rem;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%239d9d9d"><path d="M5 7l5 5 5-5H5z"/></svg>') no-repeat right 10px center;
			background-color: #FFF;
			background-size: 1.5rem;
			padding-right: 30px;
		}

		.select2-container--default .select2-selection--single .select2-selection__rendered {
			line-height: 3rem;
		}

		.select2-container--default .select2-selection--single .select2-selection__arrow {
			display: none;
		}

		.select2-dropdown {
			border-radius: var(--border-radius);
			top: -11px;
			border: none;
			box-shadow: var(--box-shadow);
		}

		.select2-container--default .select2-search--dropdown .select2-search__field {
			font-size: 0.9rem;
			width: 100%;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow-spread);
			border: none;
			outline: none;
			padding: 0.5rem 0.8rem;
			margin: 0.3rem 0;
		}

		.select2-container--default .select2-selection--multiple {
			height: 3rem;
			font-size: 0.9rem;
			width: 100%;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			border: none;
			outline: none;
			margin-bottom: 0.8rem;
			padding: 0 1rem;
		}

		.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
			border-right: 1px solid #FFF;
			color: #FFF;
		}

		.select2-container--default .select2-selection--multiple .select2-selection__choice {
			background-color: var(--secondary-color);
			border: none;
			color: #FFF;
		}

		.select2-container--default.select2-container--focus .select2-selection--multiple {
			border: none;
			outline: none;
		}

		.select2-container--default .select2-selection--multiple {
			overflow: hidden;
		}

		.select2-container--default .select2-results__option--disabled {
			text-decoration: line-through;
			color: #B3B3B3;
		}

		.select2-results__option {
			padding: 10px 20px !important;
		}

		/* 8.2 Dropdown Replacement */

		.dropdown-toggle::after {
			display: none;
		}

		/* 8.3 Toastify Replacement */
		.toastify {
			color: var(--text-color);
		}

/*--------- 9. Animation Css ---------*/

	/* 9.1 Common Animations */

		.ocean--anim {
			height: 80px;
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			overflow-x: hidden;
		}

		.wave--anim {
			position: absolute;
			width: 200%;
			height: 100%;
			transform: translate3d(0, 0, 0);
			opacity: 0.8;
		}

		.wave--anim:nth-of-type(1) {
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%233886C9'/%3E%3C/svg%3E");
			animation: waveAnim 10s -3s linear alternate infinite;
		}

		.wave--anim:nth-of-type(2) {
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%2376C893'/%3E%3C/svg%3E");
			bottom: 0;
			animation: waveAnim 18s linear alternate infinite;
		}

		@keyframes waveAnim {
			0% {transform: translateX(0);}
			50% {transform: translateX(-25%);}
			100% {transform: translateX(-50%);}
		}

		@media only screen and (max-width: 1200px) {
			@media (orientation: landscape) {
				.ocean--anim {
					display: none;
				}
			}
		}

		.no--content-loader-container {
			height: 100%;
			width: 100%;
			animation-duration: 1.25s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-name: pcHdAn;
			background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
			background-size: 900px;
			position: relative;
			opacity: 0.55;
		}

		.no--content-loader {
			width: 15%;
			max-width: 90px;
			position: absolute;
			left: 45%;
			top: 40%;
			aspect-ratio: 1;
			display: grid;
			border: 4px solid #0000;
			border-radius: 50%;
			border-right-color: var(--secondary-color);
			animation: ncLdAn 1s infinite linear;
		}

		.no--content-loader::before, .no--content-loader::after {    
			content: "";
			grid-area: 1/1;
			margin: 2px;
			border: inherit;
			border-radius: 50%;
			animation: ncLdAn 2s infinite;
		}

		.no--content-loader::after {
			margin: 8px;
			animation-duration: 3s;
		}

		@keyframes ncLdAn{ 
			100% {transform: rotate(1turn)}
		}

		@keyframes pcHdAn{
			0%{
				background-position: -468px 0
			}
			100%{
				background-position: 468px 0
			}
		}