/* Blue Light scheme (Default) */
/* Can be forced with data-theme="light" */
@font-face {
	font-family: 'NothingYouCouldDo';
	src: url('/fonts/NothingYouCouldDo.ttf') format('truetype');
	/* src: url("./static/fonts/Ubuntu.ttf") format("truetype"); */
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Ubuntu';
	src: url('/fonts/Ubuntu.ttf') format('truetype');
	/* src: url("./static/fonts/Ubuntu.ttf") format("truetype"); */
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'PressStart2P';
	src: url('/fonts/PressStart2P.ttf') format('truetype');
	/* src: url("./static/fonts/Ubuntu.ttf") format("truetype"); */
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.font-cursive {
	/* padding-right: 2rem; */
	font-family: 'NothingYouCouldDo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	/* font-style: italic !important; */
	font-style: normal !important;
	/* font-weight: bold; */
	font-size: 1rem; /* 16px */
	line-height: 1.5rem; /* 24px */
	/* letter-spacing: 0.1rem;
			word-spacing: 0.05rem; */
	/* overflow-y: visible; */
}

html,
body,
button,
input,
select,
textarea {
	font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	/* font-style: italic !important; */
	font-style: normal !important;
	/* font-weight: bold; */
	font-size: 1rem; /* 16px */
	line-height: 1.5rem; /* 24px */
	/* letter-spacing: 0.1rem;
			word-spacing: 0.05rem; */
	scrollbar-gutter: auto;
}

.font-gamer {
	/* padding-right: 2rem; */
	font-family: 'PressStart2P', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	/* font-style: italic !important; */
	font-style: normal !important;
	/* font-weight: bold; */
	font-size: 1rem; /* 16px */
	line-height: 1.5rem; /* 24px */
	/* letter-spacing: 0.1rem;
			word-spacing: 0.05rem; */
	/* overflow-y: visible; */
}

.text-gradient {
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	-moz-background-clip: text !important;
	-moz-text-fill-color: transparent !important;
	background-clip: text !important;
	padding-right: 0.2rem !important;
	letter-spacing: 0rem;
}

.text-ungradient {
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: initial !important;
	-moz-background-clip: text !important;
	-moz-text-fill-color: initial !important;
	background-clip: text !important;
	padding-right: 0.2rem !important;
	letter-spacing: 0rem;
}

.text-gradient-primary {
	background-color: var(--by-theme-primary) !important;
	background-image: linear-gradient(
		90deg,
		rgba(0, 7, 68, 0.95) 0%,
		rgba(0, 27, 88, 0.95) 50%,
		rgba(0, 67, 128, 0.95) 100%
	) !important;
	/* text-shadow: 1px 1px 2px rgba(0, 27, 88, 0.95) !important; */
	/* text-shadow: 0.5px 0.5px 1px rgba(0, 27, 88, 0.95) !important; */
	text-shadow: 0.5px 0.5px 1px var(--by-theme-primary) !important;
	line-height: normal !important;
}
.text-gradient-secondary {
	background-color: var(--by-theme-secondary) !important;
	background-image: linear-gradient(
		90deg,
		rgba(130, 129, 133, 0.95) 0%,
		rgba(170, 169, 173, 0.95) 50%,
		rgba(190, 189, 193, 0.95) 100%
	) !important;
	/* text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3) !important; */
	text-shadow: 0.5px 0.5px 1px var(--by-theme-secondary) !important;
	line-height: normal !important;
}

:root {
	/* --max-width-screen: 1536px !important; */
	--max-width-screen: 1366px !important;
	/* --mdc-theme-primary: rgba(0, 27, 88, 0.95); */
	/* --by-theme-primary: rgba(0, 27, 88, 0.95) !important; */
	--by-theme-primary: rgba(0, 27, 88, 0.95) !important;
	--by-theme-secondary: rgba(170, 169, 173, 0.8) !important;
	--header-height: 45px !important;
	--app-bar-height: 40px !important;
	/* --swiper-theme-color: var(--by-theme-primary); */
	--swiper-theme-color: rgba(0, 27, 88, 0.5) !important;
	/* --swiper-navigation-color: var(--swiper-theme-color) !important; */
	/* --scrollbar-background: red !important;
			--scrollbar-foreground: green !important; */
	/* --document-scrollbar-standard-size: auto; */
	/* --document-scrollbar-webkit-size: 0.6rem !important; */
	--document-scrollbar-thumb-background-opacity: 0.3 !important;
	--document-scrollbar-track-background-opacity: 0.3 !important;
	/* --document-scrollbar-track-padding: 0 !important; */
	cursor: inherit;
}
label {
	cursor: inherit;
}

[data-theme='light'],
:root:not([data-theme='dark']) {
	/* --primary: #1e88e5 !important; */
	--primary: var(--by-theme-primary) !important;
	--primary-hover: #1976d2 !important;
	--primary-focus: rgba(30, 136, 229, 0.125) !important;
	--primary-inverse: #fff !important;
}

/* Blue Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
/* @media only screen and (prefers-color-scheme: dark) {
			:root:not([data-theme]) {
				--primary: #1e88e5;
				--primary-hover: #2196f3;
				--primary-focus: rgba(30, 136, 229, 0.25);
				--primary-inverse: #fff;
			}
		} */

/* Blue Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme='dark'] {
	/* --primary: #1e88e5 !important; */
	--primary: var(--by-theme-primary) !important;
	--primary-hover: #2196f3 !important;
	--primary-focus: rgba(30, 136, 229, 0.25) !important;
	--primary-inverse: #fff !important;
}

