@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

*,*::before,*::after {
  box-sizing: border-box;
}

body {
	margin: 0; 
	display: flex;
	flex-direction: row;
	min-height: 100vh;
	font-size: 14px;
	font-family: 'Open Sans', sans-serif;
}

a:hover {text-decoration: none;}

a.text-link {text-decoration: none; transition: color .3s;}

.nowrap {white-space: nowrap;}

.dark-theme .text-link {color: #99f;}
.dark-theme .text-link:hover {color: #fff;}

.light-theme .text-link {color: #55f;}
.light-theme .text-link:hover {color: #00f;}

.hidden {display: none !important;}

.label {display: inline-block; padding: 3px 10px; font-weight: bold; color: #fff;}
.error {background-color: #ff5555;}
.success {background-color: #5cb85c;}

.active {color: #9f9;}
.info {color: #99f;}
.alert {color: #f99;}

input {font-size: 14px;}

body.light-theme {background-color: #ebedef; color: #3c4b64;}
body.dark-theme {background-color: #0a0b18; color: #eee;}

.dark-theme #light-theme-icon,
.light-theme #dark-theme-icon {display: none;}

.nowrap {white-space: nowrap;}

h1 {font-size: 17px; text-transform: uppercase; margin: 15px 0; text-align: center;}

.content-centered {min-height: calc(100vh - 56px); display: flex; justify-content: center; align-items: center;}

.driver-label {line-height: 17px; padding: 5px 0; display: flex; flex-wrap: wrap;}
.driver-label > * {margin: 0 5px;}
.set-online-label {color: #5cb85c;}

/* BADGES */

.badge {
	display: inline-block;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 4px;
	transition: background-color .15s;	
}

.badge-info {color: #fff; background-color: #4799eb;}
.badge-info:hover {background-color: #4dadff;}

.badge-warning {color: #4f5d73; background-color: #e1a82d;}

.badge-danger {color: #fff; background-color: #d16767;}
.badge-danger:hover {background-color: #f26767;}

.badge-success {color: #fff; background-color: #4dbd74;}

/* BUTTONS */

.button {background-color: #fc0; padding: 10px 20px; border: 0 none; font-size: 18px; cursor: pointer; text-align: center; color: #000; text-decoration: none; border-radius: 8px;}
.button:hover {background-color: #fd0; }



/* SIDEBAR */

body.sidebar-force-visible .sidebar {margin-left: 0 !important}
body.sidebar-force-hidden .sidebar {margin-left: -256px !important;}
.content-backdrop {
	display: none;
	position: fixed;	
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #000;
	content: "";
	z-index: 1029;
	transition: opacity .5s;
}
body.sidebar-force-visible .content-backdrop {display: block; opacity: .67;}

/*
body.sidebar-force-visible .content-wrapper {margin-left: 256px !important;}
body.sidebar-force-hidden .content-wrapper {margin-left: 0 !important;}
*/
.sidebar {
	display: flex;
	flex-direction: column;
	flex: 0 0 256px;
	width: 256px;
	margin-left: -256px;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	transition: box-shadow .3s .15s, margin-left .3s, margin-right .3s, width .3s, z-index 0s ease .3s, -webkit-transform .3s;
	z-index: 1030;
	color: #eee;
}

.light-theme .sidebar {background-color: #3c4b64;}
.dark-theme .sidebar {background-color: #2c2c34;}

.sidebar-brand {
	background-color: rgba(0, 0, 21, 0.2); 
	display: flex;
	flex: 0 0 56px;
	justify-content: flex-start;
	align-items: center;
	padding: 5px 15px;
}

.sidebar-brand a {text-decoration: none; color: #fff; font-size: 24px; font-weight: bold; transition: color .3s;  text-transform: uppercase;}
.sidebar-brand a:hover {color: #fc0;}

ul.sidebar-nav {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	overflow-x: hidden;
	overflow-y: auto;
	list-style-type: none;
	padding: 0;
	margin: 0;
	line-height: 21px;
}

ul.sidebar-nav > li {flex: 0;}

/*
ul.sidebar-nav > li:last-child {flex: 1; display: flex; flex-direction: column; justify-content: flex-end;}
ul.sidebar-nav > li:last-child .sidebar-nav-row {flex: 0;}
*/

.sidebar-nav-row {
	display: flex;
	flex-direction: row;
	flex: 1 1 0;
	align-items: center;
	text-align: left;
	padding: 12px 16px;
}

.sidebar-nav-right {margin-left: auto; padding-left: 10px;}

.sidebar-nav-title {text-transform: uppercase; font-weight: bold; font-size: 12px;}

.sidebar-nav-link {
	text-decoration: none;
	transition: background .3s, color .3s;
	color: rgba(255,255,255,.8);
	text-decoration: none;
}

.sidebar-nav-link.active {font-weight: bold;}

.sidebar-nav-icon {
	flex: 0 0 52px;
	height: 18px;
	margin-left: -16px;
	fill: rgba(255,255,255,.8);
	overflow: hidden;
	vertical-align: middle;
}

.dark-theme a.sidebar-nav-link:hover {color: #fff; background-color: #321fdb;}
.light-theme a.sidebar-nav-link:hover {color: #fff; background-color: #1f61db;}
a.sidebar-nav-link:hover .sidebar-nav-icon {fill: #fff;}

.sidebar-nav-dropdown-items {
	list-style-type: none;
	padding: 0;	
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s;
}

.sidebar-nav-dropdown-items > li > .sidebar-nav-row {padding-left: 52px;}
.sidebar-nav-dropdown-items > li > .sidebar-nav-row > .sidebar-nav-icon {margin-left: -52px;}

.sidebar-nav-dropdown {}
.sidebar-nav-dropdown.open {background-color: rgba(0,0,0,.2);}
.sidebar-nav-dropdown-toggle {cursor: pointer;}

.sidebar-nav-dropdown-toggle::after {
	display: block;
	background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMSAxNCc+PHBhdGggZmlsbD0ncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpJyBkPSdNOS4xNDggMi4zNTJsLTQuMTQ4IDQuMTQ4IDQuMTQ4IDQuMTQ4cTAuMTQ4IDAuMTQ4IDAuMTQ4IDAuMzUydC0wLjE0OCAwLjM1MmwtMS4yOTcgMS4yOTdxLTAuMTQ4IDAuMTQ4LTAuMzUyIDAuMTQ4dC0wLjM1Mi0wLjE0OGwtNS43OTctNS43OTdxLTAuMTQ4LTAuMTQ4LTAuMTQ4LTAuMzUydDAuMTQ4LTAuMzUybDUuNzk3LTUuNzk3cTAuMTQ4LTAuMTQ4IDAuMzUyLTAuMTQ4dDAuMzUyIDAuMTQ4bDEuMjk3IDEuMjk3cTAuMTQ4IDAuMTQ4IDAuMTQ4IDAuMzUydC0wLjE0OCAwLjM1MnonLz48L3N2Zz4=);
	background-repeat: no-repeat;
	background-position: center;
	flex: 0 8px;
	height: 8px;
	content: "";
	transition: transform .3s;
	margin-left: auto;
}

.sidebar-nav-dropdown.open > .sidebar-nav-dropdown-items {max-height: 2000px;}
.sidebar-nav-dropdown.open > .sidebar-nav-dropdown-toggle::after {transform: rotate(-90deg);}

/* CONTENT WRAPPER */

.content-wrapper {
	display: flex;
	flex-direction: column;
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 1;
	transition: margin .3s;
	min-height: 100vh;
}

.content {padding: 0;}

/* HEADER */

.content-header {
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
	min-height: 56px;
	z-index: 1028;
	background-color: #3c4b64;
	color: #ddd;
}

.content-header .buttons-left {display: flex;}
.content-header .buttons-right {display: flex; margin-left: auto;}

.header-button {min-width: 56px; background: transparent; border: 0 none; cursor: pointer; outline: 0; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .75); transition: color .3s;}
.header-button svg {width: 32px; height: 32px; fill: rgba(255, 255, 255, .75); transition: fill .3s}
.header-button:hover {color: #fff;}
.header-button:hover svg {fill: #fff;}

#logout-button {transform: rotate(180deg);}

.user-info {line-height: 56px; font-weight: bold; color: inherit; padding: 0 16px; display: flex;}
.user-info:hover {text-decoration: none;}
.user-info .avatar {width: 40px; height: 40px; border-radius: 20px; margin-right: 10px;}
.user-info .name {}

.dark-theme .content-header {background-color: #2c2c34;}

@media (min-width:480px) {

	.content {padding: 0 10px;}

}

@media (min-width:720px) {

	h1 {font-size: 24px; text-transform: uppercase; margin: 20px 0;}

}

@media (min-width:992px) {

	.sidebar {margin: 0;}
	.content-wrapper {margin-left: 256px;}

	.content-backdrop {display: none !important;}
	body.sidebar-force-hidden .content-wrapper {margin-left: 0 !important;}

	h1 {font-size: 28px; text-transform: uppercase; margin: 20px 0;}
}