/* General */
:root {
  --primary: #bb2f6c;
  --hover: #da4284;
  --grey: #d1d1d1;
  --overlay: #4444448a;
  --success-hover: #2ECC71;
  --success: #28B463;
  --blue: #aae0fa;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  background: #f1f1f1;
  font-size: 17px;
  font-family: "Nunito";
  min-height: 100%;
}

.text-primary {
  color: var(--primary) !important;
}

.text-small {
  font-size: 0.9rem !important;
}

.btn {
  border: none !important;
}

.chev-primary-bg {
  background: var(--primary) !important;
}

.success-bg {
  background: var(--success) !important;
}

.success-bg:hover {
  background: var(--success-hover) !important;
}

.chev-hover-bg:hover {
  background: var(--hover) !important;
}

.text-hover {
  color: var(--hover) !important;
}

.hidden {
  display: none !important;
}

.btn .material-symbols-outlined {
  font-size: 1rem;
}

*:focus {
  outline: none !important;
  box-shadow: #aae0fa80 0px 0px 0 2px !important;
}

a {
  text-decoration: none;
  transition: all 300ms linear;
  cursor: pointer;
}

.tooltip {
  z-index: 5;
}

/* Make svg inside .action-rotate-left, .action-rotate-right buttons visible by setting width */
.action-rotate-left svg, .action-rotate-right svg {
  width: 25px;
}

/* Alerts */
#alerts {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 19;
}

/* Images */
.navbar-brand img,
.logo-navbar {
  width: auto;
  height: 80px;
}

.logo-login {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
}

.foto {
  width: 100%;
  max-width: 256px;
  height: auto;
}

/* Cropper */
.cropper-bg {
  background-color: black !important;
  background-image: none !important;
}

.crop-img, .crop-img2, .crop-img3 {
  display: block;
  max-width: 100%;
}

.crop-overlay, .crop-overlay2, .crop-overlay3 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  display: none;
  z-index: 75;
}

.crop-overlay .crop-controls, .crop-overlay2 .crop-controls, .crop-overlay3 .crop-controls {
  position: absolute;
  bottom: 0;
  right: 0;
}

body.show-crop .crop-overlay {
  display: block;
}

body.show-crop2 .crop-overlay2 {
  display: block;
}

body.show-crop3 .crop-overlay3 {
  display: block;
}

body.show-crop,
body.loading {
  overflow: hidden;
}

/* Fix wrapping to new line */
.dropdown-item {
  white-space: normal !important;
}

/* Link styling */
a,
a:hover,
.btn-link {
  color: #212529;
}

.text-white a,
.text-white a:hover,
.text-white .btn-link {
  color: white;
}

a:hover {
  text-decoration: none;
}

.breadcrumbs a,
.breadcrumbs a:hover {
  color: white !important;
}

/* Make buttons not full width */
form input[type="submit"] {
  width: auto;
}

/* Loading indicator */
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2125298a;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2999;
}

body.loading .loading-overlay {
  display: flex;
}

/* DataTables Styling */
table {
  border-collapse: collapse;
}
tr {
  border: solid #2125293b;
  border-width: 1px 0;
}
tr:first-child {
  border-top: none;
}
tr:last-child {
  border-bottom: none;
}

@media screen and (max-width: 999px) {
  .min-table {
    overflow-x: auto;
  }
}

.min-table-item {
  border-bottom: none !important;
}

.min-table-item * {
  border: none !important;
}

.min-table-item td,
.min-table-item th {
  padding: 0.5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--hover) !important;
  color: white !important;
  border-radius: 0.375rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #212529 !important;
  background: none !important;
  border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  text-decoration: underline !important;
}


.nav-link {
  color: var(--primary);
}

.nav-link:hover {
  color: var(--hover);
}

/* Select override */
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  line-height: 2.5;
}

input {
  line-height: 2.5;
}

/* Link overrides */
:root {
  --bs-dropdown-link-hover-bg: #eeeeee;
}

a:not(.btn):hover {
  opacity: 0.7;
  color: var(--primary) !important;
}

.text-white a:not(.btn):hover {
  color: white !important;
}

/* Fancy file input */
.fancy-file-input {
  width: 100%;
  height: 200px;
  background-color:#fafafa;
  color: black;
  border: 1px dashed var(--hover);
  display:flex;
  border-radius:var(--bs-card-border-radius);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  flex-direction: column;
  transition: background 500ms ease-in-out;
}

.fancy-file-input .fancy-file-image img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fancy-file-input .fancy-file-button {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
}

.fancy-file-input .fancy-file-name {
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  position: relative;
  display: flex;
}

.fancy-file-input .fancy-file-image, .fancy-file-input .fancy-file-name {
  display: none;
}

.fancy-file-input input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  left: 50%;
  top: 50%;
}

/* If image */
.fancy-file-input.has-image {
  height: 360px;
  color: white;
}

.fancy-file-input.has-image .fancy-file-image {
  display: block;
}

.fancy-file-input.has-image .fancy-file-button {
  margin-top: auto;
}

.fancy-file-input.has-image .fancy-file-button {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: var(--bs-card-border-radius);
}

