/* loading */
.loader {
  width: 64px;
  height: 64px;
  position: relative;
  background-image:
    linear-gradient(#FFF 16px, transparent 0) ,
    linear-gradient(#FF3D00 16px, transparent 0) ,
    linear-gradient(#FF3D00 16px, transparent 0) ,
    linear-gradient(#FFF 16px, transparent 0);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: left top , left bottom , right top , right bottom;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  0% {
    width: 64px;
    height: 64px;
    transform: rotate(0deg)
  }
  50% {
    width: 30px;
    height: 30px;
    transform: rotate(180deg)
  }
  100% {
    width: 64px;
    height: 64px;
    transform: rotate(360deg)
  }
}
/* loaderBar */
/* <span class="loaderBar"></span> */
.loaderBar {
  width: 80%;
  height: 16px;
  display: inline-block;
  background-color: #0099FF;
  border: 1px solid #0099FF;
  border-radius: 4px;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
  font-size: 30px;
  background-size: 1em 1em;
  box-sizing: border-box;
  animation: barStripe 1s linear infinite;
}

@keyframes barStripe {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1em 0;
  }
}

/* components */
/* Scrollbar */
@layer utilities {
  .scrollbar::-webkit-scrollbar {
    @apply w-2 h-2
  }

  .scrollbar::-webkit-scrollbar-track {
    @apply bg-transparent rounded-full
  }

  .scrollbar::-webkit-scrollbar-thumb {
    @apply bg-neutral-300 rounded-full
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-400
  }
}

/* button */
.btn {
@apply inline-block rounded-full text-sm font-medium text-center align-middle transition-colors duration-300
}
.btn-sm {
@apply px-5 py-2
}
.btn-lg {
  @apply px-4 py-2.5
}
.btn-c-primary {
  @apply hover:text-neutral-50 hover:bg-primary border border-primary bg-neutral-50 text-primary active:ring focus:outline-none active:ring-primary/50 focus:ring focus:ring-primary/50
}
.btn-cfm-secondary {
  @apply  border border-cfm-secondary bg-neutral-50 text-cfm-secondary hover:text-neutral-50 hover:bg-cfm-secondary active:ring focus:outline-none  active:ring-cfm-secondary/50 focus:ring focus:ring-cfm-secondary/50
}
.btn-disable {
  @apply border border-neutral-200 bg-neutral-50 text-neutral-200
}
.btn-neutral {
  @apply text-neutral-700 bg-neutral-100 border border-neutral-500  hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring
}

/* button toggle */
.btn-toggle-content {
  @apply flex justify-between items-center w-full rounded-full bg-neutral-100 text-neutral-500
}
.btn-toggle-item {
  @apply text-sm leading-5 font-medium text-center justify-center w-1/2 px-7 py-1.5 rounded-full cursor-pointer transition-all duration-200
}
.btn-toggle-show {
  @apply bg-primary text-neutral-10 shadow-md
}