@import "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300&display=swap";

:root {
	/* colors */
	--primary: #26BDBD;
	--primary-rgb: 30, 189, 189;
	--primary-dark: #006471;
	--primary-light: #D2F2F2;
	--primary-lighter: #F5FFFF;
	--primary-invert: #90FFFF;
	
	--gray-1: #F5F6F8;
	--gray-2: #EEEEEE;
	--gray-3: #B9B9B9;
	--gray-4: #707070;

	--blue-1: #E8F4FD;
	--blue-2: #014680;

	--azure-1: #CFE6FE;
	--azure-2: #008FFF;
	--azure-bg: #0CA2F6;
	
	--navy-1: #E8F4FD;
	--navy-2: #014680;

	--black-1: #101D23;
	
	--danger: red;
	--danger-dark: #A20D03;
	--danger-light: #F6E6E5;
	--danger-invert: #FA8072;
	
	--shadow: rgba(0, 0, 0, 0.5);
	
	/* sizes */
	--p-font-size: 1rem;
	--header-height: 4.375rem;
	--footer-min-height: 2.87rem;
	--fixed-width-nav-width: 18.75rem;
	--line-height: 1.1875;
	
	--font-weight-regular: normal;
	--font-weight-medium: 500;
	--swiper-navigation-size: 21px;
}
 
html {
	font-size: 16px;
}

body {
	font-family: lato;
	font-size: var(--p-font-size);
	line-height: var(--line-height);
	background-color: none;
}

