body {
    font-size: 16px;
    line-height: 1.43;
    color: #525151;
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
}

.fa-spinner {
  color: #7DB43C;
}

/* LOADER SCREEN */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(255,255,255,1), rgba(255,255,255,1));
  background: -webkit-radial-gradient(rgba(255,255,255,1), rgba(255,255,255,1));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.fa-spinner {
  font-size: 50px;
}
/* end LOADER SPINNER */

/* NAVBAR settings */
.fixed-top {
  background-color: #fff;
  border-bottom: 1px solid #dee2e6;
}
/* change style when scrolled down */
.fixed-top.scrolled {
  opacity: .95;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  transition: all 400ms ease;
}

.company-logo {
    height: 40px;
}

a.nav-link {
  color: #525151 !important;
  font-size: 14px;
  text-decoration: none;
}

.navbar .symbol {
  width: 50px;
}
.symbol .nav-link {
  text-align: center;
}
.profile {
  padding-left: 15px;
}

/* remove dropdown symbol (arrow-down) */
.dropdown-toggle::after {
    content: none;
}

/* notification alert */
.notification {
  text-decoration: none;
  position: relative;
  /* display: inline-block; */
}
.notification-alert {
  position: absolute;
  font-size: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  top: 3px;
  right: -4px;
  color: #C93944;
}

.dropdown-menu {
    font-size: 90%;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.dropdown-item:active {
  background-color: grey;
}

button.navbar-toggler {
  color: #525151 !important; /* default text colour (dark grey) */
}

#download-to-csv {
  display: none; /* hide download button on mobile devices */
}
/* end NAVBAR settings */

/* MAIN settings */
main[role=main] {
  margin-top: 66px;
  padding-top: 15px;
  padding-bottom: 15px;
}
/* end MAIN settings */

/* BREADCRUMB settings */
.navbreadcrumb {
  background-color: #f6f6f6;
}
.breadcrumb {
  margin: 0px;
  margin-top: 66px;
  padding: 20px 0 20px 0;
  background-color: inherit;
}

.breadcrumb-item > a {
  font-size: 16px;

}
li.breadcrumb-item+.active {
  /* font-family: Verdana, Arial; */
}

/* breadcrumb separator */
.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding: 0 15px 0 15px;
    color: lightgrey;
    font-family: Fontawesome;
    content: "\f054";
    font-size: 9px;
}
/* end BREADCRUMB settings */

/* NAVIGATION TAB settings */
.nav-tab {
  background-color: #f6f6f6;
  border-bottom: 1px solid #dee2e6;
}
.nav-tabs {
  border-bottom: none;
}

/* end NAVIGATION TAB settings */

.section {
  margin-top: 20px;
}

/* SECTION START settings (start-page) */
.start .tab-title {
  border-bottom: none;
}
.section-start-main {
  font-size: .9em;
}
.section-start-main h1,
.section-start-main h2,
.section-start-main h3,
.section-start-main h4,
.section-start-main h5,
.section-start-main h6 {
  color: #525151; /* default text colour (dark grey) */
}

.section-start-main-content h1,
.section-start-main-content h2,
.section-start-main-content h3,
.section-start-main-content h4,
.section-start-main-content h5 {
  color: #821E7E;
  display: block;
  padding: 10px 5px 0px 5px;
  margin: 0;
}

.section-start-main-content h5 a {
  color: #821E7E;
  display: block;
  padding: 10px 5px 0px 5px;
  margin: 0;
  text-decoration: none;
}

#graph-summary-children svg {
  margin-bottom: 40px;
}

.section-start-main-content p {
  padding: 10px 10px;
  margin:0;
}

.section-start-main-content {
  padding-top: 25px;
  background-color: #F6F6F6;
}
.section-start-main-content.subdepartment {
  background-color: white;
}

.top-alert {
  font-size:.8rem;
  padding-left: 25px;
  list-style-type: none;
  /* margin: 0; */
  /* padding: 0; */
}
.top-alert li:before {
  font-family: Fontawesome;
  font-size: .7em;
  content: "\f111"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #C93944;
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.5em; /* Also needed for space (tweak if needed) */
  margin-left: -1.5em; /* Also needed for space (tweak if needed) */
}
.top-success {
  font-size:.8rem;
  padding-left: 25px;
  list-style-type: none;
  /* margin: 0;
  padding: 0;  */
}
.top-success li:before {
  font-family: Fontawesome;
  font-size: .7em;
  content: "\f111"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #7DB43C;
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.5em; /* Also needed for space (tweak if needed) */
  margin-left: -1.5em; /* Also needed for space (tweak if needed) */
}

