@font-face {  font-family: 'Lato-regular'; src: url(../fonts/Lato-Regular.ttf);} 
@font-face {  font-family: 'Lato-black'; src: url(../fonts/Lato-Black.ttf);}  
@font-face {  font-family: 'Lato-bold'; src: url(../fonts/Lato-Bold.ttf);}  
@font-face {  font-family: 'Lato-light'; src: url(../fonts/Lato-Light.ttf);}  
@font-face {  font-family: 'Lato-thin'; src: url(../fonts/Lato-Thin.ttf);}
@font-face {
  font-family: 'Cinzel'; 
  src: url('../fonts/Cinzel-VariableFont_wght.ttf') format('ttf'); 
}

@font-face {
  font-family: 'CinzelDecorative-Regular'; 
  src: url('../fonts/CinzelDecorative-Regular.ttf') format('ttf'); 
}

.font-regular-lato{font-family:'Lato-regular';} 
.font-black-lato{font-family:'Lato-black';} 
.font-bold-lato{font-family:'Lato-bold';} 

:root {
	--hdr-logo: 11rem;
	--main-nav-height: 2.25rem;
	--header-h: 4rem;
	--sidebar-w: 12.5rem;
	--header-height: 4.5rem; 
	
	--brand: #9c1846;
	--brand-dark: #7f1338;
	--bg: #fbfbfc;
	--card: #fff;
	
	--sidebar-collapsed-w: 5rem;
	--gap: 1.125rem;
	--radius: 0.85rem;
	--accent: #7a2aa6; 
	--muted: #f6f3f7;
	--card-border: #eee;
	--text-muted: #777;
	--body-color: #231F20;

	--palette-dark: #231F20;
	--palette-primary: #231F20;
	--palette-secondary: #6D6E71;
	--palette-tertiary: #9D9D9D;
	--palette-disabled: #B4B4B4;

	--palette-primary-action: #97144D;
	--palette-secondary-action: #ED1164;
	--palette-tertiary-action: #12877F;

	--palette-primary-surface: #FFFFFF;
	--palette-secondary-surface: #F9F9F9;
	--palette-tertiary-surface: #F0F0F0;	

	--palette-neutral-1: #F7F7F7;
	--palette-neutral-2: #F3FFF3;
	--palette-neutral-3: #EBF0F9;
	--palette-neutral-4: #F4EBF9;
	--palette-neutral-5: #F9F6EB;
	--palette-neutral-6: #B8DDDB;

	--palette-negative: #EB0000;
	--palette-positive: #278829;
	--palette-warning: #D84008;
	--palette-variable: #145599;
	
	--palette-grey-50: #404040;
    --palette-grey-100: #575757;
    --palette-grey-200: #6E6E6E;
    --palette-grey-300: #858585;
    --palette-grey-400: #9D9D9D;
    --palette-grey-500: #B4B4B4;
    --palette-grey-600: #CBCBCB;
    --palette-grey-700: #E2E2E2;
    --palette-grey-800: #F1F1F1;
    --palette-grey-900: #F9F9F9;

	--font-4: 0.25rem;     
	--font-6: 1rem;     
	--font-8: 0.5rem;     
	--font-10: 0.625rem;     
	--font-12: 0.75rem;     
	--font-14: 0.875rem;     
	--font-16: 1rem;     
	--font-18: 1.125rem;     
	--font-20: 1.25rem;  
	--font-24: 1.5rem;   
	--font-26: 1.625rem;   
	
	--font-thin: 300;
	--font-normal: 400;
	--font-semi-bold: 600;
	--font-bold: 700;
	
	--font-regular-lato: 'Lato-regular';
	--font-black-lato: 'Lato-black';
	--font-bold-lato: 'Lato-bold'; 
	
	--border-color: #D5D5D5;
}

body {color: var(--body-color); font-family: var(--font-regular-lato); font-weight: 400; font-size: 14px; line-height: 1.0; display: flex; flex-direction: column; background: var(--palette-grey-800);}
body, html {height: 100%; overflow-x: hidden;}

li::marker {display: none;}
.font-12 {font-size: var(--font-12);}
.font-8 { font-size: 8px; }

/* RESPONSIVE BASE */
@media (max-width: 767.98px) {
	body, html {font-size: 13px; line-height: 1.2;}
}

@media (min-width: 768px) {
	body, html {font-size: 14px;}
}

@media (min-width: 1366px) {
	body, html {font-size: 16px;}
}

/* BUTTONS */
.btn-primary {background: var(--palette-primary-action); border: 0;}
.btn-primary:hover, .btn-primary:focus {background: var(--palette-primary-action); opacity: 0.9;}

/* HEADER */
header.header-section {box-shadow: 0 5px 7px rgba(0,0,0,0.075); position: fixed; top: 0.5rem; left: 0.5rem; width: calc(100% - 1rem); z-index: 1040; border-radius: var(--radius); background: #fff;}
.navbar-brand {padding: 0;}

/* MAIN CONTENT */
.main-content {padding: calc(var(--header-height) + 2rem) 0 0 calc(var(--sidebar-w) + 1.5rem); min-height: 100vh;}

/* SIDEBAR */
.sidebar {width: var(--sidebar-w); background: var(--card); border-right: 1px solid #eee; padding: 1rem 0.75rem; height: calc(100vh - var(--header-height) - 3rem); overflow-y: auto; transition: 0.22s; position: fixed; margin: calc(var(--header-height) + 2rem) 0rem 0 1rem; border-radius: var(--radius);}
.sidebar .nav-item {border-radius: 0.25rem; font-weight: 400; font-size: var(--font-14); margin-bottom: 0.25rem; list-style: none;}
.sidebar .nav-link {display: flex; align-items: center; color: #333; text-decoration: none; padding: 1.0rem 1rem; gap: 0.75rem;}
.sidebar .nav-link span {width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #f3f4f6; font-size: 1.2rem;}
.sidebar .nav-item.active {background: var(--brand); color: #fff;}
.sidebar .nav-item.active .nav-link {color: #fff;}
.sidebar .nav-item.active .nav-link span {color: var(--brand); background: #fff;}
.sidebar .nav-item:hover:not(.active) {background: #f1f1f1;}

/* TABLES */
.table-responsive { border-radius: 0.5rem; }

/* MOBILE RESPONSIVENESS */
@media (max-width: 991.98px) {
    .main-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: calc(var(--header-height) + 1.5rem) !important;
    }
    .sidebar {
        display: none !important;
    }
    .offcanvas .sidebar {
        display: block !important;
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* CARDS */
.card {border-radius: var(--radius); border: 1px solid #eee; background: #fff; padding: 1rem;}

/* UTILITIES */
.bg-primary-subtle { background-color: rgba(151, 20, 77, 0.05); }
.bg-success-subtle { background-color: rgba(25, 135, 84, 0.1); }
.bg-warning-subtle { background-color: rgba(255, 193, 7, 0.08); }
.bg-danger-subtle { background-color: rgba(220, 53, 69, 0.08); }
.text-primary { color: #97144d !important; }

/* MISC */
.logo_title {font-family: 'Cinzel Decorative', serif; font-size: 2.4rem; color: var(--palette-dark); margin: 0rem 0 -0.5rem; line-height: 1.0;}

/* DASHBOARD CUSTOMS */
.dashboard-maincard .icon {width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #f1f1f1; border-radius: 50%; margin: 0 1rem 0 0; font-size: 2.1rem;}
.graph-canvas {width: 5rem; height: 3rem; padding: 0.5rem; background: rgba(0,0,0,0.05); border-radius: 0.5rem;}
.graph-canvas canvas {width: 100%; height: 100%;}