/* Styles - only set necessary style for each components */

	/* Tile */
		.header-width {
			max-width: 100vw;
		}
		
		.tile-sm-width {
			max-width: 100vw;
		}
		
		.tile-md-width {
			max-width: 100vw;
		}
		
		.tile-lg-width {
			max-width: 100vw;
		}
		
		.tile-width {
			max-width: 100vw;
		}
		
		.layout-width {
			max-width: 100vw;
		}
		
		.heading-width {
			max-width: 100vw;
		}
		
		.dashboard-width {
			max-width: 100vw;
		}
		
		@media (min-width: 768px) { /* md */
			.tile-sm-width {
				max-width: 500px;
			}
			
			.tile-md-width {
				max-width: 600px;
			}
			
			.tile-lg-width {
				max-width: 600px;
			}
		
			.tile-width {
				max-width: 500px;
			}
			
			.layout-width {
				max-width: 900px;
			}
			
			.heading-width {
				max-width: 500px;
			}
			
			.dashboard-width-2 {
				max-width: 600px;
			}
		}
		
		@media (min-width: 992px) { /* lg */
			.header-width {
				max-width: 1200px;
			}
			
			.tile-lg-width {
				max-width: 1200px;
			}
			
			.tile-width {
				max-width: 960px;
			}
			
			.layout-width {
				max-width: 1200px;
			}
			
			.heading-width {
/* 				max-width: 650px; */
				max-width: 960px;
			}
			
			.dashboard-width {
				max-width: 1200px;
			}
			
			.dashboard-width-recipient {
				max-width: 1050px;
			}
		}
		
	/* Width */
		.width-20 {
			width : 20rem;
		}
		
		.width-21 {
			width : 21rem;
		}
		
		.width-30 {
			width : 30rem;
		}
		
		.width-32 {
			width : 32rem;
		}
		
		.width-50 {
			width : 50rem;
		}
		
		.width-67 {
			width : 50rem;
		}
		
	/* Height */
		.mvh-100 {
			min-height: 100vh;
		}
		
		@media (min-width: 768px) { /* md */
			.mvh-md-100 {
				min-height: 100vh;
			}
		}

	/* Colors - background */
	
		.bg-primary {
			background-color: var(--primary) !important;
		}
		
		.bg-primary-light {
			background-color: var(--primary-light) !important;
		}
		
		.bg-primary-invert {
			background-color: var(--primary-invert) !important;
		}
		
		.bg-white {
			background-color: white !important;
		}
		
		.bg-transparent {
			background-color: transparent !important;
		}
		
		.bg-gray-1 {
			background-color: var(--gray-1) !important;
		}
		
		.bg-navy-1 {
			background-color: var(--navy-1) !important;
		}
		
		.bg-alert-light {
			background-color: var(--danger-light) !important;
		}
		
		.bg-azure-bg {
			background-color: var(--azure-bg) !important;
		}
		
		@media (min-width: 768px) { /* md */
			.bg-md-gray-1 {
				background-color: var(--gray-1) !important;
			}
		
			.bg-md-azure-bg {
				background-color: var(--azure-bg) !important;
			}
		}
		
		/* toggle-active */
			.toggle-active.active.active-bg-primary-light,
			.toggle-active.active .active-bg-primary-light {
				background-color: var(--primary-light) !important;
			}
			
			.toggle-active.active.active-bg-white,
			.toggle-active.active .active-bg-white {
				background-color: white !important;
			}
	
	/* Colors - font */
	
		.font-color-primary {
			color: var(--primary) !important;
		}
		
		.font-color-primary-dark {
			color: var(--primary-dark) !important;
		}
		
		.font-color-black {
			color: var(--black-1) !important;
		}
		
		.font-color-white {
			color: white !important;
		}
		
		.font-color-gray-3 {
			color: var(--gray-3) !important;
		}
		
		.font-color-gray-4 {
			color: var(--gray-4) !important;
		}
		
		.font-color-navy-2 {
			color: var(--navy-2) !important;
		}
		
		.font-color-alert {
			color: var(--danger) !important;
		}
		
		.font-color-alert-dark {
			color: var(--danger-dark) !important;
		}

	/* Font */
		.font-medium {
			font-weight: var(--font-weight-medium);
		}
		
		.font-bold {
			font-weight: bold;
		}
		
		.font-italic {
			font-style: italic;
		}
		
		.f-12 {
			font-size: 12px;
		}
		
		.f-14 {
			font-size: 14px;
		}
		
		.f-16 {
			font-size: 16px;
		}
		
		.f-20 {
			font-size: 20px;
		}
		
		.f-22 {
			font-size: 22px;
		}
		
		.f-30 {
			font-size: 30px;
		}
		
		.f-38 {
			font-size: 38px;
		}
		
		.font-size-inherit {
			font-size: inherit;
		}
	
	/* Border */
	
		.border { /* bootstrap */
			border: solid 1px !important;
		}
		
		.border-radius-none {
			border-radius: 0px !important;
		}
		
		.border-radius-sm {
			border-radius: 5px !important;
		}
		
		.border-radius-md {
			border-radius: 10px !important;
		}
		
		.border-radius-top-none {
			border-top-left-radius: 0 !important;
			border-top-right-radius: 0 !important;
		}
		
		.border-radius-bottom-none {
			border-bottom-left-radius: 0 !important;
			border-bottom-right-radius: 0 !important;
		}
		
		.border-color-primary {
			border-color: var(--primary) !important;
		}
		
		.border-color-primary-dark {
			border-color: var(--primary-dark) !important;
		}
		
		.border-color-gray-2 {
			border-color: var(--gray-2) !important;
		}
		
		.border-color-gray-3 {
			border-color: var(--gray-3) !important;
		}
		
		.border-color-alert {
			border-color: var(--danger) !important;
		}
		
		/* toggle-active */
			.toggle-active.active.active-border-color-primary,
			.toggle-active.active .active-border-color-primary {
				border-color: var(--primary) !important;
			}
			
		/* resolution */
			@media (min-width: 768px) {
				.border-radius-md-none {
					border-radius: 0px !important;
				}
				
				.border-radius-md-sm {
					border-radius: 5px !important;
				}
				
				.border-radius-md-md {
					border-radius: 10px !important;
				}
			}
			
			@media (min-width: 768px) { /* md */
				.border-radius-md-none {
					border-radius: 0px !important;
				}
				
				.border-radius-md-sm {
					border-radius: 5px !important;
				}
				
				.border-radius-md-md {
					border-radius: 10px !important;
				}
			}
			
			@media (min-width: 992px) { /* lg */
				.border-radius-lg-none {
					border-radius: 0px !important;
				}
				
				.border-radius-lg-sm {
					border-radius: 5px !important;
				}
				
				.border-radius-lg-md {
					border-radius: 10px !important;
				}
			}
		
	/* Shadow */		
		.box-shadow {
			box-shadow: 0px 3px 6px var(--shadow);
		}
		
		.box-shadow-none {
			box-shadow: none;
		}
		
		/* toggle-active */
			.toggle-active.active.active-box-shadow,
			.toggle-active.active .active-box-shadow {
				box-shadow: 0px 3px 6px var(--shadow);
			}
			
		/* resolution */
			@media (min-width: 768px) { /* md */
				.box-shadow-md-none {
					box-shadow: none;
				}
				
				.box-shadow-md {
					box-shadow: 0px 3px 6px var(--shadow);
				}
			}
			
			@media (min-width: 992px) { /* lg */
				.box-shadow-lg-none {
					box-shadow: none;
				}
				
				.box-shadow-lg {
					box-shadow: 0px 3px 6px var(--shadow);
				}
			}
			
	/* Cursor */
		.cursor-default {
			cursor: default !important;
		}
		
		.cursor-pointer {
			cursor: pointer;
		}
		
		.cursor-pointer * {
			cursor: pointer;
		}
		
	/* Flex */
		.flex-center {
			justify-content: center;
			align-items: center;
		}
		
		.flex-1 {
			flex: 1;
		}
		
	/* col */
		.col-2_4 {
			flex: 0 0 20%;
			max-width: 20%;
		}
		
		@media (min-width: 768px) { /* md */
			.col-md-2_4 {
				flex: 0 0 20%;
				max-width: 20%;
			}
		}
		
		@media (min-width: 992px) { /* lg */
			.col-lg-2_4 {
				flex: 0 0 20%;
				max-width: 20%;
			}
			
			.col-lg-9_6 {
				flex: 0 0 80%;
				max-width: 80%;
			}
		}
		
	/* Margin */
		.mt-00 {
			margin-top: 0px;
		}
		
		.mb-00 {
			margin-bottom: 0px;
		}
		
		.ml-00 {
			margin-left: 0px;
		}
		
		.mr-00 {
			margin-right: 0px;
		}
		
		.mb-0_5 {
			margin-bottom: 0.5rem;
		}
		
		.ml-05 {
			margin-left: 5px;
		}
		
		.mr-05 {
			margin-right: 5px;
		}
		
		.mb-05 {
			margin-bottom: 5px;
		}
		
		.mt-05 {
			margin-top: 5px;
		}
		
		.mt-10 {
			margin-top: 10px;
		}
		
		.mb-10 {
			margin-bottom: 10px;
		}
		
		.ml-10 {
			margin-left: 10px;
		}
		
		.mr-10 {
			margin-right: 10px;
		}
		
		.mb-12 {
			margin-bottom: 12px;
		}
		
		.mt-15 {
			margin-top: 15px;
		}
		
		.mb-15 {
			margin-bottom: 15px;
		}
		
		.ml-15 {
			margin-left: 15px;
		}
		
		.mr-15 {
			margin-right: 15px;
		}
		
		.mt-20 {
			margin-top: 20px;
		}
		
		.mb-20 {
			margin-bottom: 20px;
		}
		
		.ml-20 {
			margin-left: 20px;
		}
		
		.mr-20 {
			margin-right: 20px;
		}
		
		.mt-25 {
			margin-top: 25px;
		}
		
		.mt-30 {
			margin-top: 30px;
		}
		
		.mb-30 {
			margin-bottom: 30px;
		}
		
		.mr-30 {
			margin-right: 30px;
		}
		
		.mt-40 {
			margin-top: 40px;
		}
		
		.mb-40 {
			margin-bottom: 40px;
		}
		
		.ml-40 {
			margin-left: 40px;
		}
		
		.mt-45 {
			margin-top: 45px;
		}
		
		.mt-50 {
			margin-top: 50px;
		}
		
		.mb-50 {
			margin-bottom: 50px;
		}
		
		.mt-55 {
			margin-top: 55px;
		}
		
		.mb-60 {
			margin-bottom: 60px;
		}
		
		.mt-60 {
			margin-top: 60px;
		}
		
		.mt-70 {
			margin-top: 70px;
		}
		
		.mt-80 {
			margin-top: 80px;
		}
		
		.mb-80 {
			margin-bottom: 80px;
		}
		
		.mt-100 {
			margin-top: 100px;
		}
		
		.mb-100 {
			margin-bottom: 100px;
		}
		
		.mb-110 {
			margin-bottom: 110px;
		}
		
		.mt-120 {
			margin-top: 120px;
		}
		
		.mb-150 {
			margin-bottom: 150px;
		}
		
		.mb-160 {
			margin-bottom: 160px;
		}
		
		/* negatives */
		.ml-n05 {
			margin-left: -5px;
		}
		
		.mr-n05 {
			margin-right: -5px;
		}
		
		.mb-n10 {
			marign-bottom: -10px;
		}
		
		.mx-n10 {
			margin-left: -10px;
			margin-right: -10px;
		}
		
		@media (min-width: 768px) { /* md */
			.mt-md-00 {
				margin-top: 0;
			}
			
			.mb-md-00 {
				margin-bottom: 0;
			}
					
			.mr-md-10 {
				margin-right: 10px;
			}
			
			.mt-md-20 {
				margin-top: 20px;
			}
						
			.mt-md-40 {
				margin-top: 40px;
			}
			
			.ml-md-40 {
				margin-left: 40px;
			}
			
			.mr-md-40 {
				margin-right: 40px;
			}
			
			.mt-md-45 {
				margin-top: 45px;
			}
			
			.mt-md-70 {
				margin-top: 70px;
			}
			
			.mb-md-80 {
				margin-bottom: 80px;
			}
		
			.mb-md-150 {
				margin-bottom: 150px;
			}
		}

		@media (min-width: 992px) { /* lg */
			.mb-lg-00 {
				margin-bottom: 0;
			}
			
			.mb-lg-00 {
				margin-bottom: 0;
			}

			.mt-lg-05 {
				margin-top: 5px;
			}
			
			.mb-lg-05 {
				margin-bottom: 5px;
			}
						
			.mr-lg-10 {
				margin-right: 10px;
			}
			
			.mb-lg-10 {
				margin-bottom: 10px;
			}
			
			.mt-lg-10 {
				margin-top: 10px;
			}
			
			.mb-lg-20 {
				margin-bottom: 20px;
			}
			
			.mr-lg-20 {
				margin-right: 20px;
			}
			
			.mb-lg-40 {
				margin-bottom: 40px;
			}
			
			.mt-lg-50 {
				margin-top: 50px;
			}
		
			.mt-lg-60 {
				margin-top: 60px;
			}
			
			.mb-lg-80 {
				margin-bottom: 80px;
			}
		
			.mb-lg-150 {
				margin-bottom: 150px;
			}
		}
	
		@media(max-width: 992px){/* sm */
			.mr-md-20 {
				margin-right: 20px;
			}
		}
	/* Padding */
		/* Padding - Tile */
		.p-heading {
			padding-left: 25px;
			padding-right: 25px;
		}
		
		.p-modal {
			padding-top: 30px;
			padding-bottom: 100px;
			padding-left: 25px;
			padding-right: 25px;
		}
		
		.p-tile {
			padding-top: 30px;
			padding-bottom: 100px;
			padding-left: 25px;
			padding-right: 25px;
		}
		
		.p-tile-md {
			padding-top: 50px;
			padding-bottom: 100px;
			padding-left: 25px;
			padding-right: 25px;
		}
		
		.px-tile-md-only {
			padding-left: 25px;
			padding-right: 25px;
		}
		
		.p-dashboard-header {
			padding-top: 0;
			padding-bottom: 40px;
			padding-left: 0;
			padding-right: 0;
		}
		
		.p-transaction-dashboard-header {
			padding-top: 40px;
			padding-bottom: 40px;
			padding-left: 0;
			padding-right: 0;
		}

		.p-recipient-dashboard-header {
			padding-top: 40px;
			padding-bottom: 40px;
			padding-left: 0;
			padding-right: 0;
		}
							
		.p-dashboard-body {
			padding-top: 30px;
			padding-bottom: 100px;
			padding-left: 25px;
			padding-right: 25px;
		}
		
		.p-dashboard-body2 {
			padding-top: 40px;
			padding-bottom: 100px;
			padding-left: 25px;
			padding-right: 25px;
		}
		
		.p-dashboard-body3 {
			padding-top: 40px;
			padding-bottom: 100px;
			padding-left: 25px;
			padding-right: 25px;
		}
		
		.p-recipient-dashboard-body{
			padding-top: 40px;
			padding-bottom: 100px;
			padding-left: 0px;
			padding-right: 0px;		
		}
		
		/* Padding - Fixed */
		.pl-00 {
			padding-left: 0;
		}
		
		.pr-00 {
			padding-right: 0;
		}
		
		.pl-05 {
			padding-left: 5px;
		}
		
		.pr-05 {
			padding-right: 5px;
		}
		
		.p-10 {
			padding: 10px;
		}
		
		.pt-10 {
			padding-top: 10px;
		}
		
		.pl-10 {
			padding-left: 10px;
		}
		
		.pr-10 {
			padding-right: 10px;
		}
		
		.py-14 {
			padding-top: 14px;
			padding-bottom: 14px;
		}
		
		.p-15 {
			padding: 15px;
		}
		
		.px-15 {
			padding-left: 15px;
			padding-right: 15px;
		}
		
		.pl-20 {
			padding-left: 20px;
		}
		
		.pr-20 {
			padding-right: 20px;
		}
		
		.pt-20 {
			padding-top: 20px;
		}
		
		.pb-20 {
			padding-bottom: 20px;
		}
		
		@media(max-width: 767px){/* sm */
			.pl-sm-05 {
				padding-left: 5px;
			}
			
			.pr-sm-05 {
				padding-right: 5px;
			}
		
		}
			
		@media (min-width: 768px) { /* md */
			
			.pl-md-05 {
				padding-left: 5px;
			}
			
			.pr-md-05 {
				padding-right: 5px;
			}
			
			.p-modal {
				padding-top: 40px;
				padding-bottom: 60px;
				padding-left: 25px;
				padding-right: 25px;
			}
			
			.p-tile {
				padding-top: 30px;
				padding-bottom: 60px;
				padding-left: 30px;
				padding-right: 30px;
			}
			
			.p-tile-md {
				padding: 50px;
			}
			
			.p-dashboard-header {
				padding-top: 20px;
				padding-bottom: 40px;
				padding-left: 95px;
				padding-right: 95px;
			}
			
			.p-dashboard-body {
				padding-top: 30px;
				padding-bottom: 100px;
				padding-left: 120px;
				padding-right: 120px;
			}
			
			.p-dashboard-body2 {
				padding-top: 80px;
				padding-bottom: 100px;
				padding-left: 120px;
				padding-right: 120px;
			}
			
			.p-dashboard-body3 {
				padding-top: 40px;
				padding-bottom: 100px;
				padding-left: 120px;
				padding-right: 120px;
			}
			
			.transaction-dashboard-body {
				padding-top: 40px;
				padding-bottom: 100px;
				padding-left: 0px;
				padding-right: 0px;
			}
			
			.p-recipient-dashboard-body {
				padding-top: 40px;
				padding-bottom: 100px;
				padding-left: 0px;
				padding-right: 0px;
			}			
			
		}
		@media (max-width: 767px) { /* mobile */
			
			.transaction-dashboard-body {
				padding-top: 40px;
				padding-bottom: 100px;
				padding-left: 0px;
				padding-right: 0px;
			}
		}
		@media (min-width: 992px) { /* lg */
			
			.pl-lg-05 {
				padding-left: 5px;
			}
			
			.pr-lg-05 {
				padding-right: 5px;
			}
			
			.p-heading {
				padding-left: 0;
				padding-right: 0;
			}
			
			.px-tile-md-only {
				padding-left: 0px;
				padding-right: 0px;
			}
			
			.pr-lg-10 {
				padding-right: 10px;
			}
			
			.pl-lg-10 {
				padding-left: 10px;
			}
			
			.p-dashboard-header {
				padding-top: 20px;
				padding-bottom: 40px;
				padding-left: 120px;
				padding-right: 120px;
			}
			
			.p-dashboard-body3 {
				padding-top: 40px;
				padding-bottom: 100px;
				padding-left: 0;
				padding-right: 0;
			}
			
			.px-msg-lg-only {
				padding-left: 130px;
				padding-right: 130px;
			}
			
		}
		
	/* Position */
		@media (min-width: 768px) { /* md */
			.position-md-absolute {
				position: absolute !important;
			}
		}
		
	/* Alignment */
		.left-auto {
			left: auto !important;
		}
		
	/* Line Height */
		.line-height-min {
			line-height: 0.8;
		}
		
/* form-group */
	.form-group {
		margin-bottom: 20px;
	}
	
