bonfire-app/assets/css/app.scss

@tailwind base;

/* This file is for your main application css. */
@import "../node_modules/nprogress/nprogress.css";

/* TODO: switch to `deps` instead of `forks`, also find a better way to include css from deps */

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

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

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

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

}
*[x-cloak] {
  display: none
}

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;
}

/* 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;
}


/* Alerts and form errors */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert p {
  margin-bottom: 0;
}
.alert:empty {
  display: none;
}
.invalid-feedback {
  color: #a94442;
  display: block;
  margin: -1rem 0 2rem;
}

iframe {
  display: contents
}


@tailwind components;
@tailwind utilities;


.btn-primary {
  @apply inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-100 transition duration-150 ease-in-out bg-pink-500 rounded-md hover:bg-pink-700 hover:text-gray-100 focus:outline-none focus:ring-2 focus:bg-pink-600 focus:ring-opacity-50;
}

.btn-secondary {
  background: #fff;
  @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.comment_lined:before {
  position: absolute;
  content: "";
  top: 36px;
  bottom: 10px;
  width: 2px;
  left: 19px;
  @apply bg-blueGray-500;
}

.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;

}