index.css

@tailwind base;
@tailwind components;
@tailwind utilities;


html,
body {
/* Hide both horizontal and vertical scrollbars /
/* WebKit (Chrome, Safari, etc.) */
::-webkit-scrollbar {
    display: none;
  }

/* Firefox */
scrollbar-width: none;
  -ms-overflow-style: none;
}








/* #heading{
    color: red;
} */

* {
  margin: 0;
}

/* Header css */
/* .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
}
.logo {
  width: 70px;
}
.nav-items ul {
  display: flex;
  list-style-type: none;
}
.nav-items li {
  font-size: 20px;
  margin-right: 10px;
  padding-right: 10px;
}

.login {
  cursor: pointer;
}

/* body css */

/* .res-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.res-card {
  border: 1px solid black;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 210px;
  margin: 10px;
  border-radius: 20px;
}
.res-logo {
  width: 210px;
  height: 190px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.online-status>h1{
  text-align: center;
}  */

/************Shimmer***********/

/* .shimmer-container {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.shimmer-card {
  border: 1px solid black;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 25px;
  width: 210px;
  height: 400px;
  margin: 10px;
  background-color: #f0f0f0;
}

.shimmer-card h3,
.shimmer-card h4 {
  height: 20px;
  width: 120px;
  margin: 20px 0;
  margin-left: 5px;
  border-radius: 20px;
  background-color: #cccccc;
}

.shimmer-img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 210px;
  height: 190px;
  background-color: #cccccc;
}

.filter-btn {
  cursor: pointer;
}

.filter {
  margin: 10px;
  display: flex;
  justify-content: space-evenly;
}

.user-card {
  padding: 50px;
  border: 1px solid black;
} */

/********loading spinner*******/
/* .spin-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 140px 0;
}

.lds-ripple {
  display: inline-block;
  position: relative;

  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #000;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
} */

/******************Footer*****************/

/* .footer {
  display: flex;
  align-items: center;
  flex-direction: column;
} */



/* shimmer 2 */
/* body {
  background:#000;
} */

#load {
  position:absolute;
  width:600px;
  height:36px;
  left:50%;
  top:40%;
  margin-left:-300px;
  overflow:visible;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
}

#load div {
  position:absolute;
  width:20px;
  height:36px;
  opacity:0;
  font-family:Helvetica, Arial, sans-serif;
  animation:move 2s linear infinite;
  -o-animation:move 2s linear infinite;
  -moz-animation:move 2s linear infinite;
  -webkit-animation:move 2s linear infinite;
  transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  color:#f67016;
}

#load div:nth-child(2) {
  animation-delay:0.2s;
  -o-animation-delay:0.2s;
  -moz-animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
  animation-delay:0.4s;
  -o-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
  animation-delay:0.6s;
  -o-animation-delay:0.6s;
  -moz-animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
  animation-delay:0.8s;
  -o-animation-delay:0.8s;
  -moz-animation-delay:0.8s;
  -webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
  animation-delay:1s;
  -o-animation-delay:1s;
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
}
#load div:nth-child(7) {
  animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
}

@keyframes move {
  0% {
    left:0;
    opacity:0;
  }
  35% {
    left: 41%; 
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    opacity:1;
  }
  65% {
    left:59%; 
    -moz-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); 
    -o-transform:rotate(0deg);
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%; 
    -moz-transform:rotate(-180deg); 
    -webkit-transform:rotate(-180deg); 
    -o-transform:rotate(-180deg); 
    transform:rotate(-180deg);
    opacity:0;
  }
}

@-moz-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -moz-transform:rotate(0deg); 
    transform:rotate(0deg);
    opacity:1;
  }
  65% {
    left:59%; 
    -moz-transform:rotate(0deg); 
    transform:rotate(0deg);
    opacity:1;
  }
  100% {
    left:100%; 
    -moz-transform:rotate(-180deg); 
    transform:rotate(-180deg);
    opacity:0;
  }
}

@-webkit-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  65% {
    left:59%; 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%;
    -webkit-transform:rotate(-180deg); 
    transform:rotate(-180deg); 
    opacity:0;
  }
}

@-o-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -o-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  65% {
    left:59%; 
    -o-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%; 
    -o-transform:rotate(-180deg); 
    transform:rotate(-180deg); 
    opacity:0;
  }
}