@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* VARS */

: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: #111827;
	--gray-900-rgb:  17, 24, 39;
	--gray-950: #030712;
	--primary-50:  #f2f7f7;
	--primary-100: #c3f5f2;
	--primary-200: #aee4e3;
	--primary-300: #95d7d4;
	--primary-400: #7ec8c7;
	--primary-500: #4bb0ad;
	--primary-600: #238c8a;
	--primary-700: #006462; /* Default */
	--primary-700-rgb: 0, 100, 98; /* Default */
	--primary-800: #00504e;
	--primary-900: #003c3b;
	--primary-950: #002827;
	--secondary-50:  #fbf4f4;
	--secondary-100: #fde3e4;
	--secondary-200: #fbcdcf;
	--secondary-300: #f8a9ac;
	--secondary-400: #f1787d;
	--secondary-500: #e64d53;
	--secondary-600: #d32f35;
	--secondary-700: #a72227; /* Default */
	--secondary-700-rgb: 167, 34, 39; /* Default */
	--secondary-800: #932125;
	--secondary-900: #7a2225;
	--secondary-950: #420d0f;
	--tertiary-50:  #fff9eb;
	--tertiary-100: #fdedc8;
	--tertiary-200: #fbdb8c;
	--tertiary-300: #f9c150;
	--tertiary-400: #f7a823; /* Default */
	--tertiary-400-rgb: 247, 168, 35; /* Default */
	--tertiary-500: #f1880f;
	--tertiary-600: #C98421; /* Alt */ 
	--tertiary-700: #b1440c;
	--tertiary-800: #903510;
	--tertiary-900: #762d11;
	--tertiary-950: #441404;

	--primary: var(--primary-700);
	--secondary: var(--secondary-700);
	--main-color: var(--tertiary-400);
	--second-color: var(--primary-700);
	--map-maille-border-color: var(--gray-200);
	--map-maille-lastobs-border-color: #c218d0;
	--map-territory-border-color: var(--gray-700);
	--map-area-border-width: 3px;
	--map-area-border-color: var(--second-color);
	--scrollbarBG: #cfd8dc;
	--thumbBG: var(--main-color);
	
	--font-family-sans-serif: Barlow,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/* BASE */

html,
body {
	background-color: var(--gray-100);
	color: var(--gray-900);
	font-family: var(--font-family-sans-serif);
}

a {
	color: var(--primary);
	
	&:hover {
		color: var(--primary);
	}
}

/* UTILS */

.text-muted {
	color: var(--gray-500) !important;
}

/* NAVBAR */

.navbar {
	border-bottom-color: var(--gray-200); 
	justify-content: start;
}

.logoStructure {
	margin: 0;
	padding: 0;
	height: auto;
	max-height: 36px;
}

.navbar-light .navbar-brand {
	font-size: 20px;
	line-height: 36px;
	font-weight: 500;
}

.navbar-toggler {
	margin-left: auto;
}

@media (max-width: 760px) {
	.navbar-collapse {
		background-color: var(--primary-900);
	}
}

.shna-navbar-brand {
	order: 999;
	margin-right: 1rem;
}

@media (max-width: 760px) {
	.shna-navbar-brand {
		order: initial;
	}
}

.shna-navbar-logo {
	height: 50px;
}

/* SIDEBAR */

sidebar {
	background-color: var(--primary-900);
	color: #fff;
}

#sidebar_menu li {
	border-bottom: none;

	&:hover {
		background-color: var(--primary-700);		
	}
}

#sidebar_menu .svg-inline--fa {
	font-size: 22px;
}

/* CARD */

.card {
	border-color: var(--gray-200);
}

.card-title,
.title-spaced, 
.card-title.title-spaced {
	margin-bottom: 1.5rem !important;
}

/* TABS */

.nav.nav-tabs {
	border-bottom: none;	
}

.nav-tabs .nav-link {
	color: var(--gray-500) !important;	
	background-color: var(--gray-50); 
	border: none;
	border-bottom: 3px solid var(--gray-200);
	border-radius: 0;
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active {
	color: var(--gray-900) !important;	
	background-color: var(--gray-100); 
	border-bottom: 3px solid var(--primary);
}

#otherInformations .nav-tabs .nav-link {
	padding: 14px 60px;
}

/* BADGE */

.badge-primary {
	background-color: var(--primary-700);
}

a.badge-primary:hover,
a.badge-primary:focus {
	background-color: var(--primary-600);	
} 

/* newSpecies */

#newSpecies .col-lg-2.col-md-4.col-sm-6.col-xs-12 {
	display: flex;
	
	& > * {
		flex: 1;
	}
}

/* taxonList */

#taxonListItem:hover {
	background-color: var(--gray-50) !important; 
}

/* Gallery */

#group {
	margin-left: 0.5rem;
}