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

:root {
	/* colors */
	--primary: #00D4CA;
	--primary-rgb: 0, 212, 202;
	--primary-dark: #003F3C;
	--primary-light: #E5FBFA;
	--primary-invert: #63F0C7;
	
	--gray-1: #F4F4F4;
	--gray-2: #AAAAAA;
	--gray-3: #6D6D6D;

	--black-1: #2B2B2B;
	
	--danger: red;
	--danger-dark: #A20D03;
	--danger-light: #F6E6E5;
	
	--shadow: rgba(0, 0, 0, 0.16);
	
	/* sizes */
	--p-font-size: 1rem;
	--header-height: 5rem;
	--footer-height: 3rem;
}

html {
	font-size: 16px;
}

body {
	color: var(--black-1);
	font-family: 'Open Sans';
	font-size: var(--p-font-size);
	background-color: none;
}

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

	/* Tile */
		.header-width {
			max-width: 1920px;
		}
		
		.tile-width {
			max-width: calc(1640px + 6rem);
		}
		
		.tile-sm-width {
			max-width: 480px;
		}
		
		.heading-width {
			max-width: calc(780px + 30px);
		}

	/* Colors - background */
	
		.bg-primary {
			background-color: var(--primary) !important;
		}
		
		.bg-primary-light {
			background-color: var(--primary-light) !important;
		}
		
		.bg-white {
			background-color: white !important;
		}
		
		.bg-transparent {
			background-color: transparent !important;
		}
		
		.bg-gray-1 {
			background-color: var(--gray-1) !important;
		}
		
		.bg-alert-light {
			background-color: var(--danger-light) !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: black !important;
		}
		
		.font-color-black-1 {
			color: var(--black-1) !important;
		}
		
		.font-color-white {
			color: white !important;
		}
		
		.font-color-gray-2 {
			color: var(--gray-2) !important;
		}
		
		.font-color-gray-3 {
			color: var(--gray-3) !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-bold {
			font-weight: bold;
		}
		
		.font-italic {
			font-style: italic;
		}
		
		.f-sm-2 {
			font-size: 0.625rem; /* 10px */
		}
		
		.f-sm-1 {
			font-size: 0.75rem; /* 12px */
		}
		
		.f-n {
			font-size: 1rem; /* 16px */
		}
		
		.f-lg-1 {
			font-size: 1.5rem; /* 24px */
		}
		
		.f-lg-2 {
			font-size: 2rem; /* 32px */
		}
		
		.f-lg-3 {
			font-size: 2.5rem; /* 40 */
		}
		
		.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-1 {
			border-color: var(--gray-1) !important;
		}
		
		.border-color-gray-2 {
			border-color: var(--gray-2) !important;
		}
		
		.border-color-gray-3 {
			border-color: var(--gray-3) !important;
		}
		
		.border-color-alert-dark {
			border-color: var(--danger-dark) !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;
				}
			}
		
	/* 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) {
				.box-shadow-md-none {
					box-shadow: none;
				}
				
				.box-shadow-md {
					box-shadow: 0px 3px 6px var(--shadow);
				}
			}
			
	/* Cursor */
		.cursor-default {
			cursor: default !important;
		}
		
		.cursor-pointer {
			cursor: pointer;
		}
		
		.cursor-pointer * {
			cursor: pointer;
		}
		
	/* List */
		.list-style-type-value {
			list-style-type: value;
		}
		
	/* Flex */
		.flex-center {
			justify-content: center;
			align-items: center;
		}
		
	/* Margin */
		.mb-0_5 {
			margin-bottom: 0.5rem;
		}
		
/* form-group */
	.form-group {
		margin-bottom: 1.5rem; /* equivalent mb-4 */
	}
	
/* form-control-mask */
	.form-control-mask { /* bootstrap */
		border-color: var(--gray-2);
		min-height: 2.5rem; /* 40px height */
		font-size: 1.25rem;
		border: solid 1px var(--gray-2);
		border-radius: 5px;
		padding: 0.375rem 0.75rem;
	}
	
