/*
    This file contains the styles that apply globally, and aren't tied to any particular component.  
*/
:root {
  --font-awesome-family: "Font Awesome 6 Pro";
}
h1 {
  font-size: 40px;
  letter-spacing: -1.6px;
  font-weight: 500;
  margin: 0;
}
h2 {
  font-size: 20px;
  letter-spacing: -0.8px;
  font-weight: 500;
  margin: 0;
}
h3 {
  font-weight: 500;
}
body {
  font-family: "Roboto Mono", sans-serif;
  color: var(--text-color, #121212);
  background: var(--background-color, #F5F5F5);
  height: auto;
}
body.dark {
  background: #242424;
  --background-color: #242424;
  --container-background-color: #121212;
  --container-loading-overlay-color: rgba(18, 18, 18, 0.8);
  --background-highlight-color: #404040;
  --text-color: #fafafa;
  --faded-text-color: #afafaf;
  --graph-values-background: rgba(0, 0, 0, 0.9);
  --graph-overlay-color: rgba(18, 18, 18, 0.6);
  --graph-overlay-dark-color: rgba(250, 250, 250, 0.4);
  --graph-select-line-color: #EEEEEE;
  --input-disabled-background-color: #404040;
  --list-highlight-color: #000000;
  --separator-color: rgba(255, 255, 255, 0.15);
  --default-pill-color: #95a5a6;
  --box-shadow-light-color: rgba(255, 255, 255, 0.12);
  --box-shadow-color: rgba(255, 255, 255, 0.14);
  --box-shadow-dark-color: rgba(255, 255, 255, 0.2);
}
/* INPUTS */
input:not([type="color"], [type="radio"], [type="checkbox"]),
select,
textarea,
textarea[breezer-editor-for-string-expandable],
editor-for[breezer-editor-for-string-expandable]::after {
  border-radius: 35px;
  border-color: var(--input-border-color, #888);
  background-color: var(--container-background-color, #fafafa);
  color: var(--text-color, #121212);
  font-size: var(--input-font-size, 15px);
  padding: var(--input-vertical-padding, 20px) var(--input-horizontal-padding, 25px);
  color-scheme: dark;
}
input:not([type="file"]),
select,
textarea,
textarea[breezer-editor-for-string-expandable] {
  transition: opacity 0.2s ease;
}
input:not([type="file"])[disabled],
select[disabled],
textarea[disabled],
textarea[breezer-editor-for-string-expandable][disabled] {
  user-select: none;
  opacity: 0.3;
  background: var(--input-disabled-background-color, #F5F5F5);
  color: var(--faded-text-color, #5f5f5f);
  border-color: var(--input-border-color, #888);
}
input:not([type="file"])[disabled]:hover,
select[disabled]:hover,
textarea[disabled]:hover,
textarea[breezer-editor-for-string-expandable][disabled]:hover {
  border-color: var(--input-border-color, #888);
}
dropdown {
  transition: opacity 0.2s ease;
}
dropdown.disabled {
  pointer-events: none;
  user-select: none;
  cursor: default;
  opacity: 0.3;
  color: var(--faded-text-color, #5f5f5f);
  border-color: var(--input-border-color, #888);
}
dropdown.disabled:hover {
  border-color: var(--input-border-color, #888);
}
editor-for[display="checkbox"][breezer-editor-for-bool] {
  border-color: var(--input-border-color, #888);
  flex-shrink: 0;
  border-radius: 10px;
}
editor-for[display="checkbox"][breezer-editor-for-bool]:hover,
editor-for[display="checkbox"][breezer-editor-for-bool]:focus {
  border-color: var(--text-color, #121212);
}
[breezer-editor-for-nullable-date],
radio[breezer-editor-for-radio-option] {
  border-color: var(--input-border-color, #888);
}
[breezer-editor-for-nullable-date]:hover,
radio[breezer-editor-for-radio-option]:hover,
[breezer-editor-for-nullable-date]:focus,
radio[breezer-editor-for-radio-option]:focus {
  border-color: var(--text-color, #121212);
}
inline-editor-validation-messages {
  display: contents;
}
inline-editor-validation-messages .validation-message {
  grid-column: 1/-1;
  color: var(--text-color, #121212);
  font-weight: 400;
}
form form-field form-field-header > label,
editor-for form-field form-field-header > label,
form form-field > label,
editor-for form-field > label,
form form-field > label[breezer-form-field],
editor-for form-field > label[breezer-form-field] {
  color: var(--faded-text-color, #5f5f5f);
  font-size: var(--label-font-size, 15px);
  margin-left: var(--input-horizontal-padding, 25px);
  margin-bottom: 8px;
}
.disabled-message {
  color: var(--faded-text-color, #5f5f5f);
  font-size: 12px;
  margin-top: 0px;
  margin-left: var(--input-horizontal-padding, 25px);
  margin-bottom: 8px;
}
/* BUTTONS */
button,
.button {
  white-space: nowrap;
  font-family: "Roboto Mono", sans-serif;
  transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
button:not(.inline),
.button:not(.inline) {
  color: #fafafa;
  background: var(--background-highlight-color, #404040);
  font-size: var(--button-font-size, 15px);
  border-radius: 50px;
  padding: 20px 40px;
  border-color: transparent;
}
button:not(.inline):not([type="submit"]),
.button:not(.inline):not([type="submit"]) {
  padding: 12.5px 20px;
}
button.inline,
.button.inline {
  padding: 20px 40px;
}
button[disabled],
.button[disabled] {
  opacity: 0.5;
  cursor: default;
}
button[disabled]:hover,
.button[disabled]:hover {
  opacity: 0.5;
}
button.thin,
.button.thin {
  padding: 5px 20px;
}
button.secondary,
.button.secondary {
  background: var(--container-background-color, #fafafa);
  border-color: transparent;
  color: var(--text-color, #121212);
}
button.secondary:hover,
.button.secondary:hover {
  background: var(--background-color, #F5F5F5);
}
button.secondary.outline,
.button.secondary.outline {
  border-color: var(--background-highlight-color, #404040);
}
bivacor-pill {
  border-radius: 25px;
  padding: 4px 10px;
  font-size: 12px;
  border: none;
  background-color: #121212;
  color: white;
  white-space: nowrap;
  width: min-content;
}
.validation-message {
  font-size: 14px;
  color: var(--warning-color, #c92c10);
  margin-left: 25px;
}
.tooltip {
  opacity: 60%;
  background-color: #121212;
  color: #fafafa;
  border-radius: 35px;
  padding: 12.5px 20px;
}
.popup-container .popup tooltip {
  opacity: 60%;
  background-color: #121212;
  color: #fafafa;
  border-radius: 35px;
  padding: 12.5px 20px;
  opacity: 0;
  margin-bottom: 12.5px;
  animation: fade-in linear 0.2s forwards 0.2s;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}