/* Import Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');

:root {

	/* Text */
	--color-text: #FFFFFF;
	--color-text-secondary: #A0A0A0;
	--color-text-warning: #ea9461;
	--color-heading: #b3c7df;

	/* Hyperlinks */
	--color-link: #2980B9;
	--color-link-hover: #1D607F;

	/* Bootstrap Colors */
	--color-primary: #3480db;
	--color-secondary: #7a7a7a;
	--color-success: #27AE60;
	--color-danger: #dc3545;
	--color-warning: #FFA500;
	--color-info: #3498DB;
	--color-light: #F4F4F4;
	--color-dark: #4d4d4d;

	/* Special */
	--color-accent: #3498DB;
	--color-chart-accent: #27AE60;
	--color-positive-indicator: #4CAF50;
	--color-negative-indicator: #E74C3C;
	--color-neutral-indicator: #95A5A6;
	--color-hover: #2C3E50;
	--color-orange: #ea9461;

	/* Grayscale */
	--color-white: #fff;
	--color-light-gray: #bbb;
	--color-gray: #777;
	--color-dark-gray: #444;
	--color-black: #000;

	/* Background */
	--color-bg: #1A1A1A;
	--color-bg-secondary: #282828;

	/* UI Panels */
	--color-ui-panel: #282828;
	--color-ui-panel-border: #454545;

	/* Forms */
	--color-form-text: #FFFFFF;
	--color-form-bg: #353638;
	--color-form-border: #5d5d5d;
}

\body {
	/*-moz-transform: scale(-1);
	-o-transform: scale(-1);
	-webkit-transform: scale(-1);
	transform: scale(-1);*/
	/*filter: FlipH;
	-ms-filter: "FlipH";*/
}

.badge.text-bg-primary { background-color: var(--color-primary) !important; }
.badge.text-bg-secondary { background-color: var(--color-secondary) !important; }
.badge.text-bg-success { background-color: var(--color-success) !important; }
.badge.text-bg-danger { background-color: var(--color-danger) !important; }
.badge.text-bg-warning { background-color: var(--color-warning) !important; }
.badge.text-bg-info { background-color: var(--color-info) !important; }
.badge.text-bg-light { background-color: var(--color-light) !important; }
.badge.text-bg-dark { background-color: var(--color-dark) !important; }

/* Buttons */
.btn {
/*  text-transform: uppercase;*/
  
  /*padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  border-radius: 50rem !important;*/
  text-decoration: none !important;
}

/* Bootstrap button styles */
.btn-primary {
  color: var(--color-white) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.btn-primary.btn.active {
  color: var(--color-primary) !important;
  background-color: var(--color-white) !important;
  border-color: var(--color-white) !important;
}
.btn-secondary {
  color: var(--color-white) !important;
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}
.btn-success {
  color: var(--color-white) !important;
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}
.btn-danger {
  color: var(--color-white) !important;
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}
.btn-warning {
  color: var(--color-black) !important;
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}
.btn-info {
  color: var(--color-black) !important;
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
}
.btn-light {
  color: var(--color-black) !important;
  background-color: var(--color-light) !important;
  border-color: var(--color-light) !important;
}
.btn-dark {
  color: var(--color-white) !important;
  background-color: var(--color-dark) !important;
  border-color: var(--color-dark) !important;
}

/* Hover, active, focus */
.btn:hover, .btn:active, .btn:focus {
  opacity: 0.8 !important;
}

/* Disabled buttons */
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: all !important;
}

/* Colors */
.light-gray { color: var(--color-light-gray) }
.gray { color: var(--color-gray) }

/* Background Color */
.bg-light-gray { background-color: var(--color-light-gray) }
.bg-gray { background-color: var(--color-gray) }
.bg-dark-gray { background-color: var(--color-dark-gray) }

/* Special */
.accent { color: var(--color-accent); }
.chart-accent { color: var(--color-chart-accent); }
.positive-indicator { color: var(--color-positive-indicator); }
.negative-indicator { color: var(--color-negative-indicator); }
.neutral-indicator { color: var(--color-neutral-indicator); }
.hover { color: var(--color-hover); }

