html,
body {
  height: 100%;
}

main {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 0.5rem;
  max-height: calc(100vh - 4.5rem);
  overflow: hidden;
}

main > aside,
main > section {
  overflow: hidden auto;
  margin-bottom: 0;
  max-height: inherit;
}

/* #region command box */
main > aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.5rem;
}

main > aside > nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

main > aside > .creater-command-content > header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

main > aside > nav > button,
main > aside > .creater-command-content > header > button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main > aside > nav > button.active,
main > aside > .creater-command-content > header > button.active {
  background: var(--blue);
  color: var(--theme-background);
}

main > aside > nav > button > .icon {
  font-size: 1.5rem;
}

main > aside > nav > button > .icon + span {
  margin-top: 0.5rem;
}

main > aside > .creater-command-content {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--theme-background-tint);
}

main > aside > .creater-command-content > header {
  padding: 0;
}

main > aside > .creater-command-content .creater-command-content-form {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

main > aside > footer {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

main > aside .components-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  border-radius: 0.5rem;
  overflow: hidden;

  margin-bottom: 1rem;
}

main > aside .components-container > header {
  background: var(--theme-background);
}

main > aside .components-container.active {
  overflow: visible;
  background: var(--theme-background-tint);
}

main > aside .components-container.active > header {
  display: flex;
  cursor: pointer;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

main > aside .components-container > .components-content {
  height: 0;
  transition: all 150ms;
  padding: 0;
}

main > aside .components-container.active > .components-content {
  height: auto;
  padding: 1rem 0.5rem;
}

main
  > aside
  .components-container.active
  > .components-content
  > .form-item
  + .form-item {
  margin-top: 0.25rem;
}

.components-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.options-wrapper > .options-content > .option > .bubble-options-wrapper {
  --bubble-size: 1.1rem;
  top: calc(var(--bubble-size) / -2);
  right: 0;
  position: absolute;

  display: grid;
  grid-auto-columns: var(--bubble-size);
  grid-auto-flow: column;
  gap: 0.5rem;
}

.options-wrapper > .options-content > .option > .bubble-options-wrapper > span {
  width: var(--bubble-size);
  height: var(--bubble-size);

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 0.5rem;

  border-radius: 50%;

  cursor: pointer;

  background: var(--blue);
  color: var(--theme-background);
}

.options-wrapper
  > .options-content
  > .option
  > .bubble-options-wrapper
  > span:hover {
  transform: scale(1.2);
}

.options-wrapper
  > .options-content
  > .option
  > .bubble-options-wrapper
  > span.red {
  background: var(--red);
}

.options-wrapper
  > .options-content
  > .option
  > .bubble-options-wrapper
  > span.green {
  background: var(--green);
}

.options-wrapper
  > .options-content
  > .option
  > .bubble-options-wrapper
  > span.yellow {
  background: var(--yellow);
}

.options-wrapper > footer {
  margin-top: 1rem;
  padding: 0;
}

.options-wrapper > footer > button {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 0;
}

.pesquisa-list-content {
  display: grid;
  padding: 0 0.5rem !important;
}

.pesquisa-list-content > .pesquisa-item {
  display: grid;
  grid-template-columns: 1fr 2rem;
  grid-auto-rows: 2rem;
  align-items: center;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--theme-background-shade);
  padding: 0.25rem 0;
}

.pesquisa-list-content > .pesquisa-item > .descricao-item {
  display: flex;
  flex-direction: column;
  width: 17rem;
}

.pesquisa-list-content > .pesquisa-item > .descricao-item > span {
  font-weight: 100;
  font-size: 0.7rem;
}

.pesquisa-list-content > .pesquisa-item > .descricao-item > .id {
  font-size: 0.65rem;
}

.pesquisa-list-content > .pesquisa-item > .pesquisa-button-drop-down {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pesquisa-list-content > .pesquisa-item > span {
  font-size: 0.7rem;
  place-self: center start;
  color: var(--theme-color);
}

.pesquisa-list-content > .pesquisa-item > button {
  border: 0;
  border-radius: 50%;

  width: 1.5rem;
  height: 1.5rem;
  padding: 0;

  place-self: center;
}

.pesquisa-list-content > .pesquisa-item:hover {
  border-bottom-color: var(--indigo);
}

.pesquisa-list-content > .pesquisa-item:hover > span {
  color: var(--indigo);
}

/* #endregion */

/* #region flags */
.flags-container {
  display: grid;
  grid-auto-columns: 1rem;
  grid-auto-flow: column;
  grid-template-rows: 1rem;
  gap: 0.5rem;
}

.flags-container > span {
  --background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0.25rem;

  font-size: 0.5rem;

  background: var(--background);
  color: var(--theme-background);
}

.flags-container > span.indigo {
  --background: var(--indigo);
}

.flags-container > span.purple {
  --background: var(--purple);
}

.flags-container > span.pink {
  --background: var(--pink);
}

.flags-container > span.red {
  --background: var(--red);
}

.flags-container > span.orange {
  --background: var(--orange);
}

.flags-container > span.teal {
  --background: var(--teal);
}

.flags-container > span.cyan {
  --background: var(--cyan);
}

.flags-container > span.yellow {
  --background: var(--yellow);
}

/* #endregion */

/* #region maintance devices */
.floating-button {
  right: 0.5rem;
  position: absolute;
  width: 2rem;
  height: 2rem;
  z-index: 2;
  border-radius: 50%;
  transition: all 200ms;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.whatsapp-support {
  bottom: 3rem;
  background: var(--green);
  color: var(--theme-background);
}

.maintance-device {
  bottom: 0.5rem;
  background: var(--blue);
}

.maintance-device > a {
  color: var(--theme-background);
}
/* #endregion */

.menu-new-or-library {
  display: grid;
  grid-template-columns: 15rem 15rem;
  grid-template-rows: 15rem;
  gap: 1rem;
  place-content: center space-around;
}

.menu-new-or-library > .option {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--theme-color-shade);
  border-radius: 1rem;
  box-shadow: var(--shadow-base);
  color: var(--theme-color);
  cursor: pointer;
  transition: all 200ms;
}

.menu-new-or-library > .option:hover {
  background: var(--indigo);
  color: var(--theme-background);
}

.menu-new-or-library > .option > span {
  font-size: 5rem;
}

.form-odd-row {
  overflow: visible !important;
}

.aviso-flag-possui-dados {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.aviso-flag-possui-dados > strong {
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aviso-flag-possui-dados > .footer {
  font-size: 0.7rem;
  padding: 0.25rem;
}