body {
	font-family: 'Roboto', sans-serif;
	background-color: #DDD;
}

/* No 'spinner' on number inputs - Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* No 'spinner' on number inputs - Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.form-control {
	border-radius: 0.0rem;
}

#sd-sidebar-wrapper {
    display: flex;
}

#sd-sidebar {
    width: 250px;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: 999;
    background: #222;
    color: #fff;
	transition: 0.5s;
	overflow: hidden;
}

#sd-sidebar-header {
	width: 250px;
	height: 50px;
	background-color: #734abc; /* fab416 */
	padding-left: 18px;
	padding-top: 14px;
	font-size: 1.06em;
	font-weight: 700;
	transition: 0.5s;
	transition-property: width;
	border-bottom: 1px solid #222; /* same as sidebar background color */
}

#sd-sidebar-content {
	font-size: 1em;
}

#sd-sidebar-content a:link, #sd-sidebar-content a:visited, #sd-sidebar-content a:hover {
	text-decoration: none;
	color: #fff;
}

.sd-sidebar-item {
	width: 250px;
	padding-left: 18px;
	padding-bottom: 14px;
	padding-top: 14px;
	border-bottom: 1px solid #444;
	opacity: 0.65;
}

.sd-sidebar-item:hover {
	opacity: 1;
	cursor: pointer;
}

.sd-sidebar-item-active {
	opacity: 1;
}

.sd-sidebar-item img {
	width: 20px;
	margin-top: -3px;
	margin-right: 16px;
}

.sd-sidebar-divider {
	width: 100%;
}

.sd-img-invert {
	-webkit-filter: invert(1); /* safari 6.0 - 9.0 */
    filter: invert(1);
}

#sd-page-content {
    position: absolute;
	left: 250px; /* 250px = sidebar width */
	top: 50px; /* 50px = navbar height */
	width: calc(100% - 250px); /* 250px = sidebar width */
	min-width: 320px; /* Determines minimal width for whole site (min-width on body does not work because of bootstrap mediaquery settings) */
    padding: 30px 20px;
    min-height: calc(100% - 50px); /* 50px = navbar height */
	transition: 0.5s;
}

#sd-topbar-mobile {
	display: none;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 40px;
	z-index: 900;
	background-color: #734abc;
	padding-top: 8px;
	font-size: 1.06em;
	font-weight: 700;
	color: #fff;
	text-align: center;
}

#sd-navbar {
	position: fixed;
	top: 0px;
	left: 250px; /* 250px = sidebar width */
	height: 50px;
	width: calc(100% - 250px); /* 250px = sidebar width */
	background-color: white;
	z-index: 100;
	transition: 0.5s;
	border-bottom: 1px solid #DDD; /* same as body background color */
}

.sd-navbar-button {
	float: left;
	width: 60px;
	height: 100%;
}

.sd-navbar-icon {
	padding: 12px 19px;
	opacity: 0.5;
}

.sd-navbar-icon img {
	width: 20px;
}

.sd-navbar-icon:hover {
	opacity: 0.8;
	cursor: pointer;
}

#sd-navbar-text {
	font-size: 1.2em;
	padding-top: 12px;
	padding-left: 19px;
}

#sd-navbar-time {
	width: 100px;
	height: 100%;
	padding-top: 6px;
	text-align: center;
	font-size: 0.8em;
}

#sd-sub-navbar {
	position: fixed;
	top: 50px;
	left: 250px; /* 250px = sidebar width */
	height: 42px; /* Also used in settings.php */
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	width: calc(100% - 250px); /* 250px = sidebar width */
	background-color: white;
	z-index: 100;
	transition: 0.5s;
	border-bottom: 1px solid #DDD; /* same as body background color */
}

.sd-sub-navbar-tab, .sd-sub-navbar-tab-selected {
	float: left;
	border-right: 1px solid #DDD; /* same as body background color */
	height: 100%;
	color: #999;
	padding: 9px 24px;
	text-align: center;
	white-space: nowrap;
}

.sd-sub-navbar-tab-selected {
	background-color: #2d5c76;
	color: white;
}

.sd-sub-navbar-tab:hover {
	cursor: pointer;
	color: #222;
}

.sd-sub-navbar-tab-selected:hover {
	cursor: pointer;
}

#sd-login-page {
	position: relative;
	min-width: 320px;
}

#sd-login-topbar {
	position: relative;
	height: 50px;
	background-color: #734abc;
	padding-top: 14px;
	font-size: 1.06em;
	font-weight: 700;
	color: #fff;
	text-align: center;
}

#sd-login-container {
	max-width: 440px;
	margin: 0 auto;
	padding: 50px 20px;
}

#sd-login-box {
	padding: 30px 20px;
	background-color: white;
	border-radius: 6px;
	box-shadow: 4px 4px 10px #888;
}

.sd-table table, .sd-table-noselect table {
	/* min-width: 1000px; /* table will get it's own horizontal scroll bar */
	font-size: 0.95em;
	border: 1px solid #dee2e6;
}

.sd-table th, .sd-table-noselect th {
	background-color: #ecedee;
	font-size: 0.95em;
}