/* form-control-mask */
	.form-control-mask { /* bootstrap */
		border-color: var(--gray-3);
		min-height: 3.125rem; /* 50px height */
		font-size: 1rem;
		border: solid 1px var(--gray-3);
		border-radius: 5px;
		padding: 0.375rem 0.75rem;
	}
	
/* Image */
	.img-h-180 {
		height: 11.25rem;
		width: auto;
	}
	
	@media(min-width: 768px) { /* md */
			.img-h-lg-240 {
				height: 15rem;
				width: auto;
			}
			
			.img-h-lg-350 {
				height: 15rem;
				width: auto;
			}
		}
	
/* Badge */
	.badge {
		font-size: 16px;
		padding: 0.625rem 0.625rem;
	}

	.badge.badge-success {
		background: var(--primary);
	}
	
	.badge.badge-danger {
		background: var(--danger);
	}
	
	/* title-badge */
	.title-badge {
		border-radius: 5px;
		background: var(--primary-light);
		padding: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--primary-dark);
		width: 2.5rem; /* 40px */
		height: 2.5rem; /* 40px */
		font-size: 2.125rem; /* 34px */
	}
	
	.title-badge-50 {
		width: 3.125rem; /* 50px */
		height: 3.125rem; /* 50px */
	}
	
	.title-badge.title-badge-white {
		background: white;
		color: var(--navy-2);
	}
	
	.title-badge.active {
		background: white;
	}
	
	/* dropdown-badge */
	.dropdown-badge {
		border-radius: 3px;
		background: var(--primary);
		padding: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 0.86rem;
		line-height: 1rem;
	}
	
/* Divider */
	.divider:after {
		content:"";
		position: absolute;
		border-color: inherit;
	}

	.divider.divider-vertical:after {
		top: 0;
		bottom: 0;
		left: 50%;
		right: 0;
		border-left: 1px solid;
	}
	
	.divider.divider-horizontal:after {
		top: 50%;
		bottom: 0;
		left: -1px;
		right: -1px;
		border-top: 1px solid;
	}
	
	/* for responsive - vertical to horizontal */
	
	@media(min-width: 768px) { /* md */
		.divider.divider-md-vertical:after {
			top: 0;
			bottom: 0;
			left: 50%;
			right: 0;
			border-left: 1px solid;
			border-top: none;
		}
		
		.divider.divider-md-horizontal:after {
			top: 50%;
			bottom: 0;
			left: -1px;
			right: -1px;
			border-top: 1px solid;
			border-left: none;
		}
	}
	
	@media(min-width: 992px) { /* lg */
		.divider.divider-lg-vertical:after {
			top: 0;
			bottom: 0;
			left: 50%;
			right: 0;
			border-left: 1px solid;
			border-top: none;
		}
		
		.divider.divider-lg-horizontal:after {
			top: 50%;
			bottom: 0;
			left: -1px;
			right: -1px;
			border-top: 1px solid;
			border-left: none;
		}
	}
	
	/* divider color */
	.divider.divider-color-gray-3:after {
		border-color: var(--gray-3);
	}
	
	.divider.divider-color-primary-dark:after {
		border-color: var(--primary-dark);
	}
	
	.divider.divider-color-alert:after {
		border-color: var(--danger);
	}
	
/* Border Divider */
	.border-divider.divider-vertical {
		border-right: 1px solid;
	}
	
	.border-divider.divider-horizontal {
		border-bottom: 1px solid;
	}
	
	/* for responsive - vertical to horizontal */
	
	@media(min-width: 768px) { /* md */
		.border-divider.divider-md-vertical {
			border-right: 1px solid;
			border-bottom: none;
		}
		
		.border-divider.divider-md-horizontal {
			border-bottom: 1px solid;
			border-right: none;
		}
	}
	
	@media(min-width: 992px) { /* lg */
		.border-divider.divider-lg-vertical {
			border-right: 1px solid;
			border-bottom: none;
		}
		
		.border-divider.divider-lg-horizontal {
			border-bottom: 1px solid;
			border-right: none;
		}
	}

/* List */
	ul.dash {
		list-style-type: none;
		padding-left: 1rem;
		margin-bottom: 0;
	}
	
	ul.dash > li {
		text-indent: -5px;
	}
	
	ul.dash > li:before {
		content: '- ';
		text-indent: -5px;
	}

/* Label */
	label {
		margin-bottom: 0;
	}

	label.required:after {
		content:" *";
		color: var(--danger);
	}
	
	label.form-label {
		color: var(--primary-dark);
		font-size: 0.875rem;
		margin-bottom: 0.3125rem;
	}
	
	label.error {
		color: red;
		font-size: 0.8rem;
	}
	
	label i {
		position: relative;
		top: 1px;
	}

