p.toepassingsnaam {
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 20px !important;
  font-weight: bold;
  border-radius: 10px;
}
.login-pf-page .login-pf-brand {
  width: 25% !important;
}

/* reset user agent stylesheet */
* {
  margin: 0;
  padding: 0;
}

.navbar-pf-vertical {
  border-top: 0px;
}

.nav-pf-vertical {
  top: 58px;
}

.pficon.material-symbols-outlined {
  font-size: 24px !important;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  margin-right: 5px;
}
.tableicon.material-symbols-outlined {
  font-size: 20px !important;
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

.icons .fa,
.icons .glyphicon,
.icons .pficon {
  font-size: 14px;
  margin-right: 5px;
  text-align: center;
  width: 14px;
}

.icons .icon-class {
  display: inline-block;
}

.icons li {
  margin: 0 0 7px;
}

.uurrooster th {
  text-align: center;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
  width: auto;
  height: auto;
}
.form-control[disabled] {
  background: transparent;
}
div.uurroostertable > .dtpicker {
  background: transparant;
}

input[type="text"] {
  background: transparent;
  /*border: none;*/
  min-width: 55px;
}

div.weekheader {
  font-size: 26px;
  text-align: center;
}
i.infobutton {
  vertical-align: super;
  font-size: 14px;
  color: #0088ce;
}
div.colheader {
  min-width: 66px;
}

/*Uurroostertable*/
div.uurroostertable {
  text-align: left;
  border-collapse: collapse;
  position: relative;
  min-width: 340px;
}

/*.divTable.uurroostertable .divTableRow:nth-child(even) {
    background: #F5F5F5;
}*/

.divTable.uurroostertable .divTableHeading {
  background: #ebebeb;
  text-align: center;
}

.divTable.uurroostertable .divTableHeading .divTableHead {
  color: #363636;
  text-align: center;
}

.divTable {
  display: table;
  vertical-align: middle;
  margin-bottom: 0px;
}

.divTableRow {
  display: table-row;
  height: 32px;
}

.divTableHeading {
  display: table-header-group;
  font-size: 18px;
}

.divTableCell,
.divTableHead {
  display: table-cell;
  padding-right: 0px;
  padding-left: 0px;
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 2px;
}

.divTableHeading {
  display: table-header-group;
}

.divTableBody {
  display: table-row-group;
}

.edit,
.editverzekering,
.remove,
.loginasuser > .glyphicon {
  font-size: 1.4em;
}

#table > tbody > tr > td {
  padding: 4px;
  vertical-align: middle;
}

.bootstrap-table {
  height: 85%;
}

.bootstrap-table tr {
  font-size: 13px;
}

#overzichtfietsvergoeding th .th-inner,
tr td {
  padding: 4px;
  font-size: 11px;
}

.slider {
  width: 100% !important;
}

.panel-title {
  color: #000000;
  font-weight: italic;
}

div.opdracht1 {
  background-color: paleturquoise;
  /*border: 2px solid paleturquoise;*/
  display: block;
  margin-bottom: 2px;
}

div.opdracht2 {
  background-color: lightgreen;
  /*border: 2px solid lightgreen;*/
  display: block;
  margin-bottom: 2px;
}

div.opdracht3 {
  background-color: thistle;
  /*border: 2px solid thistle;*/
  display: block;
  margin-bottom: 2px;
}

div.opdracht4 {
  background-color: pink;
  /*border: 2px solid pink;*/
  display: block;
  margin-bottom: 2px;
}

div.opdracht5 {
  background-color: gold;
  /*border: 2px solid gold;*/
  display: block;
  margin-bottom: 2px;
}

.btn {
  white-space: normal;
}

.uurroostertitel,
.legende {
  text-align: center;
  padding-top: 4px;
  margin-top: 0px;
}

/* custom scrollbars */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar-thumb {
  background: #3f3f3f;
  border: 0px none #ffffff;
  border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

::-webkit-scrollbar-thumb:active {
  background: #585858;
}

::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 0px;
}

::-webkit-scrollbar-track:hover {
  background: #666666;
}