.section-start-main .nav-tabs {
    margin-left: 15px;
}

.section-start-main .nav-tabs .nav-item.show .nav-link, .section-start-main .nav-tabs .nav-link {
    color: #525151 !important; /* default text colour (dark grey) */
    /* font-size: 16px; */
}

/* end SECTION START settings (start-page) */

/* TITLE settings (detail page) */
.tab-title {
  display: flex;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 10px;
}

.tab-title h1, h2, h3, h4, h5, h6 {
  display: inline-block;
}
.tab-title span {
  text-decoration: none;
}
.tab-title ul {
  flex-direction: row;
  margin-left: 20px;
}

.tab-title .symbol .nav-link {
  border-left: 1px solid rgba(45,45,45,0.2);
  width: 50px;
  padding: 5px;
}

/* display hightlight section */
.display-highlights .fa {
  font-size: 80%;
  padding: 0 15px;
}
.display-highlights a {
  text-decoration: none;
  color: #525151; /* default text: darkgrey */
}

.highlights {
  border-bottom: 1px solid #dee2e6;
  margin: 20px 0;
  padding-bottom: 20px;
}

.highlights ul {
  font-size:.9rem;
  padding-left: 15px;
}


/* end TITLE settings */

/* AVATAR settings */
.avatar-menu {
  border-radius: 50%;
  width: 20px;
}
.avatar-main {
  border-radius: 50%;
  width: 150px;
  cursor: pointer;
}

.department-logo {
  max-width: 100px;
  max-height: 40px;
  height: auto;
  width: auto;
}
/* end AVATAR settings */


/* Sticky footer */
.footer {
  background-color: #f6f6f6;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
  font-size: 80%;
}

.footer img {
  margin-left: 15px;
  margin-bottom: 4px;
  width: auto;
  height: 15px;
  color: white;
}

/* end sticky footer */

/* CARD settings */
.card {
	box-sizing: border-box;
	border-radius: 3.23px;
	background-color: #FFFFFF;
	box-shadow: 0 7px 36px 0 rgba(48,48,48,0.13);
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}

.card-header {
  border-bottom: 0;
  background-color: inherit;
}
.card-header > h3 {
  margin: 0;
}

.card-button {
  float: right;
  margin-top: 15px;
	box-sizing: border-box;
	height: 35px;
	width: 85px;
	border: 1px solid #008CBE;
	border-radius: 5px;
	background-color: #FFFFFF;
  color: #008CBE;
}

.card-button:hover {
	background-color: #f6f6f6;
}

.card-button a {
  font-size: 12px;
  text-decoration: none;
}
/* end CARD settings */

/* SNACKBAR settings */
#snackbar {
  opacity: 0;
  min-width: 250px;
  margin-left: -125px;
  text-align: center;
  border-radius: 3px;
  padding: 15px 10%;
  position: fixed;
  z-index: 1;
  left: 35%;
  bottom: 30px;
  font-size: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

#snackbar.show {
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  10%,90% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  10%,90% { opacity: 1; }
}

#snackbar.error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #E56C00;
}
#snackbar.success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
/* end SNACKBAR settings */

/* MODAL settings */
.modal-lg {
  /* min-width: 70%; */
}

.modal table td {
  font-size: 90%;
  padding: 5px;
}
.modal table {
  margin: 10px 0;
}
.modal p {
  font-size: 90%;
}

/* end MODAL settings */

/* SEARCH BOX settings */

input[type="search"] {
    position: relative;
    z-index: 10;
    background-image: url(../img/bg/searchicon.png);
    background-position: 6px 7px;
    background-repeat: no-repeat;
    background-size: 17px 17px;
    font-size: 14px;
    background-color: transparent;
    margin: 15px 0px 0px 10px;
    width: 100%;
    padding: 6px 8px 6px 30px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
#searchDepartment:focus {
  background-color: transparent;
}

#suggestion {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    margin: 15px 0px 0px 0px;
    color: #ccc;
    background: white;
    font-size: 14px;
    /* border: 1px solid white; */
    padding: 6px 8px 6px 30px;
    /* border: 1px solid #fff; */
}

#searchDepartment, #suggestion {
  margin: 0px 0 15px 0;
  box-shadow: none;
}

/* Style for the select dropbox (with auto complete) */
/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: none;
  width: 100%;
}

.autocomplete-items {
  position: absolute;
  z-index: 1000;
  /*position the autocomplete items to be the same width as the container:*/
  /* top: 100%; */
  top: 119px; /* based on: 66px for header & nav-bar + 33px for height search box */
  left: 0;
  right: 0;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: none;
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  overflow-y: auto;
  max-height: 507px;
}