/* Button */
	.btn.focus, .btn:focus { /* bootstrap */
		box-shadow: none;
	}
	
	.btn-min-width-lg {
		min-width: 16rem;
		width: 16rem;
	}
	
	.btn i {
		display: block;
	}
	
	/* Button - primary style */
		
		.btn-primary-style {
			background: var(--primary);
			color: white !important;
		}
		
		.btn-primary-style:hover {
			background: var(--primary-invert);
			color: var(--primary-dark) !important;
		}
		
		.btn-primary-style:disabled {
			background: var(--gray-3);
			color: white !important;
		}
	
	/* Button - primary */
	
		.btn-primary { /* bootstrap */
			padding: 0.8rem 2rem;
			min-height: 3.125rem;
			border: 0;
			border-radius: 5px;
			background: var(--primary-dark);
			color: white !important;
			font-size: 1rem;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
		    transition: all 0.5s;
		    display: inline-flex;
		    justify-content: center;
		    align-items: center;
		}
	
		.btn-primary:hover {
			background: var(--primary-invert);
			color: var(--primary-dark) !important;
		}
		
		.btn-primary.btn-type-light {
			background: var(--primary);
		}
		
		.btn-primary.btn-type-light:hover {
			background: var(--primary-invert);
		}
		
		.btn-primary.btn-type-blue {
			background: var(--blue-2);
		}
		
		.btn-primary.btn-type-blue:hover {
			background: var(--primary-invert);
		}
		
		.btn-primary.btn-type-alert {
			background: var(--danger-dark);
		}
		
		.btn-primary.btn-type-alert:hover {
			background: var(--danger-invert);
			color: white !important;
		}
		
		.btn-primary:disabled,
		.btn-primary.disabled {
			background: var(--gray-3) !important;
		}
		
		.btn-primary.btn-sm { /* input height size */
			min-height: 2rem; /* 40px */
			padding: 0.2rem 1.08rem;
			font-size: 0.7rem; /* 14px */
		}
	/* Button - outline */
	
		.btn-outline-primary { /* bootstrap */
			/* margin: 10px auto; */
			padding: calc(0.8rem - 2px) 2rem;
			min-height: 2.7rem;
			border: 0;
			border-radius: 5px;
			border: solid 1px;
			border-color: var(--primary-dark);
			color: var(--primary-dark) !important;
			font-size: 1rem;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
		    transition: all 0.5s;
		    display: inline-flex;
		    justify-content: center;
		    align-items: center;
		}
	
		.btn-outline-primary:hover {
			border-color: var(--primary-invert);
			background: var(--primary-invert);
		}
		
		.btn-outline-primary:disabled,
		.btn-outline-primary.disabled {
			border-color: var(--gray-3) !important;
			color: var(--gray-3) !important;
		}
		
		.btn-outline-primary.btn-sm { /* input height size */
			min-height: 2rem; /* 40px */
			padding: 0.2rem 1.08rem;
			font-size: 0.7rem; /* 14px */
		}
		
	/* Button - outline */
	
		.btn-outline-secondary { /* bootstrap */
			/* margin: 10px auto; */
			padding: calc(0.7rem - 2px) 2.5rem;
			min-height: 2.7rem;
			border: 0;
			border-radius: 5px;
			border: solid 2px;
			border-color: var(--gray-3);
			color: var(--gray-3) !important;
			font-size: 1rem;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
		    transition: all 0.5s;
		    display: inline-flex;
		    justify-content: center;
		    align-items: center;
		}
	
		.btn-outline-secondary:hover {
			border-color: var(--primary-invert);
			color: var(--primary-dark) !important;
			background: var(--primary-invert);
		}
		
		.btn-outline-secondary:disabled,
		.btn-outline-secondary.disabled {
			border-color: var(--gray-3) !important;
			color: var(--gray-3) !important;
		}
		
		.btn-outline-secondary.btn-sm { /* input height size */
			min-height: 2rem; /* 40px */
			padding: 0.2rem 1.08rem;
			font-size: 0.7rem; /* 14px */
		}
		
	/* Button - pill */
	
		.btn-pill { /* bootstrap */
			/* margin: 10px auto; */
			padding: 0.7rem 2.5rem;
			min-height: 2.7rem;
			border: 0;
			border-radius: 1.35rem;
			background: white;
			color: black !important;
			font-size: 1rem;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
		    transition: all 0.5s;
		    display: inline-flex;
		    justify-content: center;
			align-items: center;
		}
		
		.btn-pill.btn-type-primary {
			background: var(--primary-light);
			color: var(--primary-dark) !important;
		}
		
		.btn-pill:hover {
			background: var(--gray-1);
			color: var(--primary-dark) !important;
		}
		
		.btn-pill.btn-type-primary:hover {
			background: var(--primary-invert);
			color: var(--primary-dark) !important;
		}
		
		.btn-pill.active {
			background: var(--gray-2);
			color: var(--primary-dark) !important;
		}
		
		.btn-pill:disabled,
		.btn-pill.disabled {
			background: white;
			color: var(--gray-3) !important;
		}
		
		.btn-pill.btn-sm { /* input height size */
			min-height: 2rem; /* 40px */
			padding: 0.2rem 1.08rem;
			font-size: 0.7rem; /* 14px */
		}
		
	/* Button - icon */
		.btn-icon i {
			margin: auto;
			top: 0;
		}
	
		.btn-icon.btn-sm {
			height: 2.375rem;
			width: 2.375rem;
			display: inline-flex;
			align-items: center;
			padding: 0.25rem;
		}
		
		.btn-icon:disabled,
		.btn-icon.disabled {
			color: var(--gray-3) !important;
		}
	
	/* Button - link  */
	
		.btn-link {/* bootstrap */
			color: var(--primary) !important;
		    font-weight: bold;
		    padding: 0;
		    vertical-align: unset;
		}
		
		.btn-link:disabled,
		.btn-link.disabled {
			color: var(--gray-3) !important;
		}
		
	/* Button - outer-top */
		
		.btn-outer-top {
			position: absolute;
			margin-top: 1.2rem;
			margin-left: -6rem;
			border-radius: 50%;
			background: white;
			color: var(--gray-4);
			z-index: 1;
			height: 3rem;
			width: 3rem;
			padding: 0;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
		
		.btn-outer-top:not(:disabled):not(.disabled):hover {
			background: var(--gray-2);
			color: var(--primary-dark);
		}
		
		@media(max-width: 1919px) { /* laptop */
			.btn-outer-top {
				height: 2rem;
				width: 2rem;
				margin-top: 1.75rem;
				margin-left: -2.5rem;
			}
		}
		
		@media(max-width: 767px) { /* mobile */
			.btn-outer-top {
				position: relative;
				height: 3rem;
				width: 3rem;
				margin-top: 0;
				margin-left: 0;
			}
		}
		
	/* Button - outer-top-fixed */
		.outer-top-fixed {
			border-radius: 50%;
			background: var(--gray-1);
			color: var(--gray-4);
			z-index: 1;
			height: 2.5rem;
			width: 2.5rem;
			padding: 0;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
		
		.outer-top-fixed:not(:disabled):not(.disabled):hover {
			background: var(--gray-2);
			color: var(--primary-dark);
		}
		
		.outer-top-fixed.btn-white {
			background: var(--white);
		}
		
		@media(min-width: 768px) { /* md */
			.btn-outer-top {
				position: absolute;
				height: 3.75rem;
				width: 3.75rem;
			}
			
			.outer-top-fixed {
				height: 3.75rem;
				width: 3.75rem;
				font-size: 1.3rem;
				position: absolute;
    			top: 3.125rem;
			}
			
			.outer-top-fixed.btn-md-white {
				background: var(--white);
			}
		}
		
	/* Button - modal-close */
	
		.btn-modal-close {
			position: relative;
			top: 0;
			border-radius: 50%;
			background: var(--gray-1);
			color: var(--gray-4);
			z-index: 1;
			height: 2.5rem;
			width: 2.5rem;
			padding: 0;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
		
		.btn-modal-close:not(:disabled):not(.disabled):hover {
			background: var(--gray-2);
			color: var(--primary-dark);
		}
		
		@media (min-width: 768px) { /* md */
			.btn-modal-close {
				position: absolute;
				background: white;
				right: calc(-30px - 5rem);
			}
		}
		
	/* Button - input group append */
		.btn-input-primary {
			color: var(--gray-4);
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	
		.btn-input-primary:hover {
			color: var(--primary) !important;
		}
		
		.btn-input-primary:disabled,
		.btn-input-primary.disabled {
			color: var(--gray-3) !important;
		}
		
	@media(max-width: 767px) {
		.btn-primary[class*=" btn-min-width-"] { 
			min-width: 100%; /* responsive width to avoid overflow */
		}
		
		.btn-outline-primary[class*=" btn-min-width-"] { 
			min-width: 100%; /* responsive width to avoid overflow */
		}
	}

/* Input */
	
	/* All */
	
		:input:not(button) {
			border: 1px solid var(--gray-3);
			border-radius: 4px;
		}
		
		.form-control { /* bootstrap */
			border-color: var(--gray-3);
			height: 3.125rem; /* 50px height */
			font-size: 1rem;
			font-weight: var(--font-weight-medium);
		}
		
		.otp-box .form-control {
			padding: unset;
		}
		
		.form-control:disabled,
		.form-control.disabled {
			background-color: var(--gray-1);
		}
		
		.form-control.error {
			border-color: var(--danger);
		}
		
		.form-control::placeholder {
			color: var(--gray-3);
			font-weight: var(--font-weight-regular);
		}
		
		.form-control:focus { /* remove changes on shadow */
			box-shadow: none !important;
		}
		
		.form-control:focus:not(.is-invalid):not(.error) { /* remove changes on border color */
			border-color: var(--primary-dark);
		}
		
		/* form-control-sm */
			.form-control-sm { /* bootstrap */
				height: 2rem; /* 40px */
				font-size: 0.8rem; /* 16px */
			}
		
		/* hide number arrows */
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		input[type=number] {
			-moz-appearance: textfield;
		}

	/* Input-Group */
		.input-group-text {
			background-color: transparent;
			border-color: var(--gray-3);
			height: 3.125rem; /* 50px */
		}
		
		.input-group-prepend .btn,
		.input-group-append .btn {
			font-size: 1.25rem;
			height: 3.125rem; /* 50px */
			border: solid 1px var(--gray-3);
		}
		
		.input-group-prepend .curfex-icon,
		.input-group-append .curfex-icon {
			font-size: 1.25rem;
		}
		
		.input-group > .custom-select:not(:last-child),
		.input-group > .form-control:not(:last-child) {
			border-right: 0;
		}
		
		.input-group-append .input-group-text,
		.input-group-append .btn {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-left: 0;
		}
		
		.input-group > .form-control:focus ~ .input-group-append > * {
			border-color: var(--primary-dark);
		}
		
		.input-group > .form-control.is-invalid ~ .input-group-append > *,
		.input-group > .form-control.error ~ .input-group-append > * {
			border-color: var(--danger);
		}
		
		/* input-group-sm */
			.input-group-prepend.input-group-sm .btn,
			.input-group-append.input-group-sm .btn {
				font-size: 0.7rem; /* 14px */
				height: 2rem; /* 40px */
			}
			
			.input-group-prepend.input-group-sm .input-group-text,
			.input-group-append.input-group-sm .input-group-text {
				font-size: 0.7rem; /* 14px */
				height: 2rem; /* 40px */
			}
		
	/* File Upload */
		.input-file input[type="file"] {
			display: none;
		}
		
		.input-file input, .input-file label {
			cursor: pointer;
		}
		
		.form-control .input-file-label {
			margin-top: 0.5rem;
		}
		
		.input-file-label {
			border: none;
			background-color: transparent;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		.input-file-label.placeholder {
			color: var(--gray-3)
		}
		
		.input-file-label:after {
			content: "";
			display: none;
		}
		
		.input-loading {
			background-color: var(--gray-3);
			background-image: url(/images/loading/loading_please_wait.gif);
			background-size: 188px 40px;
			background-position: center;
			background-repeat: no-repeat;
			pointer-events: none;
		}
		.input-loading::placeholder {
			color: transparent;
		}

/* Select */
	
	/* Select2 */
		.select2:not(select) { /* bootstrap */
			width: auto !important;
			border: 1px solid var(--gray-3);
			border-radius: 4px;
		}
		
		.select2-selection { /* select2 */
			border-color: transparent !important;
		}
		
		.select2-selection:focus {
			box-shadow: none !important;
		}
		
		.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection,
		.select2-container--bootstrap4.select2-container--disabled .select2-selection {
			background-color: var(--gray-1);
			cursor: default;
		}
		
		.select2.select2-container--open {
			border-color: var(--primary-dark);
		}
		
		.select2-container--bootstrap4.select2-container--focus .select2-selection {
			box-shadow: none;
		}
		
		.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
			color: var(--gray-3);
			font-weight: var(--font-weight-regular);
		}
		
		.select2-container--bootstrap4 .select2-selection--single {
		    height: calc(3.125rem - 2px) !important;
		}
		
		.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
			line-height: calc(3.125rem - 4px);
			font-size: 1rem;
			font-weight: var(--font-weight-medium);
		}
		
		.select2-container--bootstrap4 .select2-selection__clear {
			top: 50%;
			margin-top: 1em;
		}
		
		.select2-container--bootstrap4 .select2-dropdown .select2-results__option {
			margin-top: 5px;
			margin-bottom: 5px;
			border-radius: 5px;
		}
		
		.select2-container--bootstrap4 .select2-results__option--highlighted,
		.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
			background-color: var(--gray-2);
			color: black;
		}
				
		.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
			background-color: var(--primary-light);
		}
		
		.select2-container--bootstrap4 .select2-results>.select2-results__options {
		    min-width: auto !important;
		    max-height: 448px !important;
		    padding-left: 10px;
		    padding-right: 9px;
		}
		
		.select2-search--dropdown .select2-search__field {
		    height: 50px;
		}
		
		.select2-search .search-btn {
			color: var(--gray-4);
			position: absolute;
			right: 0;
			padding: 13px 25px 13px 15px;
		}
	
		/* DASHUI-352*/
		#select2-accountTypeVNM-results .select2-results__option[aria-disabled=true], #select2-payoutAccountType-results .select2-results__option[aria-disabled=true], #select2-recipientAccountType-results .select2-results__option[aria-disabled=true]{
		    display:none;
		}
		
		/* borderless */
			.select2.select2-border-0 {
				border: 0;
			}
			
		/* hide arrow */
			.select2.select2-hide-arrow .select2-selection__arrow {
				display: none !important;	
			}
			
			.select2.select2-hide-arrow .select2-selection__rendered {
				padding-right: 8px !important; /* equals padding-left */
			}
		
		/* select2-sm */
			.select2-sm .select2-selection--single {
			    height: calc(2rem - 2px) !important;
			}
			
			.select2-sm .select2-selection__rendered {
				line-height: calc(2rem - 4px) !important;
				font-size: 0.7rem !important; /* 14px */
			}
			
			.select2-sm .select2-selection__clear {
				margin-top: .75em !important;
			}
		
		/* Exception */
			.select2.is-invalid + .select2 {
				border-color: var(--danger);
			}
			
			select.select2.error ~ span.select2:first-of-type {
				border-color: var(--danger);
			}
		
		/* Select2 arrow */
			.select2 .select2-selection__arrow { /* select2 */
				top: 0 !important;
				height: 100% !important;
				width: 40px !important;
				display: flex !important;
				flex-direction: row !important;
				justify-content: center !important;
				align-items: center !important;
			}
			.select2 .select2-selection__arrow b { /* select2 */
				margin: 0 !important;
				position: relative !important;
				
				content: "";
				display: block;
				top: 0.3rem !important;
				left: 0.3rem !important;
				width: 0.55rem !important;
				height: 0.55rem !important;
				border: solid 2px currentColor !important;
				border-right: none !important;
				border-top: none !important;
				transform: translate(0px, -7px) rotate(-45deg);
			}
			.select2 .select2-selection__rendered { /* select2 */
				padding-right: 40px !important; /* .select2-selection__arrow's width */
			}
		
		/* Select2 clear */
			.select2-container--bootstrap4 .select2-selection__clear {
				padding-top: 0.05em;
			}
		
	/* MultiSelect */
		.multiselect-native-select,
		.multiselect-native-select .btn-group {
			width: 100%;
		}
		
		.multiselect-native-select .multiselect-container {
			margin-left: -4px;
		}
		
		.multiselect-native-select .multiselect {
			background: white;
			border-color: var(--gray-3);
			height: calc(1.5em + 0.75rem + 4px);
		}
		
		.multiselect-native-select .multiselect.disabled {
			background: var(--gray-1);
		}
		
		.multiselect-native-select .multiselect[title="Please Select"] {
			color: var(--gray-3);
		}
		
		.multiselect-native-select .multiselect:focus {
			border-color: var(--gray-3);
			box-shadow: none;
		}
		
		.multiselect-native-select .multiselect::after {
			margin: 0;
			position: absolute;
			content: "";
			display: block;
			top: 50%;
			right: 1rem;
			width: 0.55rem;
			height: 0.55rem;
			border: solid 2px black;
			border-right: none !important;
			border-top: none !important;
			transform: translate(0px, -7px) rotate(-45deg);
		}
		
		.multiselect-container button {
			padding: 6px !important;
		}
		
		.multiselect-container button.multiselect-all .font-weight-bold {
			font-weight: normal !important;
		}
		
		.multiselect-container .multiselect-all .form-check,
		.multiselect-container .multiselect-group .form-check,
		.multiselect-container .multiselect-option .form-check {
			padding: 0 6px 0 6px;
		}
		
		.multiselect-container .multiselect-all:focus,
		.multiselect-container .multiselect-group:focus,
		.multiselect-container .multiselect-option:focus {
			background-color: var(--gray-2) !important;
		}
		
		.multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback),
		.multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active,
		.multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),
		.multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active,
		.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback),
		.multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active {
			background-color: var(--primary-light) !important;
		}
		
		.multiselect-container .multiselect-all:hover,
		.multiselect-container .multiselect-group:hover,
		.multiselect-container .multiselect-option:hover {
			background-color: var(--gray-2) !important;
		}
		
		.multiselect-container button .form-check-input {
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			z-index: -1;
			position: absolute;
			height: 0;
			width: 0;
		}
		
		.multiselect-container button .form-check-label::before { /* box */
			content: "";
			display: inline-block;
			box-sizing: border-box;
			margin-right: .75rem;
			border: solid 1px; /* Safari */
			border-color: var(--gray-3);
			border-radius: 2px;
			width: calc(1rem + 2px);
			height: calc(1rem + 2px);
			vertical-align: top;
			margin-top: 5px;
		}

		.multiselect-container button .form-check-label::after { /* checkmark */
			content: "";
			display: block;
			position: absolute;
			top: 0.05rem;
			width: 0.7rem;
			height: 0.4rem;
			border: solid 2px transparent;
			border-right: none;
			border-top: none;
			transform: translate(3px, 4px) rotate(-45deg);
			margin-top: 5px;
		}
		
		/* Checked, Indeterminate */
			.multiselect-container button {
				white-space: normal;
				word-break: break-word;
			}
		
			.multiselect-container button .form-check-input:checked + label::before,
			.multiselect-container button .form-check-input:checked:indeterminate + label::before {
				background-color: var(--primary);
				border-color: var(--primary);
			}
			
			.multiselect-container button .form-check-input:checked:checked + label::after,
			.multiselect-container button .form-check-input:checked:indeterminate + label::after {
				border-color: white;
			}
	
			.multiselect-container button .form-check-input:indeterminate + label::after {
				border-left: none;
				transform: translate(4px, 3px);
			}
	
		/* sm */
			.multiselect-sm + .btn-group .multiselect  {
				font-size: 0.7rem;
			}
			
	/* custom handling */
		.bold-container .select2-selection__rendered {
			font-weight: bold !important;
		}
		
		.bold-dd {
			font-weight: bold;
		}
		
		.currency-label {
			font-size:16px !important;
			font-weight:bold;
		}
		
		.currency-message {
			font-size:14px !important;
		}
		
		@media(min-width: 768px) { /* md */
			.currency-dd {
				min-width: 300px !important;
				width: 100%;
				float:left;
			}
		}