.sd-table tr:nth-child(even), .sd-table-noselect  tr:nth-child(even) { background-color: #f9f9f9; }
.sd-table tr:nth-child(odd), .sd-table-noselect tr:nth-child(odd) { background-color: #ffffff; }

.sd-table tr:hover {
	background-color: #daecff;
	cursor: pointer;
}

.sd-table th,	
.sd-table td,
.sd-table-noselect th,
.sd-table-noselect td {
	padding: 0.3rem;	/* Same as Bootstrap's table-sm */
}

.sd-table-600px { min-width: 600px !important; }
.sd-table-800px { min-width: 800px !important; }
.sd-table-1000px { min-width: 1000px !important; }
.sd-table-1400px { min-width: 1400px !important; }
.sd-table-1600px { min-width: 1600px !important; }
.sd-table-1800px { min-width: 1800px !important; }

.sd-col-sort-icon {
	display: inline-block;
	width: 18px;
	margin-left:10px;
	opacity: 0.2;
	/* Make not selectable */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.sd-col-sort-icon:hover {
	opacity: 1;
	cursor: pointer;
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(200deg); /* Make SVG blue */
}

.sd-col-sort-icon-selected {
	display: inline-block;
	width: 18px;
	margin-left: 10px;
	opacity: 1;
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(200deg); /* Make SVG blue */
	/* Make not selectable */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.sd-not-selectable {
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.sd-label {
	font-size: 0.9025em; /* Same as sd-table header font size (0.95em * 0.95em) */
	font-weight: 700;
	/* Make not selectable */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.sd-gps-sat-red {
	display: inline-block;
	position: relative;
	top: -2px;
	margin-left: 8px;
	margin-right: 2px;
	filter: invert(0.5) sepia(1) saturate(60) hue-rotate(0deg); /* Make SVG red */
}

.sd-gps-sat-green {
	display: inline-block;
	position: relative;
	top: -2px;
	margin-left: 8px;
	margin-right: 2px;
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(100deg); /* Make SVG green */
}

.sd-arrow-green {
	display: inline-block;
	position: relative;
	top: -2px;
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(100deg); /* Make SVG green */
}

.sd-arrow-red {
	display: inline-block;
	position: relative;
	top: -2px;
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(0deg); /* Make SVG red */
}

.sd-circle-green {
	display: inline-block;
	position: relative;
	/* filter: invert(0.5) sepia(1) saturate(50) hue-rotate(100deg); /* Make SVG green */
	filter: invert(69%) sepia(82%) saturate(5904%) hue-rotate(90deg) brightness(94%) contrast(108%);
}

.sd-circle-orange {
	display: inline-block;
	position: relative;
	/* filter: invert(0.5) grayscale(100) sepia(1) saturate(5) hue-rotate(-20deg); /* Make SVG orange */
	filter: invert(73%) sepia(40%) saturate(792%) hue-rotate(341deg) brightness(98%) contrast(96%);
}

.sd-circle-red {
	display: inline-block;
	position: relative;
	/* filter: invert(0.5) sepia(1) saturate(50) hue-rotate(0deg); /* Make SVG red */
	filter: invert(32%) sepia(95%) saturate(7393%) hue-rotate(1deg) brightness(93%) contrast(127%);
}

.sd-input {
	font-size: 0.95em;
}

.sd-textarea {
	font-size: 0.95em;
	min-height: 200px;
 	resize: none;
	overflow-y: hidden;
}

.sd-btn, .sd-btn-group > .btn {
	padding: 0.35rem 0.6rem;
	font-size: 0.95rem;
	line-height: 1.5;
	border-radius: 0.2rem;
}

.sd-hoverpointer:hover {
	cursor: pointer;
}

.sd-openclose {
	display: inline-block;
	height: 20px;
	width: 20px;
	transition: 0.25s;
	transform: rotate(0deg);
	cursor: pointer;
}

.sd-openclose img {
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(200deg); /* Make SVG blue */
	-webkit-filter: invert(0.5) sepia(1) saturate(50) hue-rotate(200deg); /* Make SVG blue on safari 6.0 - 9.0 */
	margin-top: -2px;
	transition: 0.25s;
}

.sd-zeroheight {
	transition: 0.5s;
	overflow-y: hidden;

	max-height: 0px;
}
 
.sd-remarks-datetime {
	display: inline-block;
	margin-left: 10px;
	font-size: 0.9025em; /* Same as sd-label */
}

.sd-remarks-datetime:hover {
	cursor: pointer;
	color: #087bff;
}

.sd-inline-checkbox {
	display:inline-block;
	margin-left: 1px;
	margin-bottom: 16px;
}

.sd-action-icon :hover {
	cursor: pointer;
}

.sd-action-icon {
	display:inline-block;
}

.sd-action-icon img {
	width: 16px;
}

#sd-history-info-container {
	display: block;
	background-color: white;
	margin-bottom: 15px;
	font-size: 0.95em;
	border: 1px solid #dee2e6;
	border-radius: 0.25rem;
}

#sd-history-info-head {
	display: block;
	width: 100%;
	background-color: #ecedee;
	top: 0px;
	padding: 0.3rem;
}

/*
#sd-history-info-contents {
	padding: 0.3rem;
}
*/

.sd-history-info-table {
	font-size: 0.95em;
	border: none;
	padding: 0px;
}

.sd-history-info-table thead {
	border: none;
}

.sd-history-info-table th {
	font-size: 0.95em;
	padding: 0.3rem;	/* Same as Bootstrap's table-sm */
	
}

.sd-history-info-table td {
	padding: 0.3rem;	/* Same as Bootstrap's table-sm */
	border: none;
}

.sd-history-info-table tr {
	line-height: 18px;
}

.sd-detail-page-list-range-selector {
	width: 300px;
	margin-bottom: 10px;
}