.autocomplete-items div {
  font-size: 80%;
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #f7f7f9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: black;
}
/* end SEARCH BOX settings */

/* SELECT KPI box settings */
.select-kpi {
    list-style-type: none;
    padding: 10px;
}
.select-kpi > li {
  line-height: 1.16666667em;
  padding: 10px 25px;
  border-bottom: 1px solid #D7D7D7;
}
.select-kpi > li > label {
  display: block;
  font-size: 80%;
  margin-left: -15px;
  margin-bottom: 0px;
}
.select-kpi > li > input {
  display: none;
  visibility:hidden;
}
.select-kpi .nav-item-kpi:hover {
  cursor: pointer;
}
.select-kpi .nav-item-kpi.active {
  cursor: default;
}
.select-kpi .nav-item-kpi.disabled {
  cursor: default;
}
.select-kpi .nav-item-kpi > label:hover {
  cursor: pointer;
}
.select-kpi .nav-item-kpi.disabled > label:hover, .select-kpi .nav-item-kpi.active > label:hover {
  cursor: default;
}
/* end SELECT KPI box settings */

/* TABLE settings */
table  {
  font-size: 14px;
  margin-top: 40px;
}
.table-hover tbody tr {
  cursor: pointer;
}


.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(246, 246, 246, .5);
}
.table-striped tbody tr:hover {
    background-color: rgba(0, 0, 0, .05);
}


td > i.fa {
  opacity: 0;
  padding-left: 15px;
}
tr:not(.tableRowHoverOff):hover > td > i.fa {
  opacity: 1;
  float: right;
}
tr.tableRowHoverOff td {
  color: grey;
}
tr.tableRowHoverOff td:hover {
  cursor: default;
  background-color: none;
}

/* rotate text elements except the first column */
table#tbl-authorization th {
  border-top: 0px;
}

/* apply style for all table elements except the last two */
table#tbl-authorization th:not(table#tbl-authorization th:nth-child(-n+2)) {
  font-weight: normal;
  text-align: center;
}

table#tbl-authorization th {
  vertical-align: bottom;
}

/* apply style for all table elements except the last two */
table#tbl-authorization td:not(table#tbl-authorization td:nth-child(-n+2)) {
  text-align: center;
}
table#tbl-authorization td.button {
  border: 0;
  background: none !important;
  padding: 0;
}

table#tbl-authorization td:nth-child(-n+2),
table#tbl-authorization th:nth-child(-n+2) {
  font-weight: bold;
}

table#tbl-authorization td.hide-duplicate {
  border-top: none !important;
}

/* style last element in table (needed to edit symbol) */
#edit-kpi-table th:last-child,
#edit-kpi-table td:last-child {
  /* padding-right: 30px; */
  white-space: nowrap;
}

/* table DASHBOARD settings */
#dashboard-table table td {
  /* white-space: nowrap; */
}

#dashboard-table td {
  vertical-align: 0;
  padding-left: .75rem;
  padding-top: .2rem;
  padding-bottom: .2rem;
}

#dashboard-table table thead tr {
  background-color: rgba(246, 246, 246, .5);
}
table thead th {
  border-top: none;
  vertical-align: bottom;
}

#dashboard-table table td.theme,
#dashboard-table table th.theme {
  cursor: default;
}

/* style first element in table */
#dashboard-table table th:first-child,
#dashboard-table table td:first-child {
  width: 50%;
}

#dashboard-table table th:nth-last-child(4),
#dashboard-table table td:nth-last-child(4),
#dashboard-table table th:nth-last-child(4),
#dashboard-table table td:nth-last-child(4) {
    padding-left: 0;
    padding-right: 0;
}

#dashboard-table table th:nth-last-child(2),
#dashboard-table table td:nth-last-child(2),
#dashboard-table table th:nth-last-child(3),
#dashboard-table table td:nth-last-child(3) {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* style for last element in table */
#dashboard-table table th:last-child,
#dashboard-table table td:last-child {
    width: 25%;
    text-align: right;
    padding-right: 10px;
}

#dashboard-table svg {
  margin-top: 10px;
}

/* end DASHBOARD settings */

/* DETAIL KPI settings */
.kpi-month {
  display: flex;
}

.kpi-value {
  font-size: 1.50rem;
}

