:root {
	--body-bg: #E7F9FF;
	--content-bg-color: #C6EDFB;
	
	--coin-shadow-color: #88C2D9;
	--coin-ripple-color: 156,207,227;
	
	--text-color: #24343A;
	--border-color: #8FD3EA;
	--border-color-secondary: #5FB3D2;
	
	--input-bg-color: #F4FCFF;
	--nav-link-color: #24343A;
	
	--top-nav-bg-color: #A9E1F5;
	--secondary-bg: #B7E7F8;
	--list-item-bg: #B7E7F8;
	
	--table-head-color: #16343F;
	--table-head-bg-color: #A9E1F5;
	--table-body-color: #24343A;
	--table-body-bg-color: #F4FCFF;
	
	--link-color: #2E7FA1;
	--link-hover-color: #1F5E79;
	
	--bs-heading-color: var(--text-color);
	--jst-modal-bg: var(--content-bg-color);
	--jst-modal-header-bg: #B7E7F8;
	--jst-btn-anim-color: #fff;
}

html,body {
	margin: 0;
	height: 100%;
}

body {
	position: relative;
	min-height: 100dvh;
	margin: 0;
	padding: 0;
	font-size: 1.1rem !important;
	background-color: var(--body-bg);
	color: var(--text-color);
}

#content-wrapper, #content-wrapper-no-padding {
	position: relative;
	top: 10dvh;
	overflow: auto;
	height: 80dvh;
	font-size: 1rem;
	box-sizing: border-box;
	background-color: var(--content-bg-color);
}

#content-wrapper {
	position: relative;
	padding: 1rem 1rem !important;
}

a {
	text-decoration: none;
	color: var(--link-color);
}

a:hover {
	color: var(--link-hover-color);
}

.empty-view {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0.5rem;
	font-family: "Inclusive Sans", "badhon", serif;
	color: var(--bs-secondary-color);
	text-align: center;
}

.empty-view img {
	max-width: 96px;
}

/* TODO - shouldn't we call it list-vertical? */
.list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.list-item {
	padding: 1rem;
	background: var(--secondary-bg);
	border-radius: var(--bs-border-radius);
	border: 1px solid var(--border-color-secondary);
}

.list-item-icon {
	width: 32px;
	height: 32px;
}

.list-item-icon-sm {
	width: 24px;
	height: 24px;
}

.list-horizontal {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.list-horizontal-padding div:first-child {
	margin-left: 1rem;
}

.list-horizontal-padding div:last-child {
	margin-right: 1rem;
}

.img-list {
	width: 48px;
	height: 48px;
	border-radius: var(--bs-border-radius);
}

.img-profile {
	width: 148px;
	height: 148px;
	border-radius: var(--bs-border-radius);
}

.img-modal {
	width: 84px;
	aspect-ratio: 1;
}

.img-card {
	border-radius: 3px;
	box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 3px;
	border: 6px solid white;
}

.text-positive {
	color: #16A34A;
}

.text-negative {
	color: crimson;
}

.box {
	box-sizing: border-box;
	border-radius: var(--bs-border-radius);
	background-color: var(--secondary-bg);
	padding: 1rem;
	border: 1px solid var(--border-color-secondary);
}

.shadow1 {
	box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px;
}


/*
 * Material Symbols New Icon
 */
.material-symbols-outlined {
	vertical-align: middle;
	line-height: 0.001 !important;
	padding-bottom: 0.25rem !important;
}

.jst-modal-header .material-symbols-outlined {
	vertical-align: initial;
	line-height: initial;
	display: initial;
	padding-bottom: 0;
}

.jst-alert-btn-wrapper {
	border-top: 0;
	padding-top: 0;
	background: transparent;
}


/*
 * Bootstrap overrides
 */
.form-control {
	background-color: var(--input-bg-color);
	border-color: var(--border-color);
}

.btn {
	font-family: "Inclusive Sans", "badhon", serif;
}

.btn-primary {
	background: linear-gradient(to bottom, #3BD6F5, #0DCAF0);
	border: none;
	color: #fff !important;
	text-shadow: 0 2px 0 rgba(0,0,0,0.15);
	
	box-shadow:
			0 5px 0 #0899B6,
			0 8px 12px rgba(0,0,0,0.15);
}

.btn-secondary {
	background: linear-gradient(to bottom, #9aa1a8, #6c757d);
	border: none;
	text-shadow: 0 2px 0 rgba(0,0,0,0.15);
	
	box-shadow:
			0 5px 0 #545b62,
			0 8px 12px rgba(0,0,0,0.15);
}

.btn-secondary:active {
	box-shadow:
			0 5px 0 #545b62,
			0 8px 12px rgba(0,0,0,0.15);
}

.btn-promote {
	background: linear-gradient(to bottom, #ff9f2f, #e56a00);
	border: none;
	color: #fff !important;
	text-shadow: 0 2px 0 rgba(0,0,0,0.15);
	
	box-shadow:
			0 5px 0 #b55300,           		/* bottom hard edge */
			0 8px 12px rgba(0,0,0,0.15); 	/* soft drop */
}

.btn-promote:active {
	box-shadow:
			0 2px 0 #b55300,
			0 5px 8px rgba(0,0,0,0.15);
}

.btn-link {
	text-decoration: none;
}

.input-primary, .select-primary {
	font-family: "SN Pro", "badhon", serif !important;
	border: none;
	
	box-shadow:
			0 5px 0 #0899B6,           		/* bottom hard edge */
			0 8px 12px rgba(0,0,0,0.15); 	/* soft drop */
}

.input-primary:focus, .select-primary:focus {
	box-shadow:
			0 5px 0 #0899B6,           					/* bottom hard edge */
			0 8px 12px rgba(0,0,0,0.15) !important; 	/* soft drop */
}

.input-secondary, .select-secondary {
	border: none;
	box-shadow:
			0 5px 0 #545b62,
			0 8px 12px rgba(0,0,0,0.15);
}

.input-secondary:focus, .select-secondary:focus {
	box-shadow:
			0 5px 0 #545b62,
			0 8px 12px rgba(0,0,0,0.15) !important;
}