::-webkit-scrollbar-track:active {
  background: #333333;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Progress bars op dashboard */
.progress-description {
  max-width: 100%;
}

.progress-description > .fa {
  font-size: 20px;
}

.progress-description > .progress-desc-title {
  font-size: 20px;
}

/* gebruikersrollen toevoegen list */
ul#gebruikersrollen li,
ul#editGebruikersrollen li {
  cursor: pointer;
  position: relative;
  padding-left: 5px;
  /* padding: 12px 8px 12px 40px;*/
  list-style-type: none;
  background: #eee;
  /* font-size: 18px; */
  /*transition: 0.2s; */
  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul#gebruikersrollen li:nth-child(odd),
ul#editGebruikersrollen li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul#gebruikersrollen li:hover,
ul#editGebruikersrollen li:hover {
  background: #ddd;
}

/* Style the close button */
.addliclose,
.editliclose {
  right: 0;
  top: 0;
  padding: 0px 6px 0px 6px;
}

.liadd {
  top: 0;
  padding: 0px 6px 0px 6px;
}

.addliclose:hover,
.liadd:hover,
.editliclose:hover {
  background-color: #f44336;
  color: white;
  cursor: pointer;
}

#rolDiv,
#vestigingDiv,
#teamDiv,
#editRolDiv,
#editVestigingDiv,
#editTeamDiv {
  display: inline-block;
}

/* tooltip aanpassen zodat \n gebruikt kan worden (multiline) */
.tooltip-inner {
  white-space: pre-wrap;
  max-width: 600px;
  font-size: 14px;
}

.btn-goedkeuren,
.btn-weigeren {
  height: 26px;
}

.list-view-pf-additional-info {
  display: grid;
}

.list-view-pf-additional-info-item {
  text-align: left;
}

.list-group-item-header {
  display: flex;
  align-items: center;
}

.badge-primary {
  color: #fff;
  background-color: #0088ce;
  border-color: #00659c;
}

.badge-success {
  color: #fff;
  background-color: #3f9c35;
  border-color: #37892f;
}

.badge-danger {
  color: #fff;
  background-color: #a30000;
  border-color: #8b0000;
}

.typeicon {
  border: 2px solid #39a5dc;
  box-sizing: border-box;
  font-size: 1.4em;
  height: 30px;
  line-height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 4px;
}

.typeicon:before {
  line-height: 18px;
}

.btn-group > .btn-filter.active {
  font-weight: bold;
  text-decoration: underline;
}

