@charset "utf-8";

/************************************************************************************
*										GLOBAL										*
*************************************************************************************/
html {
	font-size: 13px;
}
body {
	margin: 0 auto; 
	max-width: 1440px;
	padding: 0 1vw;
	font-family: sans-serif;
	font-family: var(--lnb-font-title);
	height: 100%;
}
button {
	font-size: inherit;
	font-family: inherit;
}
.lb-h1 { 
	font-size: 1.6rem;
	color: var(--lnb-black-color); 
}
.lb-h2 {
	font-size: 1.4rem;
	color: var(--lnb-black-color);
	font-weight: 700;
}
.lb-h3 {
	font-size: 1.25rem;
	color: var(--lnb-black-color);
	font-weight: 400;
}
.lb-a:link, .lb-a:visited {
	text-decoration: none;
	color: var(--lnb-link-font-color);
}
.lb-a:hover, .lb-a:active {
	text-decoration: none;
	color: var(--lnb-link-font-hover-color);
}

/************************************************************************************
*									SECTIONS										*
*************************************************************************************/

.lb-section {
	flex: 1;
	margin: 15px 4px;
	padding: 20px;
	border-radius: var(--lnb-strong-border-radius);
	border-width: 2px;
	border-style: solid;
	color: var(--lnb-black-color);
}
.lb-section-blue {
	background-color: var(--lnb-blue-color-20);
	border-color: var(--lnb-blue-color-40);
}
.lb-section-green {
	background-color: var(--lnb-green-color-20);
	border-color: var(--lnb-green-color-40);
}
.lb-section-orange {
	background-color: var(--lnb-orange-color-20);
	border-color: var(--lnb-orange-color-40);
}

/************************************************************************************
*									BUTTONS											*
*************************************************************************************/
.lb-btn-blue {
	background-color: var(--lnb-charcoal-grey-color);
	border-color: var(--lnb-charcoal-grey-color);
	color: var(--lnb-white-color);
}
.lb-btn-green {
	background-color: var(--lnb-charcoal-grey-color);
	border-color: var(--lnb-charcoal-grey-color);
	color: var(--lnb-white-color);
}
.lb-btn-orange {
	background-color: var(--lnb-charcoal-grey-color);
	border-color: var(--lnb-charcoal-grey-color);
	color: var(--lnb-white-color);
}
.lb-btn-blue:hover {
	background-color: var(--lnb-white-color);
	border-color: var(--lnb-blue-color);
	color: var(--lnb-blue-color);
}
.lb-btn-green:hover {
	background-color: var(--lnb-white-color);
	border-color: var(--lnb-green-color);
	color: var(--lnb-green-color);
}
.lb-btn-orange:hover {
	background-color: var(--lnb-white-color);
	border-color: var(--lnb-orange-color);
	color: var(--lnb-orange-color);
}
.lb-btn-logout {
	background-color: var(--lnb-white-color);
	color: var(--lnb-charcoal-grey-color);
}
.lb-btn-logout:hover {
	color: var(--lnb-orange-color);
}

/************************************************************************************
*									INPUT											*
*************************************************************************************/
.lb-input-blue:focus, 
.lb-input-blue:hover {
	border: 1px solid var(--lnb-blue-color);
	outline: none;
}
.lb-input-green:focus,
.lb-input-green:hover {
	border: 1px solid var(--lnb-green-color);
	outline: none;
}
.lb-input-orange:focus,
.lb-input-orange:hover {
	border: 1px solid var(--lnb-orange-color);
	outline: none;
}
/************************************************************************************
*								RESPONSIVE											*
*************************************************************************************
 *
 * Flexbox Grid: 
 * 	xs : Extra small (mobile phone)
 * 	sm : Small (tablet) / Min-width: 48em (768px)
 * 	md : Medium (little labtop) / Min-width: 64em (1024px)
 * 	lg : Large (labtop) / Min-width: 75em (1200px)
 * 	xl : Extra large (large screen labtop) / Min-width: 90em (1440px)
 **/

@media only screen and (min-width: 48em) {
	.col-sm.col-sm-auto {
		flex: 0 0 auto ; /* Allows the column to size itself based on its content */
		width: auto ;
	}
}