html {
  height: -webkit-fill-available;
}

body {
	margin: 0px;
	padding: 0px;
	font: arial;
	font-size: 14px;
	font-weight: normal;
	overflow-y: scroll;
	overflow-x: hidden;
	z-index: 1;
	background-color: #F4F4F5;
	min-height: 100vh;
  min-height: -webkit-fill-available;
}

.bg-alb {
	background-color: var(--main-color) !important;
}

.bg-alb-08 {
	background-color: var(--main-color-alpha-08) !important;
}

.bg-alb-05 {
	background-color: var(--main-color-alpha-05) !important;
}

main {
	margin-left: var(--sidebar-width);
	padding: 0px 20px;
  height: 100vh;
  min-height: -webkit-fill-available;
  max-height: 100vh;
	transition: all 0.3s ease;
}

/* Sidebar override */
.logo-container {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.logo-img {
	display:inline-block;
	vertical-align: baseline;
}

.logo-text {
	/* background: linear-gradient(0deg, var(--main-color), var(--main-color-yellow)); */
	background: var(--main-color);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: opacity 0.3s ease;
	display:inline-block;
}

.sidebar {
	width: var(--sidebar-width);
	height: 100vh;
	transition: all 0.3s ease;
}

.sidebar.collapsed {
	width: var(--sidebar-width-collapsed);
}

.sidebar-link {
	color: #a0a3bd;
	transition: all 0.2s ease;
	border-radius: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
}

.sidebar-link:hover {
	color: #ffffff;
	background: var(--main-color-yellow-alpha05);
	transform: translateX(5px);
}

.sidebar-link.active {
	color: #ffffff;
	background: var(--main-color);
}

.collapsed~.main-content {
	margin-left: var(--sidebar-width-collapsed);
}

.collapsed > .logo-container {
	padding-left:0.5rem;
}

.toggle-btn {
	position: absolute;
	right: -15px;
	top: 20px;
	background: #ffffff;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	border: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	z-index: 100;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.collapsed .toggle-btn {
	transform: rotate(180deg);
}

.collapsed .hide-on-collapse {
	opacity: 0;
	visibility: hidden !important;
}

.collapsed .hide-on-collapse-span {
	opacity: 0;
	display: none;
}

.collapsed .logo-text {
	opacity: 0;
	display: none;
}

.collapsed .profile-info {
	opacity: 0;
}

.collapsed .sidebar-link {
	text-align: center;
	padding: 1rem !important;
	margin: 4px 0px;
	overflow: hidden;
}

.collapsed .sidebar-link i {
	margin: 0 !important;
}

.sidebar-material-icons {
	display: inline;
  vertical-align: bottom;
}

/*******************/

/*** Footer ***/
footer {
	margin-left: var(--sidebar-width);
}

.collapsed~footer {
	margin-left: var(--sidebar-width-collapsed);
}
/***************/

/* Buttons override */

.btn-main, 
.btn-main:active, 
.btn-main:focus, 
.btn-main:hover {
	background-color: var(--main-color) !important;
	--bs-btn-bg: var(--main-color);
	color: #ffffff;
}

.btn-main:active,  .btn-main:hover {
	border: 0.1rem solid var(--main-color-yellow);
	background-color: var(--main-color-yellow) !important;
	/* box-shadow: 0 0 0 0.2rem var(--main-color); */
}

.btn-main.active {
	border: 0.1rem solid #000000;
	/* box-shadow: 0 0 0 0.2rem var(--main-color);; */
}

/**************************/

/********* CARDS **********/

.card-alb > .card-header {
	background-color: var(--main-color) !important;
	color: #ffffff !important;
	font-size: 1.2rem !important;
	font-weight: bold !important;
}

/**************************/

/********* SEARCH *********/

.nav-link-alb {
	color: var(--main-color);
}

.nav-link-alb:hover {
	background-color: var(--main-color-yellow-alpha05);
	color:#ffffff;
}

.nav-link-alb.active {
	background-color: var(--main-color-yellow) !important;
	color: #ffffff !important;
}

/*************************/

.font-color-primary {
	color: var(--main-color);
}

.font-color-secondary {
	color: var(--main-color-yellow);
}

.cursor-pointer {
	cursor: pointer;
}

/******* FONT SIZES *******/
.fs-10e{
	font-size: 1em !important;
}

.fs-11e{
	font-size: 1.1em !important;
}

.fs-12e{
	font-size: 1.2em !important;
}

.fs-13e{
	font-size: 1.3em !important;
}

.fs-14e{
	font-size: 1.4em !important;
}

.fs-15e{
	font-size: 1.5em !important;
}

/******** CUSTOM TOOLTIPS **********/
.alb-tooltip {
	--bs-tooltip-bg: var(--main-color);
	--bs-tooltip-color: #ffffff;;
}

/**********************************/

/******** Toggle green status checkbox/radio **********/
.form-check-input-toggle:checked{
	background-color: #198754 !important;
	border-color: #198754 !important;
}

.form-check-input-toggle:focus{
	box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

/*****************************************************/

/*** Slider customization ***/
.slider-selection {
	background: var(--main-color-alpha-08) !important;
}

.slider-handle {
	background: var(--main-color-yellow) !important;
}

/***************************/
/* Tables override */
.table-alb {
	--bs-table-color: #fff;
	--bs-table-bg: var(--main-color-yellow);
	--bs-table-border-color: var(--main-color-yellow-alpha-05);
	--bs-table-striped-bg: #2c3034;
	--bs-table-striped-color: #fff;
	--bs-table-active-bg: #373b3e;
	--bs-table-active-color: #fff;
	--bs-table-hover-bg: #323539;
	--bs-table-hover-color: #fff;
	color: #fff;
	border-color: var(--main-color-yellow-alpha-05);
}