/* Blue (Common styles) */
:root {
	--form-element-active-border-color: var(--primary) !important;
	--form-element-focus-color: var(--primary-focus) !important;
	--switch-color: var(--primary-inverse) !important;
	--switch-checked-background-color: var(--primary) !important;
}

::selection {
	/* background-color: hsla(var(--palette-foreground-lighter), var(--document-background-opacity));
			color: hsla(var(--palette-background-normal), var(--document-font-opacity)); */
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: initial !important;
	-moz-background-clip: text !important;
	-moz-text-fill-color: initial !important;
	background-clip: text !important;
	/* background-color: var(--by-theme-primary); */
	background-color: rgba(0, 11, 72, 0.8) !important;
	/* color: var(--by-theme-secondary); */
	color: rgba(152, 153, 157, 0.8) !important;
}

::-webkit-scrollbar {
	/* width: calc(var(--document-scrollbar-webkit-size) + (var(--document-scrollbar-track-padding) * 1rem));
			height: calc(var(--document-scrollbar-webkit-size) + (var(--document-scrollbar-track-padding) * 1rem)); */
	width: 0.3rem !important;
	height: 0.4rem !important;
	border-radius: 10px;
}
::-webkit-scrollbar:hover {
	/* width: 0.4rem !important;
	height: 0.5rem !important; */
}

::-webkit-scrollbar-track {
	/* background-color: hsla(var(--palettes-auto-background-boldest),var(--document-scrollbar-track-background-opacity)); */
	background-color: rgba(170, 169, 173, 0.4) !important;
}

::-webkit-scrollbar-thumb {
	/* background-clip: padding-box !important; */
	padding: 10px !important;
	/* background-color: rgba(170, 169, 173, 0.6) !important; */
	background-color: rgba(0, 0, 0, 0.6) !important;
}
::-webkit-scrollbar-thumb:hover {
	/* background-clip: padding-box !important; */
	/* background-color: rgba(170, 169, 173, 0.6) !important; */
	background-color: rgba(0, 0, 0, 0.4) !important;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
	border-radius: 10px !important;
	/* border: calc(var(--document-scrollbar-track-padding)*1rem) solid rgba(255,255,255,0);
			-webkit-transition: background-color var(--animations-visual-duration) var(--animations-visual-function);
			transition: background-color var(--animations-visual-duration) var(--animations-visual-function); */
	/* border: 0.1rem solid rgba(255, 255, 255, 0) !important; */
	-webkit-transition: background-color var(--animations-visual-duration)
		var(--animations-visual-function);
	transition: background-color var(--animations-visual-duration) var(--animations-visual-function);
}
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-thumb:hover {
	/* border: 0rem solid rgba(255, 255, 255, 0) !important; */
	-webkit-transition: background-color var(--animations-visual-duration)
		var(--animations-visual-function);
	transition: background-color var(--animations-visual-duration) var(--animations-visual-function);
}

.fade-in {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 200ms,
		visibility 200ms;
}
.fade-out {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 200ms,
		visibility 200ms;
}