/* Badge */
	.badge.badge-success {
		background: var(--primary);
	}
	
	.badge.badge-danger {
		background: var(--danger);
	}
	
	/* status-badge */
	.status-badge {
		border-radius: 2px;
		padding: 0.5rem;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		min-width: 4.5rem;
		font-size: 0.75rem;
	}
	
	/* title-badge */
	.title-badge {
		border-radius: 10px;
		background: var(--primary-light);
		padding: 0.5rem;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: var(--primary);
		width: 2.5rem; /* 50px */
		height: 2.5rem; /* 50px */
		font-size: 1.8rem; /* 36px */
	}
	
	.title-badge.title-badge-white {
		background: white;
		color: var(--navy-2);
	}
	
	.title-badge.active {
		background: white;
	}
	
/* 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.required:after {
		content:" *";
		color: var(--danger);
	}
	
	label.form-label {
		color: var(--black-1);
		display: block;
	}
	
	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: 14rem;
	}
	
	.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-2);
			color: white !important;
		}
	
	/* Button - primary */
	
		.btn-primary { /* bootstrap */
			padding: 0.8rem 2rem;
			min-height: 3rem;
			border: 0;
			border-radius: 5px;
			background: var(--primary);
			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.btn-primary-icon {
			padding: 0.8rem 0.8rem;
		}
	
		.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-alert {
			background: var(--danger-dark);
		}
		
		.btn-primary.btn-type-alert:hover {
			background: var(--danger);
			color: var(--danger-dark) !important;
		}
		
		.btn-primary:disabled,
		.btn-primary.disabled {
			background: var(--gray-2) !important;
		}

	/* Button - outline */
	
		.btn-outline-primary { /* bootstrap */
			/* margin: 10px auto; */
			padding: calc(0.8rem - 2px) calc(2rem - 2px);
			min-height: 2.7rem;
			border: 0;
			border-radius: 5px;
			border: solid 2px;
			border-color: var(--primary);
			color: var(--primary) !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.btn-primary-icon {
			padding: 0.8rem 0.8rem;
		}
	
		.btn-outline-primary:hover {
			border-color: var(--primary-invert);
			background: var(--primary-invert);
			color: var(--primary-dark) !important;
		}
		
		.btn-outline-primary:disabled,
		.btn-outline-primary.disabled {
			border-color: var(--gray-2) !important;
			color: var(--gray-2) !important;
		}
		
	/* Button - outline */
	
		.btn-outline-secondary { /* bootstrap */
			/* margin: 10px auto; */
			padding: calc(0.8rem - 2px) calc(2rem - 2px);
			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-2) !important;
			color: var(--gray-2) !important;
		}
		
	/* Button - icon */
		.btn-icon {
			padding: 0.375rem !important;
			height: 2.5rem;
			width: 2.5rem;
			border-radius: 50%;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
		
		.btn-icon i {
			margin: auto;
			top: 0;
		}
		
		.btn-icon:not(:disabled):hover,
		.btn-icon:not(.disabled):hover {
			background: var(--gray-1) !important;
		}
		
		.btn-icon:disabled,
		.btn-icon.disabled {
			color: var(--gray-2) !important;
		}
	
	/* Button - link  */
	
		.btn-link {/* bootstrap */
			color: var(--primary) !important;
		    font-weight: bold;
		    padding: 0;
		}
		
		.btn-link:disabled,
		.btn-link.disabled {
			color: var(--gray-2) !important;
		}
		
	/* 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-2) !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-2);
			border-radius: 4px;
		}
		
		.form-control { /* bootstrap */
			border-color: var(--gray-2);
			height: 2.5rem; /* 40px height */
			font-size: 1rem;
		}
		
		.form-control.error {
			border-color: var(--danger);
		}
		
		.form-control::placeholder {
			color: var(--gray-2);
		}
		
		.form-control:focus { /* remove changes on border color and shadow */
			border-color: var(--gray-2);
			box-shadow: none;
		}
		
		/* 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-2);
			height: 2.5rem; /* 40px */
		}
		
		.input-group-prepend .btn,
		.input-group-append .btn {
			font-size: 1.25rem;
			height: 2.5rem; /* 40px */
			border: solid 1px var(--gray-2);
		}
		
		.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;
		}
		
	/* 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-2)
		}
		
		.input-file-label:after {
			content: "";
			display: none;
		}

/* Select */
	
	/* Select2 */
		.select2:not(select) { /* bootstrap */
			width: auto !important;
			border: 1px solid var(--gray-2);
			border-radius: 4px;
		}
		
		.select2-selection { /* select2 */
			border-color: transparent !important;
		}
		
		.select2-selection:focus {
			box-shadow: none !important;
		}
		
		.select2-container--bootstrap4 .select2-selection--single {
		    height: calc(2.5rem - 2px) !important;
		}
		
		.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
			line-height: calc(2.5rem - 4px);
			font-size: 1rem;
		}
		
		.select2-container--bootstrap4 .select2-selection__clear {
			top: 50%;
			margin-left: 0.3em;
		}
		
		/* borderless */
			.select2.select2-border-0 {
				border: 0;
			}
		
		/* 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;
			}
			
/* Datepicker */
	.datepicker table tr td,
	.datepicker table tr th {
		width: 50px;
		height: 50px;
	}
	
	.datepicker table tr td span {
		color: var(--black-1);
	}
	
	.datepicker table tr td span.focused,
	.datepicker table tr td span:focus {
		color: white;
		background-color: var(--primary);
		border-color: var(--primary);
	}
	
	.datepicker table tr td span:hover {
		background: var(--gray-1);
	}
	
	.datepicker table tr td span.active,
	.datepicker table tr td span:active,
	.datepicker table tr td.active {
		color: white;
		background-color: var(--primary) !important;
		border-color: var(--primary) !important;
	}

