/* @tailwind base; */
@tailwind components;
@tailwind utilities;

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
}

/* text */
.mycolor-primary {
  color:#7728f5 !important;
}
.mycolor-danger{
  color:#FF2A2A !important;
}
.mycolor-success {
  color:#4095E5 !important;
}

.myicon-small {
  font-size: 12px !important;
}

/* loading */
.loading-dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  animation: dotFlashing 0.6s infinite linear alternate;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotFlashing {
  0% {
    opacity: 0;
		scale: 0.5;
  }
  50%,
  100% {
    opacity: 1;
  }
}

.scan {
  width: 200px;
  height: 200px;
}
.scan::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: #fff;
  box-shadow: 0 0 70px 20px #fff;
  clip-path: inset(0);
  animation: x 0.75s ease-in-out infinite alternate, y 1.5s ease-in-out infinite;
}

@keyframes x {
  to {
    transform: translateX(-100%);
    left: 100%;
  }
}

@keyframes y {
  33% {
    clip-path: inset(0 0 0 -100px);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  83% {
    clip-path: inset(0 -100px 0 0);
  }
}

.mosaic-bg {
  background-position: 0px 0px, 10px 10px !important;
  background-size: 4px 4px !important;
  background-image: linear-gradient(
      45deg,
      #eee 25%,
      transparent 25%,
      transparent 75%,
      #eee 75%,
      #eee 100%
    ),
    linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%) !important;
}

@tailwind utilities;

.my-text-box {
  border: 1px solid rgba(222, 222, 222, 1) !important; 
  border-width: 1px !important;
  border-radius: 0.25rem !important;
}
.my-text-box:hover {
  border: 1px solid #7728f5 !important;
}

.my-button {
  color: #6c6c6c !important;
  cursor: pointer !important;
}
.my-button:hover {
  color: #7728f5 !important;
}

.my-tag {
  background-color: white !important;
  color: #6c6c6c !important;
  padding-top: 2px !important;
}
.my-tag:hover {
  color: #7728f5 !important;
}

.my-tag-active {
  color: #7728f5 !important;
  background-color: #E1CBFD !important;
  border-color: #7728f5 !important;
}

.my-icon {
  font-size: 20px !important;
}

/* scroll */
.my-scroll {
	overflow-x: overlay !important;
}

