/* CSS for the dashboard page */

/* Dashboard styles */

/* Highlight fading for table row updates */

.fade-bg-color {
  width: 320px;
  /* height: 100px; */
  /* background-color: yellow; */
  animation-name: fade-bg-color;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes fade-bg-color {
  from {background-color: lightyellow;}
  to {background-color: whitesmoke;}
}

@keyframes highlightFadeStart {
  0% {
    background-color: lightgreen;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes highlightFadeStop {
  0% {
    background-color: lightgreen;
  }
  100% {
    background-color: transparent;
  }
}

.fade-highlight {
  animation: highlightFadeStart 2s ease-out;
}

.fade-highlight-start {
  animation: highlightFadeStart 2s ease-out;
}

.fade-highlight-stop {
  animation: highlightFadeStop 2s ease-out;
}

/* Spinner loader animation positioning */

#loading-formations [data-dash-is-loading="true"]{
  visibility: hidden;
  /* vertical-align: top; */
  height:100px;
}
#loading-formations [data-dash-is-loading="true"]::before{
    content: "Loading...";
    display: inline-block;
    /* color: magenta; */
    visibility: visible;
    vertical-align: top;
}

.crop {
    width: 100px;
    height: 150px;
    overflow: hidden;
}

.app-list-tbl td,
.app-formation-tbl,
.app-dyno-tbl td,
.app-domain-tbl td {
  white-space: nowrap;
}

.app-formation-tbl td {
  vertical-align: middle;
}

/* Table Wrappers */

.app-tbl-wrapper {
  overflow: auto;
  max-width: 100%;
  /* height: 400px; */
  /* max-height: 80vh; */
  position: relative;
}