/*select*/
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;
  background-position: right 1em top 50%, 0 0;
  background-size: .65em auto, 100%;
}

select::-ms-expand {
  display: none;
}

/*switch*/
.switch-checkbox:checked {
  @apply bg-lime-300 dark:bg-lime-200;
}

.switch-checkbox:checked+.toggle-default {
  @apply translate-x-5;
}

/*icon*/
.bi {
  @apply pointer-events-none;
}

/*loader*/
.circular-loader {
  animation: rotate 2s linear infinite;
}

.circular-loader .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation:
  dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

/*Simple scrollbar*/
.scrollbars::-webkit-scrollbar {
  @apply w-0 sm:w-[4px]
}

.scrollbars::-webkit-scrollbar:horizontal {
  @apply h-0 sm:h-[4px]
}

.scrollbars::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px transparent;
  border-radius: 10px;
}

.scrollbars::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
}

.scrollbars.show-scroll::-webkit-scrollbar-thumb,
.scrollbars:hover::-webkit-scrollbar-thumb {
  @apply bg-gray-300
}

/* Button  */
.neu-checkbox input {
  @apply hidden opacity-0
}

.neu-checkbox>.check-icon {
  @apply absolute w-6 h-6 flex items-center justify-center
}

.neu-checkbox::before {
  content: '';
  box-shadow: inset 2px 2px 4px #c2cbd8, inset -3px -3px 5px #fff;
  @apply absolute w-6 h-6 bg-lime-100 border border-lime-200;
}

.dark .neu-checkbox::before {
  box-shadow: inset 2px 2px 4px #232323, inset -3px -3px 5px #3e3f45;
  @apply bg-lime-900 border-lime-950;
}

.neu-checkbox>.check-icon::after {
  content: '\2713';
  @apply absolute w-4 h-4 ms-1 mb-1 opacity-0;
}

.neu-checkbox>input[type="checkbox"]:checked+.check-icon::after {
  @apply opacity-100;
}

.neu-radio input {
  @apply hidden opacity-0
}

.neu-radio::before {
  content: '';
  box-shadow: inset 2px 2px 4px #c2cbd8, inset -3px -3px 5px #fff;
  @apply absolute w-6 h-6 bg-lime-100 border border-lime-200 rounded-full;
}

.dark .neu-radio::before {
  box-shadow: inset 2px 2px 4px #232323, inset -3px -3px 5px #3e3f45;
  @apply bg-lime-900 border-lime-950;
}

.radio-checked {
  justify-content: center;
  align-items: center;
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
}

.neu-radio .radio-checked::after {
  content: '';
  @apply absolute start-0.5 w-3 h-3 ms-1 bg-lime-800 rounded-full opacity-0;
}

.dark .neu-radio .radio-checked::after {
  @apply bg-lime-200;
}

.neu-radio>input[type="radio"]:checked+.radio-checked::after {
  @apply opacity-100;
}

/*radio segmented*/
.radio-segmented input[type="radio"]:checked+span {
  @apply text-lime-600 dark:text-lime-400;
}

.radio-segmented>label {
  @apply -me-px
}

.radio-segmented>label:first-child {
  @apply rounded-s
}

.radio-segmented>label:last-child {
  @apply me-0 rounded-e
}

.btn-segmented>.segmented-item {
  @apply -ml-[2px]
}

.btn-segmented>.segmented-item:first-child {
  @apply ms-0 rounded-l
}

.btn-segmented>.segmented-item:last-child {
  @apply rounded-r
}

.button-group>button:first-child {
  @apply rounded-r-none
}

.button-group>button:last-child {
  @apply rounded-l-none
}

.button-group>button:not(:first-child):not(:last-child) {
  border-radius: 0;
  margin-left: -2px;
  margin-right: -2px;
}

/* tooltips  */
[aria-label][role~="tooltip"] {
  position: relative;
}

