/* CSS Document
Author Name: Eli Van Stichelen
Author Website: https://elivanstichelen.com
Author LinkedIn: https://www.linkedin.com/in/eli-van-stichelen-953814187/
Creation Date: 4th November, 2023
Description: A default stylesheet for Heemzaden.be Distribution of ancient seeds and vegetable races.

------------ TABLE OF CONTENT -------------
- HEADER
- GENERAL
- FOOTER
*/
/* ================================= */
/* ------------ GENERAL ------------ */
/* ================================= */

/*default style*/
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700");
html,
body {
  height: 100%;
  width: 100%;
  font-family: "Open Sans", sans-serif;
  scroll-behavior: smooth;
  color: white;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.skip-link {
  position: absolute;
  left: -10000px;
  /* Move off-screen */
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
  /* Hide from view */
}
.skip-link:focus {
  background-color: #0072c6;
  /* Change the link background color when it receives focus */
  color: #fff;
  /* Change the text color when it receives focus */
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  overflow: auto;
  z-index: 1;
  /* Bring to the foreground */
}
.container {
  padding: 1.5rem;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.btn-success {
  background-color: #218838;
}
.anchorunderline {
  text-decoration: underline;
  color: #368eec;
}
.iconlink i {
  color: #fff !important;
}
.iconlink:hover i {
  color: #b99867 !important;
}
.infolines {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.infolines p {
  margin: 0;
}
.infolines i {
  min-width: 2.3rem !important;
}
.infolines div {
  display: flex;
  flex-direction: row;
  gap: 2.7rem;
  align-items: center;
}
.navbar-toggler {
  width: 20px;
  height: 20px;
  position: relative;
  margin-right: 1.5rem;
  border: none;
}
.navbar-toggler:focus-visible {
  background-color: #ff7300;
}
.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(0, 0, 0, 0) !important;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
  border: 0;
  position: relative;
}
.navbar-toggler span {
  margin: 0;
  padding: 0;
}
.toggler-icon {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #3f4156;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.middle-bar {
  margin-top: 0;
}
/* State when the navbar is collapsed */
.navbar-toggler.collapsed .top-bar {
  position: absolute;
  top: 0;
  transform: rotate(0deg);
}
.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  position: absolute;
  top: 10px;
  filter: alpha(opacity=100);
}
.navbar-toggler.collapsed .bottom-bar {
  position: absolute;
  top: 20px;
  transform: rotate(0deg);
}
/* when navigation is clicked */
.navbar-toggler .top-bar {
  top: inherit;
  transform: rotate(135deg);
}
.navbar-toggler .middle-bar {
  opacity: 0;
  top: inherit;
  filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar {
  top: inherit;
  transform: rotate(-135deg);
}
/* Color of 3 lines */
.navbar-toggler.collapsed .toggler-icon {
  background: #3f4156;
}
p {
  font-size: 1.1rem;
  line-height: 1.7rem;
  font-weight: 600;
}
.card-body {
  color: black;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.gotop {
  display: none;
  position: fixed;
  width: 3.125rem;
  height: 3.125rem;
  background-color: #b99867;
  bottom: 2.5rem;
  right: 3.125rem;
  border-radius: 3.125rem;
  color: #000;
  text-decoration: none;
  text-align: center;
  line-height: 3.125rem;
  font-size: 1.375rem;
  opacity: 50%;
}
.gotop:hover {
  color: #fff;
}
.card {
  min-height: 21.875rem;
}
.backgroundimage {
  background-image: url("../img/main/handen3blur.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.backgroundimage2 {
  background-image: url("../img/main/bomendark.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.backgrounddark {
  background-image: url("../img/main/handen3blur.jpg"),
    linear-gradient(rgba(185, 152, 103, 0.2), rgba(185, 152, 103, 0.2));
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: lighten;
}
.credit {
  font-size: 0.75rem;
  text-decoration: none;
}
.blue {
  color: #219cde;
  text-decoration: underline;
}
.bluebutton {
  background-color: #219cde;
}

.orangebutton {
  background-color: #ca8400;
}

.orange {
  color: #ca8400;
  text-decoration: underline;
}
.darkorange {
  color: #ffa500ff;
  text-decoration: underline;
}
.darkorangebutton {
  background-color: #ffa500ff;
}
.green {
  color: #069c49;
  text-decoration: underline;
}
.greenbutton {
  background-color: #069c49;
}
.red {
  color: #ff0000ff;
  text-decoration: underline;
}
.color-red {
  color: rgb(180, 0, 0);
}
.color-red:hover {
  color: rgb(122, 0, 0);
}
.redbutton {
  background-color: #ff0000ff;
}
.stylebutton {
  background-color: #b99867;
  border-radius: 0.2rem;
  border: none !important;
  color: #fff;
}

.orangebutton,
.bluebutton,
.darkorange,
.greenbutton,
.redbutton {
  padding: 0.7rem;
  border-radius: 0.2rem;
  border: none;
  color: #fff;
}

.orangebutton:hover,
.bluebutton:hover,
.darkorange:hover,
.greenbutton:hover,
.redbutton:hover,
.stylebutton:hover {
  filter: brightness(70%);
}
.white {
  color: #fff;
  text-decoration: underline;
}
.card-maintitle span {
  font-weight: bold;
  color: #000;
  font-size: 1.4rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-maintitle .id {
  color: #467200;
}
.card-subtitle {
  font-size: 1rem !important;
  font-weight: 400;
}
b {
  font-weight: 600;
}
.blok u {
  color: #b99867;
  text-decoration: underline;
}
.blok h4 {
  font-size: 1rem;
}
.infoblok ul li p {
  font-size: 0.8rem;
  color: #000;
}
.infoblok ul li u {
  color: #866738;
  text-decoration: underline;
  font-weight: bold;
}
.infoblok p {
  margin-bottom: 0;
}
.flexrowadmintools {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1.5rem;
}
.meer {
  background-color: #b99867;
}
.meer:hover {
  background-color: #816a48ff;
}
.minder {
  background-color: #4f2a14;
}
.minder:hover {
  background-color: #2c170b;
}
.actionbutton,
.actionbutton:hover {
  color: #fff !important;
  border: none;
}
ul {
  color: #575757ff;
}
.infoblok h4 {
  font-size: 1.3rem;
}
.infoblok h3 {
  font-size: 1.5rem;
}
.flexcards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.7rem;
}
.cardflex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  width: 15rem;
}
.importantinfoblok {
  border: 0.063rem solid black;
  border-radius: 0.5rem;
  background-color: #ffffc3;
  padding-top: 0.625rem;
  padding-bottom: 0.438rem;
  padding-right: 0.938rem;
}
.importantinfoblok p {
  line-height: 1.3rem;
}
.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quote {
  text-align: right;
  color: #b99867;
  font-size: 0.95rem;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-style: italic;
  line-height: 1rem;
  font-weight: 900;
}
.quoteonquote {
  font-style: italic;
  color: #656565;
}
.cardnames h4,
.cardnames p {
  line-height: 1.4rem;
}
.cardnames p {
  font-size: 1rem;
  line-height: 1.1rem;
}
.cardnames {
  max-width: 100%;
}
.gratis {
  font-weight: 700;
}
.btn-outline-success {
  background-color: #ccdbcc;
}
.navbar-brand {
  margin: 0;
}
.navbarphrase {
  color: #b99867;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 500;
}
.navbarphrasesmall,
.navbarphrasesmallest {
  color: #b99867;
  margin: -1.6rem 0 0 3.6rem;
  font-size: 0.7rem;
  overflow: visible;
  max-width: 0;
}
.footertextleft {
  min-width: 13.8rem;
  text-align: right;
}
.footertextright {
  min-width: 13.8rem;
  text-align: left;
}
.bottomtext {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 3rem;
  gap: 0.2rem;
}
.bottomtext p {
  margin: 0;
}
.bottomtext,
.bottomtext:hover,
.bottomtext:visited,
.bottomtext:link,
.bottomtext:active {
  color: #fff;
  text-decoration: none;
}
.bottomtext span,
.bottomtext p,
.bottomtext div,
.bottomtext p span {
  font-size: 1rem;
  margin: 0;
  line-height: 1.2rem;
  font-weight: 400;
}
.dropdown {
  margin: 0 auto;
}
.adminnavlink {
  border-radius: 0.3rem;
  padding: 0.2rem 0.5rem;
  margin: 0 auto 0.5rem auto;
  width: 10.58rem;
}
.active {
  opacity: 1 !important;
}
.active::before {
  height: 3px !important;
  position: absolute !important;
  background-color: #866738 !important;
  color: #3d2d16 !important;
  width: 100% !important;
}
.nav-link {
  font-weight: bold;
  font-size: 0.95rem;
  text-transform: uppercase;
  text-decoration: none;
  display: flex !important;
  justify-content: space-evenly !important;
  position: relative;
  text-align: center;
}
.nav-link .btn-success:hover {
  background-color: #ccdbcc;
  color: #28a745;
  border-color: #28a745;
}
.nav-link:hover {
  color: rgba(0, 0, 0, 0.5) !important;
}
.active:hover {
  color: #3d2d16 !important;
}
.nav-link::before {
  transition: 300ms;
  height: 3px;
  content: "";
  position: absolute;
  background-color: #866738;
}
.nav-link-ltr::before {
  width: 0;
  bottom: 2px;
}
.nav-link-ltr:hover::before {
  width: 100%;
}
.background-nav {
  background-color: #e7e7e7ff !important;
}
.beschrijving {
  font-size: 0.9rem;
  color: #000;
  padding: 0 0.5rem;
}
.card {
  height: 25rem !important;
  max-width: 238px !important;
  overflow: auto !important;
}
.card img {
  min-width: 100%;
  min-height: 170px;
}
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 19.5rem !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 0.7rem 0;
}
.buttonback {
  background-color: #b99867;
  border: none;
  color: #fff !important;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
}
.buttonback:hover {
  background-color: #675439;
}
.confirmationblok {
  max-width: 55rem;
  margin: auto;
}
.confirmationblok p {
  font-size: 1rem;
  font-weight: 400;
}
.title-mobile-only {
  display: none;
  visibility: hidden;
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  text-transform: uppercase;
  justify-content: center;
  color: #bea57e;
}
@media (max-width: 767px) {
  .nav-link-ltr::before {
    bottom: 5px;
  }
  .nav-link {
    font-size: 1rem !important;
  }
  .title-mobile-only {
    display: flex;
    visibility: visible !important;
  }
  .navbar-nav {
    padding-top: 0.5rem !important;
    gap: 0.3rem !important;
  }
  .nav-link .btn {
    min-width: 9.4rem;
  }
  .cardflex {
    min-width: 317px;
  }
  .card {
    height: initial;
    max-height: 100% !important;
    max-width: 100% !important;
  }
  .card-body {
    height: 100%;
    max-height: 100% !important;
  }
  #checkboxes label {
    min-width: 100% !important;
  }
}
@media (max-width: 425px) {
  .cardflex {
    width: unset;
    min-width: 100%;
  }
}
.flexfooter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
footer {
  background-color: #3f3f3f;
  color: #d5d5d5;
}
.footercontent {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.socials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}
.cartoon img {
  max-width: 7.5rem;
  height: auto;
}
.navbar-light {
  padding-top: 0 !important;
}
.nav-link {
  padding-top: 0 !important;
}
.klein {
  display: none;
}
.btn-sml {
  padding: 0 0.313rem;
  font-size: 0.75rem;
  border-radius: 0.188rem;
}
.col-8 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
@media (max-width: 882px) {
  .nav-link {
    font-size: 0.9rem;
  }
}
@media (max-width: 767px) {
  .klein {
    display: unset;
  }
  .navbarphrase {
    display: none;
  }
  .groot {
    display: none;
  }
}
/*--- bestelknop lijst dropwdown checks --*/
.multiselect {
  color: #495057 !important;
  width: 100%;
  font-size: 0.8rem;
}
.selectBox {
  position: relative;
}
.selectBox p {
  color: #495057 !important;
  font-size: 0.9rem;
  line-height: 1.2rem;
  opacity: 0.9;
}
.selectBox div {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  width: 100%;
  border-radius: 0.25rem;
  font-size: 1rem;
  background-color: #fff;
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
}
.selectBox i {
  position: absolute;
  right: 1rem;
  /* Adjust this value for the desired spacing from the right */
}
.overSelect {
  background-color: transparent !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#checkboxes {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: auto;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  max-height: 15.4rem;
}
.overlay-container {
  position: relative;
  /* Ensure relative positioning */
  width: 100%;
  /* Set the width to 100% of its parent's width */
  max-width: 100%;
  /* Ensure it doesn't exceed the parent's width */
}
.overlay {
  position: absolute;
  top: 100%;
  /* Position it below the selectBox */
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* You can adjust the background color and opacity as needed */
  z-index: 999;
  /* Make sure it's above other elements */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  box-shadow: 0 1rem 1.5rem 0 rgba(0, 0, 0, 0.2),
    0 1.5rem 2.5rem 0 rgba(0, 0, 0, 0.19);
  user-select: none;
}
#checkboxes label {
  background-color: #ffffff;
  margin: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid #b99867;
  min-width: 20rem;
  flex: 1;
}
@media (max-width: 23.063rem) {
  #checkboxes label {
    min-width: 11rem;
  }
}
#checkboxes label:hover {
  background-color: #dec196;
}
#checkboxes label input:hover {
  cursor: pointer;
}
label input div {
  width: 100%;
}
.disabled-parent {
  background-color: #afafaf !important;
  border: 0.063rem solid #000 !important;
}
.cursorpointer,
.cursorpointer input {
  cursor: pointer !important;
}
.unavailable {
  cursor: not-allowed;
}
.unavailable p {
  opacity: 0.7 !important;
}
.flexrow {
  display: flex;
  flex-direction: row;
}
.flexbetween {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
  align-items: end;
  gap: 0.5rem;
}
.flexbetween p {
  line-height: 0.5rem;
  font-size: 0.9rem;
  text-transform: initial !important;
}
.flexrowadminheader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1rem;
}
.maintitleflexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
}
.fullheaderrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 1rem;
}
.navbar-toggler {
  border: none;
  font-size: 1.5rem;
  outline: none !important;
}
.navbar-nav {
  align-items: center !important;
  padding: 0 0.5rem;
  gap: 0.5rem;
}
.navbar-brand .logofull {
  max-width: 21.5rem;
  height: auto;
}
.navbar-brand .logosmall {
  max-width: 14.688rem;
  height: auto;
  display: none;
  visibility: hidden;
}
.navbar-brand .logoxsmall {
  max-width: 3.5rem;
  height: auto;
  display: none;
  visibility: hidden;
}
.navbar {
  margin-bottom: 0.5rem !important;
}
.adminbuttonrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 0.5rem;
}
.adminrow {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: 15rem;
  align-items: center;
}
.adminrow button {
  width: 15rem;
}
.adminrowquantity {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.5rem;
}
.formquantityunique .adminrowquantity button[type="submit"] {
  width: 100% !important;
}
.formquantity input {
  max-width: 7rem;
}
.formquantity .stylebutton {
  min-width: 4rem;
}
.admincolumn {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.fa-pen-to-square {
  color: #fff;
  width: 100%;
}
.fa-times {
  color: #fff;
}
/* Add styles to position the edit button */
.image-container {
  position: relative;
  /* Ensure the container is relatively positioned */
  min-height: 170px;
  max-height: 170px;
  overflow: hidden !important;
}
.image-container img {
  width: 100%;
}
.edit-button-container {
  position: absolute;
  top: 0;
  left: 0;
  /* Add any additional styling for the edit button here */
}
/* Style the edit button as needed */
.edit-button-container .editbutton {
  width: 38px;
  height: 38px;
  background-color: #b99867;
  border: none;
  border-bottom-right-radius: 0.3rem;
  margin-top: -0.1rem;
  /* Add any other styling you want for the button */
  box-shadow: rgba(6, 24, 44, 0.4) 0 0 0 2px,
    rgba(6, 24, 44, 0.65) 0 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0 1px 0 inset;
  opacity: 0.9;
  padding: 0;
}
.edit-button-container .edithidebutton {
  width: 25px;
  height: 25px;
  background-color: #b99867;
  border: none;
  border-bottom-right-radius: 0.3rem;
  /* Add any other styling you want for the button */
  box-shadow: rgba(6, 24, 44, 0.4) 0 0 0 2px,
    rgba(6, 24, 44, 0.65) 0 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0 1px 0 inset;
  opacity: 0.8;
  padding: 0.05rem 0 0;
}
.formadd {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.formadd label {
  margin: 0.5rem 0 0 0;
}
.buttonadd input {
  height: 100% !important;
  width: 100% !important;
  padding: 0.5rem 1rem;
}
.formadd .formaddcontent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
  gap: 0.5rem;
}
.formadd .form-outline input,
.formadd .form-outline textarea,
.formadd .form-outline select,
.formquantityall .adminrowquantity button,
.formquantityall .adminrowquantity input {
  min-height: 30px;
  padding: 0.5rem;
  border: 1px #b99867 solid;
  border-radius: 0.2rem;
}
.editform input,
.editform textarea,
.editform select,
.editform button {
  padding: 0.1rem 0.3rem;
  border: 1px #b99867 solid;
  border-radius: 0.2rem;
}
.editform label {
  font-size: 0.8rem;
  font-weight: 700;
  width: 100% !important;
  padding: 0 1rem;
  line-height: 0.95rem;
}
.editform button {
  font-size: initial;
}
.editform,
.editdisplayimagebutton {
  font-size: 0.8rem !important;
}
.editdisplayimagebutton:hover {
  color: #fff;
}
input::file-selector-button:hover {
  cursor: pointer;
}
.editdisplayimagebutton {
  background-color: #467200;
  color: #fff;
  border-radius: 0.3rem;
  margin-top: 0;
  border-top: none !important;
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
  padding: 0.1rem 0.2rem !important;
}
.imagecover {
  width: 100%;
  min-height: 170px !important;
  object-fit: cover;
  /* Scale and zoom the image to fit */
  display: block;
}
.imagecoveredit {
  width: 100%;
  height: auto !important;
  object-fit: contain;
}
.extratextwrap {
  line-height: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  width: 100% !important;
  margin: 0;
  text-align: center !important;
}
.extratextwrap input {
  margin-top: 0.15rem;
}
.extratext {
  font-size: 0.65rem;
  color: #c95a00;
}
.editform label input,
.editform label textarea,
.editform label select,
.editform label button {
  width: 100% !important;
}
.formadd .form-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  gap: 0.5rem;
}
.formadd .form-outline {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.formadd textarea {
  resize: none;
  width: 100%;
}
.adminsections {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.sectiondividor {
  margin-top: 1.5rem;
  width: 100%;
  padding-top: 1.5rem;
  border-top: 4px #b99867 solid;
  border-radius: 0.7rem;
}
.fa-trash {
  color: #ff5c5c;
}
.bold {
  font-weight: 700;
}
.underline {
  text-decoration: underline;
}
.italic {
  font-style: italic;
}
.lighter {
  opacity: 0.7;
}
.uppercase {
  text-transform: uppercase;
}
.countrycode-flag {
  width: 1rem;
  padding-bottom: 3px;
}
.address-info {
  text-align: left;
  /* Align the text to the left */
}
/* ADMIN BESTELLINGEN TABLE */
.filterbestellingen input,
.filterbestellingen textarea,
.filterbestellingen select {
  min-height: 30px;
  padding: 0.5rem;
  border: none;
  border-radius: 0.2rem;
}
#searchInput {
  width: 11rem;
}
.searchfilter {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  gap: 0.2rem;
}
.filterbestellingen a:hover {
  color: #fff;
  text-decoration: none;
}
.active-filter {
  background-color: #b99867 !important;
  /* Change this to the desired background color */
  text-decoration: underline;
}
.bestellingen,
.filterbestellingen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.filterbestellingen-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: auto 0.5rem;
}
.filterbestellingen-buttons a {
  min-width: 13.2rem;
}
.bestellingen {
  max-width: 100%;
  /* Adjust this as needed */
  overflow: auto;
}
.bestellingen table {
  border-collapse: collapse;
  width: 100%;
  background-color: #fff;
}
.bestellingen table td,
.bestellingen table th {
  border: 1px solid #6c6c6c;
  padding: 8px;
}
.bestellingen table tr:nth-child(even) {
  background-color: #e1e1e1;
}
.bestellingen table tr:hover {
  background-color: rgba(185, 152, 103, 0.3);
}
.bestellingen table th,
.bestellingen table th span {
  text-align: center !important;
  background-color: #218838;
  color: #fff;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
}
.bestellingen table td {
  text-align: center;
  color: #000;
}
.bestellingen-container {
  max-width: 90rem;
  padding: 1.5rem 1rem;
}
.tableview {
  width: 100%;
  overflow-x: auto;
  margin-inline: auto;
}
.delete {
  align-items: center;
  align-self: center;
  align-content: center;
}
.delform label {
  display: none;
  visibility: hidden;
}
.delform select {
  display: none;
  visibility: hidden;
}
.delform input {
  color: red;
  border: none;
  background-color: transparent;
  font-weight: bold;
  font-size: larger;
}
.selfsubmitcheckbox:hover {
  cursor: pointer;
}
.bestellingen-datetime {
  min-width: 4.5rem;
}
.bestellingen-nr-mobile,
.bestellingen-paid_icon,
.bestellingen-sent_icon,
.bestellingen-paid_icon::before,
.bestellingen-sent_icon::before,
.bestellingen-adres_alert {
  display: none;
  visibility: hidden;
}