/* Checkbox */
	
	/* Initial */
		.checkbox {
			z-index: 0;
			position: relative;
			display: block;
			line-height: var(--line-height);
			cursor: pointer;
			margin-bottom: 0; /* counter bootstrap label */
		}
		
		.checkbox > input { /* hide default input */
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			z-index: -1;
			position: absolute;
			height: 0;
			width: 0;
		}

		.checkbox > span {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
		}
		
		.checkbox > span::before { /* box */
			content: "";
			display: inline-block;
			box-sizing: border-box;
			margin-right: .75rem;
			margin-top: 2px;
			border: solid 1px; /* Safari */
			border-color: var(--gray-3);
			border-radius: 2px;
			width: calc(1rem + 2px);
			height: calc(1rem + 2px);
			flex-shrink: 0;
		}

		.checkbox > span::after { /* checkmark */
			content: "";
			display: block;
			position: absolute;
			top: 0.15rem;
			left: 0.05rem;
			width: 0.7rem;
			height: 0.4rem;
			border: solid 2px transparent;
			border-right: none;
			border-top: none;
			transform: translate(3px, 4px) rotate(-45deg);
		}

	/* Checked, Indeterminate */
		.checkbox.checked > span::before, /* display only */
		.checkbox > input:checked + span::before,
		.checkbox > input:indeterminate + span::before,
		.checkbox > input:checked ~ span::before, /* cater for jsp checkbox, additional input is appended in between */
		.checkbox > input:indeterminate ~ span::before {
			background-color: var(--primary);
			border-color: var(--primary);
		}
		
		.checkbox.checked > span::after, /* display only */
		.checkbox > input:checked + span::after,
		.checkbox > input:indeterminate + span::after,
		.checkbox > input:checked ~ span::after, /* cater for jsp checkbox, additional input is appended in between */
		.checkbox > input:indeterminate ~ span::after {
			border-color: white;
		}

		.checkbox > input:indeterminate + span::after {
			border-left: none;
			transform: translate(4px, 3px);
		}

	/* Hover, Focus */
		.checkbox:hover > input {
			opacity: 0.04;
		}
		
		.checkbox:focus {
			outline: none;
		}
		
		.checkbox > input:focus {
			opacity: 0.12;
		}

		.checkbox:hover > input:focus {
			opacity: 0.16;
		}

	/* Active */
		.checkbox > input:active {
			opacity: 1;
			transform: scale(0);
			transition: transform 0s, opacity 0s;
		}

		.checkbox > input:active + span::before {
			border-color: var(--primary);
		}

		.checkbox > input:checked:active + span::before {
			border-color: transparent;
			background-color: rgba(var(--primary-rgb, 0, 0, 0), 0.6);
		}
		
	/* Disabled */
		.checkbox > input:disabled {
			opacity: 0;
		}
		
		.checkbox > input:disabled + span {
			color: rgba(var(--primary-rgb, 0, 0, 0), 0.38);
			cursor: initial;
		}
		
		.checkbox > input:disabled + span::before {
			border-color: currentColor;
		}
		
		.checkbox > input:checked:disabled + span::before,
		.checkbox > input:indeterminate:disabled + span::before {
			border-color: transparent;
			background-color: #ddd;
		}
		
/* Icon Checkbox */
	.icon-checkbox {
		z-index: 0;
		position: relative;
		display: inline-block;
		line-height: 1.5;
		cursor: pointer;
		margin-bottom: 0; /* counter bootstrap label */
		
		color: var(--primary);
	}
	
	.icon-checkbox > input { /* hide default input */
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		z-index: -1;
		position: absolute;
		height: 0;
		width: 0;
	}
	
	.icon-checkbox > input:checked ~ i[data-checked="true"] {
		display: block;
	}
	
	.icon-checkbox > input:checked ~ i[data-checked="false"] {
		display: none;
	}

	.icon-checkbox > input:not(checked) ~ i[data-checked="true"] {
		display: none;
	}
	
	.icon-checkbox > input:not(:checked) ~ i[data-checked="false"] {
		display: block;
	}
	
	/* Disabled */
		.icon-checkbox > input:disabled ~ i {
			color: rgba(var(--primary-rgb, 0, 0, 0), 0.38);
			cursor: initial;
		}

/* Toggle Switch */	
	.toggle-switch i {
		display: inline-block;
		width: 40px;
		height: 24px;
		border-radius: 12px;
		vertical-align: middle;
		transition: .25s .09s;
		position: relative;
		background: var(--gray-3);
		cursor: pointer;
	}
	
	.toggle-switch i:after {
		content: " ";
		display: block;
		width: 16px;
		height: 16px;
		top: 4px;
		left: 4px;
		border-radius: 50%;
		background: #fff;
		position: absolute;
		transition: .15s;
	}
	
	.toggle-switch input[type="checkbox"] {
		display: none;
	}
	
	.toggle-switch input:checked ~ i.switch {
		background: var(--primary);
	}
	
	.toggle-switch input:checked ~ i.switch:after {
		transform: translateX(16px);
	}
	
/* Radio */
	
	/* Initial */
		.radio {
			z-index: 0;
			position: relative;
			display: block;
			line-height: var(--line-height);
			cursor: pointer;
			margin-bottom: 0; /* counter bootstrap label */
			margin-top: 0;
		}
		
		.radio > input { /* hide default input */
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			z-index: -1;
			position: absolute;
			height: 0;
			width: 0;
		}

		.radio > span {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
		}
		
		.radio > span::before { /* circle */
			content: "";
			display: inline-block;
			box-sizing: border-box;
			margin-right: 10px;
			margin-bottom: 0;
			border: solid 1px; /* Safari */
			border-color: var(--gray-3);
			border-radius: 50%;
			width: 1rem;
			height: 1rem;
			flex-shrink: 0;
		}
		
		.radio.radio-20 > span::before { /* circle */
			width: 1.25rem;
			height: 1.25rem;
		}

	/* Checked, Indeterminate */
		.radio.checked > span::before, /* display only */
		.radio > input:checked + span::before,
		.radio > input:checked ~ span::before /* cater for jsp checkbox, additional input is appended in between */ {
			background-color: var(--primary);
			border-color: var(--primary);
		}
		
		.radio.checked > span::after, /* display only */
		.radio > input:checked + span::after,
		.radio > input:checked ~ span::after /* cater for jsp checkbox, additional input is appended in between */ {
			content: "";
			display: block;
			position: absolute;
			top: calc((1rem - 0.5rem) / 2);
			left: calc((1rem - 0.5rem) / 2);
			width: 0.5rem;
			height: 0.5rem;
			background: white;
			border-radius: 50%;
			box-shadow: 0px 3px 6px var(--shadow);
		}
		
		.radio.radio-20.checked > span::after, /* display only */
		.radio.radio-20 > input:checked + span::after,
		.radio.radio-20 > input:checked ~ span::after /* cater for jsp checkbox, additional input is appended in between */ {
			top: calc((1.25rem - 0.625rem) / 2);
			left: calc((1.25rem - 0.625rem) / 2);
			width: 0.625rem;
			height: 0.625rem;
		}

	/* Hover, Focus */
		.radio:hover > input {
			opacity: 0.04;
		}
		
		.radio:focus {
			outline: none;
		}
		
		.radio > input:focus {
			opacity: 0.12;
		}

		.radio:hover > input:focus {
			opacity: 0.16;
		}
		
	/* Disabled */
		.radio > input:disabled {
			opacity: 0;
		}
		
		.radio > input:disabled + span {
			color: var(--gray-3);
			cursor: initial;
		}
		
		.radio > input:disabled + span::before {
			border-color: currentColor;
		}
		
		.radio > input:checked:disabled + span::before {
			border-color: transparent;
			background-color: var(--gray-3);
		}
		
	/* Standalone button */
		.radio.radio-standalone > span::before {
			margin: 0;
		}
		
	/* Font Size */
		.radio > span.font-size-lg::before {
			margin-top: 0.2rem;
		}
		
		.radio.checked > span.font-size-lg::after,
		.radio > input:checked + span.font-size-lg::after,
		.radio > input:checked ~ span.font-size-lg::after {
			margin-top: 0.2rem;
		}
		
