:root {
	--sidebar-width-full: 240px;	
	--sidebar-width-collapsed: 94px;	
	--navbar-height: 72px;
	--footer-height: 32px;
	--sidebar-toggler-size: 30px;
	--sidebar-animation-speed: 0.05s;
}

/* Sidebar */

.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	width: var(--sidebar-width-full);
	background-color: var(--color-sidebar-bg);
	height: auto !important;
	display: block !important;
	transition: all var(--sidebar-animation-speed) linear;
	z-index: 9999;
}

.sidebar-menu-icon {
    width: 16px;
    height: 16px;
}

.main-wrapper {
	padding-left: 0;
	padding-right: 0;
}

.main {
	padding: 16px;
	background-color: var(--color-page-bg);
	min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
}

.sidebar.collapse:not(.show)+.main-wrapper,
.sidebar.collapsing+.main-wrapper {
   padding-left: var(--sidebar-width-collapsed);
   transition: all var(--sidebar-animation-speed) linear;
}	

.sidebar.collapse+.main-wrapper {
   padding-left: var(--sidebar-width-full);
   transition: all var(--sidebar-animation-speed) linear;
}	

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

.sidebar.collapsing {
    width: var(--sidebar-width-collapsed);
	height: auto;
    overflow: hidden;
    transition: width var(--sidebar-animation-speed) linear;
}

.sidebar.collapsing .nav-link-text, 
.sidebar.collapse:not(.show) .nav-link-text {
	display: none;
	visibility: hidden;
}

.sidebar.collapse.show .nav-link-text {
	display: inline;
	visibility: visible;
}

.sidebar.collapse.show {
	width: var(--sidebar-width-full);
	transition: all var(--sidebar-animation-speed) linear;
}

/* Page title */
header .title {
	position: absolute;
}

.sidebar.collapse.show + * header  .title,
.sidebar.collapsing + * header .title {
	left: 16px;
}
.sidebar.collapse:not(.show) + * header .title {
	left: 50px;
}

/* Scroll for sidebar */

/* For Firefox */
@supports (-moz-appearance:none) {
	.sidebar-menu
	{
		scrollbar-width: thin;
		scrollbar-color: var(--color-scrollbar) var(--color-sidebar-bg);
	}
}

/* For WebKit browsers (Chrome, Safari) */
@supports (-webkit-font-smoothing: antialiased) {		
	.sidebar-menu::-webkit-scrollbar-track
	{
		background-color: var(--color-sidebar-bg);
	}

	.sidebar-menu::-webkit-scrollbar
	{
		width: 4px;
	}

	.sidebar.collapse.show > .sidebar-menu:hover::-webkit-scrollbar
	{
		width: 10px;
	}

	.sidebar-menu::-webkit-scrollbar-thumb
	{
		border-right: 1px solid var(--color-sidebar-bg);
		background-color: var(--color-scrollbar);
	}
}

/* Sidebar */