.bestellingen-formatted-time{
  font-size: .9rem;
}
/* responsive media queries */

@media (max-width: 864px) {
  .bestellingen {
    font-size: 0.9rem;
  }
  .bestellingen table td,
  .bestellingen table th {
    padding: 6px;
  }
  .bestellingen-formatted-year {
    display: none;
    visibility: hidden;
  }
  .bestellingen-paid,
  .bestellingen-sent {
    display: none;
    visibility: hidden;
  }
  .bestellingen-paid_icon,
  .bestellingen-sent_icon,
  .bestellingen-paid_icon::before,
  .bestellingen-sent_icon::before {
    display: block;
    visibility: visible;
  }
}
@media (max-width: 767px) {
  .formadd * {
    width: 100%;
  }
  .flexrowadmintools div {
    width: 100%;
  }
  .navbar {
    margin: 1rem 1rem !important;
  }
  .navbar-brand .logofull {
    max-width: 18rem;
    height: auto;
  }
  .navbarphrasesmallest {
    display: none;
    visibility: hidden;
  }
  .buttonadd input {
    min-height: unset;
    min-width: unset;
  }
  .bestellingen-datetime {
    min-width: unset;
  }
}
@media (max-width: 741px) {
  .bestellingen-nr-mobile {
    display: block;
    visibility: visible;
  }
  .bestellingen-nr-desktop {
    display: none;
    visibility: hidden;
  }
  .bestellingen-datetime {
    font-size: 0.8rem;
  }
  .bestellingen-formatted-time{
    font-size: 0.7rem;
  }
}
@media (max-width: 694px) {
  .bestellingen-datetime,
  .bestellingen-remove {
    display: none;
    visibility: hidden;
  }
  .bestellingen-klant {
    font-size: 0.95rem;
    line-height: 1.2rem;
  }
  .bestellingen-klant_email {
    font-size: 0.8rem;
  }
}
@media (max-width: 579px) {
  #searchInput {
    width: 8rem;
  }
  .searchfilter {
    font-size: 0.8rem;
  }
  .flexbetween p {
    font-size: 0.7rem;
  }
  .flexbetween {
    margin: 0 0.5rem;
  }
  .bestellingen-container {
    padding: 1.5rem 0.1rem;
  }
  .bestellingen-adres_content {
    font-size: 0.9rem;
  }
  .bestellingen-klant_email {
    display: none;
    visibility: hidden;
  }
  .seperator {
    display: none;
    visibility: hidden;
  }
  .flexfooter {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
  }
  .bottomtext div {
    width: 100%;
  }
  .bottomtext .bigger {
    font-weight: 700;
  }
  .smaller {
    font-size: 0.9rem !important;
    font-weight: 400;
  }
  .footertextleft {
    min-width: auto;
    text-align: unset;
  }
  .footertextright {
    min-width: auto;
    text-align: unset;
  }
  .infolines {
    gap: 2rem;
  }
  .infolines div {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}
