/* This file is for your main application css. */

@import "../node_modules/nprogress/nprogress.css";
@import "../node_modules/@yaireo/tagify/dist/tagify.css";

@tailwind base;


.h-90vh {
  height: 90vh;
}


[x-cloak] {
  display: none !important;
} 


.w-center {
  width: 100%;
}
@media (min-width: 580px) { 
  .w-center {width: 100% !important}
}
@media (min-width: 768px) { 
  .w-center {width: 100% !important}
}
@media (min-width: 1024px) { 
  .w-center {width: 580px !important} 
}

@media (min-width: 1280px) { 
  .w-center {
    width: 580px !important
  }

}

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


.dropdown.open:before {
  content: " ";
  background: transparent;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.details-dropdown[open] > summary {
  cursor: default;
}

.details-dropdown[open] > summary:before {
  content: " ";
  background: transparent;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.details-dialog[open] > summary:before {
  content: " ";
  background: rgba(0,0,0,0.4);
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}


.details-modal {
  margin-left: -16rem;
  left: 50%;
}

.mh-80 {
  max-height: 80vh;
}

.narrow {
  width: 400px;
}

.wide {
  width: 640px;
}

::-webkit-scrollbar {
  width: 12px;
}

.scroll::-webkit-scrollbar {
  width: 5px;
}


.main_reply_to {
  padding-left: 0.75rem !important
}


.kanban-scrollbar::-webkit-scrollbar-track {
  box-shadow: none !important;
  border-radius: 4px !important;
}

.kanban-scrollbar::-webkit-scrollbar {
  height: 8px !important;
  width: 8px !important;
}

.kanban-scrollbar::-webkit-scrollbar-thumb {
  background: #091e4214 !important;
  border-radius: 4px !important;
}


.kanban-scrollbar::-webkit-scrollbar-track-piece {
  background: #091e4214 !important;
}


/* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}

.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

.phx-disconnected{
  cursor: wait;
}
.phx-disconnected *{
  pointer-events: none;
}

.phx-modal {
  opacity: 1!important;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.phx-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.phx-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.phx-modal-close:hover,
.phx-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.invalid-feedback {
  color: #a94442;
  display: block;
  margin: -1rem 0 2rem;
}

iframe {
  display: contents
}


@tailwind components;
@tailwind utilities;


/* Import with  */
/* @import './scrollbar-color.css';  */

:root {
  --scrollbarTrack: hsla(var(--b1));
  --scrollbarThumb: hsla(var(--b3));
  --scrollbarThumbHover: hsla(var(--p));
}
/* Scrollbar colors*/
/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--scrollbarTrack);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbarThumb);
  border-radius: 3px
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbarThumbHover);
}

.menu .menu-title>a, .menu .menu-title>span {
  font-weight: normal
}

.feed_activity_action {
  @apply flex items-center py-1 space-x-1 rounded cursor-pointer;
}

.feed_activity .dropdown-content {
  transform: none
}

.feed_activity_text_active {
  @apply text-primary;
}

.feed_activity_action:hover .feed_activity_icon {
    @apply bg-primary bg-opacity-70;
}

.feed_activity_action:hover .feed_activity_text {
  @apply text-opacity-100;
}

.feed_activity_action:hover .feed_activity_icon svg {
  @apply text-primary-content;
}

.feed_activity_icon_active {
  @apply text-primary;
}


.feed_activity_icon {
  @apply flex items-center rounded-full h-7 w-7 place-content-center;
}

.feed_activity_icon svg {
  @apply w-4 h-4 text-base-content text-opacity-80; 
}


.feed_activity_text {
  @apply text-xs font-normal text-base-content text-opacity-80;
}

.reply_to {
  margin-left: 0 !important;
}

.comment_lined:before {
  position: absolute;
  content: "";
  top: 55px;
  bottom: 0px;
  width: 2px;
  left: 30px;
  @apply bg-base-200;
}


.profile_item:hover {
  background-color: hsla(var(--bc)/var(--tw-bg-opacity,1));
}

.shadow-tick {
  box-shadow: 0 1px 2px rgba(0,0,0,0.2)
}


.prose-valueflows ul li {
  position: static;
  padding-left: 0;

}

.prose-valueflows ul li input {
  margin: 8px !important;
  margin-left: 0 !important;

}


.sortable-ghost {
  @apply bg-gray-300 text-gray-300;
}

.h-modal {
  height: calc(100vh - 48px);
}

.h-bonfire-logged {
  height: calc(100vh - 96px);
}


html, body, a {
  @apply text-base-content;

}


:root {
  @apply text-base-content;
}

.alert-error { 
  @apply bg-red-50;
}
.alert-info {
  @apply bg-blue-50;
}