.reference {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.reference li {
  font-size: .8rem;
  padding-left: 1em;
  text-indent: -1em;
}
.reference li:before {
  content: ">";
  padding-right: 5px;
}
.reference a {
  color: #525151; /* default text colour (dark grey) */
}

#kpi_values {
  margin-top: 50px;
  margin-bottom: 50px;
}

#kpi_values th, #kpi_values td {
  white-space: nowrap;
  font-size: .8rem;
  padding: 5px;
}

#kpi_values thead th {
  border-top: none;
}

/* style first element in table */
#kpi_values th:first-child,
#kpi_values td:first-child {
  width: 80%;
}

/* style for last 2 elements in table */
#kpi_values th:last-child,
#kpi_values td:last-child,
#kpi_values th:nth-last-child(2),
#kpi_values td:nth-last-child(2) {
    text-align: center;
}

/* end DETAIL KPI settings */

/* LOGIN PAGE settings */
/* Split the screen in half */
.split {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 15px;
}

/* Control the left side */
.left {
  left: 0;
  background-color: white;
  padding-right: 10px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}

/* Control the right side */
.right {
  display: none;
  right: 0;
  background-color: none;
}

/* If you want the content centered horizontally and vertically */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* text-align: center; */
}

/* If you want the content centered horizontally (for profile image in edit-profile)*/
.centered-h {
  margin-top: 50px;
  text-align: center;
}

/* Style the image inside the centered container, if needed */
.centered img {
  width: 150px;
  border-radius: 50%;
}
.centered-h a {
  color: inherit;
}
.centered-h p {
  margin-top: 10px;
}

