.dashboard-page {
  width: 100vw;
  height: 100vh;
}
.dashboard-container {
  padding: 0px 27px;
}
.dashboard-header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #01c0c8;
  /* #0057b7; */
}
.nav-tabs .nav-link {
  color: #6e7488;
  width: 100%;
  /* margin-left: 3rem; */
}
.nav-link:hover {
  background-color: #fff !important;
  color: #01c0c8 !important;
}
.nav-link.active {
  color: #01c0c8 !important;
}
.app-search {
  border-radius: 60px;
  border-color: transparent;
  font-weight: 400;
  color: currentColor;
  padding: 0.375rem 0.75rem;
  transition: 0.2s ease-in;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  transition-delay: 0s;
  letter-spacing: inherit;
  font: inherit;
  width: 180px;
  height: 38px;
  margin-top: 16px;
}
.app-search:focus {
  width: 300px;
  height: 38px;
  font: inherit;
  letter-spacing: inherit;
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  color: currentColor;
  background-color: #fff;
  appearance: none;
  border-radius: 60px;
  outline: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.dashboard-items {
  position: sticky;
  z-index: 1000;
  height: 80px;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 3px 3px #b1b1b1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.add-bttn {
  text-transform: none !important;
  border-radius: 36px !important;
  background: #01c0c8 !important;
  color: #fff !important;
  border: none !important;
  margin-left: 32rem !important;
}
.add-bttn:hover {
  background: #01abb0 !important;
  color: #fff !important;
}
.save-bttn {
  font-weight: 600 !important;
  text-transform: none !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  background-color: #1abc9c !important;
}
.save-bttn:hover {
  background-color: #15967d !important;
  color: #fff !important;
}
.clear-bttn {
  text-transform: none !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  background-color: #6c757d !important;
}
.clear-bttn:hover {
  background-color: #5c636a !important;
  color: #fff !important;
}
.message {
  max-width: 15rem;
  color: rgba(0, 0, 0, 0.6);
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.66;
  letter-spacing: 0.03333em;
}
.success {
  color: green;
}
.error {
  color: #d32f2f;
}
.add_params {
  width: 30rem;
  height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.call-bttn {
  font-weight: 600 !important;
  text-transform: none !important;
  border: 1px solid #4caf50 !important;
  color: #4caf50 !important;
  /* background-color: #1abc9c !important; */
}
.call-bttn:hover {
  background-color: #4caf50 !important;
  color: #fff !important;
}
.-bttn {
  text-transform: none !important;
  border: 1px solid #f44336 !important;
  color: #f44336 !important;
  /* background-color: #6c757d !important; */
}
.endcall-bttn:hover {
  background-color: #f44336 !important;
  color: #fff !important;
}
.show {
  display: block;
}
.hide {
  display: none;
}

.strong-hover-shake:hover {
  animation: tilt-shaking 0.15s infinite;
}
.gentle-hover-shake {
  animation: tilt-shaking 0.25s infinite;
}
@keyframes tilt-shaking {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(0eg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes tilt-n-move-shaking {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(5px, 5px) rotate(5deg);
  }
  50% {
    transform: translate(0, 0) rotate(0eg);
  }
  75% {
    transform: translate(-5px, 5px) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes vertical-shaking {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes horizontal-shaking {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes jump-shaking {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateY(-9px);
  }
  35% {
    transform: translateY(-9px) rotate(17deg);
  }
  55% {
    transform: translateY(-9px) rotate(-17deg);
  }
  65% {
    transform: translateY(-9px) rotate(17deg);
  }
  75% {
    transform: translateY(-9px) rotate(-17deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes skew-x-shake {
  0% {
    transform: skewX(-15deg);
  }
  5% {
    transform: skewX(15deg);
  }
  10% {
    transform: skewX(-15deg);
  }
  15% {
    transform: skewX(15deg);
  }
  20% {
    transform: skewX(0deg);
  }
  100% {
    transform: skewX(0deg);
  }
}

@keyframes skew-y-shake {
  0% {
    transform: skewY(-15deg);
  }
  5% {
    transform: skewY(15deg);
  }
  10% {
    transform: skewY(-15deg);
  }
  15% {
    transform: skewY(15deg);
  }
  20% {
    transform: skewY(0deg);
  }
  100% {
    transform: skewY(0deg);
  }
}