.sidebar-menu {
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-size: 14px;
  color: var(--color-sidebar-fg);
  border-left: solid 3px transparent;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar .nav-link .sidebar-menu-icon {
  margin-right: 4px;
}

.sidebar.collapse.show .nav-link:hover,
.sidebar.collapse.show .nav-link.active {
  background-color: var(--color-sidebar-active-bg);
  border-left: solid 3px var(--color-sidebar-active);
  transition: all var(--sidebar-animation-speed) linear;
}

.sidebar.collapse:not(.show) .sidebar-menu,
.sidebar.collapsing:not(.show) .sidebar-menu {
	align-items: center !important;
	transition: all var(--sidebar-animation-speed) linear;
}

.sidebar.collapse.show .nav-link {
	height: 36px;
}

.sidebar.collapse:not(.show) .nav-link {
	height: 50px;
}

.sidebar.collapsing .nav-link {
	height: 50px;
    transition: all var(--sidebar-animation-speed) linear;
}

.sidebar.collapse:not(.show) .nav-link .sidebar-menu-icon,
.sidebar.collapsing .nav-link .sidebar-menu-icon {
   font-size: 18px;
   transition: all var(--sidebar-animation-speed) linear;   
}

.sidebar.collapse .nav-link:hover,
.sidebar.collapsing .nav-link:hover,
.sidebar.collapse .nav-link.active,
.sidebar.collapsing .nav-link.active {
	background-color: transparent;
	border-left: solid 3px transparent;
}

.sidebar .nav-link:hover .sidebar-menu-icon,
.sidebar .nav-link.active .sidebar-menu-icon {
  color: var(--color-sidebar-active);
}

.sidebar-heading {
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase;
	margin-top: 25px;
	margin-bottom: 15px;
	margin-left: 19px;
	color: #afb4c0;
}

/* Navbar */

.navbar-nav {
	display: flex;
	flex-direction: row;
}

.navbar-nav .dropdown-menu {
    position: absolute;
}


.navbar-nav .nav-link {
    padding-right: 8px;
    padding-left: 8px;
}


.navbar .btn.btn-navbar-toggler {
	display: none;
}

@media (min-width: 1025px) {
	.navbar .navbar-nav.collapse {
		display: flex;
	}
}

/* Header menu on small screens */
@media (max-width: 1024px) {
	
	.navbar .btn.btn-navbar-toggler {
		font-size: 24px;
		display: block;
		z-index: 1000;
		right: 10px;
		border: none;
		width: 32px;
		height: 32px;
		padding: 0;
	    margin: 0px 0px 2px 0px;
		color: green;
	}
	
	.navbar .btn.btn-navbar-toggler:hover {
		color: red;
	}
	
	.navbar-nav {		
		display: none;
		position: absolute;
		background: gray;
		top: var(--navbar-height);
		right: 0;
		left: 0;
		
	}
	
	.navbar-nav.collapse.show,
	.navbar-nav.collapsing	{
		display: block;
	}
	
	.navbar-nav .nav-item {
		min-height: 38px;
	}
	
	.navbar-nav .dropdown-menu {
		position: relative;
		border: none;
	}
	
	.navbar-nav .dropdown-menu.show {
		position: relative;
		border: none;
	}
	
	.navbar .separator {
		display: none;
	}
	
	.navbar-nav .dropdown-menu .dropdown-item {
		font-size: 14px;
		line-height: 14px;
		padding-left: 60px;
		min-height: 48px;
		padding-top: 16px;
		padding-bottom: 16px;
		background-color: gray;
		color: var(--color-dropdown-menu-text);
	}

	.navbar-nav .nav-item .nav-link {
		padding-left: 16px;
		padding-right: 16px;
		font-size: 14px;
		line-height: 14px;
		min-height: 48px;
		padding-top: 16px;
		padding-bottom: 16px;
	}
	
	.nav-link.dropdown-toggle,
	.nav-link.dropdown-toggle.show
	{
		transition: height 0.25s ease-in;
	}
}

.navbar {
	height: var(--navbar-height);
	background-color: var(--color-navbar-bg);
    padding-left: 22px;
    padding-right: 22px;
	border-bottom: 1px solid var(--color-navbar-separator);
}

.navbar .separator {
	background-color: var(--color-navbar-separator);
	width: 1px;
	margin: 10px;
}

.navbar >* .dropdown-toggle::after {
    display: inline-block;
	vertical-align: 0;
	margin-left: 5px;
    content: "\F282";
	font-size: 10px;
	font-family: bootstrap-icons !important;
	border: none;
}

.logo {
  background-image: url(../img/logo.svg);
  background-repeat: no-repeat;
  height: var(--navbar-height);
  background-position-x: 11px;
  background-position-y: 17px;
  display: block;
}

.sidebar.collapse:not(.show) .logo,
.sidebar.collapsing .logo {
	background-image: url(../img/logo-collapsed.svg);
	width: var(--sidebar-width-collapsed);
	background-position-x: 30px;
	transition: all var(--sidebar-animation-speed) linear;
}

.sidebar.collapse .logo {
	background-image: url(../img/logo.svg);
	width: 150px;
	transition: all var(--sidebar-animation-speed) linear;
}

.sidebar-menu {
	display: flex;
	flex-flow: column;
	height: calc(100% - 24px - var(--navbar-height));
}

.sidebar-menu .free-space {
	flex: 1 1 auto;
}

/* Sidebar toggle button */

.sidebar-toggler {
	display: inline;
	width: var(--sidebar-toggler-size);
	height: var(--sidebar-toggler-size);
	border-radius: 15px;
	border-style: solid;
	border-width: 1px;
    display: inline;
	position: absolute;
	top: 20px;
	right: 10px;
	padding-top: 4px;
}

/* Toggler aside logo */

.sidebar .sidebar-toggler {
	color: var(--color-sidebar-toggler-hover-bg);
	background: transparent;
	border-color: transparent;
}
.sidebar .sidebar-toggler:hover {
	color: #fff;
	background: var(--color-sidebar-toggler-hover-bg);
	transition: background 0.15s linear;
}

.sidebar.collapse:not(.show) .sidebar-toggler {
	display: none;
	transition: all var(--sidebar-animation-speed) linear;
	transition: display var(--sidebar-animation-speed) linear;
}

.sidebar.collapse.show + .main-wrapper> .navbar .sidebar-toggler {
	display: none;
	transition: all var(--sidebar-animation-speed) linear;
	transition: display var(--sidebar-animation-speed) linear;
}

/* Toggler on navbar - visible only when collapsed */

.navbar .sidebar-toggler {
	left: 10px;
	color: var(--color-navbar-toggler-text);
	background: var(--color-navbar-toggler-bg);
	border-color: var(--color-navbar-toggler-border);
	transition: background 0.15s linear;
}

.navbar .sidebar-toggler:hover {
	background: var(--color-navbar-toggler-hover-bg);
	color: var(--color-navbar-toggler-hover-text);
	transition: background 0.15s linear;
}

/* Theme toggler */

.theme-toggler {
    top: 6px;
	margin-left: 10px;
	margin-right: 10px;
    position: relative;
}

.theme-toggler .tgl {
	display: none;
}
.theme-toggler .tgl, 
.theme-toggler .tgl:after, 
.theme-toggler .tgl:before, 
.theme-toggler .tgl *, 
.theme-toggler .tgl *:after, 
.theme-toggler .tgl *:before, 
.theme-toggler .tgl + .tgl-btn {
	box-sizing: border-box;
}

.theme-toggler .tgl::selection, 
.theme-toggler .tgl:after::selection, 
.theme-toggler .tgl:before::selection, 
.theme-toggler .tgl *::selection, 
.theme-toggler .tgl *:after::selection, 
.theme-toggler .tgl *:before::selection, 
.theme-toggler .tgl + .tgl-btn::selection {
	background: none;
}

.theme-toggler .tgl + .tgl-btn {
	outline: 0;
	display: block;
	width: 64px;
	height: 22px;
	position: relative;
	cursor: pointer;
	user-select: none;
}

.theme-toggler .tgl + .tgl-btn:after, 
.theme-toggler .tgl + .tgl-btn:before {
	position: relative;
	display: block;
	content: "";
	width: 34px;
	height: 22px;
}

.theme-toggler .tgl + .tgl-btn:after {
	left: 0;
}

.theme-toggler .tgl + .tgl-btn:before {
	display: none;
}

.theme-toggler .tgl:checked + .tgl-btn:after {
	left: 50%;
}

.theme-toggler .tgl-flat + .tgl-btn {
	padding: 0;
	transition: all ease 0.3s;
	background: #ffffff;
	border-radius: 34px;
	background-image: url(../img/moon-gray.svg);
	background-position: 80%;
	background-repeat: no-repeat;
}

.theme-toggler .tgl-flat + .tgl-btn:after {
	transition: all ease 0.3s;
	background: #18b1b1;
	content: "";
	border-radius: 34px;
	background-image: url(../img/sun.svg);
	background-position: center;
	background-repeat: no-repeat;
}

.theme-toggler .tgl-flat:checked + .tgl-btn {
	background: #121b2e;
	background-image: url(../img/sun-gray.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-position: 20%;
}

.theme-toggler .tgl-flat:checked + .tgl-btn:after {
	left: 47.5%;
	background: #18b1b1;
	background-image: url(../img/moon.svg);
	background-position: center;
	background-repeat: no-repeat;
}

/* Footer */
footer {
	font-size: 12px;
	color: var(--color-footer-text);
	height: var(--footer-height); 
	background-color: var(--color-footer-bg);
	border-top: 1px solid var(--color-footer-separator);
}

/* Up to page button */

.btn-page-up {
	padding: 2px 0px 0px 0px;
	height: 38px;
	width: 38px;
	border: none;
	border-radius: 50%;
	font-size: 16px;
	line-height: 14.4px;
	background-color: #121B2E;
	color: #FFFFFF;
	
	position: absolute;
	z-index: 999999;
	bottom: 10px;
	right: 10px;
}

.btn-page-up:hover {
	background-color: #18B1B1 !important;
	color: #FFFFFF !important;
}
.btn-page-up:active {
	background-color: #088787 !important;
}

.btn-page-up:after {
	content: "\F286";
	font-size: 16px;
	font-family: bootstrap-icons !important;
}