/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Responsive sidebar drawer */

.builtby,
.builtby a {
	color:#aaa;
}

.sidebar-logo {
    display: block;
    width: calc(100% - 8px);
    max-width: 242px;
    height: auto;
    margin: 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

#wrapper {
    padding-left: 0;
}

#sidebar-wrapper {
	--drawer-text: #eaf2fb;
	--drawer-muted: #a9bdd3;
	--drawer-line: rgba(255, 255, 255, 0.12);
	--drawer-hover: rgba(255, 255, 255, 0.09);
	--drawer-active: rgba(255, 255, 255, 0.14);
	--drawer-accent: #8dd5ff;
    z-index: 1045;
    position: fixed;
    inset: 0 auto 0 0;
    width: 250px;
    height: 100vh;
    overflow-y: auto;
    background: #000;
	display: flex;
	flex-direction: column;
	padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

#wrapper.toggled #sidebar-wrapper {
    transform: translateX(0);
}

#sidebar-wrapper > a:first-child,
#sidebar-wrapper > img:first-child {
	display: block;
	max-width: 100%;
}

#sidebar-wrapper > a:first-child img,
#sidebar-wrapper > img:first-child {
	display: block;
	max-width: 100% !important;
	height: auto;
}

#menu-toggle {
    position: fixed;
    z-index: 1050;
    right: auto;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 50%;
	min-width: 104px;
	height: 54px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: #fff;
	background: rgba(17, 25, 35, 0.94);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
    transform: translateX(-50%);
    cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#menu-toggle:hover {
	background: #1b2a3a;
	border-color: rgba(255, 255, 255, 0.48);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#menu-toggle:focus-visible {
    outline: 3px solid rgba(13, 202, 240, 0.8);
    outline-offset: 3px;
}

.menu-toggle-icon {
	position: relative;
	width: 22px;
	height: 16px;
	flex: none;
}

.menu-toggle-label {
	font-size: 14px;
	font-weight: 650;
	line-height: 1;
	letter-spacing: .02em;
}

#menu-toggle.is-open {
	border-color: rgba(141, 213, 255, .72);
	background: #075f8a;
	box-shadow: 0 14px 36px rgba(0, 0, 0, .52), 0 0 0 3px rgba(91, 178, 226, .2);
}

.menu-toggle-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: top 0.25s ease, transform 0.25s ease, opacity 0.18s ease;
}

.menu-toggle-icon span:nth-child(1) { top: 0; }
.menu-toggle-icon span:nth-child(2) { top: 7px; }
.menu-toggle-icon span:nth-child(3) { top: 14px; }

#menu-toggle.is-open .menu-toggle-icon span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

#menu-toggle.is-open .menu-toggle-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#menu-toggle.is-open .menu-toggle-icon span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

#sidebar-backdrop {
    position: fixed;
    z-index: 1040;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

#wrapper.toggled #sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

body.sidebar-open {
    overflow: hidden;
}

#page-content-wrapper {
    width: 100%;
    padding: 15px 15px calc(6rem + env(safe-area-inset-bottom));
}

/* Modern drawer navigation */

.sidebar-nav {
    width: 100%;
	margin: 5px 0 0;
    padding: 0;
    list-style: none;
}

#mainnavi > li {
	margin: 0;
	padding: 1px 2px;
	border: 1px solid transparent;
	border-radius: 13px;
}

#mainnavi > li > a {
    display: flex;
	align-items: center;
	min-height: 38px;
	padding: 5px 10px;
	border-radius: 10px;
    text-decoration: none;
	color: var(--drawer-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

#mainnavi > li > a:hover,
#mainnavi > li > a:focus-visible {
    text-decoration: none;
	color: #fff;
	background: var(--drawer-hover);
}

#mainnavi > li > a:focus-visible,
.sidebar-nav2 a:focus-visible {
	outline: 2px solid var(--drawer-accent);
	outline-offset: 2px;
}

