:root {
	--primary-base-color: rgba(0, 51, 153, 1);
	--primary-base-color-10: rgba(0, 51, 153, 0.1);
	--primary-base-color-20: rgba(0, 51, 153, 0.2);
	--primary-base-color-30: rgba(0, 51, 153, 0.3);
	--primary-base-color-40: rgba(0, 51, 153, 0.4);
	--primary-base-color-50: rgba(0, 51, 153, 0.4);
	--primary-base-color-60: rgba(0, 51, 153, 0.6);
	--primary-contrast-color: rgba(255, 255, 255, 1);
}

/* Scrollbar: Voor Chrome, Edge en Safari */
::-webkit-scrollbar {
	width: 6px; 
	height: 6px; 
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(100, 100, 100, 0.3); 
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(100, 100, 100, 0.6);
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Instrument Sans', sans-serif;
	background: #ffffff;
	min-height: 100dvh;
	min-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
	overflow-x: hidden;
}

body.aquarel-bg-image {
	background-image: url('../images/background/header-aquarel-bg-2.webp');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left top;
}

body.logged-in {
	overflow-y: hidden !important;
}

body.logged-in .main-container {
	overflow-y: hidden !important;
	min-height: 100dvh;
}

a i { color: var(--bs-dark); }

.main-container { 
	width:100%; 
	max-width:500px; 
	margin: 0 auto;
}

.center-content-container { 
	width:100%; 
	max-width: 500px;
	height:calc(100dvh - 152px);
	min-height:calc(100dvh - 152px); 
	max-height:calc(100dvh - 152px); 
	overflow-y:auto; 
	overflow-x:hidden; 
	padding-top:1.25rem; 
	padding-bottom:3rem; 
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	position: absolute;
	top: 84px;
}

.center-content-container .content {
	margin: auto 0;
  min-height: 100%;
  width:100%; 
	max-width:500px; 
} 

.px-content { padding-left:2.5rem !important; padding-right: 2.5rem !important; }
.font-supersmall { font-size:.6rem; }

.header-logo { max-width:60px; }
.header-logo-subtext { font-size:0.8rem; line-height:0.95rem; color:var(--bs-dark); }
.px-content .header-logo { max-width:80px; }

.logout-btn { width:32px; height:32px; }
/* old design, self made btns
.wallet-btns a { font-size: 0.75rem; color:var(--bs-gray-600); padding:1rem 0.75rem; }
.wallet-btns a i { font-size: 1.75rem; color:var(--bs-dark); }
.wallet-btns a i.fa-google { font-size:1.5rem; margin-top:0.125rem } 
.wallet-btns a, .wallet-btns a i, .wallet-btns a i::before { line-height: 1rem; }
.wallet-btns a:hover i { color:white; }*/

.wallet-btns a { font-size: 0.8rem; padding:0.6rem .8rem !important; border-radius:0.6rem; }
.wallet-btns a .wallet-img { width:25%; }
/*.wallet-btns a .wallet-img img { height:42px; }*/
.wallet-btns a .wallet-text { text-align:left; line-height:0.8rem; margin-top: -0.2rem; }
.wallet-btns a .wallet-text .add-to { font-size:0.6rem; }

.main-title { font-size: 2.25rem; }
.light-title { margin-bottom:.5rem; font-size:0.8rem; }

.card, .card-header { border: 0; }
.card-header { background-color: var(--primary-base-color);	color: var(--primary-contrast-color); }

.bottom-menu { position:fixed; bottom:0; left:0; width:100%; z-index:1020; }
.bottom-menu a.menu-btn { text-decoration:none; }
.bottom-menu a .menu-title { font-size:0.6rem; color:var(--bs-gray-600); }

/*.btn-custom-primary-color {
	background-color: var(--primary-base-color);
	color: var(--primary-contrast-color);
}*/

/* 
form design + select2 fixes 
*/
.form-container .form-group label { font-size:0.8rem; }
.form-container .form-group .form-control::placeholder {
  color: var(--bs-gray-400) !important;
}

.form-container .form-group .select2-container--default .select2-selection--single {
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

.form-container .form-group .select2-container .select2-selection--single {
	height: 2.35rem;
	user-select: none;
	-webkit-user-select: none;
}

.form-container .form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
	color:var(--bs-body-color);
	line-height: 1.5rem;
}

.form-container .form-group .select2-container .select2-selection--single .select2-selection__rendered {
	padding: .375rem 1.5rem .375rem .75rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.form-container .form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 2.35rem;
	width: 1.5rem;
}

.select2-dropdown {
	background-color: var(--bs-body-bg) !important;
	border: var(--bs-border-width) solid var(--bs-border-color) !important;
	border-radius: var(--bs-border-radius) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--primary-base-color) !important;
	color: var(--primary-contrast-color) !important;
}

.form-footer { font-size:0.8rem; line-height:1.3rem; color: var(--bs-gray-500); }
.form-footer i { font-size: 0.7; color: var(--bs-gray-600); }
.form-footer a { color: var(--bs-gray-600); font-size:0.8rem; }

.transaction-container { width:100%; }
.transaction { 
	padding: 1rem; 
	border-radius:var(--bs-border-radius); 
	border: var(--bs-border-width) solid var(--bs-border-color) !important; 
	background-color: var(--bs-body-bg) !important; 
	font-size: 0.8rem;
	margin-bottom: 1rem;
}
.transaction .transaction-title { /*font-size:1rem;*/ font-weight:600; }
.transaction .transaction-info .info-block span { font-size:0.6rem; color: var(--bs-gray-600); }
.transaction .transaction-action a:hover { cursor:pointer; }
.transaction .transaction-mutation { font-size:1rem; font-weight:600; }
.no-transactions, .loading-transactions { font-size:0.8rem; color: var(--bs-gray-600); }
/*.loading-transactions { font-size:0.8rem; font-style:italic; }*/
.loading-transactions i { margin-right:.5rem; display: inline-block; animation: spin 1s linear infinite; }

.gift {
	padding: 1rem; 
	border-radius:var(--bs-border-radius); 
	border: var(--bs-border-width) solid var(--bs-border-color) !important; 
	background-color: var(--bs-body-bg) !important; 
	font-size: 0.8rem;
	margin-bottom: 1rem;
}
.gift .gift-image { max-width:30%; border-radius:var(--bs-border-radius);  }
/*.gift-title, .gift-text { width:100%; text-align:left; }*/
.gift-title { font-weight:600; }
.gift-text { color: var(--bs-gray-600); }
.gift-costs { line-height:1rem; }
.gift-costs .points { font-size:1rem; font-weight:600; }
.gift-costs .subtitle { font-size:0.6rem; }

/* Keyframes */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

img.account-menu-icon {
	width: 30px;
}