/* The apotheek font contains only a few non-standard characters. */
@font-face {
    font-family: 'apotheek';
    src: url("./fonts/apotheek.eot");
    src: url("./fonts/apotheek.eot") format("embedded-opentype"), url("./fonts/apotheek.svg") format("svg"), url("./fonts/apotheek.woff") format("woff"), url("./fonts/apotheek.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'ubuntu light';
    src: url("./fonts/ubuntu-l-webfont.woff2") format("woff2"), url("./fonts/ubuntu-l-webfont.woff") format("woff")
}

@font-face {
    font-family: 'ubuntu light italic';
    src: url("./fonts/ubuntu-li-webfont.woff2") format("woff2"), url("./fonts/ubuntu-li-webfont.woff") format("woff")
}

@font-face {
    font-family: 'ubuntu regular';
    src: url("./fonts/ubuntu-r-webfont.woff2") format("woff2"), url("./fonts/ubuntu-r-webfont.woff") format("woff")
}

@font-face {
    font-family: 'ubuntu regular italic';
    src: url("./fonts/ubuntu-ri-webfont.woff2") format("woff2"), url("./fonts/ubuntu-ri-webfont.woff") format("woff")
}

@font-face {
    font-family: 'ubuntu medium';
    src: url("./fonts/ubuntu-m-webfont.woff2") format("woff2"), url("./fonts/ubuntu-m-webfont.woff") format("woff")
}

@font-face {
    font-family: 'ubuntu medium italic';
    src: url("./fonts/ubuntu-mi-webfont.woff2") format("woff2"), url("./fonts/ubuntu-mi-webfont.woff") format("woff")
}

body {
    font-family: "ubuntu light", verdana, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.6rem;
    line-height: 2.5rem;
    color: #494c4e;
}

body #excel {
    font-size: 1.4rem;
}

strong, .bold {
    font-family: "ubuntu medium", verdana, sans-serif;
    font-weight: normal;
    font-style: normal
}

strong em, strong .italic, .bold em, .bold .italic {
    font-family: "ubuntu medium italic", verdana, sans-serif;
    font-weight: normal;
    font-style: normal
}

em, .italic {
    font-family: "ubuntu light italic", verdana, sans-serif;
    font-weight: normal;
    font-style: normal
}

em strong, em .bold, .italic strong, .italic .bold {
    font-family: "ubuntu medium italic", verdana, sans-serif;
    font-weight: normal;
    font-style: normal
}

img {
    border: none;
}

.navbar-brand > img {
    display: inline;
    vertical-align: top;
}

.navbar-brand h2 {
    display: inline-block;
    margin-top: 12px;
}

.navbar-brand h2::before {
    content: '';
    display: inline-block;
    margin-right: 11px;
    margin-left: 5px;
    height: 22px;
    width: 1px;
    background-color: #0c5e88;
}

.navbar-brand {
    padding: 0px 10px;
    height: 60px;
    position: absolute;
    top: 10px;
}

.comment {
    background-color: #EEEEEE;
    color: #606060;
}

.stress {
    background-color: #FFEEDD;
}

body {
    background-color: #f5f8fa;
}
body.spreadsheet,
#header,
#content {
    background-color: white;
}
#content {
    min-height: 80vh;
}
.container #main {
    width: 775px;
}

table {
    border: 1px solid gray;
    border-spacing: 1px;
    margin: 3px;
    padding: 2px;
}

td {
    border: 0px;
    padding: 2px;
    vertical-align: top;
    white-space: nowrap;
}
td.field div.error {
    white-space: normal;
}

th {
    background-color: #fff;
    color: #015790;
    padding: 3px;
    text-align: left;
}

#content a {
    text-decoration: underline;
}

h1 {
    margin-top: 9px;
}

h1 a {
    text-decoration: none;
    color: #494c4e;
}

h1 a:hover {
    text-decoration: underline;
    color: #494c4e;
}

h2 {
    margin-bottom: 3px;
}

h3 {
    margin-bottom: 3px;
}