/* Alert */
	.alert {
		font-size: 0.875rem;
		padding: 10px calc(20px + 1rem) 10px 10px;
		min-height: 40px;
		word-break: break-word;
	}
	
	.alert-dismissible .close {
		padding: 10px 10px 10px 1rem;
		line-height: 16px;
	}
	
	.alert-danger {
		background-color: var(--danger-light);
		color: var(--danger-dark);
	}
		
/* Nav */

	.nav-tabs {
    	border-bottom: 0px;
	}

	.nav-tabs .nav-link {
		padding: 1rem 2rem;
		background-color: var(--primary-light);
		color: var(--black-1) !important;
		font-weight: bold;
		border-top-left-radius: 0.875rem;
    	border-top-right-radius: 0.875rem;
	}
	
	.nav-tabs .nav-link.active {
		background-color: white;
		color: var(--primary-dark) !important;
	}
	
	/* .nav-tabs .nav-link:focus, */
	.nav-tabs .nav-link:not(.active):hover {
		background-color: var(--primary-invert);
	}
	
	/* Fixed Width Nav */
	.nav.fixed-width-nav {
		flex-direction: row;
	}
	
	.nav.fixed-width-nav .nav-item {
		width: 100%;
		text-align: center;
	}
	
	.nav.fixed-width-nav .nav-item.active {
		order: unset;
	}

	@media(min-width: 768px) { /* md */
		
		.nav.fixed-width-nav .nav-item {
			width: var(--fixed-width-nav-width);
			max-width: var(--fixed-width-nav-width);
			height: auto;
		}
		
		.nav.fixed-width-nav .nav-item .nav-link {
			height: 100%;
		}
		
	}
	
	@media(max-width: 428px) { /* mobile */
		.nav.fixed-width-nav .nav-item {
		    width: 33.33%;
		}
		
		.nav-tabs .nav-link {
			font-size:14px;
			padding: 1rem 0rem;
		}
	}
/* Dropdown Menu */
	/* Fix existing dropdown.scss issue */
	.dropdown-menu-right {
		right: 0 !important;
		left: auto !important;
	}
	
	.dropdown-menu-left {
		left: 0 !important;
		right: auto !important;
	}

