:root {
	--klaampe-primary: #f49800;
	--klaampe-hover: #c27800;
	--klaampe-bg: #d38200;
	--klaampe-bg-light: #ffd38c;
	--klaampe-light: #f8c981;
}

.feather {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.feather-small {
	width: 20px;
	height: 20px;
	padding-bottom: 2px;
	stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.btn-small {
	padding: .275rem .6rem;
	margin: 0 2px;
}

.table .td-compact {
	padding: 8px;
}

.text-small {
	font-size: small;
	line-height: 120%;
}

.has-warning button {
	border-color: var(--warning) !important;
}

.help-warning {
	color: var(--warning);
	font-size: 12px;
}


#header-img {
    background-image: url("https://www.deklaampe.nl/wp-content/uploads/2015/12/home_slider3.jpg");
    background-size: cover;
    background-position: center;
    height: 20vh;
    position: fixed;
    top: 0;
    left: 0;
}
#header-img:after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url("/img/wave.svg");
    background-repeat: repeat-x;
    background-position: center;
}

#login-form-col {
    max-width: 32em;
}

#login-form {
    margin-top: 6rem;
}

.navbar-brand {
	max-width: 40%;
}

.header-logo {
	max-width: 100%;
}

.sidebar {
	z-index: 1050 !important;
	position: fixed !important;
}

@media (min-width: 768px) {
	.sidebar {
		height: 100vh;
	}
}

.sidebar-sticky {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
}

.current-page a {
	color: var(--klaampe-light) !important;
}

hr.divider {
	margin-top: .15rem;
	margin-bottom: .15rem;
	border-top-color: rgba(150, 150, 150, 0.2);
}

#sidebar .nav-link {
	padding: 0.5rem 0.5rem;
}

#sidebar .nav-link:hover {
	background: rgba(45, 45, 45, 0.1);
}

.schedule-col {
	min-width: 160px;
}

.custom-file-label {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.custom-file-label::after {
	content: "Bladeren" !important;
}

a {
	color: var(--klaampe-primary);
}

a:not(.text-white):not(.btn):hover,
.page-link, .page-link:hover,
.text-primary {
	color: var(--klaampe-hover) !important;
}
a.text-white:hover {
	color: var(--klaampe-bg-light) !important;
}

.btn-primary, .btn-primary.disabled,
.page-item.active .page-link {
	background-color: var(--klaampe-primary) !important;
	border-color: var(--klaampe-primary) !important;
}

.btn-outline-primary {
	border-color: var(--klaampe-primary) !important;
	color: var(--klaampe-primary) !important;
}

.bg-primary {
	background-color: var(--klaampe-bg) !important;
	border-color: var(--klaampe-bg) !important;
}

.bg-primary-light {
	background-color: var(--klaampe-bg-light) !important;
	border-color: var(--klaampe-bg-light) !important;
}

.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--klaampe-hover) !important;
	border-color: var(--klaampe-hover) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
	background-color: var(--klaampe-primary) !important;
	color: var(--white) !important;
}

.page-link:focus,
.btn-primary:focus, .btn-primary.focus,
.btn-outline-primary:focus, .btn-outline-primary.focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 192, 92, 0.5);
}

.st0 {
	fill: #f00 !important;
}