@font-face {
    font-family: "m-b";
    src:url("./fonts/Montserrat-Bold.ttf");
}
@font-face {
    font-family: "m-eb";
    src:url("./fonts/Montserrat-ExtraBold.ttf");
}
@font-face {
    font-family: "m-el";
    src:url("./fonts/Montserrat-ExtraLight.ttf");
}
@font-face {
    font-family: "m-l";
    src:url("./fonts/Montserrat-Light.ttf");
}
@font-face {
    font-family: "m-m";
    src:url("./fonts/Montserrat-Medium.ttf");
}
@font-face {
    font-family: "m-r";
    src:url("./fonts/Montserrat-Regular.ttf");
}
@font-face {
    font-family: "m-sb";
    src:url("./fonts/Montserrat-SemiBold.ttf");
}
@font-face {
    font-family: "m-t";
    src:url("./fonts/Montserrat-Thin.ttf");
}

/* Open Sans */
@font-face {
    font-family: "o-b";
    src:url("./fonts/OpenSans-Bold.ttf");
}
@font-face {
    font-family: "o-eb";
    src:url("./fonts/OpenSans-ExtraBold.ttf");
}
@font-face {
    font-family: "o-el";
    src:url("./fonts/OpenSans-ExtraLight.ttf");
}
@font-face {
    font-family: "o-l";
    src:url("./fonts/OpenSans-Light.ttf");
}
@font-face {
    font-family: "o-m";
    src:url("./fonts/OpenSans-Medium.ttf");
}
@font-face {
    font-family: "o-r";
    src:url("./fonts/OpenSans-Regular.ttf");
}
@font-face {
    font-family: "o-sb";
    src:url("./fonts/OpenSans-SemiBold.ttf");
}
@font-face {
    font-family: "o-t";
    src:url("./fonts/OpenSans-Thin.ttf");
}

/* Poppins */
@font-face {
    font-family: "p-b";
    src:url("./fonts/Poppins-Bold.ttf");
}
@font-face {
    font-family: "p-eb";
    src:url("./fonts/Poppins-ExtraBold.ttf");
}
@font-face {
    font-family: "p-el";
    src:url("./fonts/Poppins-ExtraLight.ttf");
}
@font-face {
    font-family: "p-l";
    src:url("./fonts/Poppins-Light.ttf");
}
@font-face {
    font-family: "p-m";
    src:url("./fonts/Poppins-Medium.ttf");
}
@font-face {
    font-family: "p-r";
    src:url("./fonts/Poppins-Regular.ttf");
}
@font-face {
    font-family: "p-sb";
    src:url("./fonts/Poppins-SemiBold.ttf");
}
@font-face {
    font-family: "p-t";
    src:url("./fonts/Poppins-Thin.ttf");
}

