/* src/styles.css */
.configureMacroDiv {
  display: grid;
  grid-template-rows: 1fr;
  min-width: 12rem;
}
.configureMacroDivItem {
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.configureMacroDivItemButton {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-bottom: 10px;
}
.macroContainer {
  display: grid;
  grid-template-rows: repeat(auto-fill, 120px);
  grid-gap: 40px;
  overflow-y: auto;
  max-height: 30em;
  padding: 2em;
}
@media screen and (max-width: 540px) {
  .macroContainer1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .macroContainer2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .macroContainer3 {
    grid-template-columns: repeat(1, 1fr);
  }
  .wideInputPromptInputEl {
    width: 20rem;
    max-width: 100%;
    height: 3rem;
  }
}
@media screen and (max-width: 540px) and (max-width: 780px) {
  .macroContainer1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .macroContainer2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .macroContainer3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .wideInputPromptInputEl {
    width: 30rem;
    max-width: 100%;
    height: 20rem;
  }
}
@media screen and (min-width: 781px) {
  .macroContainer1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .macroContainer2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .macroContainer3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .wideInputPromptInputEl {
    width: 40rem;
    max-width: 100%;
    height: 20rem;
  }
}
.addMacroBarContainer {
  display: flex;
  align-content: center;
  justify-content: space-around;
  margin-top: 20px;
}
.captureToActiveFileContainer {
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.choiceNameHeader {
  text-align: center;
}
.choiceNameHeader:hover {
  cursor: pointer;
}
.folderInputContainer {
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 4px;
}
.selectMacroDropdownContainer {
  display: flex;
  align-content: center;
  justify-content: center;
}
.quickAddModal .modal {
  min-width: 35%;
  overflow-y: auto;
  max-height: 70%;
}
.checkboxRowContainer {
  margin: 30px 0px;
  display: grid;
  grid-template-rows: auto;
  align-content: center;
  gap: 5px;
}
.checkboxRow {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.checkboxRow .checkbox-container {
  flex-shrink: 0;
}
.checkboxRow span {
  font-size: 16px;
  word-break: break-all;
}
.submitButtonContainer {
  display: flex;
  align-content: center;
  justify-content: center;
}
.chooseFolderWhenCreatingNoteContainer {
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.chooseFolderFromSubfolderContainer {
  margin: 20px 0 0 0;
}
.clickable:hover {
  cursor: pointer;
}
.quickAddCommandListItem {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
}
.quickCommandContainer {
  display: flex;
  justify-content: flex-end;
  align-content: center;
  margin-bottom: 1em;
  gap: 4px;
}
.yesNoPromptButtonContainer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 2rem;
}
.yesNoPromptParagraph {
  text-align: center;
}
.qaFileSuggestionItem {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.qaFileSuggestionItem .suggestion-main-text {
  font-weight: bold;
}
.qaFileSuggestionItem .suggestion-sub-text {
  font-style: italic;
}
.choiceListItem {
  display: flex;
  font-size: 16px;
  align-items: center;
  margin: 12px 0 0 0;
  transition: 1000ms ease-in-out;
}
.choiceListItemName {
  flex: 1 0 0;
}
.choiceListItemName p {
  margin: 0;
  display: inline;
}
.quickadd-choice-suggestion p {
  margin: 0;
}
.macroDropdownContainer {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-bottom: 10px;
  gap: 10px;
}
.macro-choice-buttonsContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media only screen and (max-width: 600px) {
  .macroDropdownContainer {
    flex-direction: column;
    align-items: center;
  }
  .macroDropdownContainer .macro-choice-buttonsContainer {
    gap: 20px;
  }
}
.quickadd-update-modal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.quickadd-update-modal {
  min-width: 35%;
  max-height: 70%;
}
.quickadd-update-modal img {
  width: 100%;
  height: auto;
  margin: 5px;
}
.quickadd-bmac-container {
  display: flex;
  justify-content: center;
  align-items: center;
}