/* If file */
.fancy-file-input.has-file .fancy-file-name {
  display: flex;
  background-color: var(--blue);
  border-radius: var(--bs-card-border-radius);
  margin-top: auto;
  margin-bottom: auto;
}

/* Dropping */
.fancy-file-input.is-dropping {
  background-color: var(--hover);
  color: white;
}

/* Override tabs on hover */
.nav.nav-tabs {
  --bs-nav-tabs-link-hover-border-color: transparent;
  background-color: #fafafa;
  color: black;
  border: none !important;
}

.nav-tabs .nav-link {
  color: black;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link.active {
  background: white;
  color: var(--hover);
}

.nav-tabs .nav-link {
  border-color: transparent !important;
}

/* Override borders */
:root {
  --bs-border-color-translucent: rgba(170, 223, 250, 0.2);
}

hr {
  color: rgba(170, 223, 250, 0.9);
}

body {
  background-color: rgba(170, 223, 250, 0.6);
}

.form-control, .form-select {
  border-color: var(--primary);
}

.form-display {
  opacity: 0.4;
  border: 1px solid var(--grey);
  border-radius: 0.375rem;
  padding: 0.5rem;
  line-height: 1.2;
}

.btn {
  margin-right: 16px;
}

.btn:disabled {
  background-color: #d1d1d1 !important;
}

/* Preserve lines from textarea */
.preserve-lines {
  white-space: pre-line;
}

/* Only show last delete of prijzen */
[data-tarief1] a {
  display: none;
}

[data-tarief1]:last-of-type a {
  display: inline-block;
}

[data-tarief2] a {
  display: none;
}

[data-tarief2]:last-of-type a {
  display: inline-block;
}

.checklist {
  color: red;
}

.checklist .check-done {
  color: #28B463;
}

[data-check-tab] {
  cursor: pointer;
}

input.active, select.active,
input.active:focus, select.active:focus {
  background-color: var(--primary);
}

/* Readonly */
.is-readonly, input[readonly] {
  pointer-events: none !important;
  opacity: 0.4 !important;
  border: 1px solid var(--grey);
}

.summary {
  padding: 1rem;
  background-color: rgba(170, 223, 250, 0.6);
  border-radius: 1rem;
}

/* Full calendar */
body {
  --fc-small-font-size: .85rem;
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: hsla(0, 0%, 82%, .3);
  --fc-neutral-text-color: grey;
  --fc-border-color: var(--blue);
  --fc-button-text-color: #fff;
  --fc-button-bg-color: var(--primary);
  --fc-button-border-color: var(--primary);
  --fc-button-hover-bg-color: var(--hover);
  --fc-button-hover-border-color: var(--hover);
  --fc-button-active-bg-color: var(--hover);
  --fc-button-active-border-color: var(--hover);
  --fc-event-bg-color: var(--primary);
  --fc-event-border-color: var(--primary);
  --fc-event-text-color: #fff;
  --fc-event-selected-overlay-color: rgba(0, 0, 0, .25);
  --fc-more-link-bg-color: #d0d0d0;
  --fc-more-link-text-color: inherit;
  --fc-event-resizer-thickness: 8px;
  --fc-event-resizer-dot-total-width: 8px;
  --fc-event-resizer-dot-border-width: 1px;
  --fc-non-business-color: hsla(0, 0%, 84%, .3);
  --fc-bg-event-color: #8fdf82;
  --fc-bg-event-opacity: 0.3;
  --fc-highlight-color: rgba(188, 232, 241, .3);
  --fc-today-bg-color: rgba(170, 223, 250, 0.6);
  --fc-now-indicator-color: red;
}

.transport-event {
  background-color: #d98c66;
  border-color: #d98c66;
  color: white;
}

.crematie-event {
  background-color: #bb2f6c;
  border-color: #bb2f6c;
  color: white;
}

.opbaring-event {
  background-color: #668CD9;
  border-color: #668CD9;
  color: white;
}

.opbaring-event.opbaring-2 {
  background-color: #66d9d3;
  border-color: #66d9d3;
  color: white;
}

.asophaling-event {
  background-color: red;
  border-color: red;
  color: white;
}

.allemaal-event {
  background-color: darkgrey;
  border-color: darkgrey;
  color: white;
}

.aanmelding-event {
  background-color: rgb(12, 163, 63);
  border-color: rgb(12, 163, 63);
  color: white;
}

.open-event {
  background-color: #8CBF40;
  border-color: #8CBF40;
  color: white;
}

.legende {
  padding: 4px 8px;
}

.legende:hover {
  cursor: pointer;
}

.legende-selected {
  border: black solid 3px;
}

.fc-timegrid-slot {
  height: 50px !important;
}

/* Telephone number overhaul */
.form-floating .iti {
  width: 100%;
}

.form-floating .iti input.form-control {
  padding-right: 0.75rem;
  padding-left: 52px;
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
  line-height: 1.25;
}

.form-floating .iti + label {
  opacity: .65;
  transform: scale(.85) translateY(-0.5rem) translateX(calc(52px - 0.15rem));
}