[aria-label][role~="tooltip"]::after {
  @apply max-md:hidden;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  opacity: 0;
  pointer-events: none;
  transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
  position: absolute;
  box-sizing: border-box;
  z-index: 90;
  transform-origin: top;
  @apply bg-neutral-700 text-white;
  border-radius: 4px;
  content: attr(aria-label);
  line-height: 1.5;
  font-family: sans-serif, Verdana !important;
  font-size: var(--microtip-font-size, 11px) !important;
  letter-spacing: 0.5px;
  font-weight: var(--microtip-font-weight, normal) !important;
  text-transform: var(--microtip-text-transform, none);
  padding: .15em .75em;
  white-space: nowrap;
  box-sizing: content-box;
  -webkit-font-smoothing: auto;
}

[aria-label][role~="tooltip"]:hover::after {
  @apply md:opacity-100;
  pointer-events: auto;
}

button:hover>[aria-label][role~="tooltip"]::after {
  @apply md:opacity-100;
  pointer-events: auto;
}

button:hover>[role~="tooltip"][data-microtip-position="bottom"]::after {
  transform: translate3d(-50%, 10px, 0);
}

button:hover>[role~="tooltip"][data-microtip-position="top"]::after {
  transform: translate3d(-50%, -10px, 0);
}

button:hover>[role~="tooltip"][data-microtip-position="left"]::after {
  transform: translate3d(-10%, -10px, 0);
}

button:hover>[role~="tooltip"][data-microtip-position="right"]::after {
  transform: translate3d(10%, -10px, 0);
}

/* top  */
[role~="tooltip"][data-microtip-position|="top"]::after {
  margin-bottom: 3px;
  transform: translate3d(-50%, 10px, 0);
  bottom: 100%;
  left: 50%;
}

[role~="tooltip"][data-microtip-position="top"]:hover::after {
  transform: translate3d(-50%, 0, 0);
}

/* bottom  */
[role~="tooltip"][data-microtip-position|="bottom"]::after {
  margin-top: 3px;
  transform: translate3d(-50%, -10px, 0);
  top: 100%;
  left: 50%;
}

[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
  transform: translate3d(-50%, 0, 0);
}

/* left  */
[role~="tooltip"][data-microtip-position="left"]::after {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  transform: translate3d(10px, -50%, 0);
  margin-right: 3px;
}

[role~="tooltip"][data-microtip-position="left"]:hover::after {
  transform: translate3d(0, -50%, 0);
}

/* right  */
[role~="tooltip"][data-microtip-position="right"]::after {
  bottom: auto;
  left: 100%;
  top: 50%;
  transform: translate3d(-10px, -50%, 0);
  margin-left: 3px;
}

[role~="tooltip"][data-microtip-position="right"]:hover::after {
  transform: translate3d(0, -50%, 0);
}

.tooltip-top>span {
  border-color: #e9edf0 transparent transparent transparent;
}

.tooltip-right>span {
  border-color: transparent #e9edf0 transparent transparent;
}

.tooltip-left>span {
  border-color: transparent transparent transparent #e9edf0;
}

.tooltip-bottom>span {
  border-color: transparent transparent #e9edf0 transparent;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 20s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  
  100% {
    transform: translateX(-100%);
  }
}

.navbar>li:hover>a:before {
  background-color: var(--lime);
}

/* navslider hover */
.navslider-hover .splide__arrow {
  display: none;
}

.navslider-hover:hover .splide__arrow {
  display: flex;
}

.stroke-lime {
  stroke: var(--lime);
}

.grayscale {
  filter: grayscale(100%);
}

.hover-grayscale-0:hover .grayscale {
  filter: grayscale(0%);
}

/*hover img*/
.hover-img:hover img {
  -webkit-filter: brightness(103%) contrast(103%);
  filter: brightness(103%) contrast(103%);
  opacity: .99;
}

/*splide*/
.splide__slide img {
  height: auto;
}

/*preloader*/
.loaded-success .preloader {
  visibility: hidden !important;
  transition: all 1s ease-in-out;
}

