@charset "UTF-8";


@font-face {
	font-family:'Reactor7';
		src:url('../webfonts/Reactor7.eot');
		src:url('../webfonts/Reactor7.eot?#iefix') format('embedded-opentype'),
				url('../webfonts/Reactor7.woff') format('woff'),
				url('../webfonts/Reactor7.ttf') format('truetype'),
				url('../webfonts/Reactor7.svg#Reactor7') format('svg');
	font-weight:normal;
	font-style:normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family:'Reactor7';
		src: url('../webfonts/Reactor7.svg') format('svg');
		font-weight:normal;
		font-style:normal;
	}
}

/* Wishing to overwrite colors for dark theme 
* var(--bs-body-bg-rgb)
* var(--bs-primary)
* var(--bs-primary)
* var(--bs-danger)
* var(--bs-link-color)
* var(--bs-link-hover-color)
*/

:root{
	--bs-body-font-family:  Arial, sans-serif;
	--font-family-headings:  Reactor7, Arial, sans-serif;
	--font-family-brand:  Reactor7, Arial, serif;
	--font-family-links: Reactor7, Arial, sans-serif;

	--def-border-radius: 0.5rem;
	--bs-btn-border-radius: 0.75rem;
	--sidebar-width: 300px;
	--top-nav-bg-color-rgb: var(--bs-body-bg-rgb);
	--top-nav-bg-opacity: .66;
	--top-nav-notification-bg-color: var(--bs-primary);
	--top-nav-notification-bg-color: var(--bs-danger);
	
	--transition-time: 0.6s;
}



/* Skillke Additions */
/* Small Paissa */
@media (max-width: 1369px){
	.npc {
		width:400px;
		height:250px;
		background: url('/public/img/npc/card-merchant-paissa-small.png') no-repeat;
		margin:0 auto;
	}	
	.speechbubble {
		min-width:20%;
		max-width:270px;
		position: relative;
		top:90px;
		left:150px;
		padding-left:7px;
	}
	.speechbubble p {
		letter-spacing: 0; /* Adjust as needed */
		font-size: .8rem;
	}
}

/* Medium Paissa */
@media (min-width: 1370px) and (max-width: 1899px){
	.npc {
		width:1024px;
		height:320px;
		background: url('/public/img/npc/card-merchant-paissa-medium.png') no-repeat;
		margin:0 auto;
	}
	.speechbubble {
		min-width:20%;
		max-width:450px;
		position: relative;
		top:120px;
		left:560px;
		padding-left:15px;	
	}
	.speechbubble p {
		letter-spacing: .15em; /* Adjust as needed */
	}
}
/* Large Paissa */
@media (min-width: 1900px) {
	.npc {
		width:1600px;
		height:500px;
		background: url('/public/img/npc/card-merchant-paissa-large.png') no-repeat;
		margin:0 auto;
	}	
	.speechbubble {
		min-width:20%;
		max-width:500px;
		position: relative;
		top:250px;
		left:1000px;
		padding-left:15px;
	}
	.speechbubble p {
		letter-spacing: .15em; /* Adjust as needed */
	}
}



/* Speech bubble for all media types*/
.speechbubble {
	background: #e7dfd6;
	border: 1px solid #363636;
	border-radius:25px;	
}
.speechbubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #e7dfd6;
	border-left: 0;
	border-bottom: 0;
	margin-top: 3px;
	margin-left: -4px;
}

.speechbubble p {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  color: #111110;
  margin:auto 0;
  padding: 5px;
}

/* The talking effect Row 1 */
@keyframes talking {
  0% { width: 0 }
  5% { width: 10% }
  10% { width: 20% }
  15% { width: 30% }
  20% { width: 40% }
  25% { width: 50% }
  30% { width: 60% }
  35% { width: 70% }
  40% { width: 80% }
  45% { width: 90% }
  50% { width: 100%  }
  100% { width: 100% }
}
/* The talking effect Row 2*/
@keyframes talking-row2 {
	0% { width: 0;
		display:none; }
	45% { width: 0;
		display:none;}
	48% { width: 0 }
	50% { width: 10% }
	55% { width: 20% }
	60% { width: 30% }
	65% { width: 40% }
	70% { width: 50% }
	75% { width: 60% }
	80% { width: 70% }
	85% { width: 80% }
	90% { width: 90% }
	95% { width: 100%  }
	100% { width: 100% }
}

.speechbubble p:nth-child(1) {
	animation: 
    talking 4.5s steps(10, end),
    .75s fade-in infinite;
}
.speechbubble p:nth-child(2) {
	animation: 
    talking-row2 4.5s steps(10, end),
    .75s fade-in infinite;
}

.special-link {
	background-image: url('/public/img/icons/sparkle.gif') !important;
	background-repeat:no-repeat !important;
	background-position: 0% 50% !important;
	
}
.special-link2 {
	background-image: url('/public/img/icons/sparkle2.gif') !important;
	background-repeat:repeat !important;
	background-clip: text !important;
	color: transparent !important;
	text-shadow: none !important;
	font-weight: bolder !important;
}