@media (max-width: 420px) {
  .logofull {
    max-width: 15rem !important;
    height: auto !important;
  }
  .navbarphrasesmall {
    display: none;
    visibility: hidden;
  }
  .navbarphrasesmallest {
    display: block;
    visibility: visible;
    margin: -1.45rem 0 0 3rem;
    font-size: 0.7rem;
  }
  .bestellingen-klant,
  .bestellingen-adres,
  .bestellingen-adres_alert {
    font-size: 0.8rem;
  }
  .bestellingen-adres_content {
    display: none;
    visibility: hidden;
  }
  .bestellingen-adres_alert {
    display: block !important;
    visibility: visible !important;
  }
}
@media (max-width: 359px) {
  .flexbetween {
    flex-direction: column-reverse;
    margin: 0 0.5rem;
    justify-content: flex-end;
    align-items: end;
  }
  .bestellingen-klant_email,
  .bestellingen-adres,
  .bestellingen-order,
  .bestellingen-klant {
    font-size: 1rem;
  }
  .logofull {
    display: none;
    visibility: hidden;
  }
  .logosmall {
    display: none !important;
    visibility: hidden !important;
  }
  .logoxsmall {
    display: block !important;
    visibility: visible !important;
  }
  .navbarphrasesmallest {
    display: none;
    visibility: hidden;
  }
}
@media (max-width: 340px) {
  .flexbetween {
    margin: 0;
  }
  .bestellingen-adres-th,
  .bestellingen-adres {
    display: none;
    visibility: hidden;
  }
  .bestellingen-container {
    padding: 1.5rem 1rem;
  }
}
@media (max-width: 860px) {
  .cartoon {
    display: none;
    visibility: hidden;
  }
}
@media (min-width: 125rem) {
  html {
    font-size: calc(1rem + 0.1vw);
  }
  .container {
    max-width: 80%;
  }
}