/* Checkbox */
	
	/* Initial */
		.checkbox {
			z-index: 0;
			position: relative;
			display: block;
			line-height: 1.5;
			cursor: pointer;
			margin-bottom: 0; /* counter bootstrap label */
			margin-top: .375rem;
		}
		
		.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-bottom: .375rem;
			border: solid 1px; /* Safari */
			border-color: var(--gray-2);
			border-radius: 2px;
			width: calc(1.5rem + 2px);
			height: calc(1.5rem + 2px);
			flex-shrink: 0;
		}

		.checkbox > span::after { /* checkmark */
			content: "";
			display: block;
			position: absolute;
			top: 0.2rem;
			left: 0.1rem;
			width: 1rem;
			height: 0.5rem;
			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-2);
		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: 1.5;
			cursor: pointer;
			margin-bottom: 0; /* counter bootstrap label */
			margin-top: .375rem;
		}
		
		.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: .75rem;
			margin-bottom: .375rem;
			border: solid 1px; /* Safari */
			border-color: var(--gray-2);
			border-radius: 50%;
			width: calc(1.5rem + 2px);
			height: calc(1.5rem + 2px);
			flex-shrink: 0;
		}

	/* 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: 0.39rem;
			left: calc(0.35rem + 1px);
			width: 0.8rem;
			height: 0.8rem;
			background: white;
			border-radius: 50%;
			box-shadow: 0px 3px 6px var(--shadow);
		}

	/* 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-2);
			cursor: initial;
		}
		
		.radio > input:disabled + span::before {
			border-color: currentColor;
		}
		
		.radio > input:checked:disabled + span::before {
			border-color: transparent;
			background-color: var(--gray-2);
		}
		
	/* 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 */
		