:root {
    --gray-50: #F9FAFB;
	--gray-100: #F3F4F6;
	--gray-200: #E5E7EB;
	--gray-300: #D1D5DB;
	--gray-400: #9CA3AF;
	--gray-500: #6B7280;
	--gray-600: #4B5563;
	--gray-700: #374151;
	--gray-800: #1F2937;
	--gray-900: #1F2937;

	--red-50: #FDF2F2;
	--red-100: #FDE8E8;
	--red-200: #FBD5D5;
	--red-300: #F8B4B4;
	--red-400: #F98080;
	--red-500: #F05252;
	--red-600: #E02424;
	--red-700: #C81E1E;
	--red-800: #9B1C1C;
	--red-900: #771D1D;

	--yellow-50: #FDFDEA;
	--yellow-100: #FDF6B2;
	--yellow-200: #FCE96A;
	--yellow-300: #FACA15;
	--yellow-400: #E3A008;
	--yellow-500: #C27803;
	--yellow-600: #9F580A;
	--yellow-700: #8E4B10;
	--yellow-800: #723B13;
	--yellow-900: #633112;

	--green-50: #F3FAF7;
	--green-100: #DEF7EC;
	--green-200: #BCF0DA;
	--green-300: #84E1BC;
	--green-400: #31C48D;
	--green-500: #0E9F6E;
	--green-600: #057A55;
	--green-700: #046C4E;
	--green-800: #03543F;
	--green-900: #014737;

	--blue-50: #EBF5FF;
	--blue-100: #E1EFFE;
	--blue-200: #C3DDFD;
	--blue-300: #A4CAFE;
	--blue-400: #76A9FA;
	--blue-500: #3F83F8;
	--blue-600: #1C64F2;
	--blue-700: #1A56DB;
	--blue-800: #1E429F;
	--blue-900: #233876;

	--indigo-50: #F0F5FF;
	--indigo-100: #E5EDFF;
	--indigo-200: #CDDBFE;
	--indigo-300: #B4C6FC;
	--indigo-400: #8DA2FB;
	--indigo-500: #6875F5;
	--indigo-600: #5850EC;
	--indigo-700: #5145CD;
	--indigo-800: #42389D;
	--indigo-900: #362F78;

	--purple-50: #F6F5FF;
	--purple-100: #EDEBFE;
	--purple-200: #DCD7FE;
	--purple-300: #CABFFD;
	--purple-400: #AC94FA;
	--purple-500: #9061F9;
	--purple-600: #7E3AF2;
	--purple-700: #6C2BD9;
	--purple-800: #5521B5;
	--purple-900: #4A1D96;

	--pink-50: #FDF2F8;
	--pink-100: #FCE8F3;
	--pink-200: #FAD1E8;
	--pink-300: #F8B4D9;
	--pink-400: #F17EB8;
	--pink-500: #E74694;
	--pink-600: #D61F69;
	--pink-700: #BF125D;
	--pink-800: #99154B;
	--pink-900: #751A3D;

	--white-50: #ffffff;
	--white-100: #f6f6f6;
	--white-200: #ececec;
	--white-300: #e1e1e1;
	--white-400: #d0d0d0;

	--black-50: #999;
	--black-100: #888;
	--black-200: #777;
	--black-300: #666;
	--black-400: #555;
	--black-500: #444;
	--black-600: #333;
	--black-700: #222;
	--black-800: #111;
	--black-900: #000;

	--dark-blue-100: #393f86;
	--dark-blue-200: #292c7b;
	--dark-blue-300: #191970;
	--dark-blue-400: #111154;
	--dark-blue-500: #080838;

	--theme: var(--blue-900);
	--theme: #a3b943;
	--theme-color: var(--dark-blue-500);
	--theme-color-second: var(--white-100);
	--theme-bg: var(--white-50);
	--theme-bg-two: #2c2d7f;


    --font-family: o-r;
    
    --body-font-size:0.875rem;
    --body-bg: var(--gray-200);

	--border-radius-sm: 0.25rem;
	--border-radius-md: 0.5rem;
	--border-radius-lg: 1rem;

	--default-color: var(--black-800);

	--app-header-bg: var(--theme-bg);
	--app-header-box-shadow: 0 6px 6px rgba(var(--gray-200), 0.1);
	--app-header-height: 3.75rem;
	--app-header-brand-width: 15rem;
	--app-header-brand-height: 3.75rem;
	--app-header-brand-font-weight: 600;
    /* --app-header-icons-color: var(--theme-color); */
	--app-header-icons-color: var(--gray-400);
    --app-header-icons-hover: var(--black-200);

	--sidebar-width: 15rem;
	--sidebar-li-padding: 2px 6px;
	--sidebar-nav-item-padding: 5px 10px;
    --sidebar-font-family: m-r;
	--sidebar-active-font: m-m;
	--sidebar-text-size: 14x;
    --sidebar-text-color: var(--white-200);
    --sidebar-active-color: var(--white-100);








    --ff-o-m: o-m;
    --ff-o-r: o-r;
    --ff-o-l: o-l;
    --ff-o-el: o-el;
    --ff-o-sb: o-sb;
    --ff-o-b: o-b;
    --ff-o-eb: o-eb;

    --ff-p-m: p-m;
    --ff-p-r: p-r;
    --ff-p-l: p-l;
    --ff-p-el: p-el;
    --ff-p-sb: p-sb;
    --ff-p-b: p-b;
    --ff-p-eb: p-eb;

    --ff-m-m: m-m;
    --ff-m-r: m-r;
    --ff-m-l: m-l;
    --ff-m-el: m-el;
    --ff-m-sb: m-sb;
    --ff-m-b: m-b;
    --ff-m-eb: m-eb;
}

:root .dark {
    /* --theme: var(--yellow-300); */
	--theme-color: var(--white-400);
	--theme-bg: var(--black-700);
	--theme-bg-two: var(--black-700);
	--theme-bg-second: var(--black-600);

	--body-bg: var(--black-600);
	
	--app-header-bg: var(--theme-bg);
	--app-header-box-shadow: 0 6px 6px rgba(var(--gray-200), 0.1);
    --app-header-icons-color: var(--theme-color);
    
    --sidebar-text-color: var(--theme-color);
    --sidebar-active-color: var(--white-50);

    --default-color: var(--white-200);

}

:root .blue {
	--theme: var(--blue-600);
	/* --theme-color: var(--black-900); */
	/* --theme-bg: var(--white-50); */
}

:root .purple {
	--theme: var(--purple-600);
	--theme-color: var(--black-900);
	--theme-bg: var(--white-50);

	--sidebar-active-color: var(--white-50);
}



:root .indigo {
	--theme: var(--indigo-900);
	--theme-color: var(--black-900);
	--theme-bg: var(--white-50);

	--sidebar-active-color: var(--white-50);
}