@tailwind base;
@tailwind components;
@tailwind utilities;
*{
    outline: none !important;
}
html, body {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

.progress_bar {
  display: block;
  margin: 15px auto 20px;
  width: 250px;
  height: 4px;
  background-color: #ddd;
  border-radius: 5px;
}.progressbar {
  
  position: relative;
  height: 12px;
  background-color: #e5e5e5;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1)
}

.progressbar>div {
  background-color: #d95350;
  height: 12px;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));
  background-size: 40px 40px;
  transition: width 1s;
  -webkit-transition: width 1s
}

.progress_bar>div {
  -webkit-animation: 2s linear infinite progress_bar;
  animation: 2s linear infinite progress_bar
}

@-webkit-keyframes progress_bar {
  from {
      background-position: 0 0
  }

  to {
      background-position: 40px 0
  }
}

@keyframes progress_bar {
  from {
      background-position: 0 0
  }

  to {
      background-position: 40px 0
  }
}