/* Chart colors */
.d-background {
    background-color: rgba(0, 160, 240, 0.25) !important;
}
.w-background {
    background-color: rgba(240, 192, 0, 0.25) !important;
}
.m-background {
    background-color: rgba(128, 0, 240, 0.25) !important;
}
.ltf-background {
    background-color: rgb(25, 25, 25) !important;
}
.mtf-background {
    background-color: rgb(44, 44, 44) !important;
}
.htf-background {
    background-color: rgb(63, 63, 63) !important;
}

html {
    color-scheme: dark only;
}

input, textarea, select {
  color: var(--color-white) !important;
  background-color: var(--color-form-bg) !important;
  border-color: var(--color-form-border) !important;
  border-radius: 3px !important;
}

/* Placeholder text color */
input::placeholder,
textarea::placeholder {
  color: var(--color-gray) !important;
}

label {
  color: var(--color-light-gray) !important;
  font-size: 0.8em;
}

/*input:focus, textarea:focus, select:focus {
	color: var(--color-form-text) !important;
  background-color: var(--color-form-bg) !important;
  border-color: var(--color-form-border) !important;
}*/

/*input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-light) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--color-bg) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}*/

/*input:disabled {
  color: var(--color-dark) !important;
  background-color: var(--color-bg) !important;
}*/


/*input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset !important;
    color: var(--color-text) !important;
}*/

/* No focus glow */
/*input:focus {
    outline: none;
    border: 1px solid var(--color-primary) !important;
}*/

/* Take up the full height of the viewport */
html, body {
  height: 100% !important;
}

/* Nice shadow */
.shadow {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5) !important;
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Space on top and bottom */
#content-wrapper {
  padding-top: 15px;
  padding-bottom: 15px;
}


@media (max-width: 767px) {
  #content-wrapper {
    padding-top: 73px !important;
  }
}

/* Max website width */
/*.container-fluid {
  max-width: 1500px;
}*/

#custom-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width :100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	cursor:pointer;
	z-index: 10000;
}

#custom-modal .table-cell {
	display: table-cell;
	vertical-align: middle;
	padding-left: 15px;
	padding-right: 15px;
	height:100%;
	width:100%;
}

#custom-modal .inside {
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#custom-modal .body {
	position: relative;
	background-color: var(--color-bg-secondary);
	padding: 10px 20px 15px 20px;
	width: auto;
	cursor: auto;
	border-radius:10px;

	max-height: 90vh;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

#custom-modal .body .title {
	/*color: var(--color-yellow);*/
}

/* Big screens */
@media (min-width: 992px) {
	#custom-modal .body {
		max-width: 70%;
	}
}

/* Small screens */
@media (max-width: 991px) {
	#custom-modal .body {
		max-width: 100%;
		margin-left:10px;
		margin-right:10px;
	}
}

/*#custom-modal .title {
	position: absolute;
	top: 10px;
	left: 20px;
	font-size: 20px;
}*/

#custom-modal .close {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 20px;
	cursor: pointer;
	padding-left:6px;
	padding-right:6px;
}
#custom-modal .close:hover i {
	color: var(--color-yellow) !important;
}

body.disable-scroll {
	overflow-y: hidden !important;
}

#nav-table {
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:100%;
	z-index:9000;
	display: table;
}
#nav-cell {
	display: table-cell;
	vertical-align: middle;
}

/* Navigatie balk */
nav#navigation-user {
	font-family: 'Forma DJR Banner', sans-serif;
	color: #fff;
	z-index:9000;
}

/* Small screens, collapsed menu */
@media (max-width:767px) {
	nav#navigation-user {
		position:fixed;
		left:0;
		right:0;
		top:0;
		background-color: var(--color-bg-secondary);
		margin-bottom:20px;
		border-bottom: 1px solid var(--color-ui-panel-border);
		font-size:1.1em;
	}
	ul.navbar-nav {
		max-height: 75vh;
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}
}

