/* nav menu start */
table td {
  word-wrap: break-word;
  white-space: normal;
  hyphens:auto;
}
nav.navbar, nav.navbar ul {
  flex-direction: column;
}
nav .menu {
  display: none;
}
#menuToggle {
  display: block;
}
@media (min-width: 576px) {
  nav.navbar, nav.navbar ul {
    flex-direction: row;
  }
 nav .menu {
    display: flex;
  }
  #menuToggle {
    display: none;
    position: absolute;
    right: 20px;
    cursor: cusor;
  }
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

/* Fade out the second bar */
.change .bar2 {opacity: 0;}

/* Rotate last bar */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

/* menu end */

abc {

  background-color: antiquewhite;
}
.is-active {
  font-weight:bold;
}
.notification.is-danger {
  border: 1px solid var(--pico-form-element-invalid-active-border-color);
  color:  var(--pico-form-element-invalid-active-border-color);
  padding: 16px;
}

.alert {
  padding: 20px;
  background-color: hsl(207, 90%, 54%);
  color: white;
}
.alert.danger{
  background-color:hsl(4, 90%, 58%);
}
.alert.success{
  background-color:hsl(158, 95%, 34%);
}

.alert.warning{
  background-color:hsl(36, 100%, 50%);
}
.alert.info{
  background-color:rgb(33, 150, 243)
}
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.admin-menu.admin-menu.admin-menu {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr; /* First column max 300px, second grows */
  gap: 20px;
}

/* Toast */
/* //TODO NOT WORKING */

figure.image > img {
  border-radius:12px;
}

.grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 10px;
  --grid-column-count: 4;
  --grid-item--min-width: 300px;

  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}