@font-face {
    font-family: outfit;
    font-weight: 300;
    font-style: normal;
    src: url(../assets/fonts/Outfit/Outfit-VariableFont_wght.ttf);
}

* {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    font-family: outfit !important;
    /* user-select: none; */
}

html{
    scrollbar-color: #0050ff ;
    scrollbar-width: none;
    scrollbar-color: #0050ff ;
    scroll-behavior: smooth;
}

:root {

	--global-blue: #0d6efd;
    --global-blue-opacity: rgba(13, 110, 253, 0.1);
    
    --primary-clr: #0050ff;

    --form-bg: #f8f9fa;
    --input-border: #ced4da;


	--main_color: #172c58; /* my color #170d40   #172c58*/ 
	--main_color_rgb: rgba(87, 6, 92, 0.7); /*#1a1c87*/
	--main_color_rgb2: rgba(87, 6, 92, 0.95);  /*0003b3*/
	--main_color_shade: #7a0880; /*#22248a*/
	--main_color_shade2: #aa05b3; /*#2b2ee9*/
	--main_color_shade3:#f9bdfc; /* #999bf0*/
	
	--highlight_color: #0050ff; /*blue color #0050ff*/
	--highlight_color2: #005ed1;/*blue color #7f9dde   #ed0096*/
	--highlight_color_dim: #7f9dde; /*Pink color #0050ff*/
	
	
	--danger_color: #a60202; /* Red */ 
	
	--highlight_color3: #fffbad;
	--new_color_shade: #dcfdce; 
	
	--main_color_shade6: #ffd2a1; 
	--foreground_color1: #0D0D0D; /* More darger Gray */ 
	--foreground_color2: #000000;
	--foreground_color4: #ffc587; /* Lightorange */ 
	
	--color_shade1: #fff; /* White colors */ 
	--color_shade2: #fafafa; 
	--color_shade3: rgb(239, 239, 239);
	--color_shade4: #e3e5e3; 
	--color_shade5: #c5c5c5; 
	
	--color_shade6:#7e7e7e; /* lighter dark like gray */ 
	--color_shade7: #616161; 
	--color_shade8: #464646; 
	--color_shade9: #1f1e1e; 
	--color-shade10: #202020; 
	
	--success_color_shade: #037001; /* Dark green for success */ 
	--success_color_shade2: #dcf8c6; 
	--notify_success_color: #00ff4c; 
	
	--color1: #009879; /* green color */
	--color2: #006598; /* blue */ 
	--color3: #cf1b27; 
	--color_red: red; 
	--color4: #f77e05;
	--color5: #0d4261; 
	--color6: #f15710;
	--color7: #b83b01;
	--color8: #f9ca3f;
	--color9: #8de02c;
	--color10: #FFF4CC; /* for pending */
	--color11: #E0E0E0; /* for reversed */


    --transition: all .3s ease;

    --global-blue-opacity: rgba(13, 110, 253, 0.1);
}

body {
    width: 100%;
    height: 100%;
    background-color: var(--background-clr);
    font-family: outfit !important;
    font-size: 16px;
    line-height: 1.5;
    color: #444444;
}

a {
    color: #0050ff;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #717ff5;
    text-decoration: none;
}

.bg-light-grey {
    background-color: #f0f0f0 !important;
}

/* BUTTONS */

.btn {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 8px 12px;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}


/* --- btn primary one ----  */
.btn-primary {
    background: var(--color_shade1);
    color: var(--highlight_color);
    outline: 1px solid #fff;
}

.btn-primary:hover  {
    background: none;
}

/* --- btn primary 2 ----  */

.btn-primary2 {
    background: var(--highlight_color);
    color: #fff !important;
    font-weight: 500;
}

.btn-primary2:hover  {
    background: var(--color_shade1);
    outline: 1px solid var(--highlight_color);
    color: var(--highlight_color) !important
}

/* --- btn primary 3 ----  */

.btn-primary3 {
    background: var(--color_shade1);
    outline: 1px solid var(--highlight_color);
    color: var(--highlight_color) !important;
    font-weight: 500;
}

.btn-primary3:hover  {
    background: var(--highlight_color);
    color: #fff !important;
}

/* --- btn primary 4----  */

.btn-primary4 {
    background: var(--highlight_color);
    color: #fff !important;
    font-weight: 500;
}

.btn-primary4:hover  {
    background: var(--highlight_color);
    color: #fff !important;
}

/* --- btn view ----  */

.btn-view {
    background: var(--highlight_color);
    color: #fff !important;
    font-weight: 500;
    padding: 1px 7px !important;
}

.btn-view:hover  {
    background: var(--color_shade1);
    outline: 1px solid var(--highlight_color);
    color: var(--highlight_color) !important
}

/* --- btn view 2----  */

.btn-view2 {
    outline: 1px solid var(--highlight_color);
    color: var(--highlight_color) !important;
}

.btn-view2:hover {
    outline: 1px solid var(--highlight_color);
    color: var(--highlight_color) !important;   
}

/* --- btn close ----  */

.btn-secondary {
    font-weight: 500;
    padding: 5px 7px !important;
    background: var(--color_shade1) !important;
    color: var(--highlight_color);
    border: none;
    outline: 1px solid var(--highlight_color);
}

.btn-secondary:hover  {
    background: var(--color_shade1);
    outline: 1px solid var(--highlight_color);
    color: var(--highlight_color) !important
}


/* --- btn outline one ----  */

.btn-outline {
    background: none;
    color: #fff;
    border: none;
    outline: 1px solid #fff;
}

.btn-outline:hover  {
    background: var(--color_shade1);
    color: var(--highlight_color);
    outline: 1px solid var(--highlight_color);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}





/*-----------------------------------------------------------
>>> THIS IS FOR THE DIVISION BTW USER & ADMIN DASHBOARD
-----------------------------------------------------------*/

.admin-dashboard-wrapper {
    display: block;
    margin-block: 2rem;
}

.admin-dashbboard {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    background: var(--highlight_color);
    color: #fff;
    padding: 10px;
    font-weight: 600;
    border-radius: 3px;
}

.admin-dashbboard i{
    font-size: 1.5rem;
}