/* Nav */
	.nav-tabs .nav-link {
		padding: 1rem 2rem;
		background-color: var(--primary-light);
		color: var(--primary-dark) !important;
		font-weight: bold;
	}
	
	.nav-tabs .nav-link.active {
		background-color: white;
	}
	
	/* .nav-tabs .nav-link:focus, */
	.nav-tabs .nav-link:not(.active):hover {
		background-color: var(--primary-invert);
	}
	
	/* Nav pills */
		.nav-pills .nav-link {
			color: var(--primary);
			font-weight: bold;
		}
		
		.nav-pills .nav-link.active,
		.nav-pills .show > .nav-link {
			color: var(--primary);
			background-color: var(--primary-light);
		}
		
		.nav-pills .nav-link:hover {
			cursor: pointer;
		}
	
/* 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 {
		padding: 0;
		width: 100%;
	}
	
	.stepper .step .step-heading {
		position: relative;
		height: 5rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/* 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: 1.8rem; /* 36px */
		height: 1.8rem; /* 36px */
		border-radius: 50%;
		background-color: white;
		color: var(--gray-4);
		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: 7rem;
		min-width: 7rem;
	}
	
	.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;
	}
		
	/* 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);
		color: white;
		border: solid 1px var(--primary);
	}
	
	.stepper .step.completed .step-content {
		color: var(--primary-dark);
	}
	
	/* state - active */
	
	.stepper:not(.stepper-vertical) .step.active .step-heading:after,
	.stepper:not(.stepper-vertical) .step.active .step-heading:before {
		width: calc(50% - 1.6rem - 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.6rem); /* avoid crossing step-border */
	}
	
	.stepper .step.active .step-border {
		width: 3.5rem; /* 70px */
		height: 3.5rem; /* 70px */
		border-color: var(--primary);
		background-color: transparent;
	}
	
	.stepper .step.active .step-number {
		width: 2.4rem; /* 48px */
		height: 2.4rem; /* 48px */
		background-color: var(--primary);
		color: white;
		font-size: 1.5rem; /* 30px */
		font-weight: bold;
		border: solid 1px var(--primary);
		box-shadow: 0px 3px 6px var(--shadow);
		margin-top: -3px; /* bottom shadow will make it visually not being centered */
	}
	
	.stepper .step.active .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);
	}

/* 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;
	}
	
	/* Header */
		.dataTable thead {
			color: var(--primary-dark) !important;
			background: var(--gray-1);
		}
		
		.dataTable thead th {
			border: solid 0.5px var(--gray-2);
			padding: 0.5rem 1rem;
			height: 3rem;
		}
	
	/* Body */
		.dataTable tbody td {
			border: solid 0.5px var(--gray-2);
			padding: 1rem;
			height: 3rem;
		}
		
		.dataTable tbody td:focus {
			outline: none;
		}
		
		.dataTable tbody tr.highlight { /* custom */
			background: var(--primary-light);
		}
		
	/* 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;
		}
		
		.dataTable ul.dtr-details {
			width: 100%;
		}
		
		.dataTable ul.dtr-details li {
			display: flex;
			justify-content: space-between;
		}
		
		.dataTable .dtr-title {
			color: var(--primary-dark);
			width: 50%;
		}
		
		.dataTable .dtr-data {
			width: 50%;
			float: right;
		}
		
	/* 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: 2rem;
			width: 2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--primary-dark);
			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: 2rem;
		}
		
		.dataTables_wrapper .dataTables_length_custom ul.length li {
			border-radius: 50%;
			height: 2rem;
			width: 2rem;
			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(--primary-light);
			color: var(--primary);
		}
	
	/* 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;
		}
		
	@media(max-width: 767px) {
		.dataTables_wrapper .bottom {
			flex-direction: column;
		}
		
		.dataTables_wrapper .dataTables_paginate_group {
			justify-content: center;
		}
	}
		
/* Modal */
	#modalContent {
		padding: 1rem !important;
	}
	
	#modalContent .modal-header {
		border-bottom: none !important;
	}
	
	#modalContent .modal-body {
		padding: 0;
	}
	
	#modalContent .modal-footer {
		border-top: none !important;
		justify-content: center;
	}
	
	.modal-sm {
		max-width: 780px;
	}
	
	.modal-lg {
		max-width: 1450px;
	}
	
	.modal-sm .modal-footer .btn {
		width: 100%;
	}
	
	@media (max-width: 575px) {
		.modal-dialog {
			margin: 1.75rem auto;
		}
	}
	
