@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "part/animation";
@import "part/form_disable_with";
@import "part/modal";
@import "part/nebula_font";
@import "part/Orbitron_font";
@import "part/Titillium_Web_font";
@import "part/user_level_tag";
@import "part/photonicat_landing";
@import "swiper/swiper-bundle.css";

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
  --swiper-theme-color: #FEE020;
  --swiper-pagination-bullet-size: 12px;
}

html {
  scroll-behavior: smooth;
}

@layer components {
  .btn {
    @apply flex items-center rounded border border-gray-400 bg-gray-50 hover:bg-blue-100;
    @apply px-4 py-1 leading-5 cursor-pointer;
    @apply  border-gray-200 text-gray-600 hover:text-gray-700;
    @apply text-sm font-extralight focus:outline-none focus:ring-2 focus:ring-opacity-75;
    @apply transition-colors duration-200;
  }

  .btn-outline {
    @apply border border-blue-300 text-blue-500;
    @apply hover:bg-blue-50;
  }

  .btn-primary {
    @apply flex items-center rounded border cursor-pointer;
    @apply px-4 py-1 leading-5 text-opacity-75;    
    @apply text-sm font-extralight focus:outline-none focus:ring-2 focus:ring-opacity-75;
    @apply transition-colors duration-200;
    @apply bg-blue-500 text-white hover:text-white hover:bg-blue-600 focus:ring-blue-400;
  }

  .btn-danger {
    @apply flex items-center rounded border cursor-pointer;
    @apply px-4 py-1 leading-5 text-opacity-75;    
    @apply text-sm font-extralight focus:outline-none focus:ring-2 focus:ring-opacity-75;
    @apply transition-colors duration-200;
    @apply bg-red-500 text-white hover:text-white hover:bg-red-600 focus:ring-red-400;
  }

  .breadcrumb {
    @apply m-0 mr-2 text-sm font-medium leading-5 text-gray-900 outline-none focus:ring-2 focus:ring-offset-2;
  }

  .stick_sidebar {
    height: calc(100vh - theme("spacing.16"));
  }

  #error_explanation {
    @apply mb-4 rounded border border-red-400 bg-red-50 p-4 text-red-700;
  }

  #error_explanation h2 {
    @apply mb-2 font-bold;
  }

  #error_explanation ul li {
    @apply list-inside list-disc;
  }

  .field_with_errors input {
    @apply border-2 border-red-500 text-red-500;
  }

  ul.tab {
    @apply flex;
  }

  ul.tab li {
    @apply flex;
  }

  ul.tab li a {
    @apply p-2 text-center hover:text-blue-500;
  }

  ul.tab li.active {
    @apply border-b-2 border-blue-500 font-bold text-blue-500;
    margin-bottom: -2px;
  }

  .popshow {
    @apply bg-gray-800;
    transition: background-color 0.3s;
  }

  .popshow .sepratebar {
    @apply border-b border-gray-700;
  }
}

details:not([open]) > *:not(summary) {
  display: none !important;
}

.pagy-nav,
.pagy-nav-js {
  @apply flex space-x-2;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply block rounded-lg bg-gray-200 px-3 py-1 text-sm font-semibold text-gray-500 shadow-md hover:bg-gray-300 active:bg-gray-400 active:text-white;
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply cursor-default text-gray-400 hover:bg-gray-200 hover:text-gray-400 active:bg-gray-200 active:text-gray-400;
}

.pagy-nav .page.active,
.pagy-nav-js .page.active {
  @apply cursor-default bg-gray-400 text-white hover:bg-gray-400 hover:text-white active:bg-gray-400 active:text-white;
}

.pagy-combo-nav-js {
  @apply flex max-w-max rounded-full bg-gray-200 px-3 py-1 text-sm font-semibold text-gray-500 shadow-md;
}

.pagy-combo-nav-js .pagy-combo-input {
  @apply rounded-sm bg-white px-2;
}

.pagy-combo-nav-js .page.prev,
.pagy-combo-nav-js .page.next {
  @apply hover:text-gray-800 active:text-gray-800;
}

.pagy-combo-nav-js .page.prev.disabled,
.pagy-combo-nav-js .page.next.disabled {
  @apply cursor-default text-gray-400;
}

.modal-details .modal {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  width: 448px;
  position: fixed;
  margin: 10vh auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  max-height: 80vh;
  max-width: 90vw;
}

.modal-details summary::after {
  content: "";
}

.modal-details[open] summary:after {
  content: "";
}

.modal-details[open] summary:before {
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.5;
  z-index: 99;
}

details > summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: " ▼";
}

.avatar-upload summary::after {
  content: " ▼";
  font-size: 12px;
  color: rgb(107, 114, 128);
  position: absolute;
  bottom: 18px;
  left: 6px;
  color: #bdbdbd;
}

details[open] summary:after {
  content: " ▲";
}

details > .details_menu {
  position: absolute;
}

details > .details_menu::before {
  top: -12px;
  left: 9px;
  border: 8px solid transparent;
  @apply border-x-white border-b-gray-400 border-t-white;
  position: absolute;
  display: inline-block;
  content: " ";
}