:root {
	/* from android */
	--dd_bg_body: #7aaabd;
	--dd_bg_page_content: #8cb6c6;
	--dd_bg_panel_box: #9cc0cf91;

	--dd_headers: #2c2b62;
	--dd_text_content: #cadce6;
	--dd_btn_text: #305668;
	--dd_btn_background: #d8e6ea;
	--dd_btn_active: #fbc337;
	--dd_btn_hover: #cadce6;
	--dd_public_access: #d5f5e3;
	--dd_private_access: #fadbd8;
	--dd_red: #ff1700;

	--header-text-color: #2c2b62;
	--text-color: #cadce6;
	--button-text-color: #305668;
	--button-background-color: #d8e6ea;
	--button-active-background-color: #fbc337;
	--button-hover-background-color: #cadce6;

	--panel-hover-background-color: #d8e6ea94;
	--panel-background-color: #d8e6ea67;
	--background-color: #7aaabd;
	--border-radius: 5px;
	--box-shadow: 0 0 6px rgba(0, 0, 0, 0.99);
	--border: 1px solid rgba(65, 65, 65, 0.255);
	--padding: 5px;
	--margin: 10px;
	--gap: 10px;

	--font-page-title: 'Bruno Ace SC', cursive;
	--font-panel-title: 'Barlow', sans-serif;

	--page-height: 100vh;

	--badge-bg-for-old-browsers: #7ec1e8 !important;
	--badge-bg-moz-gdr: -moz-linear-gradient(-45deg, #7ec1e8 0%, #2086ca 29%, #2b93d9 35%, #3b6f9f 100%) !important;
	--badge-bg-webkit-gdr: -webkit-linear-gradient(-45deg, #7ec1e8 0%, #2086ca 29%, #2b93d9 35%, #3b6f9f 100%) !important;
	--badge-bg-new-gdr: linear-gradient(135deg, #7ec1e8 0%, #2086ca 29%, #2b93d9 35%, #3b6f9f 100%) !important;
}
* {
	/* outline: 1px solid rgb(216, 216, 216); */
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	scrollbar-width: none; /* Firefox */
	-webkit-overflow-scrolling: touch;
}
*::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;
}
body {
	position: relative;
	background-color: var(--background-color);
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	-webkit-overflow-scrolling: touch;
}

/* 
-------------------------------------------------- 
-	PAGE 
-------------------------------------------------- 
*/
.message {
	color: red;
	font-weight: bolder;
	padding: 10px;
	margin: 10px;
}

.page {
	position: relative;
	height: auto;
	background-color: var(--dd_bg_body);
	min-height: 100vh;
}
.page-content {
	background-color: var(--dd_bg_page_content);

	position: relative;
	height: fit-content;
	overflow-y: scroll !important;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	min-height: 100vh;
	padding: 10px !important;
	margin: 10px 10px;
	margin-bottom: 85px;
	border-radius: var(--border-radius);
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}

.page-content::-webkit-scrollbar {
	display: none;
}
.page-title {
	color: var(--header-text-color);
	text-transform: uppercase;
	text-align: center;
	font-size: 40px;
	margin: 30px auto 70px auto;
	padding: 10px;
	font-family: var(--font-page-title);
}
.page-sub-title {
	margin: 0px 10px 20px 10px;
	display: flex;
	justify-content: space-between;
}
/*
--------------------------------------------------
- PAGE PANEL
--------------------------------------------------
*/

.panel-box {
	margin: 20px 0px !important;
	background-color: var(--dd_bg_panel_box);

	padding: var(--padding) !important;
	border-radius: var(--border-radius) !important;
	margin: var(--margin) !important;
}
.panel-title {
	padding: var(--padding);
	text-align: left;
	margin: 0;
	text-transform: uppercase;
	color: var(--button-text-color);
	font-family: var(--font-panel-title);
	font-size: large;
}

.panel-content {
	margin: 20px 0px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: var(--padding);
}
/* 
-------------------------------------------------- 
-	OTHER 
-------------------------------------------------- 
*/
.sub-menu-box {
	padding: 10px;
	background-blend-mode: normal;

	/* border: var(--border) !important; */
	padding: var(--padding) !important;
	border-radius: var(--border-radius) !important;
	/* box-shadow: var(--box-shadow) !important; */
	margin: var(--margin) !important;
	top: -20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.notifications {
	top: auto !important;
	bottom: 100px !important;
	position: absolute !important;
}

hr {
	border: 1px solid rgb(222, 222, 222);
}

a {
	display: block;
	color: var(--button-text-color);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: black;
}
.abutton {
	text-decoration: underline;
	color: var(--button-text-color);
	position: relative;
}
a.button:hover {
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.abutton::after {
	content: ' ↗';
	font-size: x-small;
	font-weight: bolder;
	position: absolute;
	top: -4px;
	right: -7px;
}
.menu-link-active {
	text-decoration: underline;
}
.button {
	background-color: var(--button-background-color);
	padding: var(--padding);
	border-radius: var(--border-radius);
	text-transform: uppercase;
	color: var(--button-text-color);
}
.button:hover {
	background-color: var(--button-hover-background-color);
	cursor: pointer;
	color: black;
	text-decoration: underline;
}
.button-active {
	background-color: var(--button-active-background-color);
	cursor: pointer;
	color: black;
}