/* Toast */
	#toastGroup {
		position: fixed;
		right: 0.75rem;
		bottom: 1rem;
	}
	
	.toast {
		font-size: 1rem !important;
		font-weight: 400 !important;
	}
	
/* 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);
			}
		}
		
	/* loading - btn */
		.btn .loading-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 1rem;
		    height: 1rem;
		    min-height: auto;
		}
		
		.btn .loading {
			border: 3px solid white;
			border-top: 3px solid transparent;
			border-radius: 50%;
			width: 1rem;
			height: 1rem;
			animation: spin 1s linear infinite;
			
			left: auto;
			background-color: transparent;
			color: transparent;
			box-shadow: none;
		}
		
		.btn .loading::before,
		.btn .loading::after {
			content: none;
		}
		
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		
/* Custom Icons */
	.icon.wakalu-icon {
		height: 1.875rem;
		width: 1.875rem;
	}

/* Dashboard */
	header {
		position: sticky !important;
		top: 0;
		padding: 0.25rem 0.5rem;
	    height: var(--header-height);
		background-color: white;
		z-index: 103;
	}
	
	header .navbar-nav .nav-item {
		border: none !important;
	}
	
	header #settings {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
	}
	
	header .logo {
		width: auto;
		height: 4rem;
		cursor:pointer;
	}
	
	.menu {
		font-size: 1rem;
		color: var(--black-1);
		white-space: nowrap;
	}
	
	header .menu {
		font-weight: bold;
	}
	
	#mainContainer {
		min-height: calc(100vh - var(--header-height) - var(--footer-height));
		flex: 1;
	}
	
	#mainContainer > .loading-wrapper { /* centralize main loading */
		min-height: calc(100vh - var(--header-height) - var(--footer-height));
	}
	
	footer {
		display: flex;
		justify-content: center;
		align-items: center;
		height: var(--footer-height);
		background: white;
	}
	
	footer > * {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 3rem;
		background: white;
		font-size: 0.8rem;
		color: var(--gray-4);
	}
	
	footer .legals {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	footer .links {
		display: flex;
		justify-content: flex-start;
	}
	
	footer .links a {
		color: var(--gray-4);
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	footer label {
		margin-bottom: 0;
	}
	
	footer .disclaimer {
		text-align: justify;
		max-width: 50%;
	}

	.form-groupOTP {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.form-label {
		display: block;
		margin-bottom: 10px;
	}
	
	.input-container {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
	}
	
	.otp-input {
		width: 40px;
		height: 40px;
		font-size: 20px;
		text-align: center;
		margin: 0 10px;
		padding: 5px;
		border-radius: 5px;
		border: 1px solid #ccc;
	}
	
	.btnResendOTP {
		font-size: 16px;		
		background: none;
		border: none;
		padding: 0;
		font-family: inherit;
		font-size: inherit;
		cursor: pointer;
		text-decoration: underline;
	}
	
	.btnResendOTP:hover {
		background-color: #0062cc;
	}
	
	.registerPage {
		color: var(--black-1);
		display: block;
		text-align: left;
    	width: inherit;
	}

	.radio-margin {
		margin-right: 10px; /* increase the right margin to add more gap */
	}
	
@media only screen and (max-width: 768px) {
		.otp-input {
			width: calc(100%/ 8);
		}
	}
	
	@media only screen and (min-width: 769px) {
		.otp-input {
			width: calc(100%/ 10);
		}
	}

@media(max-width: 991px) {
	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;
	}
}