.menu ul {
    list-style-type: circle;
}

.menu li {
    display: inline;
    padding: 5px 20px;
}

#location_select {
    margin: 0em 1em;
}

.waarde {
    text-align: right;
}

.action {
    text-align: right;
}

.row {
    clear: both;
}

.status {
    background-color: #FFFC9C;
    font-weight: bold;
    padding: 3px;
    border: 2px solid #AAAAAA;
}

.smallstatus {
    width: 50%;
}

.error {
    background-color: pink;
}

.inactive {
    color: #AAAAAA;
}

input.inactive {
    font-style: italic;
}

abbr {
    /* cursor: help; */
    border-bottom: 1px dashed;
}

.chartwrapper {
    position: relative;
}

.chartlegend {
    overflow-x: hidden;
    overflow-y: hidden; /* needed for IE9+, see #8040 */
    position: absolute;
    top: 0;
    left: 0;
    width: 70px; /* see chart.py, plotarea_left */
    float: left;
}

.chartscroller {
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden; /* needed for IE9+, see #8040 */
    float: left;
}

/* Hide tooltip triggers initially. */
.tooltip_trigger {
    opacity: 0;
}

/* Graph tooltip boxes should not obscure the graph behind them. */
.tooltip_text {
    opacity: 0.7;
}

.webtext-text {
    max-width: 600px;
    overflow: auto;
}

/* voor de autocomlete */
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
}

/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
    height: 100px;
}

/* Fix invisible titles in calendar month/year dropdowns */
.ui-datepicker-title {
    color: #333333;
}

/* make datepicker fully visible without falling behind excel heading */
.datepicker-on-excel {
    position: relative;
    z-index: 200;
}

/* table styling */

.table-striped > tbody > tr:nth-child(odd) > th,
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th a,
.table-striped > tbody > tr:nth-child(odd) > td a {
    background-color: #e5f0f7;
    color: #015790;
}

.table-striped > tbody > tr:nth-child(even) > th,
.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th a,
.table-striped > tbody > tr:nth-child(even) > td a {
    background-color: #fff;
    color: #494c4e;
}

.table-striped > tbody > tr.inactive > th,
.table-striped > tbody > tr.inactive > td,
.table-striped > tbody > tr.inactive > th a,
.table-striped > tbody > tr.inactive > td a {
    color: #AAAAAA;
}

.table > tbody > tr.excel-row > td {
    vertical-align: middle;
}

.table.table-form {
    border: 0;
    margin-top: 20px;
    width: auto;
}

.table.table-form > thead > tr > th {
    background-color: #eef4f6;
    border: 0;
    padding: 24px;
}

.table.table-form > tfoot > tr > th,
.table.table-form > tfoot > tr > td,
.table.table-form > tbody > tr > th,
.table.table-form > tbody > tr > td {
    border: 0;
    min-width: 150px;
}

span.required::after {
    content: " *";
    color: red;
}

.actionButtons input,
.table > tfoot a,
.table > tfoot input {
    background-color: #12b392;
    border: 0;
    color: white;
    padding: 9px 20px;
}

.table > tfoot button[name="actions-cancel"],
.table > tfoot input[name="actions-cancel"] {
    background-color: #337ab7;;
}
#content .table > tfoot a[name="actions-cancel"]{
    background-color: #337ab7;;
    border-radius: 0;
    font: inherit;
    margin-top: -3px;
    text-decoration: none;
}
#content .table > tfoot a[name="actions-cancel"]:hover{
    color: white;
}

.table input[name="actions.delete"],
.table button[name="actions.delete"] {
    background-color: #ed5050;
}

.table form > button,
.table td > button,
.table th > button {
    background-color: #12b392;
    border: 0;
    color: white;
    padding: 0px 10px;
}

.table button.bigger,
.table tfoot button {
    padding: 9px 20px;
}

.table.table-form select {
    min-width: 200px;
}

.mce-tinymce {
    min-width: 800px;
}

/* handsontable spreadsheet styling */

