/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
.m0 {
  margin: 0;
}
.mt0 {
  margin-top: 0;
}
.mb0 {
  margin-bottom: 0;
}
::backdrop {
  background: #0000009c;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
h1,
h2,
h3 {
  small {
    font-size: 72%;
    color: darkgrey;
  }
}
.fx {
  display: flex;

  &.aic {
    align-items: center;
  }
  &.jcsb {
    justify-content: space-between;
  }
  &.g5 {
    gap: 5px;
  }
  &.g3 {
    gap: 3px;
  }
  &.vertical {
    flex-direction: column;
  }
  &.fw {
    flex-wrap: wrap;
  }
}
div[popover] {
  padding: 10px;
  border: none;
  border-radius: 5px;
}
.prayers {
  display: grid;
  grid-template-columns: 25px auto;
}

form.plain button,
button.plain {
  padding: 0;
  background: none;
  line-height: 1;
  margin: 0;
  &.close {
    width: 60px;
    color: lightslategray;
  }
}
button:focus {
  box-shadow: none !important;
}

button.fill-info {
  padding: 0;
  text-align: left;
  color: lightslategray;
  small span {
    display: none;
  }
  &:hover small span {
    display: inline;
  }
}
section.filled-infos {
  background-color: ghostwhite;
  div.filled-info {
    line-height: 0.9;
    margin-bottom: 10px;
    padding: 4px;
  }
}
div.no-results {
  display: none;
  &:only-child {
    display: block;
  }
}

@media screen and (max-width: 414px) {
  #rubrics.fx {
    flex-wrap: wrap;
  }
  div.conduct-bi {
    div {
      width: 100%;
      input {
        margin: 0;
        padding: 2px 4px;
        width: 95%;
      }
      label {
        margin-bottom: 1px;
      }
    }
  }
  .prayers {
    grid-template-columns: repeat(4, 25px auto);
    width: 90vw;
  }
}