/* Big screens, menu on left side */
@media (min-width: 768px) {
	nav#navigation-user #content {
		padding-top:30px !important;
		padding-bottom:0px !important;
	}
	nav#navigation-user.fixed-left {
		position:unset;
		max-height:100vh;
		overflow-y: auto !important;
		overflow-x: hidden !important;

		/*display: flex !important;
		justify-content: center !important;*/
	}
	nav#navigation-user.fixed-left::-webkit-scrollbar {
		display:none;
	}

	/* Logo */
	nav#navigation-user .navbar-brand {
		border-bottom: 10px solid #19182b;
	}

	/* .nav-item */
	nav#navigation-user .nav-item,
	nav#navigation-user .navbar-brand {
		display:inline-block;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: var(--color-bg-secondary);
		width:64px !important;
		border-right: 1px solid var(--color-ui-panel-border);
	}

	nav#navigation-user .nav-item:first-child {
		border-top: 1px solid var(--color-ui-panel-border);
		border-top-right-radius: 15px;
	}
	nav#navigation-user .nav-item:last-child {
		border-bottom: 1px solid var(--color-ui-panel-border);
		border-bottom-right-radius: 15px;
	}
}
/* M */
@media (min-width:768px) and (max-width:991px) {
}
/* L - 992px and more - Max container width 960px - /2=480px */
@media (min-width:992px) and (max-width:1199px) {
	nav#navigation-user.fixed-left {
		left:unset;
		right:calc(50vw + 440px);
	}
}
/* XL - 1200px and more - Max container width 1140px - /2=570px */
@media (min-width:1200px) and (max-width:1399px) {
	nav#navigation-user.fixed-left {
		left:unset;
		right:calc(50vw + 520px);
	}
}
/* XXL - 1400px and more - Max container width 1320px - /2=630px */
@media (min-width:1400px) {
	nav#navigation-user.fixed-left {
		left:unset;
		right:calc(50vw + 620px);
	}
}

/* Klein scherm */
/*@media (max-width:767px) {
	#navigation {
		padding-left:10px;
		padding-right:10px;
	}
}
*/
/* Groot scherm */
@media (min-width:768px) {
	nav#navigation-user #content {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		height: 100% !important;
	}
	nav#navigation-user.fixed-left {
		bottom:0;
		width:64px;
		flex-flow:column nowrap;
		align-items:flex-start;
/*		right:auto*/
	}
	nav#navigation-user.fixed-left .navbar-collapse {
		flex-grow:0;
		flex-direction:column;
		width:100%;
	}
	nav#navigation-user.fixed-left .navbar-collapse .navbar-nav {
		flex-direction:column;
		width:100%;
	}
	nav#navigation-user.fixed-left .navbar-collapse .navbar-nav .nav-item {
		width:100%;
	}
	nav#navigation-user.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
		top:0;
	}
}

/* Hyperlinks */
nav#navigation-user a { color: var(--color-text-secondary); text-decoration: none; }
nav#navigation-user a:hover { color: var(--color-text) }
nav#navigation-user a.active { color: var(--color-accent) }

/* Logo */
nav#navigation-user img.logo-menu {
	height:44px;
	width:44px;
	margin-left:10px;
	margin-right:10px;
	border:3px solid #bbb;
	border-radius:50%;
	pointer-events: none;
	margin-top: -4px;
	margin-bottom: -10px;
}
nav#navigation-user a:hover img.logo-menu {
	border:3px solid var(--color-white);
}

/* Navbar toggler */
nav#navigation-user .navbar-toggler {
  color: #fff !important;
  border-color: #fff;
  margin-right: 10px;
}
nav#navigation-user .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Panels */
.ui-panel {
  position: relative;
  margin: 0;
  padding: 15px;
  background-color: var(--color-ui-panel);
  border: 1px solid var(--color-ui-panel-border);
  height: 100%;
  border-radius: 15px;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: var(--color-heading);
}

/* Regular */
p {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

/* Light */
.text-small {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

/* Links */
a:link {
	color: var(--color-link);
	text-decoration: none;
}
a:visited {
	color: var(--color-link);
}
a:active {
	color: var(--color-link);
}
a:focus {
	color: var(--color-link);
}
a:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}