.bg {
  /* The image used */
  /* background-image: url("../img/bg/pexels-chris-peeters-12801.jpg"); */

  /* Full width */
  width: 50%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.form-signin h2 {
  font-family: Verdana, Arial;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  color: #E56C00;
  margin-top: 20px;
  margin-bottom: 10px;
}
.form-signin p {
 margin: 0 0 10px;
}

.form-subtext, .sr-only {
  margin-top: 25px;
  font-size: 12px;
  color: grey;
}
.form-subtext > a {
  margin: 25px 0px 8px;
}

.form-signin {
  min-width: 250px;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signup {
  min-width: 350px;
  max-width: 550px;
  padding: 15px;
  margin: 0 auto;
}
.form-edit-profile {
  /* min-width: 250px; */
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.left .form-signin {
  position:relative;
  top:0%;
  right:0;
  left:0;
}

.form-heading, .form-signin .checkbox, .form-signup .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox, .form-signup .checkbox {
  font-weight: 400;
}
.form-signup .form-control, .form-signin .form-control {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signup .form-control:focus, .form-signin .form-control:focus {
  z-index: 2;
}
.form-signup input[type="text"], .form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signup input[type="password"], .form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* end LOGIN PAGE settings */

/* general FORM SETTINGS */
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.43;
    color: #525151;
    background-color: #fff;
    background-image: none;
    border: 1px solid #D7D7D7;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

/* end general FORM SETTINGS */

/* ALERT settings */
.alert {
  font-size: 14px;
}
/* end ALERT settings */

/* BUTTON settings */
.btn, .the-twist-close {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    font-size: 16px;
    text-decoration: none;
    white-space: normal;
    transition: all .2s ease;
    margin: 15px 0;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-primary, .attention-wrapper .main-buttons .btn, .attention-wrapper .main-buttons .the-twist-close {
    color: #fff;
    background-color: #E56C00;
    border-color: #E56C00;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: #B75600 !important;
    border-color: #B75600 !important;
}
.btn-secondary {
    color: #525151; /* default text colour (dark grey) */
    background-color: #fff;
    border-color: #D7D7D7 !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus {
    color: #525151 !important; /* default text colour (dark grey) */
    background-color: #F6F6F6 !important;
}

.btn, .the-twist-close {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.43;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button, select {
    text-transform: none;
}
button {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
/* end BUTTON seettings */

/* TOOLTIP settings */
#tooltip {
    opacity: 0;
    position: absolute;
    left: 0;
    z-index: 1000;
    padding: 5px 10px;
    text-align: center;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
/* end TOOLTIP settings */

/* COLOR settings */
.neutral {
  color: #CCCCCC;
  fill: #CCCCCC;
}
.na {
  fill: #fff;
  stroke: grey;
  stroke-width: 2;
}
.actual-default {
  fill: grey;
}
.history {
  fill: #CCCCCC;
}
.prognosed {
  fill: url(#stripes);
}
/* end COLOR settings */

/* GRAPH settings */
/* start page: KPI summary year graph */
.axisY > .tick > line {
    stroke: none;
}
.axisX > .tick > line {
    stroke: none;
}
.axisX path, .axisY path {
    stroke: grey;
    stroke-width: 0.5;
}
.domain {
  stroke: none;
}
.tick > text {
  fill: grey;
}
.target > path {
  stroke-width: 1.5px;
  stroke-dasharray: 5, 5;
  fill: none;
}
.target.green > path {
}
.target.orange > path {
}

svg.content  {
  margin-bottom: 20px;
}
.parent.content rect {
  cursor: pointer;
}

/* Legend settings */
.chart-legend {
  margin-top: 20px;
}
.chart-legend ul {
  list-style: none;
  padding-left: 0;
}
.chart-legend h6 {
  margin: 0;
  color: #525151; /* default text colour (dark grey) */
  font-size: .8rem;
}
.chart-legend li a {
  margin: 0;
  color: #525151; /* default text colour (dark grey) */
  font-size: .8rem;
  padding-left: 15px;
}
/* end Legend settings */

/* select options (toggle) settings */
.main-chart-radioselect {
    margin-left: 15px;
}
.chart-toggle {
  list-style-type: none;
  display: flex;
  font-size: .8rem;
}
.chart-toggle > li > label {
  cursor: pointer;
}
.chart-toggle > li > label:hover {
  color: #008CBE;
}
.chart-toggle > li > input {
  visibility:hidden;
}
.chart-toggle > li > input:checked + label {
  color: #008CBE;
  border-bottom: 2px solid #008CBE;
}
/* end select options (toggle) settings */

/* end GRAPH settings */

/* HIDE / SHOW KPI select box */
#select-kpi-wrapper {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  background-color: white;
  /* top: 0; */
  left: 0;
  overflow-x: hidden;
  transition: all 0.5s;
  opacity: 0;
  /* padding-top: 60px; */
}
#main {
  transition: all .5s;
}
/* end HIDE / SHOW KPI select box */


/* FORM SETTINGS */
.form-highlights textarea {
  font-size: .9rem;
}
.form-highlights label {
  font-size: 1.3rem;
}
.form-highlights textarea:disabled {
  background-color: #F6F6F6;
}
.form-highlights > span {
  color: grey;
  font-size: .8rem;
}
.form-highlights div {
  float: right;
}

form .row small {
  padding: 0px 15px;
}
/* end FORM SETTINGS */

/* DATATABLES settings */
/* position pagination buttons */
.dataTables_paginate.paging_simple_numbers {
  margin-top: 10px;
}
/* position select top 10, 25, 50, 100 BOX */
.dataTables_length {
  padding-top: 20px;
}

/* pagination */
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 3px;
}
.pagination > li {
  display: inline;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.43;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.pagination > li > a:hover, .pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
  z-index: 2;
  border-radius: 3px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  padding: 6px 10px;
  margin-left: 0;
  border-radius: 3px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  padding: 6px 10px;
  border-radius: 3px;
}

.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  z-index: 3;
  cursor: default;
  border-radius: 3px;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #EEE;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
  border-radius: 3px;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 16px 16px;
  font-size: 20px;
  line-height: 1.33;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.5;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
/* end DATATABLES settings */

/* start BADGE settings */
.badge-concept, .badge-onhold {
  background-color: rgba(0,140,190,0.1);
  color: #008CBE;
}
.badge-actief {
  background-color: rgba(125,180,60,0.1);
  color: #7DB43C;
}
.badge-inactief {
  background-color: rgba(175,25,30,0.1);
  color: #C93944;
}
.badge-new {
  background-color: #C93944;
  color: white;
  padding: 5px !important;
}
.badge-secondary {
  padding: 5px !important;
}
.badge {
  padding: 5px 10px;
}

/* end BADGE settings */

/* === ADDITIONAL SCREEN === */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {


}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

  #dashboard-table .tbl-left {
    padding: 0 15px;
  }
  #dashboard-table .tbl-right {
    padding: 0 15px;
  }

  .navbar .symbol {
    border-right: 1.2px solid rgba(45,45,45,0.2);
    width: 50px;
  }
  .notification {
    display: inline-block;
  }

  /* LOGIN PAGE settings */
  /* Split the screen in half */
  .split {
    width: 50%;
  }

  /* Control the right side */
  .right {
    display: block;
  }
  /* end LOGIN PAGE settings */

  .autocomplete {
    float: right;
    width: 200px;
    display: inline-block;
  }

  #download-to-csv {
    display: block;
  }

  #searchDepartment, #suggestion {
    margin: 86px 0 15px 0;
  }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {



}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {


}