div.vestiging1 {
  background-color: paleturquoise;
  border-radius: 20px;
  padding: 5px;
}
div.vestiging2 {
  background-color: lightgreen;
  border-radius: 20px;
  padding: 5px;
}
div.vestiging3 {
  background-color: thistle;
  border-radius: 20px;
  padding: 5px;
}
div.vestiging4 {
  background-color: pink;
  border-radius: 20px;
  padding: 5px;
}
div.vestiging5 {
  background-color: gold;
  border-radius: 20px;
  padding: 5px;
}
/* enkele rit: dag half inkleuren op kalender */
div.wwafstand1 {
  background: linear-gradient(
    to bottom right,
    paleturquoise 0%,
    paleturquoise 50%,
    rgba(255, 0, 0, 0) 50%,
    rgba(255, 0, 0, 0) 100%
  );
}
div.wwafstand2 {
  background: linear-gradient(
    to bottom right,
    lightgreen 0%,
    lightgreen 50%,
    rgba(255, 0, 0, 0) 50%,
    rgba(255, 0, 0, 0) 100%
  );
}
div.wwafstand3 {
  background: linear-gradient(
    to bottom right,
    thistle 0%,
    thistle 50%,
    rgba(255, 0, 0, 0) 50%,
    rgba(255, 0, 0, 0) 100%
  );
}
div.wwafstand4 {
  background: linear-gradient(
    to bottom right,
    pink 0%,
    pink 50%,
    rgba(255, 0, 0, 0) 50%,
    rgba(255, 0, 0, 0) 100%
  );
}
div.wwafstand5 {
  background: linear-gradient(
    to bottom right,
    gold 0%,
    gold 50%,
    rgba(255, 0, 0, 0) 50%,
    rgba(255, 0, 0, 0) 100%
  );
}
/* dubbele rit, 2x zelfde afstand: dag helemaal inkleuren op kalender */
div.wwafstand1wwafstand1 {
  background-color: paleturquoise;
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand2wwafstand2 {
  background-color: lightgreen;
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand3wwafstand3 {
  background-color: thistle;
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand4wwafstand4 {
  background-color: pink;
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand5wwafstand5 {
  background-color: gold;
  border-radius: 20px;
  padding: 5px;
}
/* dubbele rit, verschillende afstanden: dag met 2 kleuren inkleuren op kalender */
div.wwafstand1wwafstand2,
div.wwafstand2wwafstand1 {
  background: linear-gradient(
    to bottom right,
    paleturquoise 0%,
    paleturquoise 50%,
    lightgreen 50%,
    lightgreen 100%
  );
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand1wwafstand3,
div.wwafstand3wwafstand1 {
  background: linear-gradient(
    to bottom right,
    paleturquoise 0%,
    paleturquoise 50%,
    thistle 50%,
    thistle 100%
  );
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand1wwafstand4,
div.wwafstand4wwafstand1 {
  background: linear-gradient(
    to bottom right,
    paleturquoise 0%,
    paleturquoise 50%,
    pink 50%,
    pink 100%
  );
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand1wwafstand5,
div.wwafstand5wwafstand1 {
  background: linear-gradient(
    to bottom right,
    paleturquoise 0%,
    paleturquoise 50%,
    gold 50%,
    gold 100%
  );
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand2wwafstand3,
div.wwafstand3wwafstand2 {
  background: linear-gradient(
    to bottom right,
    lightgreen 0%,
    lightgreen 50%,
    thistle 50%,
    thistle 100%
  );
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand2wwafstand4,
div.wwafstand4wwafstand2 {
  background: linear-gradient(
    to bottom right,
    lightgreen 0%,
    lightgreen 50%,
    pink 50%,
    pink 100%
  );
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand2wwafstand5,
div.wwafstand5wwafstand2 {
  background: linear-gradient(
    to bottom right,
    lightgreen 0%,
    lightgreen 50%,
    gold 50%,
    gold 100%
  );
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand3wwafstand4,
div.wwafstand4wwafstand3 {
  background: linear-gradient(
    to bottom right,
    thistle 0%,
    thistle 50%,
    pink 50%,
    pink 100%
  );
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand3wwafstand5,
div.wwafstand5wwafstand3 {
  background: linear-gradient(
    to bottom right,
    thistle 0%,
    thistle 50%,
    gold 50%,
    gold 100%
  );
  border-radius: 20px;
  padding: 5px;
}
div.wwafstand4wwafstand5,
div.wwafstand5wwafstand4 {
  background: linear-gradient(
    to bottom right,
    pink 0%,
    pink 50%,
    gold 50%,
    gold 100%
  );
  border-radius: 20px;
  padding: 5px;
}

tr.wwafstand1-row {
  background-color: paleturquoise;
}

tr.wwafstand2-row {
  background-color: lightgreen;
}

tr.wwafstand3-row {
  background-color: thistle;
}

tr.wwafstand4-row {
  background-color: pink;
}

tr.wwafstand5-row {
  background-color: gold;
}

.counter-row {
  padding-bottom: 2px;
}
.verlofstelsel {
  background-color: rgb(255, 136, 0);
  color: white;
}
.feestdag {
  background-color: dimgray;
  color: white;
}

.verplichtesluitingsdag {
  background-color: gray;
  color: white;
}

.bijkomendesluitingsdag {
  background-color: gray;
  color: white;
}
.bijzondereopeningsdag {
  background-color: rgb(148, 195, 148);
  color: white;
}

.verlofdag {
  background-color: lightslategray;
  color: white;
}

.compensatiedag {
  background-color: darkslategray;
  color: white;
}

.uitzonderlijkgewerkt {
  background-color: rgb(148, 195, 148);
  color: white;
}

.overurenflexibel {
  background-color: rgb(148, 195, 148);
  color: white;
}

.day {
  border-radius: 20px;
  padding: 5px;
}

.hide {
  display: none;
}

.dashboardpanel a {
  color: inherit;
  text-decoration: none;
}

.totalevergoeding,
.vergoedingsbedrag,
.totaleafstand {
  font-weight: bold;
}

.toast-notifications-list-modal-pf {
  margin-left: 20px;
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 1050;
  max-width: calc(40%);
}

.opdrachtrow {
  margin-left: 20px;
  padding-left: 10px;
}

.formatduur {
  font-weight: bold;
}

/* Flash class and keyframe animation */
.flashit {
  /*display:flex;*/
  animation: lower 5s linear infinite;
  color: red;
}

@keyframes lower {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    opacity: 0.99;
  }

  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: 0.4;
  }
}

.list-view-opdracht-actions {
  margin-left: 10px;
  display: inline-block;
}

/*Tijdslijn instellingen*/
.vis-item.opdracht {
  background-color: greenyellow;
  border-color: green;
}

.vis-item.verlofstelsel {
  background-color: lightcoral;
  border-color: coral;
}

/* Dashboard instellingen */
.opdrachtregel {
  line-height: 3.5;
}

.opdrachtknoppen {
  display: inline-block;
  float: none;
  position: absolute;
  right: 35px;
}

.opdrachtknop {
  width: 155px;
}

.dbvestiging {
  width: 125px;
}

.nietactief {
  opacity: 0.5;
}

.about-modal-pf {
  min-width: 800px;
}
.login-pf-page .login-pf-social-link a {
  border: 1px solid lightgrey;
  border-radius: 2px;
}
.inlinetitle {
  display: inline-block;
}
#moreinfo {
  vertical-align: super;
  color: #0088ce;
}

.verlofdagendiv {
  display: inline-block;
  padding: 0 20 0 20;
}

.totaalverlofdiv {
  display: inline-block;
  border-style: groove;
  padding: 25px;
  font-size: 16px;
}
.dashboard-title {
  font-size: 20px;
}
.dashboard-title-icon {
  font-size: 20px;
  margin-right: 3px;
}
ul.twp {
  list-style: circle outside none;
  padding: 10px 10px 10px 25px;
}
ul.verlofberekening {
  list-style: circle outside none;
  padding: 10px 10px 10px 25px;
}
ul.tewerkstelling {
  list-style: square outside none;
  padding: 20px 10px 10px 25px;
}

div.verlofberekening {
  font-family: "PT Mono", monospace;
}

.spacer-row > td {
  border: 0 !important;
}

.nav-pf-secondary-nav .list-group-item .list-group-item-value {
  padding-left: 5px;
}
.nav-pf-vertical .list-group-item .list-group-item-value {
  -ms-flex: 1;
  flex: 1;
  max-width: none;
  padding-right: 15px;
}
.nav-pf-vertical .list-group-item .list-group-item-value {
  display: block;
  line-height: 25px;
  /* max-width: 120px; */
  /* overflow: hidden; */
  text-overflow: ellipsis;
}
* {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}

/* breedte van secondary & teriary navigation aanpassen */
.nav-pf-secondary-nav,
.nav-pf-tertiary-nav {
  width: 300px;
}
.collapsed .nav-pf-secondary-nav .list-group-item > a,
.nav-pf-secondary-nav .list-group-item > a,
.collapsed .nav-pf-tertiary-nav .list-group-item > a,
.nav-pf-tertiary-nav .list-group-item > a {
  width: calc(300px - 30px);
}

.detailstable {
  margin-left: 50px;
  max-width: 80%;
}

.modaltablediv {
  margin-bottom: 10px;
  padding-left: 20px;
}

/* uurrooster timeline colors */
.vis-item.vis-range.ingevuld {
  background-color: green;
  color: white;
  border-radius: 0;
  border-width: 2px;
  font-weight: bold;
}
.vis-item.vis-range.nietingevuld {
  background-color: orange;
  color: black;
  border-radius: 0;
  border-width: 2px;
}
.vis-item.vis-range.vis-selected {
  border-color: blue;
  border-width: 4px;
}

/* Uurrooster legende */
.my-legend {
  /*float: right;*/
  border: 1px solid #bfbfbf;
  padding: 5px;
  position: absolute;
  top: 66px;
  right: 20px;
}

.my-legend .legend-scale ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}
.my-legend .legend-scale ul li {
  border-radius: 0;
  border-width: 2px;
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 18px;
  margin-bottom: 2px;
}
.my-legend ul.legend-labels {
  padding-left: 10px;
}
.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
}

/* uitgeschakelde dtpickers van  uurrooster in andere vestiging rode border geven */
input.dtpicker[type="text"]:disabled {
  border: 2px solid red;
}

#fietsafstandalertdiv,
#aftrekwwinfodiv {
  display: inline-block;
  margin-bottom: 0px;
  padding-left: 14px;
}

.toolbar-inline {
  display: inline-block;
  margin-right: 30px;
}

#selectedRowCount {
  margin-left: 50px;
  margin-right: 50px;
  font-weight: bold;
}

#maanddropdown,
#vestigingdropdown,
#boekjaardropdown,
#teamdropdown,
#schooljaardropdown,
#saldostoggle,
#werkurentoggle,
#weekendstoggle,
#timelinedatepicker {
  display: inline-block;
  vertical-align: middle;
}
#datumkiezer {
  display: inline-block;
  position: relative;
  width: 14%;
}

#menumaand {
  min-width: 158px;
}
.gap {
  width: 40px;
  background: none;
  display: inline-block;
}

.kerstpasentabel {
  border: 1px solid #1c6ea4;
  background-color: #eeeeee;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

.kerstpasentabel td,
.kerstpasentabel th {
  padding: 3px 2px;
  border: 2px solid #d0e4f5;
}

.kerstpasentabel thead {
  background: #1c6ea4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1c6ea4 100%);
  background: -webkit-linear-gradient(
    top,
    #5592bb 0%,
    #327cad 66%,
    #1c6ea4 100%
  );
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1c6ea4 100%);
}
.kerstpasentabel thead th {
  font-weight: normal;
  color: #ffffff;
  text-align: center;
  border-left: 2px solid #d0e4f5;
}
.kerstpasentabel thead th:first-child {
  border-left: none;
}

.vis-item-content {
  text-align: center;
}
.pdflijst-opsomming {
  padding-left: 30px;
}

#legend-functies {
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  column-count: 4;
  column-gap: 20px;
}

.form-control.dtpicker {
  display: inline-block;
  width: 90%;
}

.popover {
  max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

/* Bootstrap-Toggle stylen */
.toggle {
  border-radius: 3px;
  width: 210%;
}
.toggle-group label {
  line-height: 2;
}
.toggle-handle.btn.btn-default.btn-sm {
  width: 22px;
}

h3.inline {
  display: inline;
}
.uurrooster-label {
  padding-right: 0px;
}
.info-verdeling {
  padding: 10px;
}

.message-dialog-pf .modal-body {
  display: block !important;
}
.mededeling-header {
  background-color: #0088ce;
  color: white;
}
.mededeling {
  padding: 12px;
  margin-bottom: 4px;
  border: 1px dotted black;
  border-radius: 3px;
  display: flex;
}
.mededeling p {
  margin: 0;
}
.mededelingtitel {
  font-weight: bold;
  font-size: 14px;
}
.mededelingicon {
  font-size: 20px !important;
}

#preferences-modal legend {
  color: white;
}
#preferences-modal .help-block {
  color: #eaeaea;
}

.timeline-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px;
  background-color: #f3f4f6;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.timeline-toolbar button {
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 2px 12px;
  border-radius: 5px;
  cursor: pointer;
}

.timeline-toolbar .spacer {
  flex-grow: 1;
}

h3.subcategory {
  font-size: 14px;
  text-decoration: underline;
  text-align: right;
}

/* Maak de foutmelding rood en vetgedrukt */
.parsley-errors-list {
  color: red; /* Tekstkleur rood */
}

/* Optioneel: zorg dat de foutmelding niet te dicht op het inputveld staat */
.parsley-errors-list li {
  margin-top: 5px;
}

/* Optioneel: Maak de rand van het inputveld ook rood bij een fout */
input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  border-color: red !important;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important;
}