td.excel-alert {
    background-color: #bf2010;
    color: white;
    text-align: center;
}

.handsontable th.long_title {
    overflow: visible;
    border-right: none;
}

.handsontable th.long_title.lone_day {
    overflow: auto;
    border-right: 1px solid #ccc;
}

.handsontable th.monitoring, .handsontable td.monitoring, #excel-move-monitoring {
    background-color: #e47f2f;
    color: white;
}

.handsontable th.validation, .handsontable td.validation, #excel-move-validation {
    background-color: #bfab25;
    color: white;
}

.handsontable th.qualification, .handsontable td.qualification, #excel-move-qualification {
    background-color: #e84f82;
    color: white;
}

.handsontable th.mixed, .handsontable td.mixed {
    background-color: #43958b;
    color: white;
}

/* dimmed (readonly) should win over the others. */
.handsontable td.htDimmed,
.handsontable td.monitoring.htDimmed,
.handsontable td.qualification.htDimmed,
.handsontable td.validation.htDimmed,
.handsontable td.mixed.htDimmed {
    background-color: #eee;
    color: #777;
}

/* and .highlight should win over htDimmed */
.handsontable td.htDimmed.highlight,
.handsontable td.monitoring.htDimmed.highlight,
.handsontable td.qualification.htDimmed.highlight,
.handsontable td.validation.htDimmed.highlight,
.handsontable td.mixed.htDimmed.highlight {
    background-color: #eef4ff;
}

/* Get a fixed height for handsontable cells. */
.handsontable th, .handsontable td {
    height: 24px;
}

/* Keep the upper left cell as high as the column headers. */
.ht_clone_left .htCore thead th div {
    min-height: 62px;
    border-top: 5px solid transparent;
}

.ht_clone_top .htCore thead th {
    border-top: 5px solid transparent;
}

.ht_clone_top .htCore thead th.general {
    background-color: #3793be;
    color: white;
}

.ht_clone_top .htCore thead th.kve_air {
    border-top: 5px solid #fb7f24;
}

.ht_clone_top .htCore thead th.kve_hand {
    border-top: 5px solid #ce5700;
}

.ht_clone_top .htCore thead th.kve_desk {
    border-top: 5px solid #943c07;
}

/* Override the default padding that we have set for all tables. */
.handsontable table.htCore {
    padding: 0px;
}

/* Move the main table body down a bit. */
.handsontable .ht_master .htCore {
    padding-top: 5px;
}

/* Do not show the upper left hand corner. */
.ht_clone_corner.handsontable {
    display: none;
}

/* The first col lacks room on the left-hand side, so add a bit more padding. */
.handsontable td.firstcol, .handsontable th.firstcol {
    padding-left: 10px;
}

.handsontable {
    background-color: #f7f7f7;
}

/* autocomplete arrow: always dark, not just on hover; invisible when dimmed/readonly */
.handsontable .htAutocompleteArrow {
    color: #000;
}

.handsontable .htDimmed .htAutocompleteArrow,
.handsontable .htDimmed .htAutocompleteArrow:hover {
    color: transparent;
}

/* Style the dropdown lists */
.handsontable .listbox {
    border: 2px solid #555;
    height: auto !important;
    overflow: hidden visible !important;
    padding-right: 0;
}
.handsontable .autocompleteEditor.handsontable {
    padding-right: 0;
}
.handsontable .autocompleteEditor.handsontable.htMacScroll {
    padding-right: 0;
}

/* Fix handsontable in combination with bootstrap: */
.handsontableInput {
    box-sizing: content-box;
}

.excel-button {
    border: 1px solid transparent;
    border-radius: 4px;
    width: 100%;
    background-color: #3793be;
    color: white;
    padding: 0px;
}

#excel-add-row {
    width: 5em;
    float: left;
}

#excel-nav {
    width: 36em;
    display: inline-block;
}

#excel-move-start, #excel-move-end {
    width: 2em;
}

#excel-move-monitoring, #excel-move-validation, #excel-move-qualification {
    width: 8em;
}

