/* Global background image */
.container-pf-nav-pf-vertical {
  position: relative;
}

.container-pf-nav-pf-vertical::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-image: url("/assets/img/background.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

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;
  width: 225px; /* Verbreed van standaard 200px naar 225px */
}

/* Container aanpassen voor bredere navigatie */
.layout-pf.layout-pf-fixed .container-pf-nav-pf-vertical {
  margin-left: 225px; /* Aangepast van standaard 200px naar 225px */
}

/* Menu items breedte aanpassen voor breder menu */
.nav-pf-vertical .list-group-item > a {
  width: 225px; /* Aangepast van 200px naar 225px */
}

/* Secondary navigation positie naar rechts schuiven */
.nav-pf-secondary-nav {
  left: 225px; /* Aangepast van 200px naar 225px */
}

/* Tertiary navigation posities aanpassen voor alle states */
.nav-pf-tertiary-nav {
  left: 525px; /* Berekening: 225 ( hoofdmenu ) + 300 ( secondary nav ) = 525px */
}

/* Hover tertiary states */
.hover-tertiary-nav-pf .nav-pf-tertiary-nav {
  left: 525px; /* Aangepast van calc(200px * 2) naar 225+300 */
}

.hover-tertiary-nav-pf.nav-pf-vertical-with-badges .nav-pf-tertiary-nav {
  left: 550px; /* Aangepast van calc(250px * 2) naar 275+275 */
}

/* Collapsed tertiary states */
.collapsed .nav-pf-tertiary-nav {
  left: 375px; /* Aangepast van calc(75px + 200px) naar 75+300 */
}

.collapsed.nav-pf-vertical-with-badges .nav-pf-tertiary-nav {
  left: 400px; /* Aangepast van calc(75px + 250px) naar 75+325 */
}

/* Pijltjes naar 2de niveau mee naar rechts schuiven voor breder menu */
.secondary-nav-item-pf > a:after {
  right: 20px; /* Originele waarde - pijl blijft relatief aan rechterrand */
}

.secondary-nav-item-pf.active > a:after,
.secondary-nav-item-pf:hover > a:after {
  right: 21px; /* Originele waarde - pijl blijft relatief aan rechterrand */
}

.nav-pf-vertical.collapsed
  .list-group-item.secondary-nav-item-pf.active
  > a:after,
.nav-pf-vertical.collapsed .list-group-item.secondary-nav-item-pf > a:after {
  right: 10px; /* Originele waarde - pijl blijft relatief aan rechterrand */
}

.nav-pf-vertical.collapsed
  .list-group-item.secondary-nav-item-pf.active
  > a:after,
.nav-pf-vertical.collapsed
  .list-group-item.secondary-nav-item-pf:hover
  > a:after {
  right: 11px; /* Originele waarde - pijl blijft relatief aan rechterrand */
}

.secondary-nav-item-pf:hover > a {
  width: calc(225px + 1px); /* Aangepast van 200px naar 225px */
}

/* Badges versie ook aanpassen */
.nav-pf-vertical-with-badges .secondary-nav-item-pf:hover > a {
  width: calc(275px + 1px); /* Aangepast naar 275px voor badges versie */
}

/* Badges versie - secondary navigation positie en breedte */
.nav-pf-vertical-with-badges .nav-pf-secondary-nav {
  left: 275px; /* Aangepast naar 275px voor badges versie */
  width: 300px; /* Aangepast naar 300px voor consistentie */
}

.nav-pf-vertical-with-badges .nav-pf-secondary-nav .list-group-item {
  width: 300px; /* Volledige breedte voor badges versie */
}

.nav-pf-vertical-with-badges .nav-pf-secondary-nav .list-group-item > a {
  width: calc(300px - 20px); /* Links iets smaller door margin */
}

/* Collapse states aanpassen */
.nav-pf-vertical.collapsed .list-group-item > a {
  width: 75px; /* blijft gelijk */
}

/* Collapsed secondary navigation states */
.nav-pf-vertical.collapsed .list-group-item.secondary-nav-item-pf.active > a,
.nav-pf-vertical.collapsed .list-group-item.secondary-nav-item-pf:hover > a {
  width: 77px; /* blijft gelijk */
}

.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 & tertiary navigation aanpassen */
.nav-pf-secondary-nav,
.nav-pf-tertiary-nav {
  width: 300px; /* Aangepast voor proportie met hoofdmenu van 225px (-25px) */
}