#mainnavi > li.expand {
	margin-block: 2px;
	padding: 2px;
	border-color: var(--drawer-line);
	background: var(--drawer-active);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 24, 54, .12);
}

#mainnavi > li.expand > a.active {
	color: #fff;
	background: rgba(0, 0, 0, .12);
}

.sidebar-nav2 {
	width: auto;
	margin: 0 3px 2px 11px;
	padding: 0 0 0 9px;
	border-left: 1px solid var(--drawer-line);
	list-style: none;
}

.sidebar-nav2 li {
	margin: 0;
}

.sidebar-nav2 a {
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--drawer-muted);
	font-size: 13px;
	font-weight: 450;
	line-height: 1.35;
	text-decoration: none;
	transition: color .18s ease, background-color .18s ease;
}

.sidebar-nav2 a:hover,
.sidebar-nav2 a:focus-visible {
	color: #fff;
	background: var(--drawer-hover);
	text-decoration: none;
}

.sidebar-nav2 a.active {
	color: #fff;
	font-weight: 600;
	background: rgba(255, 255, 255, .1);
}

#mainnavi > li.nav-logout {
	margin-top: 5px;
	padding-top: 5px;
	border-top-color: var(--drawer-line);
	border-radius: 0;
}

#mainnavi > li.nav-logout > a {
	min-height: 36px;
	color: var(--drawer-muted);
	font-size: 14px;
}

.drawer-secondary {
	margin-top: auto;
	padding: 12px 8px 0;
	border-top: 1px solid var(--drawer-line);
}

.drawer-secondary .theme-switch {
	display: flex;
	justify-content: space-between;
	margin: 0;
	color: var(--drawer-muted);
	text-shadow: none;
}

.drawer-secondary .theme-switch-group {
	border-color: var(--drawer-line);
	border-radius: 9px;
	background: rgba(0, 0, 0, .15);
}

.drawer-secondary .theme-switch-group button {
	min-width: 38px;
	min-height: 34px;
	padding: 7px 9px;
	border-right-color: var(--drawer-line);
	color: var(--drawer-muted);
}

.drawer-secondary .theme-switch-group button:hover,
.drawer-secondary .theme-switch-group button:focus-visible {
	color: #fff;
	background: var(--drawer-hover);
	outline: none;
}

.drawer-secondary .theme-switch-group button[aria-pressed="true"] {
	color: #fff;
	background: var(--drawer-active);
}

.drawer-meta {
	margin-top: 9px;
}

.drawer-meta .builtby {
	margin: 2px 0;
	color: var(--drawer-muted);
	font-size: 12px;
	line-height: 1.45;
}

.drawer-meta .builtby a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

.drawer-meta .builtby a:hover,
.drawer-meta .builtby a:focus-visible {
	color: #fff;
	text-decoration-color: currentColor;
}

html[data-theme="dark"] #sidebar-wrapper {
	--drawer-text: #e7edf5;
	--drawer-muted: #98a8ba;
	--drawer-line: rgba(255, 255, 255, .1);
	--drawer-hover: rgba(255, 255, 255, .08);
	--drawer-active: rgba(107, 172, 224, .14);
	--drawer-accent: #7fc8f8;
	background: #172330;
}

@media (min-width: 992px) {
    #wrapper {
        padding-left: 250px;
    }

    #sidebar-wrapper {
        transform: translateX(0);
    }

    #page-content-wrapper {
        padding: 20px;
    }

    #sidebar-backdrop {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar-wrapper,
    #sidebar-backdrop,
    #menu-toggle,
    .menu-toggle-icon span {
        transition: none;
    }
}

@media print {
	#sidebar-wrapper{
		width:0px;
		display:none;
	}
	
	#wrapper,
	#wrapper.toggled {
		padding-left: 0px;
		margin-left: 0px;
	}

	#sidebar-backdrop {
		display:none;
	}

	#menu-toggle {
		display:none;
	}
	
	#page-content-wrapper{
		padding-left:0px;
		padding-bottom:0px;
	}
	
	a[href]:after {
		content: none;
	}
}