/* Accordion */

	.accordion {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.accordion .toggler {
		display: inline-flex;
		position: relative;
		vertical-align: middle;
	}
	
	.accordion a[aria-expanded]:after {
		content: "";
		display: block;
		top: 0.3rem;
		left: 0.3rem;
		width: 0.7rem;
		height: 0.7rem;
		border: solid 2px currentColor;
		border-right: none;
		border-top: none;
	}
	
	.accordion a[aria-expanded=false]:after {
	    transform: translate(0px, -2px) rotate(-45deg);
	}
	
	.accordion a[aria-expanded=true]:after {
	    transform: translate(0px, 4px) rotate(-225deg);
	}

/* Stepper */

	.stepper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.stepper.step-30 {
		padding: 0;
		width: 30rem;
	}
	
	@media(max-width: 767px) { /* mobile */
			.stepper.step-30 {
			padding: 0;
			width: 20rem;
		}
	}
	
	.stepper.step-67 {
		padding: 0;
		width: 67rem;
	}
	
	.stepper .step {
		padding: 0;
		width: 100%;
	}
	
	.stepper .step .step-heading {
		position: relative;
		height: 3.125rem;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 0.625rem;
	}
	
	/* lines */
	.stepper .step:not(:last-of-type) .step-heading:after,
	.stepper .step:not(:first-of-type) .step-heading:before {
		position: absolute;
		content: "";
		top: 50%;
		right: -1px;
		border-color: var(--gray-4);
		border-top: solid 1px;
		width: 50%;
	}
	
	.stepper .step:not(:first-of-type) .step-heading:before {
		left: -1px;
	}
	
	.stepper .step:not(:last-of-type) .step-heading:after {
		right: -1px;
	}
	
	/* numbers */
	
	.stepper .step .step-border {
		background-color: transparent;
		border: solid 2px transparent;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}
	
	.stepper .step .step-number {
		width: 2.25rem; /* 36px */
		height: 2.25rem; /* 36px */
		line-height: 1;
		border-radius: 50%;
		background-color: white;
		color: var(--gray-4);
		font-weight: bold;
		border: solid 1px var(--gray-4);
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/* description */
	
	.stepper .step .step-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: var(--gray-4);
	}
	
	.stepper .step .step-content label {
		margin-bottom: 0;
	}
	
	/* vertical stepper */
	
	.stepper.stepper-vertical {
		flex-direction: column;
	}
	
	.stepper.stepper-vertical .step {
		display: flex;
	}
	
	/* vertical stepper - lines */
	
	.stepper.stepper-vertical .step .step-heading {
		width: 3.125rem;
		min-width: 3.125rem;
		min-height: 5rem;
		margin-bottom: 0;
	}
	
	.stepper.stepper-vertical .step:not(:last-of-type) .step-heading:after,
	.stepper.stepper-vertical .step:not(:first-of-type) .step-heading:before {
		top: unset;
		left: 50%;
		right: unset;
		width: 50%;
		height: 50%;
		border-top: unset;
		border-left: solid 1px;
	}
	
	.stepper.stepper-vertical .step:not(:first-of-type) .step-heading:before {
		top: 0;
	}
	
	.stepper.stepper-vertical .step:not(:last-of-type) .step-heading:after {
		bottom: 0;
	}
	
	/* vertical stepper - description */
	
	.stepper.stepper-vertical .step .step-content {
		align-items: flex-start;
		text-align: left;
		padding-left: 1rem;
	}
		
	/* states */
	
	/* state - completed */
	
	.stepper .step:not(:last-of-type).completed .step-heading:after,
	.stepper .step:not(:last-of-type).completed + .step .step-heading:before {
		border-color: var(--primary);
		border-width: 2px;
	}
	
	.stepper .step.completed .step-number {
		background-color: var(--primary)!important;
		color: white!important;
		font-size: 1.375rem; /* 22px */
		border: solid 1px var(--primary)!important;
	}
	
	.stepper .step.completed .step-content {
		color: var(--primary-dark)!important;
	}
	
	/* state - active */
	
	.stepper:not(.stepper-vertical) .step.active .step-heading:after,
	.stepper:not(.stepper-vertical) .step.active .step-heading:before {
		width: calc(50% - 1.4rem - 1px); /* avoid crossing step-border */
	}
	
	.stepper.stepper-vertical .step.active .step-heading:after,
	.stepper.stepper-vertical .step.active .step-heading:before {
		height: calc(50% - 1.4rem); /* avoid crossing step-border */
	}
	
	.stepper .step.active .step-border {
		width: 3.125rem; /* 50px */
		height: 3.125rem; /* 50px */
		border-color: var(--primary);
		background-color: transparent;
	}
	
	.stepper .step.active .step-number {
		background-color: var(--primary);
		color: white;
		font-size: 1.375rem; /* 22px */
		font-weight: bold;
		border: solid 1px var(--primary);
	}
	
	.stepper .step.active .step-content {
		color: var(--primary-dark);
	}
	
	/* state - active passed */
	
	.stepper .step:not(:last-of-type).active-passed .step-heading:after,
	.stepper .step:not(:last-of-type).active-passed + .step .step-heading:before {
		border-color: var(--primary);
		border-width: 2px;
	}
	
	.stepper:not(.stepper-vertical) .step.active-passed .step-heading:after,
	.stepper:not(.stepper-vertical) .step.active-passed .step-heading:before {
		width: calc(50% - 1.4rem - 1px); /* avoid crossing step-border */
	}
	
	.stepper.stepper-vertical .step.active-passed .step-heading:after,
	.stepper.stepper-vertical .step.active-passed .step-heading:before {
		height: calc(50% - 1.4rem); /* avoid crossing step-border */
	}
	
	.stepper .step.active-passed .step-border {
		width: 3.125rem; /* 50px */
		height: 3.125rem; /* 50px */
		border-color: var(--primary);
		background-color: transparent;
	}
	
	.stepper .step.active-passed .step-number {
		background-color: var(--primary);
		color: white;
		font-size: 1.375rem; /* 22px */
		font-weight: bold;
		border: solid 1px var(--primary);
	}
	
	.stepper .step.active-passed .step-content {
		color: var(--primary-dark);
	}
	
	/* state - danger */
	
	.stepper .step.danger .step-number {
		background-color: var(--danger);
		border-color: var(--danger);
	}
	
	.stepper .step.active.danger .step-border {
		border-color: var(--danger);
	}
	
	.stepper .step.danger .step-content {
		color: var(--danger);
	}
	
	/* state - info */
	
	.stepper .step.info .step-number {
		background-color: var(--azure-2);
		border-color: var(--azure-2);
	}
	
	.stepper .step.active.info .step-border {
		border-color: var(--azure-2);
	}
	
	.stepper .step.info .step-content {
		color: var(--azure-2);
	}
	
	@media(min-width: 768px) { /* md */
		.stepper.stepper-vertical .step .step-heading {
			min-height: 6.25rem;
		}
	}

/* Card */
	.card-header {
		background-color: transparent;
		border-bottom: none;
	}
	
	.card-header .h1, 
	.card-header .h2, 
	.card-header .h3, 
	.card-header .h4, 
	.card-header .h5, 
	.card-header .h6, 
	.card-header :header {
		font-weight: bold;
	}
	
	.card-header .card-toggler {
		display: inline-flex;
		position: relative;
		vertical-align: middle;
	}
	
	.card-header a[aria-expanded]:after {
		content: "";
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 0.3rem;
	    width: 0.7rem;
	    height: 0.7rem;
	    border: solid 2px currentColor;
	    border-right: none;
	    border-top: none;
	}
	
	.card-header a[aria-expanded=false]:after {
	    transform: translate(3px, 4px) rotate(-45deg);
	}
	
	.card-header a[aria-expanded=true]:after {
	    transform: translate(3px, 11px) rotate(-225deg);
	}
	
	.card {
		box-shadow: none;
		background-color: var(--container-gray);
	}
	
	.card-body {
		padding : 1rem;
	}
	
/* Table - Datatable */
	table.dataTable {
		border-collapse: collapse !important;
		width: calc(100% - 2px) !important; /* include border */
		margin-left: 1px; /* avoid hiding left border */
		padding-bottom: 1rem;
		font-size: 1rem;
	}
	
	/* Header */
		.dataTable thead {
			color: var(--primary-dark) !important;
			background: var(--gray-1);
		}
		
		.dataTable thead th {
			border: solid 0.5px var(--gray-3);
			padding: 1rem;
			height: 3rem;
		}
		
		table.dataTable > thead .sorting:before,
		table.dataTable > thead .sorting_asc:before,
		table.dataTable > thead .sorting_desc:before,
		table.dataTable > thead .sorting_asc_disabled:before,
		table.dataTable > thead .sorting_desc_disabled:before {
			content: '';
			background-image: url(/images/datatable/arrow_sort_up.svg);
			background-repeat: no-repeat;
			height: 6px;
			width: 7px;
			top: calc(50% - 7px);
			right: 1em;
		}
		
		table.dataTable > thead .sorting:after,
		table.dataTable > thead .sorting_asc:after,
		table.dataTable > thead .sorting_desc:after,
		table.dataTable > thead .sorting_asc_disabled:after,
		table.dataTable > thead .sorting_desc_disabled:after {
			content: '';
			background-image: url(/images/datatable/arrow_sort_down.svg);
			background-repeat: no-repeat;
			height: 6px;
			width: 7px;
			bottom: calc(50% - 7px);
			right: 1em;
		}
	
	/* Body */
		.dataTable tbody td {
			border: solid 0.5px var(--gray-3);
			padding: 10px 15px;
			height: 3rem;
		}
		
		.dataTable tbody td:focus {
			outline: none;
		}
		
		.dataTable tbody tr.highlight { /* custom */
			background: var(--primary-lighter);
		}
		
		.dataTable tbody tr:not(.child):hover {
			background: var(--gray-1);
		}
		
	/* Body - child */
		table.dataTable > tbody > tr.child {
			padding: 0;
		}
		
		table.dataTable > tbody > tr.child ul.dtr-details > li {
			border-bottom: none;
		    padding: 0;
		}
		
		table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
		    padding-top: 0;
		}
		
		table.dataTable > tbody > tr span.dtr-title {
			display: inline-block;
			min-width: 75px;
			font-weight: bold;
		}
		
		table.dataTable tbody td.child {
			padding: 0;
		}
		
		table.dataTable ul.dtr-details {
			width: 100%;
		}
		
		table.dataTable ul.dtr-details li {
			display: flex;
			justify-content: stretch;
		}
		
		table.dataTable .dtr-title {
			color: var(--primary-dark);
			width: 34%;
			max-width: 200px;
			padding: 0 10px 15px 10px;
			border-right: solid 1px var(--gray-3);
		}
		
		table.dataTable .dtr-data {
			flex: 1;
			padding: 0 10px 15px 10px;
		}
		
		table.dataTable > tbody > tr.child ul.dtr-details > li:first-child > .dtr-title,
		table.dataTable > tbody > tr.child ul.dtr-details > li:first-child > .dtr-data {
		    padding-top: 15px;
		}
		
	/* Body - toggle overflow */
		.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control:before,
		.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control:before { /* datatable */
			/* override all existing styles even unused*/
			color: currentColor !important;
			box-shadow: none !important;
			box-sizing: none !important;
			text-align: center !important;
			text-indent: 0 !important;
			font-family: inherit !important;
			line-height: 0 !important;
			background-color: transparent !important;
			border-radius: 0 !important;
			
			/* arrow */
			content: "" !important;
			display: block !important;
			top: auto !important;
			left: 0.8rem !important;
			width: 0.7rem !important;
			height: 0.7rem !important;
			border: solid 2px currentColor !important;
			border-right: none !important;
			border-top: none !important;
			margin: auto !important;
			margin-top: 0rem !important;
			cursor: pointer !important;
			position: absolute !important;
			transform: translate(3px, 4px) rotate(-45deg);
		}
		
		.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
		.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
		    transform: translate(3px, 11px) rotate(-225deg);
		}
		
		.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control,
		.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control {
			padding-left: 3rem !important;
		}
		
		.dataTable.dtr-inline.collapsed > thead > tr[role="row"] > th:first-child {
			padding-left: 3rem !important;
		}
		
	/* Body - Additional hide/show content options */
	
		.dataTable tr:not(.child) .d-child {
			display: none !important;
		}
		
		.dataTable tr.child .d-parent {
			display: none !important;
		}
		
		.dataTable tr.child .d-child {
			display: block;
		}
		
		.dataTable tr:not(.child) .d-parent {
			display: block;
		}
	
	/* Body - Custom - toggle details */
		.dataTable tbody td.toggler {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}
		
		.dataTable tbody td.toggler:after {
			content: "";
			display: block;
			top: 0.3rem;
			left: 0.3rem;
			width: 0.7rem;
			height: 0.7rem;
			border: solid 2px currentColor;
			border-right: none;
			border-top: none;
			margin: auto;
			cursor: pointer;
		}
		
		.dataTable tbody td.toggler:after {
		    transform: translate(0px, 4px) rotate(-225deg);
		}
		
		.dataTable tbody td.toggler.shown:after {
		    transform: translate(0px, -2px) rotate(-45deg);
		}
		
	/* Wrapper */
		.dataTables_wrapper {
			overflow-x: auto;
		}
		.dataTables_wrapper .top {
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		
		.dataTables_wrapper .top .top-group {
			margin-bottom: 1rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		
		.dataTables_wrapper .dataTables_length > label {
			margin-bottom: 0;
			padding-left: 1rem;
			padding-right: 1rem;
		}
		
		.dataTables_wrapper .dataTables_length .custom-select {
			height: calc(1.5em + .75rem + 2px) !important;
			margin-top: 2px;
			margin-bottom: 2px;
		}
		
		.dataTables_wrapper .page-item.active .page-link {
			background-color: var(--primary);
			border-color: var(--primary);
		}
		
	/* Bottom */
		.dataTables_wrapper .bottom {
			display: flex;
			font-size: 0.7rem; /* 14px */
		}
		
		.dataTables_wrapper .bottom > * {
			margin-top: 1rem;
			margin-bottom: 1rem;
		}
		
	/* Pagination */
		.dataTables_wrapper .dataTables_paginate_group {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		
		.dataTables_wrapper .dataTables_paginate_group .align-left {
			margin-right: auto;
		}
		
		.dataTables_wrapper .dataTables_paginate .page-link {
			border: 0;
			border-radius: 50%;
			height: 40px;
			width: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--gray-4);
			box-shadow: none; /* remove highlight on focus */
		}
		
		.dataTables_wrapper .dataTables_paginate .page-item:not(.disabled) .page-link.hover {
			background-color: var(--gray-1);
		}
		
		.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
			color: var(--gray-2);
		}
		
	/* Pagination dropdown */
		.dataTables_wrapper .dataTables_paginate_dropdown {
			margin-right: 1rem;
			display: flex;
			align-items: center;
			font-weight: bold;
		}
	
	/* Length */
		.dataTables_wrapper .dataTables_length_custom {
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex: 1;
			white-space: nowrap;
		}
		
		.dataTables_wrapper .dataTables_length_custom ul.length {
			display: flex;
			padding-left: 0;
			list-style: none;
			border-radius: .25rem;
			margin-bottom: 0;
			margin-left: 0.875rem;
		}
		
		.dataTables_wrapper .dataTables_length_custom ul.length li {
			border-radius: 50%;
			height: 40px;
			width: 40px;
			/* margin-right: 1rem; */
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.dataTables_wrapper .dataTables_length_custom ul.length li:hover {
			cursor: pointer;
			background: var(--gray-1);
		}
		
		.dataTables_wrapper .dataTables_length_custom ul.length li.active {
			background: var(--gray-2);
			color: var(--primary-dark);
		}
	
	/* Loading */
		div.dataTables_wrapper div.dataTables_processing {
			position: relative;
			margin-top: -0.5rem;
			margin-left: 0;
			top: 50%;
			left: 0;
			width: 100%;
			border-top: 0;
		}
		
	/* Default Responsive */
	@media(max-width: 991px) {
		.dataTable.res-default thead {
			display: none;
		}
		
		.dataTable.res-default tr.parent {
			display: none;
		}
	}
		
	@media(max-width: 767px) {
		.dataTables_wrapper .bottom {
			flex-direction: column;
		}
		
		.dataTables_wrapper .dataTables_paginate_group {
			justify-content: center;
			position:absolute;
		}
		
		.dataTables_wrapper .dataTables_length_custom {
			display: none;
		}

		.dataTables_wrapper .dataTables_paginate_dropdown {
				margin-right:40px;
				position:absolute;
				top:5px;
		}
		
		div.dataTables_wrapper div.dataTables_paginat{
				position:absolute;
		}
		
		.first{
			margin-right:600px;
			position:absolute
		}
		
		.previous{
			margin-right:500px;
			position:absolute
		}
		
		.next{
			margin-left:400px;
			position:absolute
		}
		
		.last{
			margin-left:500px;
			position:absolute
		} 
	}
	
	@media(max-width: 428px){		
		.first{
			margin-right:320px;
			position:absolute
		}
		
		.previous{
			margin-right:230px;
			position:absolute
		}
		
		.next{
			margin-left:150px;
			position:absolute
		}
		
		.last{
			margin-left:230px;
			position:absolute
		} 
	}
		
/* Modal */
	#modalContent .modal-header {
		border-bottom: none !important;
	}
	
	.modal-body {
		padding: 0;
	}
	
	#modalContent .modal-footer {
		border-top: none !important;
		display: flex;
		flex-direction: column;
		column-gap: 10px;
		margin-top: 60px;
		padding: 0;
	}
	
	.modal.show .modal-dialog {
		min-height: 100vh;
		width: 100vw;
		margin: 0;
	}
	
	.modal-content {
		border: none;
	}
	
	.modal-logo-header {
		top: 0;
		padding: 0.21875rem 0;
		height: var(--header-height);
		background-color: white;
	}
	
	.modal-logo-header .logo {
		width: auto;
		height: 2rem;
		cursor: pointer;
	}
	
	.modal-sm {
		max-width: 100vw;
	}
	
	.modal-lg {
		max-width: 1450px;
	}
	
	.modal-backdrop.show {
		opacity: 0.6;
	}
	
	.modal-sticky-button {
		position: relative;
	    text-align: right;
	    margin-bottom: 20px;
	}
	
	@media (min-width: 768px) { /* md */
		.modal.show {
			display: flex !important;
			align-items: center;
			justify-content: center;
		}
		
		.modal.show .modal-dialog {
			min-height: auto;
			height: auto;
			width: auto;
			margin-top: calc(90px - var(--header-height));
		}
		
		.modal-box{
			max-height: 800px;
			overflow-y: auto;
			pointer-events: auto;
		}
		
		.modal-logo-header {
			display: none;
		}
	
		.modal-sm {
			width: 500px;
			max-width: 500px;
			margin-top: 5.625rem; /* 90px */
			margin-bottom: 5.625rem; /* 90px */
		}
		
		.modal-sticky-button {
			position: sticky;
			padding-top: 40px; /* for modal with floating sticky button, manually override top padding modal-xx to 0 and let sticky component to define top padding*/
			top: 5.625rem; /* 90px */
			margin-bottom: 0;
		}
	}
	