/* Secondary navigation items volledige breedte */
.nav-pf-secondary-nav .list-group-item {
  width: 300px; /* Volledige breedte van secondary nav */
}

.nav-pf-secondary-nav .list-group-item > a {
  width: calc(300px - 20px); /* Links iets smaller door margin */
}

.nav-pf-secondary-nav .list-group-item.tertiary-nav-item-pf.active > a,
.nav-pf-secondary-nav .list-group-item.tertiary-nav-item-pf:hover > a {
  width: calc(300px - 19px); /* Hover states iets breder */
}

.collapsed .nav-pf-secondary-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,
#vorigeadressenweergeventoggle,
#verwijderdevoertuigentoggle,
#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;
}
.feestdagen ul,
.bijkomendesluitingsdagen ul {
  margin-left: 50px; /* Pas de waarde aan (bijv. 30px, 1em) naar wens */
}

/* =============================================================================
   APPARAAT KAART WEERGAVE (Mijn Gegevens > Apparaten)
   ============================================================================ */

/* Apparaat Card Styling - Alle kaarten hebben dezelfde afmetingen */
.apparaat-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 500px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.apparaat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Ensure consistent column heights for card grid */
#apparaten-cards-container .col-sm-12,
#apparaten-cards-container .col-md-4 {
  display: flex;
  margin-bottom: 20px;
}

/* Apparaten Toolbar */
#apparaten-toolbar {
  margin-bottom: 10px;
}

/* View Toggle Buttons */
#view-toggle-group {
  margin: 0;
}

#view-toggle-group .btn {
  padding: 8px 12px;
  min-width: 40px;
}

#view-toggle-group .btn.active {
  background-color: #0088ce;
  color: white;
  border-color: #0088ce;
}

/* Reduce space above cards */
#apparaten-cards {
  margin-top: 5px;
}

#apparaten-cards-container {
  margin-top: 0;
}

.card-image {
  height: 150px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8px;
  background-color: #f8f9fa;
}

.card-image i {
  font-size: 48px;
  color: #ddd;
}

.card-content {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.card-header {
  padding: 15px;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* Ensure status labels in cards have proper styling */
.card-header .label {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  white-space: nowrap;
}

/* Override PatternFly label colors with PatternFly colors for consistency */
.card-header .label-warning {
  background-color: #ec7a08 !important;
  color: #fff !important;
}

.card-header .label-success {
  background-color: #3f9c35 !important;
  color: #fff !important;
}

.card-header .label-danger {
  background-color: #cc0000 !important;
  color: #fff !important;
}

.card-header .label-info {
  background-color: #00659c !important;
  color: #fff !important;
}

.card-header .label-default {
  background-color: #9c9c9c !important;
  color: #fff !important;
}

.card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.card-body {
  padding: 15px;
  flex: 1;
  overflow-y: auto;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  color: #555;
  font-size: 13px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item i {
  margin-right: 8px;
  margin-top: 2px;
  color: #666;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.info-item span {
  word-break: break-word;
}

.card-actions {
  margin-top: auto;
  padding: 15px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

.card-actions .btn-group {
  width: 100%;
  display: flex;
}

.card-actions .btn-group .btn {
  width: 100%;
}

@media (max-width: 768px) {
  .apparaat-card {
    height: 480px;
    margin-bottom: 15px;
  }

  .card-image {
    height: 120px;
  }

  .card-title {
    font-size: 14px;
  }

  .info-item {
    font-size: 12px;
  }
}

/* WYSIWYG Editor Toolbar Active States */
.wysiwyg-btn.active {
  background-color: #0088ce;
  color: white;
  border-color: #0088ce;
}

.wysiwyg-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.form-check.form-check-inline {
  display: flex;
  align-items: flex-start; /* Lijn radiobutton en label bovenaan uit */
  margin-bottom: 10px; /* Ruimte tussen de twee opties */
}
.form-check-input {
  margin-top: 4px; /* Lichte correctie voor perfecte verticale uitlijning met de eerste regel */
  margin-right: 8px; /* Ruimte tussen het bolletje en de tekst */
}
/* Gebruik !important om de standaard offset van abc-radio te overschrijven */
.abc-radio label,
.form-check-label {
  padding-left: 10px !important; /* Verhoog dit getal als je meer afstand wilt */
}