/* Skillke Additions end
* https://css-tricks.com/snippets/css/typewriter-effect/ for speech bubble
*/

#top-navigation {
	background-image: url('/public/img/icons/test-background.png') !important;
	background-repeat:repeat !important;
}

#logo .rounded-circle {
	background-image:url('../img/icons/thepaissa.png');
	background-repeat: no-repeat;
	min-width: 100px;
	min-height: 100px;
}

/* BRANDING FONT */
.ff-brand {
	font-family: var(--font-family-brand);
	color:var(--bs-light-text-emphasis);
	
}

nav .brand, nav .brand:hover {
	color: var(--bs-primary);
	font-family: var(--font-family-brand);
	font-size: 2em;
}


nav .brand small{
	color: var(--bs-gray-500);
	font-size: 1rem;
}

[data-bs-theme='dark'] .pagination .page-item.active .page-link {
	color: var(--bs-light);
	border-color: var(--bs-light);
	background-color: var(--nav-link-color);
}

[data-bs-theme='dark'] .pagination .page-item:not(.active) .page-link{
	color: var(--bs-dark);
	background-color: var(--bs-light);
}

[data-bs-theme='dark'] .pagination .page-item.disabled .page-link{
	color: var(--bs-dark);
	background-color: var(--bs-gray-500);
}

[data-bs-theme='dark'] .nav-tabs .nav-link:not(.active) {
		color:var(--nav-link-color);
		background-color:var(--bs-light);
}
[data-bs-theme='dark'] .nav-tabs .nav-link.active {
	color:var(--bs-light);
	border-color:var(--bs-light);
	background-color:var(--nav-link-color);
}

[data-bs-theme='dark'] .nav-tabs {
	border-color:var(--bs-light);
}

[data-bs-theme='dark'] .nav-link {
	color:var(--bs-light);
}
[data-bs-theme='dark'] .nav-link:hover {
	color:var(--nav-link-color);
}

[data-bs-theme='dark'] button:not(:disabled) {
	color: var(--bs-light);
	border-color: var(--bs-light);
	background-color: var(--nav-link-color);
}

[data-bs-theme='dark'] button:not(:disabled):hover {
	color: var(--bs-dark);
	background-color: var(--bs-light);
}

[data-bs-theme='dark'] button:not(:disabled).accordion-button {
	color: var(--bs-light) !important;
	border-color: var(--bs-light) !important;
	background-color: var(--bs-gray-800) !important;
	font-size: 1.5rem;
}

[data-bs-theme='dark'] button:not(:disabled):hover.accordion-button {
	color: var(--bs-gray-800) !important;
	background-color: var(--bs-gray-500) !important;
}

button:not(:disabled).accordion-button {
	color: var(--bs-white) !important;
	border-color: var(--bs-light) !important;
	background-color: var(--bs-gray-500) !important;
	font-size: 1.5rem;
}

button:not(:disabled):hover.accordion-button {
	color: var(--bs-gray-800) !important;
	background-color: var(--bs-gray-500) !important;
}

/* SIDEBAR MENU */
#sidebar {
	position: fixed;
	z-index: 1099;
	overflow-x: hidden;
	width: var(--sidebar-width);
	height: 100dvh;
	margin: 0 1rem 0 calc(var(--sidebar-width) * -1);
	padding: 2rem;
	transition: margin var(--transition-time);
	background-image: url('/public/img/icons/test-background.png') !important;
	background-repeat:repeat !important;
	
	
	--nav-link-color: var(--bs-link-color);
	--nav-link-color-hover: var(--bs-link-hover-color);
} 

#sidebar.visible {
	margin-left: 0;
}

#sidebar #sidebar-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	display: inline;
}

#sidebar .nav-header {
	font-size: calc(var(--bs-body-font-size) * .85);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	opacity: .75;
}
#sidebar .nav-header + .nav {
	margin-top: .75rem;
}

#sidebar .nav {
	flex-direction: column;
	margin-bottom: 2rem
}

#sidebar .nav .nav-item > a.nav-link {
	display: flex;
	align-items: center;
	color: var(--nav-link-color);
	font-family: var(--font-family-links);
	font-size: 1.75rem;
}
#sidebar .nav .nav-item > a.nav-link:hover {
	color: var(--nav-link-color-hover);
}

#sidebar .nav .nav-item > a.nav-link > .nav-link-icon {
	display: none;
}
#sidebar .nav .nav-item > a.nav-link:hover > .nav-link-icon {
	display: block;
	width: 1.0rem;
	text-align: left;
	margin-right: 20px;
}

#main-container {
	width: 100%;
	margin: 0;
	transition: margin var(--transition-time), width var(--transition-time);
}