/*animated css for Wow js*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

/*add custom animated css in here*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
  
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
  
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }
  
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }
  
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }
  
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }
  
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }
  
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }
  
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

.theme-icon.bi-moon-fill {
  display: none;
}
.dark .theme-icon.bi-sun-fill {
  display: none;
}
.dark .theme-icon.bi-moon-fill {
  display: block;
}

/* Animate css */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__fadeInUp {
  animation-name: fadeInUp;
}
.animate__fadeInLeft {
  animation-name: fadeInLeft;
}
.animate__fadeInRight {
  animation-name: fadeInRight;
}
.animate__zoomIn {
  animation-name: zoomIn;
}
.post-content h1 {
  @apply text-4xl md:text-[2.6rem] font-semibold mb-2
}
.post-content h2 {
  @apply text-3xl md:text-[2rem] font-medium mb-2
}
.post-content h3 {
  @apply text-2xl md:text-[1.6rem] font-medium mb-2
}
.post-content h4 {
  @apply text-xl md:text-[1.4rem] font-medium mb-2
}
.post-content h5 {
  @apply text-lg md:text-[1.2rem] font-medium mb-2
}
.post-content h6 {
  @apply text-base md:text-[1.1rem] font-medium mb-2
}
.post-content p {
  @apply text-base mb-6
}
.post-content ol {
  @apply space-y-2 list-decimal list-inside mb-6
}
.post-content ul {
  @apply space-y-2 list-disc list-inside mb-6
}
.post-content ol ul, .post-content ul ul, .post-content ul ol, .post-content ol ol {
  @apply ms-6
}
.post-content a {
  @apply hover:underline hover:text-lime-600 dark:text-lime-400
}
.post-content img {
  @apply mb-6
}
.post-content blockquote {
  @apply py-4 px-6 border-s-4 border-lime-500 bg-lime-50/50 dark:bg-lime-50/10 italic font-semibold mb-6
}
.post-content blockquote cite {
  @apply w-full flex gap-1 pt-1 text-sm
}
.post-content blockquote p {
  @apply py-2 italic font-semibold
}
.post-content pre {
  @apply bg-lime-50/50 dark:bg-lime-50/10 mb-6
}
.compact-mode>li {
  @apply relative
}
.compact-mode>li:hover button {
  @apply md:border md:border-black md:bg-white dark:md:bg-neutral-600 md:shadow-[4px_4px_0_0_#000000] md:-translate-y-[2px]
}
.compact-mode>li:hover .sidebar-submenu, .compact-mode>li .sidebar-submenu.active {
  @apply md:block md:absolute md:w-40 md:start-full md:top-0 md:bg-white dark:md:bg-neutral-600 md:border md:border-black md:rounded-sm md:p-2
}

/*button*/
button:disabled,
button[disabled], .fc-button-primary:disabled {
  @apply cursor-not-allowed hover:translate-x-0 hover:translate-y-0 focus:translate-x-0 focus:translate-y-0 hover:shadow-none focus:shadow-none bg-neutral-200 focus:bg-neutral-200 hover:bg-neutral-200 opacity-80;
}

.button-group>button {
  box-shadow: none !important;
}

.button-group>button:hover {
  box-shadow: inset 3px 3px 5px #c2cbd8, inset -4px -4px 7px #ffffff !important;
}

.dark .button-group>button:hover {
  box-shadow: inset 3px 3px 5px #232323, inset -4px -4px 7px #3e3f45 !important;
}

/* chat  */
.chat-1 {
  justify-content: flex-start;
}

.chat-1 .chat-avatar {
  order: 1;
}

.chat-1 .chat-content {
  order: 2;
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  border-top-left-radius: 0.75rem;
}

.chat-2 {
  justify-content: flex-end;
}

.chat-2 .chat-avatar {
  order: 2;
}

.chat-2 .chat-content {
  order: 1;
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.chat-1 .chat-content,
.chat-2 .chat-content {
  @apply max-sm:max-w-[90%] overflow-hidden;
}

/*fullcalendar */
.fc-button-primary {
  @apply py-2.5 px-5 relative inline-flex flex-row items-center justify-center gap-x-2 rounded-sm text-sm tracking-[.00714em] font-medium border border-black bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black
}

.fc-button-group button {
  @apply -me-px
}

.fc-button-group button:last-child {
  @apply me-0
}

.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th {
  @apply border border-black
}

.dark .fc-theme-standard .fc-scrollgrid, .dark .fc-theme-standard td, .dark .fc-theme-standard th, .dark .fc-theme-standard .fc-scrollgrid {
  @apply border-neutral-500
}