/* This file is for your main application CSS */
@import "./phoenix.css";

/* Alerts and form errors used by phx.new */
.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;
}

/* LiveView specific classes for your customization */
.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;
}

html,
body,
div[data-phx-main="true"],
main.container,
.main-view-component {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.gthm-logo {
  min-width: 300px;
  margin: 1rem;
  display: block;
}

.gthm-logo img {
  width: auto;
  display: block;
  max-height: 100px;
}

.main-view-component {
  position: relative;

  padding: 10px;
}

.main-view-component svg {
  width: 100%;
  height: 100%;
  object-fit: contain;

  margin: 0 auto;
}

.pump-btn:hover {
  cursor: pointer;
}

.pump-btn-loading:hover {
  cursor: progress;
}

.page-container {
  padding: 10px;
}