#excel-load-data {
    margin-left: 1em;
    width: 8em;
}

#excel-export {
    margin-left: 1em;
    width: 15em;
}

#above-excel {
    margin-bottom: 5px;
    min-height: 27px;
    text-align: center;
}

#above-excel .excel-button {
    padding: 2px;
}

#excel-save-buttons {
    margin-left: 1em;
    display: inline-block;
    float: right;
    margin-right: 2em;
}

#excel-save-all {
    width: 20em;
}

.handsontable td.currentRow {
    font-weight: bold;
}

.handsontable th.required div::after {
    content: " *";
    color: red;
}

/* Hide a few excel extras initially. */
#excel-add-row, #excel-view-only, #excel-filter-options, #excel-filter-buttons {
    display: none;
}

#excel-filter-options {
    width: 100%;
    text-align: left;
    padding-left: 1em;
    padding-bottom: 1em;
}

#excel-filter-buttons {
    float: left;
}

/* END handsontable styling */

#flash {
    min-height: 2em;
    list-style: none;
}

#flash li {
    padding: 3px 10px;
}

/* new own design */

/* Don't put our stuff too close to the left or bottom border. */
#main {
    padding-left: 5px;
    padding-bottom: 1em;
}

.navbar {
    background-color: #fff;
    margin-bottom: 9px;
}

.navbar a,
.navbar {
    color: #005682;
}

.table-smaller {
    width: auto;
}

.navbar-collapse {
    float: right;
}

#page-header {
    background-image: url("/static/images/header-bg.jpg");
    background-size: cover;
    background-position: center center;
    min-height: 250px;
}

.spreadsheet #page-header {
    background: #f5f8fa;
    min-height: 0;
}

#page-title {
    margin: 0;
    min-height: 3px;
}

#page-title h1 {
    padding: 0.6em 1em;
}

#mainnav > li > a {
    height: 80px;
    margin-top: -20px;
    padding-top: 30px;
}

nav > ul > li {
    position: relative;
    display: inline-block;
    height: 40px;
    margin: 20px 0 10px;
    padding: 0;
    border-left: 1px #e5e5e5 solid;
    overflow: visible;
}

nav .navbar-nav > li > a {
    padding-top: 10px;
    font-size: 105%;
}

.icon-dropdown:before {
    font-family: 'apotheek';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e615';
    padding-left: 0.4em;
    padding-right: 0.4em;
}

nav ul li.open a i {
    transform: rotate(180deg);
    display: inline-block;
    transition: all 0.3s ease;
}

nav ul li.active > a,
nav ul li.active > a:hover,
nav ul li.active.open > a,
nav ul li.active.open > a:hover,
nav ul li.active.open:hover a:focus,
nav ul li.active.open a:focus {
    background-color: #397a9a;
    color: #fefefe;
}

.navbar-nav > li.open > .dropdown-menu {
    margin-top: 4px;
    padding: 0;
}

.dropdown-menu > li form,
.dropdown-menu > li a {
    border-bottom: 1px #dde9ed solid;
    height: 3em;
}

.dropdown-menu > li a {
    padding: 13px 20px;
}

.dropdown-menu > li a.nonclickable {
    border-bottom: 0;
}

#location_selector select {
    max-width: 300px;
}

/* important is sadly needed to get any background color */
.dropdown-menu > li > a:hover {
    background: #397a9a !important;
    color: #fefefe;
}

.nav > li > a:focus,
.nav > li > a:hover,
.nav .open > a,
.nav .open > a:hover,
.navbar .open li:hover a:focus,
.dropdown-menu,
.dropdown-menu > li:hover a,
.dropdown-menu > li:focus a,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    background-color: #f5f8fa;
}

nav > ul > li:hover {
    border-left: 1px #f5f8fa solid;
}

/* END new own design */

/* audit trail */
.auditlog-changed {
    background-color: #00aa00;
}

/* Flask */
button#show-add-form {
    font-size: 16px;
    margin-top: 0.4em;
}