#main-container > main {
	padding: calc(2rem + 60px) 1rem 2rem 1rem;
}

/* TOP NAVBAR */
#main-container #top-navigation {
	display: flex;
	align-items: center;
	z-index: 1098;
	position: fixed;
	width: 100%;
	padding: 0.25rem auto;
	background-color: rgba( var(--top-nav-bg-color-rgb) , var(--top-nav-bg-opacity) );
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: width var(--transition-time);
}

#main-container #top-navigation #sidebar-open {
	margin-left: 1rem;
	display: block;
}

#main-container #top-navigation .nav {
	align-items:center;
}

#main-container #top-navigation .nav a.nav-link {
	display: flex;
	align-items: center;
	color: var(--bs-body-color);
	opacity: 0.8;
	transition: opacity 0.15s ease-in-out;
}

#main-container #top-navigation .nav a.nav-link:hover {
	opacity: 1;
}

#main-container #top-navigation .nav a .icon {
	position: relative;
	font-size: calc(var(--bs-body-font-size) * 1.25);
}

#main-container #top-navigation .nav a .icon + * {
	margin-left: 0.5rem;
}

#main-container #top-navigation .nav a .icon .notification {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	aspect-ratio: 1;
	width: 0.6rem;
	background-color: var(--top-nav-notification-bg-color);
	border-radius: 50%;
}

#main-container #top-navigation .nav a .username {
	display: block;
	max-width: 33dvw;
	overflow: visible;
	font-weight: 700;
}

#main-container #top-navigation .nav a .subtext {
	display: block;
	max-width: 33dvw;
	overflow: visible;
	font-size: calc(var(--bs-body-font-size) * 0.75);
	line-height: 0.95;
}

#main-container #top-navigation #user-dropdown > a .icon {
	font-size: calc(var(--bs-body-font-size) * 2);
}

#main-container #top-navigation #user-dropdown > a .icon + * {
	margin-left: 0.5rem
}

footer {
	padding: 2rem;
	background-image: url('/public/img/icons/test-background.png') !important;
	background-repeat:repeat !important;
}

#members-online {
	position: fixed;
	bottom: 0.125rem;
	right: 0.125rem;
	display: inline-block;
}

/* SIDEBAR VISIBLE */
@media (min-width: 1200px){
	#sidebar {
		margin: 0 1rem 0 0;
	}
	#sidebar #sidebar-close {
		display: none;
	}
	#main-container {
		margin: 0 0 0 var(--sidebar-width);
		width: calc(100% - var(--sidebar-width));
	}
	#main-container #top-navigation {
		width: calc(100% - var(--sidebar-width));
	}
	#main-container #top-navigation #sidebar-open {
		display: none;
	}
}

/* html tags */
body#design3 {
	display:flex;
}

area {
	cursor: help;
}

a {
	text-decoration: none !important;
}

a:not([class]):hover{
	text-decoration: underline;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-headings);
	letter-spacing: -.1rem;
}

#sidebar .nav a .icon {
	position: relative;
	font-size: calc(var(--bs-body-font-size) * 1.25);
}

#sidebar .nav a .icon + * {
	margin-left: 0.5rem;
}

#sidebar .nav a .icon .notification {
	position: absolute;
	top: -1rem;
	right: 1rem;
	background-color: var(--top-nav-notification-bg-color);
	border-radius: 50%;
}

.btn {
	box-shadow: 0.075rem 0.10rem 0.45rem -0.20rem var(--bs-btn-bg); 
}
.btn.btn-outline {
	box-shadow: 0.075rem 0.10rem 0.45rem -0.20rem var(--bs-btn-border-color); 
}

.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

.breadcrumb {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

.theme-toggle {
	cursor: pointer;
}
.theme-toggle.toggle-light {
	display: none;
}

[data-bs-theme='dark'] .theme-toggle.toggle-light {
	display: inline-block;
}
.theme-toggle.toggle-dark {
	display: inline-block;
}

[data-bs-theme='dark'] .theme-toggle.toggle-dark {
	display: none;
}

.btn-outline-dark:hover svg {
	color: var(--bs-primary);
}

[data-bs-theme='dark'] .btn-outline-dark {
	color: var(--bs-light);
	border-color: var(--bs-light);
	background-color: var(--nav-link-color);
}

[data-bs-theme='dark'] .btn-outline-dark:hover {
	color: var(--bs-dark);
	background-color: var(--bs-light);
}

[data-bs-theme='dark'] .btn-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-gray-500);
    --bs-btn-hover-border-color: var(--bs-gray-500);
    --bs-btn-focus-shadow-rgb: 66,70,73;
    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-gray-500);
    --bs-btn-active-border-color: var(--bs-gray-500);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-light);
    --bs-btn-disabled-bg: var(--bs-gray-500);
    --bs-btn-disabled-border-color: var(--bs-gray-500);
}