@font-face {
	font-family: Nulshock bd;
	src: url("/webfonts/nulshock bd.ttf");
}

@font-face {
	font-family: cfont;
	src: url("/webfonts/cfont.otf");
}

:root {
	--bg-color1: rgb(255,255,255);
	--bg-color2: rgb(255,255,255);
	--bg-color3: #e2eaf7;
	--bg-color4: rgb(255,255,255);
	--bg-color-nav1:#d7e2f4;
	--bg-color-nav2:rgba(226, 234, 247,0.5); 
	--bg-hover: rgb(235, 235, 235); 
	--color-text-main: rgba(10,10,40,0.9);  
	--color-text-muted: rgb(108, 117, 125);   
	--color-text-accent:#ff0066;
	--color-text-special:#14a44d;
	--color-text-placeholder: rgba(50,50,50,0.5);
}

body.light-theme {
	--bg-color1: rgb(255,255,255);
	--bg-color2: rgb(255,255,255);
	--bg-color3: #e2eaf7;
	--bg-color4: rgb(255,255,255);
	--bg-color-nav1:#d7e2f4;
	--bg-color-nav2:rgba(226, 234, 247,0.5); 
	--bg-hover: rgb(235, 235, 235); 
	--color-text-main: rgba(10,10,40,0.9);  
	--color-text-muted: rgb(108, 117, 125);   
	--color-text-accent:#ff0066;
	--color-text-special:#14a44d;  
	--color-text-placeholder: rgba(50,50,50,0.5);
}

body.dark-theme {
	--bg-color1: #16151a;
	--bg-color2: #27242d;
	--bg-color3: #302d37;
	--bg-color4: #3b3744;
	--bg-color-nav1: #27242d;
	--bg-color-nav2:#302d37;
	--bg-hover: #302d37;
	--color-text-main: #e0e0e0;  
	--color-text-muted: rgb(200, 200, 200);    
	--color-text-accent:#ff0066;
	--color-text-special:#14a44d;
	--color-text-placeholder: rgba(200,200,200,0.6);
}

body {
	background-color: var(--bg-color1);
	color: var(--color-text-main);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.c-navbar, .c-sidebar, .c-card, .c-modal, .c-section { 
	background: var(--bg-color2); 
	color: var(--color-text-main); 
	transition: background-color 0.3s ease;
}

.c-area {
	background: var(--bg-color3); 
	color: var(--color-text-primary); 
	transition: background-color 0.3s ease;
	border-radius:5px; 
}

.c-navbar:hover {
	background: var(--bg-color3); 
}

.c-nav1 {
	color: var(--color-text-main); 
	background: var(--bg-color-nav1); 
}

.c-nav2 {
	color: var(--color-text-main); 
	background: var(--bg-color-nav2); 
}

.c-accordion .accordion-item {
	background: var(--bg-color2)!important; 
	color: var(--color-text-main)!important; 
	border:none!important; 
}

.c-accordion button {
	background: var(--bg-color2)!important; 
	color: var(--color-text-main)!important; 
}

.c-dropdown {
  background: var(--bg-color2)!important;
}

.c-dropdown li a {
	color: var(--color-text-main)!important;
}

.c-dropdown li a:hover, .c-dropdown li a:active  {
	background: var(--bg-hover)!important;
}

.c-text-main, .c-text-main:hover {
	color: var(--color-text-main);
}

.c-text-muted, .c-text-muted:hover {
	color: var(--color-text-muted);
}

.c-bg1 {
	background: var(--bg-color1);
	color: var(--color-text-main);
}

.c-bg2 {
	background: var(--bg-color2)!important;
	color: var(--color-text-main);
}

.c-bg3 {
	background: var(--bg-color3)!important;
	color: var(--color-text-main);
}

.c-bg4 {
	background: var(--bg-color4)!important;
	color: var(--color-text-main);
}

.c-bg-primary {
	background: #e2eaf7; 
	color:#2f5aa2;
	transition: background-color 0.3s ease;
	border-radius:5px; 
}

.c-bg-danger {
	background: #fae4e8; 
	color:#b03d50; 
	transition: background-color 0.3s ease;
	border-radius:5px; 
}

.c-bg-success {
	background: #dcf1e4; 
	color:#0c622e; 
	transition: background-color 0.3s ease;
	border-radius:5px; 
}

.c-bg-warning {
	background: #fbf1dd; 
	color:#896110; 
	transition: background-color 0.3s ease;
	border-radius:5px; 
}

.c-btn {
	background: var(--bg-color3)!important;
	color: var(--color-text-primary);
	box-shadow:none; 
}

input, select, textarea {
	background: transparent!important;
	color: var(--color-text-main)!important;
}

::placeholder {
	color: var(--color-text-placeholder);
}

h1, 
h2, 
h3,
h4, 
h5, 
h6, 
p, 
small, 
span, 
a {
	color: var(--color-text-main);
}

a:hover {
	color: var(--color-text-main);
}

a:active {
	color: var(--color-text-main);
}

.c-text-accent {
	color: var(--color-text-accent);
}

.fw-400 {
	font-weight:400!important; 
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
  
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.smooth {
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;
}

.smooth-fast {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.hidden {
	visibility:hidden; 
}

.c-border-bottom {
	border-bottom:1px solid rgba(100,100,100,0.4);
}