/* Toast */
	#toastGroup {
		position: fixed;
		right: 0.75rem;
		bottom: 1rem;
	}
	
	.toast {
		font-size: 1rem !important;
		font-weight: 400 !important;
	}
	
/* Tooltip */

	.tooltip {
		pointer-events: none;
		left: 20px !important;
	}

	.tooltip.show{
		opacity: 1.0;
	}
	
	.tooltip-inner {
		box-shadow: -3px 3px 9px 0 rgba(0, 0, 0, 0.5);
		text-align: left;
		max-width: calc(100vw - 50px);
		color: #000;
		background-color: #fff;
	}
	
	.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before,
	.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before {
		left: -20px; /* cater to margin-left 20px for .tooltip */
	}
	
	.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before {
 		border-top-color: #fff;
	}
	
	.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before {
		border-right-color: #fff;
	}
	
	.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before {
  		border-bottom-color: #fff;
	}
	
	.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before {
  		border-left-color: #fff;
	}
	
	@media (min-width: 768px) { /* md */
		.tooltip {
			left: 0px !important;
		}
		
		.tooltip.show{
			opacity: 1.0;
		}
	
		.tooltip-inner {
			box-shadow: -3px 3px 9px 0 rgba(0, 0, 0, 0.5);
			max-width: 500px;
			color: #000;
			background-color: #fff;
		}
		
		.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^=top] .arrow,
		.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^=bottom] .arrow {
			margin-left:0;
		}
		
		.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before {
 			border-top-color: #fff;
		}
	
		.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before {
			border-right-color: #fff;
		}
	
		.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before {
  			border-bottom-color: #fff;
		}
	
		.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before {
  			border-left-color: #fff;
		}
	}
	
/* Loading */
	/* skeleton-loading */
		.skeleton-loading {
			background: 
				linear-gradient(0.25turn, transparent, white, transparent),
				linear-gradient(var(--gray-2), var(--gray-2)),
				radial-gradient(38px circle at 19px 19px, var(--gray-2) 50%, transparent 51%),
				linear-gradient(var(--gray-2), var(--gray-2));  
			background-repeat: no-repeat;
			background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px; 
			background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
			animation: skeleton-loading 1.5s infinite;
		}
		
		@keyframes skeleton-loading {  
			to {
				background-position: 315px 0, 0 0, 0 190px, 50px 195px;
			}
		}
	/* ajax loading */
		.loading-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
		    min-height: 3rem;
		    height: 100%;
		}
		
		.loading {
			position: relative;
			left: -9999px;
			width: 10px;
			height: 10px;
			border-radius: 1px;
			background-color: var(--primary);
			color: var(--primary);
			box-shadow: 9999px 0 0 -5px var(--primary);
			animation: dotPulse 1.5s infinite linear;
			animation-delay: .25s;
		}
		
		.loading::before,
		.loading::after {
			content: '';
			display: inline-block;
			position: absolute;
			top: 0;
			width: 10px;
			height: 10px;
			border-radius: 1px;
			background-color: var(--primary);
			color: var(--primary);
		}
		
		.loading::before {
			box-shadow: 9984px 0 0 -5px var(--primary);
			animation: dotPulseBefore 1.5s infinite linear;
			animation-delay: 0s;
		}
		
		.loading::after {
			box-shadow: 10014px 0 0 -5px var(--primary);
			animation: dotPulseAfter 1.5s infinite linear;
			animation-delay: .5s;
		}
		
		@keyframes dotPulseBefore {
			0% {
				box-shadow: 9984px 0 0 -5px var(--primary);
			}
			30% {
				box-shadow: 9984px 0 0 2px var(--primary);
			}
			60%,
			100% {
				box-shadow: 9984px 0 0 -5px var(--primary);
			}
		}
		
		@keyframes dotPulse {
			0% {
				box-shadow: 9999px 0 0 -5px var(--primary);
			}
			30% {
				box-shadow: 9999px 0 0 2px var(--primary);
			}
			60%,
			100% {
				box-shadow: 9999px 0 0 -5px var(--primary);
			}
		}
		
		@keyframes dotPulseAfter {
			0% {
				box-shadow: 10014px 0 0 -5px var(--primary);
			}
			30% {
				box-shadow: 10014px 0 0 2px var(--primary);
			}
			60%,
			100% {
				box-shadow: 10014px 0 0 -5px var(--primary);
			}
		}
	/* ajax loading - loading-logo */
		.loading-logo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 1rem;
		}
		
		.loading-logo .loading-icon {
			background-image: url(/images/loading/loading_primary.gif);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			width: 52px;
			height: 52px;
			margin-bottom: 1rem;
		}
		
		.loading-wrapper.black {
			background-color: black;
		}
		
		.loading-wrapper.blue {
			background-color: var(--azure-bg) !important;
		}
		
		.loading-wrapper.blue .loading-icon {
			background-image: url(/images/loading/loading_white.gif);
		}
		
		.loading-wrapper.black .loading-icon {
			background-image: url(/images/loading/loading_white.gif);
		}
		
		.loading-wrapper.fullscreen {
			position: fixed;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			z-index: 100;
		}
		
		.loading-wrapper.cover {
			z-index: 1051; /* > .modal 1050 */
		}

/* Dashboard */
	header {
		position: sticky !important;
		top: 0;
		padding: 0.21875rem 1rem;
	    height: var(--header-height);
		background-color: white;
		z-index: 103;
	}
	
	header .navbar {
		padding-left: 0;
		padding-right: 0;
	}
	
	header .navbar-nav .nav-item {
		border: none !important;
	}
	
	@media (min-width: 768px){
		header .navbar-expand-lg-menu {
			flex-flow: row nowrap;
			justify-content: flex-start;
		}
		
		.flex-lg-grow-menu {
			flex-grow: 0 !important;
		}
		
		.navbar-expand-lg-menu .navbar-collapse {
			display: flex !important;
			flex-basis: auto;
		}
		
		.navbar-expand-lg-menu .navbar-nav {
			flex-direction: row;
		}
		
		.navbar-expand-lg-menu .navbar-toggler {
			display: none;
		}
	}
	
	header #menu {
		font-size: 1.05rem;
		color: var(--gray-4);
		white-space: nowrap;
	}
	
	header #menu .nav-item .active {
		font-weight: bold;
		color: var(--primary-dark);
	}
	
	header #settings {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
	}
	
	header .logo {
		width: auto;
		height: 2rem;
		cursor:pointer;
	}
	
	header .avatar {
		cursor: pointer;
		border-radius: 50%;
		height:40px;
		width:40px;
	}
	
	header .avatar-lg {
		cursor: pointer;
		border-radius: 50%;
		height:100px;
		width:100px;
	}
	
	header #settings #language + .select2-container {
		border: none;
	}
	
	header #settings #notification.active::before {
		content: '';
		height: 5px;
		width: 5px;
		background-color: var(--danger);
		border-radius: 100%;
		display: inline-block;
		position: absolute;
		margin-left: 0.5rem;
	}
	
	header + #mainContainer {
		min-height: calc(100vh - var(--header-height) - var(--footer-min-height));
	}
	
	header + #mainContainer > .loading-wrapper { /* centralize main loading */
		min-height: calc(100vh - var(--header-height) - var(--footer-min-height));
	}
	
	footer  {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* justify-content: space-between; */
		align-items: center;
		padding: 25px 25px;
		background: white;
		font-size: 0.8rem;
		color: var(--gray-4);
	}
	
	footer .legals {
		display: flex;
		flex-direction: row;
	}
	
	footer .links {
		display: flex;
		justify-content: flex-start;
		margin-left: -15px;
	}
	
	footer .links a {
		color: var(--gray-4);
		border-right: solid 1px var(--gray-3);
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 30px;
	}
	
	footer label {
		margin-bottom: 0;
	}
	
	footer .disclaimer {
		text-align: justify;
	}
	
@media(max-width: 767px) { /* < md */
	header .navbar-collapse {
		position: fixed;
		top: var(--header-height);
		width: 100vw;
		margin-left: -2rem;
		margin-right: -1rem;
		background-color: white;
		
		height: calc(100vh - var(--header-height));
	    overflow-y: scroll;
	}
	
	footer  {
		padding: 20px 25px;
	}
	
	footer > * {
		/* padding: 1rem 1rem; */
		flex-direction: column;
		align-items: flex-start;
	}
	
	footer .legals {
		flex-direction: column;
	}
	
	footer .disclaimer {
		max-width: 100%;
	}
}

@media(max-width: 420px) { /* cater for footer length (english) */
	#mainContainer {
		min-height: calc(100vh - var(--header-height) - 143px);
	}
	
	#mainContainer > .loading-wrapper { /* centralize main loading */
		min-height: calc(100vh - var(--header-height) - 143px);
	}
}

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