@import url("https://fonts.googleapis.com/css?family=Poppins");

.not-loaded-table {
  width: 100%;
  background-color: var(--color-white);
  border-top: 1px solid var(--table-border-color);
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.loader-container {
  z-index: 11;
  height: 100%;
  overflow: auto;
  position: relative;
  border-radius: 0 0 11px 11px;
}

.table-loader-hidden {
  display: none;
}

.skeleton td, .skeleton th {
  padding: 11px 19px;
  border: none;
  box-shadow: none;
}

.skeleton th div {
  height: 124px;
  display: flex;
  align-items: end;
  justify-content: center;
}

.skeleton-label {
  display: flex;
  align-items: center;
  width: 215px;
  padding-left: 5px;
}

.skeleton .circle {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: var(--table-skeleton-color);
}

.skeleton-label .circle {
  margin-right: 14px;
}

.skeleton .line {
  height: 19px;
  max-width: 160px;
  width: 80%;
  border-radius: 4px;
  background: var(--table-skeleton-color);
}

.skeleton .line.vertical {
  height: 80%;
  max-width: 124px;
  width: 19px;
  border-radius: 4px;
  background: var(--table-skeleton-color);
}

.skeleton .line:last-child {
  margin-bottom: 0;
}

.skeleton .line.h5 {
  height: 5%
}

.skeleton .line.h10 {
  height: 10%
}

.skeleton .line.h15 {
  height: 15%
}

.skeleton .line.h20 {
  height: 20%
}

.skeleton .line.h25 {
  height: 25%
}

.skeleton .line.h30 {
  height: 30%;
}

.skeleton .line.h35 {
  height: 35%
}

.skeleton .line.h40 {
  height: 40%;
}

.skeleton .line.h45 {
  height: 45%
}

.skeleton .line.h50 {
  height: 50%
}

.skeleton .line.h55 {
  height: 55%
}

.skeleton .line.h60 {
  height: 60%
}

.skeleton .line.h65 {
  height: 65%
}

.skeleton .line.h70 {
  height: 70%
}

.skeleton .line.h75 {
  height: 75%;
}

.skeleton .line.h80 {
  height: 80%
}

.skeleton .line.h85 {
  height: 85%
}

.skeleton .line.h90 {
  height: 90%
}

.skeleton .line.h95 {
  height: 95%
}

.skeleton .line.h100 {
  height: 100%
}

.skeleton .line.w5 {
  width: 5%
}

.skeleton .line.w10 {
  width: 10%
}

.skeleton .line.w15 {
  width: 15%
}

.skeleton .line.w20 {
  width: 20%
}

.skeleton .line.w25 {
  width: 25%
}

.skeleton .line.w30 {
  width: 30%;
}

.skeleton .line.w35 {
  width: 35%
}

.skeleton .line.w40 {
  width: 40%;
}

.skeleton .line.w45 {
  width: 45%
}

.skeleton .line.w50 {
  width: 50%
}

.skeleton .line.w55 {
  width: 55%
}

.skeleton .line.w60 {
  width: 60%
}

.skeleton .line.w65 {
  width: 65%
}

.skeleton .line.w70 {
  width: 70%
}

.skeleton .line.w75 {
  width: 75%;
}

.skeleton .line.w80 {
  width: 80%
}

.skeleton .line.w85 {
  width: 85%
}

.skeleton .line.w90 {
  width: 90%
}

.skeleton .line.w95 {
  width: 95%
}

.skeleton .line.w100 {
  width: 100%
}

.spinner {
  display: flex;
  justify-content: center;
}

.not-loaded-loader {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%);
  padding: 43px 80px;
  background-color: var(--color-white);
  border: 1px solid var(--table-skeleton-color);
  box-shadow: 11px 12px 36px rgba(44, 62, 98, 0.05);
  border-radius: 8px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
}

.not-loaded-loader > div:first-child {
  margin-bottom: 24px;
}

.dot-flashing {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--spinner-color);
  color: var(--spinner-color);
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}
.dot-flashing::before, .dot-flashing::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-flashing::before {
  left: -14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--spinner-color);
  color: var(--spinner-color);
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 0s;
}
.dot-flashing::after {
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--spinner-color);
  color: var(--spinner-color);
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0% {
    background-color: var(--spinner-color);
  }
  50%, 100% {
    background: rgba(2, 161, 211, 0.2);
  }
}

/*@keyframes wave-lines {*/
/*  0% {*/
/*    background-position: -468px 0;*/
/*  }*/
/*  100% {*/
/*    background-position: 468px 0;*/
/*  }*/
/*}*/

/*@keyframes wave-squares {*/
/*  0% {*/
/*    background-position: -468px 0;*/
/*  }*/
/*  100% {*/
/*    background-position: 468px 0;*/
/*  }*/
/*}*/